feat：钱币图片编辑流程优化

src/views/goods/infoSet.vue

@@ -37,7 +37,7 @@
           <div class="list">
             <div v-for="(item, index) in imageList" :key="item + index" class="select_item">
               <img :src="item" class="gallery" @click="handleShowLargeDialog(item)">
-              <div class="edit" @click="handlerChangeImage(item)">编辑</div>
+              <div class="edit" @click="handleRemoveLama(item)">编辑</div>
               <div v-if="imageList.length > 0" class="set" @click="handlerSetMainImage(item, index)">
                 {{ imageMainPosition === index ? '主图' : '设为主图' }}
               </div>
@@ -49,12 +49,6 @@
     </el-card>
     <div class="info">
       <div class="info_left">
-        <!--        <el-card>
-          <div>
-            <div>第一步：请选择图片，去水印，并保存图片（若无需去水印，可直接进行第二步抠图）</div>
-            <el-button type="primary" style="margin-top: 20px" @click="handleSelectImage(1)">选择图片，去水印</el-button>
-          </div>
-        </el-card>-->
         <el-card class="box-card">
           <div class="image_result">
             <div class="image_result--left">
@@ -161,13 +155,6 @@
         </div>
       </el-card>
     </div>
-    <!--    <SelectImageDialog
-      v-if="dialogVisible"
-      :select-image-dialog-visible="dialogVisible"
-      :select-type="selectDialogType"
-      :image-list="imageList"
-      @closeDialog="dialogVisible = false"
-      @imageBase64Str="handlerGetBase64" />-->
     <CheckLargeImageDialog
       :show-large-dialog="showLargeDialog"
       :image-url="imageUrl"
@@ -181,13 +168,11 @@
       @cutImageDialogClose="cutImageDialogVisible = false"
       @cutSuccess="handleCutSuccess"
       @uploadImage="handleUploadImage" />
-    <CutEditImageDialog
-      v-if="cutEditImageDialogVisible"
-      :edit-image-url="editImageUrl"
-      :show-cut-dialog="cutImageDialogVisible"
-      @cutEditImageDialogClose="cutEditImageDialogVisible = false"
-      @cutEditSuccess="handleSaveImageBase64"
-      @uploadEditImage="handleUploadImage" />
+    <LamaImageDialog
+      v-if="showLamaImageDialog"
+      :show-lama-dialog="showLamaImageDialog"
+      @closeLamaDialog="handleCloseLamaDialog"
+      @imageBase64="handleSaveImageBase64" />
 
   </div>
 </template>
@@ -208,12 +193,12 @@ import {
 } from '@/api/business/goodsNew'
 import CheckLargeImageDialog from './components/CheckLargeImageDialog'
 import CutImageDialog from './components/CutImageDialog'
-import CutEditImageDialog from './components/CutEditImageDialog'
+import LamaImageDialog from './components/lamaImageDialog'
 
 export default {
   name: 'InfoSet',
   components: {
-    CutEditImageDialog,
+    LamaImageDialog,
     CutImageDialog,
     CheckLargeImageDialog,
     SelectImageDialog,
@@ -249,14 +234,14 @@ export default {
       currentGoodId: '',
       cutImageDialogVisible: false, // 钱币正反面图片操作
       imageType: 0, // 1正面 2反面
-      cutEditImageDialogVisible: false, // 钱币图片编辑
       editImageUrl: '', // 用于处理是否合成或者替换原图,
       imageMainPosition: -1, // 用于设置主图位置
       rules: {
         name: [
           { required: true, message: '请输入标题', trigger: 'blur' }
         ]
-      }
+      },
+      showLamaImageDialog: false
     }
   },
   computed: {
@@ -467,8 +452,8 @@ export default {
       this.cutImageDialogVisible = false
     },
 
-    handleSaveImageBase64(url, base64Url) {
-      this.cutEditImageDialogVisible = false
+    handleSaveImageBase64(base64Url) {
+      this.showLamaImageDialog = false
       const params = {
         id: this.currentGoodId,
         imgBaseStr: base64Url
@@ -476,27 +461,28 @@ export default {
       saveImageBase64(params).then((response) => {
         this.$message.success('替换成功')
         this.src = ''
-        this.editImageUrl = null
+
         const resultImage = response.data.data
         this.imageList = this.imageList.map((item) => {
-          if (item === url) {
+          if (item === this.editImageUrl) {
             return resultImage
           } else {
             return item
           }
         })
 
-        if (this.goodsParams.topImage === url) {
+        if (this.goodsParams.topImage === this.editImageUrl) {
           this.goodsParams.topImage = resultImage
-        } else if (this.goodsParams.images && this.goodsParams.images.indexOf(url) !== -1) {
+        } else if (this.goodsParams.images && this.goodsParams.images.indexOf(this.editImageUrl) !== -1) {
           this.goodsParams.images = this.goodsParams.images.map((item) => {
-            if (item === url) {
+            if (item === this.editImageUrl) {
               return resultImage
             } else {
               return item
             }
           })
         }
+        this.editImageUrl = null
       })
     },
     handleUploadImage(param) {
@@ -604,10 +590,6 @@ export default {
       this.imageUrl = imageUrl
       this.showLargeDialog = true
     },
-    handlerChangeImage(imageUrl) {
-      this.editImageUrl = imageUrl
-      this.cutEditImageDialogVisible = true
-    },
     handlerSetMainImage(imageUrl, index) {
       if (index === this.imageMainPosition) {
         this.$message.info('已经是主图了哦～')
@@ -627,6 +609,72 @@ export default {
           message: response.data.errmsg || '请求失败'
         })
       })
+    },
+    /**
+     * 关闭去水印弹窗
+     */
+    handleCloseLamaDialog() {
+      this.showLamaImageDialog = false
+      this.editImageUrl = ''
+    },
+    /**
+     * 去除水印
+     */
+    handleRemoveLama(imageUrl) {
+      this.editImageUrl = imageUrl
+      this.copyContent(this.editImageUrl)
+      this.$message.success('复制链接成功，粘贴链接去水印吧')
+      this.showLamaImageDialog = true
+    },
+    /**
+     * 复制链接
+     */
+    copyContent(content) {
+      // 复制结果
+      let copyResult = true
+      // 设置想要复制的文本内容
+      const text = content || ''
+      // 判断是否支持clipboard方式
+      if (window.navigator.clipboard) {
+        // 利用clipboard将文本写入剪贴板（这是一个异步promise）
+        window.navigator.clipboard.writeText(text).then((res) => {
+          console.log('复制成功')
+          // 返回复制操作的最终结果
+          return copyResult
+        }).catch((err) => {
+          copyResult = false
+          console.log('复制失败', err)
+          // 返回复制操作的最终结果
+          return copyResult
+        })
+      } else {
+        // 不支持clipboard方式 则采用document.execCommand()方式
+        // 创建一个input元素
+        const inputDom = document.createElement('textarea')
+        // 设置为只读 防止移动端手机上弹出软键盘
+        inputDom.setAttribute('readonly', 'readonly')
+        // 给input元素赋值
+        inputDom.value = text
+        // 将创建的input添加到body
+        document.body.appendChild(inputDom)
+        // 选中input元素的内容
+        inputDom.select()
+        // 执行浏览器复制命令
+        // 复制命令会将当前选中的内容复制到剪切板中（这里就是创建的input标签中的内容）
+        // Input要在正常的编辑状态下原生复制方法才会生效
+        const result = document.execCommand('copy')
+        // 判断是否复制成功
+        if (result) {
+          console.log('复制成功')
+        } else {
+          console.log('复制失败')
+          copyResult = false
+        }
+        // 复制操作后再将构造的标签 移除
+        document.body.removeChild(inputDom)
+        // 返回复制操作的最终结果
+        return copyResult
+      }
     }
   }
 }