更新优化分享功能

src/components/col-share/index.tsx

@@ -65,40 +65,48 @@ export default defineComponent({
         return
       }
       this.saveLoading = true
-      const container: any = document.getElementById(
-        `share-preview-container${this.swiperIndex}`
-      )
-      html2canvas(container, {
-        allowTaint: true,
-        useCORS: true,
-        backgroundColor: null
-      })
-        .then(async canvas => {
-          const url = canvas.toDataURL('image/png')
-          this.image = url
-          Toast.loading({
-            message: '图片生成中...',
-            forbidClick: true
+      // 判断是否已经生成图片
+      if (this.image) {
+        this.saveImg()
+      } else {
+        const container: any = document.getElementById(
+          `share-preview-container${this.swiperIndex}`
+        )
+        html2canvas(container, {
+          allowTaint: true,
+          useCORS: true,
+          backgroundColor: null
+        })
+          .then(async canvas => {
+            const url = canvas.toDataURL('image/png')
+            this.image = url
+            this.saveImg()
           })
-          setTimeout(() => {
+          .catch(() => {
+            Toast.clear()
             this.saveLoading = false
-          }, 100)
-          const res = await promisefiyPostMessage({
-            api: 'savePicture',
-            content: {
-              base64: this.image
-            }
           })
-          if (res?.content?.status === 'success') {
-            Toast.success('保存成功')
-          } else {
-            Toast.fail('保存失败')
-          }
-        })
-        .catch(() => {
-          Toast.clear()
-          this.saveLoading = false
-        })
+      }
+    },
+    async saveImg() {
+      Toast.loading({
+        message: '图片生成中...',
+        forbidClick: true
+      })
+      setTimeout(() => {
+        this.saveLoading = false
+      }, 100)
+      const res = await promisefiyPostMessage({
+        api: 'savePicture',
+        content: {
+          base64: this.image
+        }
+      })
+      if (res?.content?.status === 'success') {
+        Toast.success('保存成功')
+      } else {
+        Toast.fail('保存失败')
+      }
     },
     async shareShow() {
       // 判断是否在分享中...
@@ -106,49 +114,56 @@ export default defineComponent({
         return
       }
       this.shareLoading = true
-      const container: any = document.getElementById(
-        `share-preview-container${this.swiperIndex}`
-      )
-      html2canvas(container, {
-        allowTaint: true,
-        useCORS: true,
-        backgroundColor: null
-      })
-        .then(async canvas => {
-          const url = canvas.toDataURL('image/png')
-          this.image = url
+      if (this.image) {
+        this.openShare()
+      } else {
+        const container: any = document.getElementById(
+          `share-preview-container${this.swiperIndex}`
+        )
+        html2canvas(container, {
+          allowTaint: true,
+          useCORS: true,
+          backgroundColor: null
+        })
+          .then(async canvas => {
+            const url = canvas.toDataURL('image/png')
+            this.image = url
 
-          const image = this.image
-          setTimeout(() => {
+            this.openShare()
+          })
+          .catch(() => {
+            Toast.clear()
             this.shareLoading = false
-          }, 100)
-          if (image) {
-            postMessage(
-              {
-                api: 'shareAchievements',
-                content: {
-                  title: '',
-                  desc: '',
-                  image,
-                  video: '',
-                  type: 'image'
-                }
-              },
-              (res: any) => {
-                if (res && res.content) {
-                  Toast(
-                    res.content.message ||
-                      (res.content.status ? '分享成功' : '分享失败')
-                  )
-                }
-              }
-            )
+          })
+      }
+    },
+    openShare() {
+      const image = this.image
+      setTimeout(() => {
+        this.shareLoading = false
+      }, 100)
+      if (image) {
+        postMessage(
+          {
+            api: 'shareAchievements',
+            content: {
+              title: '',
+              desc: '',
+              image,
+              video: '',
+              type: 'image'
+            }
+          },
+          (res: any) => {
+            if (res && res.content) {
+              Toast(
+                res.content.message ||
+                  (res.content.status ? '分享成功' : '分享失败')
+              )
+            }
           }
-        })
-        .catch(() => {
-          Toast.clear()
-          this.shareLoading = false
-        })
+        )
+      }
     }
   },
   render() {
@@ -163,6 +178,8 @@ export default defineComponent({
                 lazyRender={true}
                 onChange={(index: number) => {
                   this.swiperIndex = index
+                  // 当前显示分享的图片切换时，则需要重置图片
+                  this.image = null
                 }}
                 v-slots={{
                   indicator: (active: any) => (