feat:钱币设置图片处理

src/api/business/goodsNew.js

@@ -15,3 +15,11 @@ export function editGoods(params) {
     data: params
   })
 }
+
+export function saveImageBase64(params) {
+  return request({
+    url: '/storage/uploadBase64',
+    method: 'post',
+    data: params
+  })
+}

src/views/goods/components/selectImageDialog.vue

@@ -54,7 +54,8 @@ export default {
       currentPosition: -1,
       checked: false,
       checkImg: 'https://cdn.wanwudezhi.com/static/web-static/image/830b6dba5de0ad1cf4840df24d13b176_128x128.png',
-      checkedImg: 'https://cdn.wanwudezhi.com/static/web-static/image/efc07a5868f35cb0fb66c1b232a3bc92_128x128.png'
+      checkedImg: 'https://cdn.wanwudezhi.com/static/web-static/image/efc07a5868f35cb0fb66c1b232a3bc92_128x128.png',
+      currentImageUrl: ''
     }
   },
   methods: {
@@ -74,20 +75,18 @@ export default {
         return
       }
       if (this.selectType === 1) { // 去水印
-        const result = this.copyContent(this.imageList[this.currentPosition])
-        if (result) {
-          this.$message.info('复制链接成功，粘贴去链接去水印吧')
-        } else {
-          this.$message.error('复制链接失败，请重试')
-        }
+        this.copyContent(this.imageList[this.currentPosition])
+        this.$message.info('复制链接成功，粘贴链接去水印吧')
         this.showLamaImageDialog = true
+        this.currentImageUrl = this.imageList[this.currentPosition]
       } else {
         this.$emit('selectSuccess', this.imageList[this.currentPosition])
         this.$emit('closeDialog')
+        this.currentImageUrl = ''
       }
     },
     handleGetImageBase64(imgUrlBase64) {
-      this.$emit('imageBase64Str', imgUrlBase64)
+      this.$emit('imageBase64Str', this.currentImageUrl, imgUrlBase64)
       this.showLamaImageDialog = false
       this.$emit('closeDialog')
     },

src/views/goods/infoSet.vue

 <template>
-  <div class="app-container">
+  <div ref="scrollRef" class="app-container">
     <div ref="top" :class="{fixed: isFixed}" class="op-container" style="margin-bottom: 20px">
       <el-button round @click="handleCancel">取消</el-button>
-      <el-button type="primary" style="margin-right: 20px" round @click="handlePublish">发布</el-button>
+      <el-button type="primary" round @click="handlePublish">发布</el-button>
+      <el-button type="primary" style="margin-right: 20px" round @click="handleEdit">编辑</el-button>
       <el-button-group>
         <el-button :disabled="previousDisabled" type="primary" icon="el-icon-arrow-left" @click="handlePrevious">上一个</el-button>
         <el-button type="primary" @click="handleNext">下一个<i class="el-icon-arrow-right el-icon--right"/></el-button>
@@ -24,7 +25,7 @@
         <div class="detail_image">
           <div class="detail_title">{{ `钱币图片：` }}</div>
           <div class="list">
-            <div v-for="(item, index) in goodsParams.images" :key="item + index" class="select_item" @click="handleShowLargeDialog(item)">
+            <div v-for="(item, index) in imageList" :key="item + index" class="select_item" @click="handleShowLargeDialog(item)">
               <img :src="item" class="gallery">
             </div>
           </div>
@@ -201,7 +202,7 @@
       v-if="dialogVisible"
       :select-image-dialog-visible="dialogVisible"
       :select-type="selectDialogType"
-      :image-list="goodsParams.images"
+      :image-list="imageList"
       @closeDialog="dialogVisible = false"
       @selectSuccess="handleSelectSuccess"
       @imageBase64Str="handlerGetBase64" />
@@ -219,7 +220,7 @@ import { VuePictureCut, VuePictureCutMask, VuePictureCutMenu } from 'vue-picture
 import { getToken } from '@/utils/auth'
 import SelectImageDialog from './components/selectImageDialog'
 import { listCategories } from '@/api/business/goods'
-import { detailGoods, editGoods } from '@/api/business/goodsNew'
+import { detailGoods, editGoods, saveImageBase64 } from '@/api/business/goodsNew'
 import CheckLargeImageDialog from './components/CheckLargeImageDialog'
 
 export default {
@@ -266,7 +267,10 @@ export default {
       currentIndex: 0,
       showLargeDialog: false,
       imageUrl: '',
-      isFixed: false
+      isFixed: false,
+      imageList: [],
+      currentGoodId: '',
+      changeImageUrl: '' // 用于处理是否合成或者替换原图
     }
   },
   computed: {
@@ -350,6 +354,7 @@ export default {
         idExcludeList: this.goodIdList || []
       }
       detailGoods(param).then(response => {
+        this.currentGoodId = response.data.data.id
         this.handleClearInfo()
         if (type === 1) { // 上一个
           this.currentIndex -= 1
@@ -375,12 +380,13 @@ export default {
         if (response.data.data.images && response.data.data.images.length > 0) {
           this.goodsParams.images = response.data.data.images.split(';') || []
         }
+        this.imageList = this.goodsParams.images
         if (this.goodsParams.topImage && this.goodsParams.topImage.length > 0) {
           const list = [this.goodsParams.topImage]
-          if (this.goodsParams.images && this.goodsParams.images.length > 0) {
-            this.goodsParams.images = list.concat(this.goodsParams.images)
+          if (this.imageList && this.imageList.length > 0) {
+            this.imageList = list.concat(this.imageList)
           } else {
-            this.goodsParams.images = list
+            this.imageList = list
           }
         }
       })
@@ -413,6 +419,10 @@ export default {
         this.handleNext()
       })
     },
+
+    handleEdit() {
+      this.$router.push({ path: '/goods/edit', query: { id: this.currentGoodId }})
+    },
     // 选择形状
     handleChangeShape(type) {
       if (type === 1) {
@@ -427,7 +437,7 @@ export default {
         this.$message.error('请先删除已裁剪图片')
         return
       }
-      if (!this.goodsParams.images || this.goodsParams.images.length === 0) {
+      if (!this.imageList || this.imageList.length === 0) {
         this.$message.error('无线上图片选择')
         return
       }
@@ -436,6 +446,17 @@ export default {
     },
     // 裁剪图片结果
     cutChange(res) {
+      if (this.changeImageUrl && this.changeImageUrl.length > 0) {
+        this.$confirm(
+          '请确定该图片是用于合成还是替换原图',
+          '提示', {
+            confirmButtonText: '替换原图',
+            cancelButtonText: '用于合成',
+            type: 'warning'
+          }).then(() => {
+          this.handleSaveImageBase64(this.changeImageUrl, res.base64)
+        }).catch(() => {
+          this.changeImageUrl = null
           this.src = ''
           if (!this.blob) {
             this.blob = res.blob
@@ -444,10 +465,51 @@ export default {
             this.blobSecond = res.blob
             this.base64Second = res.base64
           }
-
+        })
+      } else {
+        this.src = ''
+        if (!this.blob) {
+          this.blob = res.blob
+          this.base64 = res.base64
+        } else {
+          this.blobSecond = res.blob
+          this.base64Second = res.base64
+        }
+      }
       // console.log('=====blob', this.blob)
       console.log('=====base64', this.base64)
     },
+
+    handleSaveImageBase64(url, base64Url) {
+      const params = {
+        id: this.currentGoodId,
+        imgBaseStr: base64Url
+      }
+      saveImageBase64(params).then((response) => {
+        this.$message.success('替换成功')
+        this.changeImageUrl = null
+        const resultImage = response.data.data
+        this.imageList = this.imageList.map((item) => {
+          if (item === url) {
+            return resultImage
+          } else {
+            return item
+          }
+        })
+
+        if (this.goodsParams.topImage === url) {
+          this.goodsParams.topImage = resultImage
+        } else if (this.goodsParams.images && this.goodsParams.images.indexOf(url) !== -1) {
+          this.goodsParams.images = this.goodsParams.images.map((item) => {
+            if (item === url) {
+              return resultImage
+            } else {
+              return item
+            }
+          })
+        }
+      })
+    },
     // 裁剪工具取消
     cutCancel() {
       this.src = ''
@@ -481,16 +543,18 @@ export default {
 
     // 选择线上图片后的图片链接
     async handleSelectSuccess(url) {
+      this.changeImageUrl = url
       var base64Str = await this.getBase64Image(url)
       this.src = base64Str
       console.log('=====&&&&==', base64Str)
     },
     // 去除水印后拿到的base64
-    handlerGetBase64(imgUrlBase64) {
+    handlerGetBase64(currentImageUrl, imgUrlBase64) {
+      this.changeImageUrl = currentImageUrl
       if (imgUrlBase64) {
         this.src = imgUrlBase64
       } else {
-        this.$emit('获取失败，请重试...')
+        this.$message.error('获取失败，请重试...')
       }
     },
     /** url 转换成img */