From ebad5952a18e510544994c1aca901b40bea87ec4 Mon Sep 17 00:00:00 2001
From: woody <woody@163>
Date: Mon, 14 Jul 2025 17:48:22 +0800
Subject: [PATCH] =?UTF-8?q?feat(specialSharePage):=20=E5=88=86=E4=BA=AB?=
 =?UTF-8?q?=E9=A1=B5=E8=87=AA=E5=AE=9A=E4=B9=89=E8=83=8C=E6=99=AF=E5=9B=BE?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 App.vue                               |   4 +-
 components/share/SpecialSharePage.vue | 277 +++++++++++++++-----------
 package-lock.json                     |   7 +
 package.json                          |   1 +
 pages/mine/share/index.vue            |  14 +-
 5 files changed, 174 insertions(+), 129 deletions(-)

diff --git a/App.vue b/App.vue
index 12ce878..9742ad5 100644
--- a/App.vue
+++ b/App.vue
@@ -1,7 +1,7 @@
 <script>
-import VConsole from 'vconsole'
+// import VConsole from 'vconsole'
 import { setToken } from '@/config/auth.js'
-const vConsole = new VConsole()
+// const vConsole = new VConsole()
 export default {
   onLaunch: function (options) {
     // 分享注册
diff --git a/components/share/SpecialSharePage.vue b/components/share/SpecialSharePage.vue
index 530ce5e..2cb95ee 100644
--- a/components/share/SpecialSharePage.vue
+++ b/components/share/SpecialSharePage.vue
@@ -1,10 +1,11 @@
 <template>
-  <view class="special-share-page">
+  <view ref="specialSharePage" class="special-share-page">
     <!-- 特殊场景背景图片 -->
     <image
       class="share-bg-image"
       :src="specialBackgroundImage"
       mode="scaleToFill"
+      crossorigin="anonymous"
       @load="onBackgroundImageLoad"
       @error="onBackgroundImageError"
       v-if="specialBackgroundImage"
@@ -37,6 +38,7 @@
             <view class="loader"></view>
           </view>
         </view>
+
         <text
           class="member-code-text special-member-code-style"
           style="
@@ -53,6 +55,7 @@
 </template>
 
 <script>
+import { snapdom } from '@zumer/snapdom'
 import html2canvas from 'html2canvas'
 import { getSharedImg } from '@/config/login'
 export default {
@@ -90,7 +93,7 @@ export default {
       isLoadingBackground: false, // 是否正在加载背景图
     }
   },
-  mounted() {
+  created() {
     this.getBackgroundImage()
   },
   methods: {
@@ -124,57 +127,13 @@ export default {
         this.$emit('background-image-error', e)
       }
     },
-
-    // 手动重试获取背景图（用于调试或重试）
-    retryGetBackgroundImage() {
-      console.log('手动重试获取背景图')
-      this.specialBackgroundImage = ''
-      this.backgroundImageLoaded = false
-      this.imageLoadRetryCount = 0
-      this.isLoadingBackground = false
-      this.getBackgroundImage()
-    },
-
-    // 获取当前状态信息（用于调试）
-    getStatusInfo() {
-      return {
-        specialBackgroundImage: this.specialBackgroundImage
-          ? this.specialBackgroundImage.length + ' bytes'
-          : '',
-        qrCodeImage: this.qrCodeImage
-          ? this.qrCodeImage.substring(0, 50) + '...'
-          : '',
-        backgroundImageLoaded: this.backgroundImageLoaded,
-        isLoadingBackground: this.isLoadingBackground,
-        imageLoadRetryCount: this.imageLoadRetryCount,
-        isReady:
-          this.specialBackgroundImage &&
-          this.qrCodeImage &&
-          !this.isLoadingBackground,
-      }
-    },
-
     // 处理分享图片生成完成
     handleShareGenerated(dataUrl) {
-      console.log(
-        '特殊场景分享图片生成成功，图片大小:',
-        Math.round(dataUrl.length / 1024) + 'KB'
-      )
-
-      if (this.isWechat) {
-        // 微信环境：提示长按保存
-        uni.showToast({
-          title: '图片生成成功，请长按保存',
-          icon: 'success',
-          duration: 2000,
-        })
-      } else {
-        uni.showToast({
-          title: '图片生成成功，请长按保存',
-          icon: 'success',
-          duration: 2000,
-        })
-      }
+      uni.showToast({
+        title: '图片生成成功，请长按保存',
+        icon: 'success',
+        duration: 2000,
+      })
     },
 
     // 获取特殊场景背景图片
@@ -201,23 +160,11 @@ export default {
         } else {
           this.backgroundImageLoaded = false
           this.imageLoadRetryCount++
-          if (this.imageLoadRetryCount < this.maxRetryCount) {
-            console.log(
-              `背景图片加载失败，重试中 (${this.imageLoadRetryCount}/${this.maxRetryCount})`
-            )
-            this.$emit('background-image-retry', this.imageLoadRetryCount)
-          } else {
-            this.$emit('background-image-error', '背景图片加载失败')
-          }
         }
       } catch (error) {
-        console.error('获取特殊场景背景图片失败:', error)
         this.backgroundImageLoaded = false
         this.imageLoadRetryCount++
         if (this.imageLoadRetryCount < this.maxRetryCount) {
-          console.log(
-            `背景图片加载失败，重试中 (${this.imageLoadRetryCount}/${this.maxRetryCount})`
-          )
           this.$emit('background-image-retry', this.imageLoadRetryCount)
         } else {
           this.$emit('background-image-error', error)
@@ -229,18 +176,104 @@ export default {
     },
 
     async generateShareImage() {
-      await this.getBackgroundImage()
+      // await this.getBackgroundImage()
       try {
-        await this.$nextTick()
-        await this.capturePageWithHtml2Canvas()
+        this.$nextTick(() => {
+          const info = uni.getSystemInfoSync()
+          console.log(info.platform, '.....info')
+          if (info.platform === 'ios') {
+            console.log('iOS detected, using html2canvas for capturing.')
+            this.capturePageWithHtml2Canvas()
+          } else {
+            console.log('Non-iOS detected, using snapdom for capturing.')
+            this.capturePageWithSnapDom()
+          }
+        })
       } catch (error) {
         uni.hideLoading()
         uni.showToast({ title: '图片生成失败，请稍后重试', icon: 'none' })
       }
     },
 
-    // 使用html2canvas截取整个页面
+    // 新增：使用html2canvas截取整个页面 (For iOS)
     async capturePageWithHtml2Canvas() {
+      return new Promise(async (resolve, reject) => {
+        // 确保所有图片都已加载完成
+        const waitForImages = async () => {
+          // 检查是否正在加载背景图片
+          if (this.isLoadingBackground) {
+            console.log('等待背景图片接口调用完成...')
+            setTimeout(waitForImages, 100)
+            return
+          }
+
+          // 检查背景图片是否加载完成
+          if (!this.backgroundImageLoaded) {
+            console.log('等待背景图片加载完成...')
+            setTimeout(waitForImages, 100)
+            return
+          }
+
+          // 检查二维码是否存在
+          if (!this.qrCodeImage) {
+            console.log('等待二维码生成...')
+            setTimeout(waitForImages, 100)
+            return
+          }
+
+          // 检查特殊背景图片参数是否存在
+          if (!this.specialBackgroundImage) {
+            console.log('等待特殊背景图片参数...')
+            setTimeout(waitForImages, 100)
+            return
+          }
+
+          console.log('所有图片准备就绪，开始使用html2canvas截图...')
+
+          // 等待确保渲染完成
+          setTimeout(() => {
+            const element = this.$el
+            if (!element) {
+              uni.hideLoading()
+              reject(new Error('找不到组件容器'))
+              return
+            }
+
+            html2canvas(element, {
+              useCORS: true,
+              allowTaint: true,
+              backgroundColor: null,
+              scale: 2, // 提高清晰度
+              dpi: 300,
+              width: element.offsetWidth,
+              height: element.offsetHeight,
+            })
+              .then(canvas => {
+                const dataUrl = canvas.toDataURL('image/jpeg', 1.0)
+                uni.hideLoading()
+                this.handleShareGenerated(dataUrl)
+                this.$emit('share-generated', dataUrl)
+                resolve()
+              })
+              .catch(err => {
+                uni.hideLoading()
+                console.error('html2canvas截取失败:', err)
+                uni.showToast({
+                  title: '图片生成失败，请稍后重试',
+                  icon: 'none',
+                })
+                reject(err)
+              })
+          }, 1000)
+        }
+
+        // 开始等待图片加载
+        waitForImages()
+      })
+    },
+
+    // 使用snapDOM截取整个页面
+    async capturePageWithSnapDom() {
       return new Promise(async (resolve, reject) => {
         // 确保所有图片都已加载完成
         const waitForImages = async () => {
@@ -275,57 +308,74 @@ export default {
           console.log('所有图片准备就绪，开始截图...')
 
           // 等待确保渲染完成
-          setTimeout(() => {
+          setTimeout(async () => {
             const element = this.$el
             if (!element) {
               reject(new Error('找不到组件容器'))
               return
             }
 
-            console.log(
-              '开始html2canvas截取特殊场景，容器尺寸:',
-              element.offsetWidth,
-              'x',
-              element.offsetHeight
-            )
+            try {
+              // 获取元素的所有可能尺寸
+              const rect = element.getBoundingClientRect()
+              const offsetWidth = element.offsetWidth
+              const offsetHeight = element.offsetHeight
+              const scrollWidth = element.scrollWidth
+              const scrollHeight = element.scrollHeight
+              const clientWidth = element.clientWidth
+              const clientHeight = element.clientHeight
 
-            html2canvas(element, {
-              useCORS: true,
-              allowTaint: false,
-              backgroundColor: null,
-              scale: window.devicePixelRatio,
-              logging: true,
-              width: element.offsetWidth,
-              height: element.offsetHeight,
-              windowWidth: element.offsetWidth,
-              windowHeight: element.offsetHeight,
-              scrollX: 0,
-              scrollY: 0,
-              x: 0,
-              y: 0,
-              imageTimeout: 10000,
-              proxy: undefined,
-              foreignObjectRendering: false,
-            })
-              .then(canvas => {
-                uni.hideLoading()
-                const dataUrl = canvas.toDataURL('image/jpeg', 1)
+              // 计算实际需要的尺寸（取最大值确保完整）
+              const elementWidth = Math.max(
+                offsetWidth,
+                scrollWidth,
+                clientWidth,
+                rect.width
+              )
+              const elementHeight = Math.max(
+                offsetHeight,
+                scrollHeight,
+                clientHeight,
+                rect.height
+              )
 
-                // 处理生成的分享图片
-                this.handleShareGenerated(dataUrl)
-                // 发送事件给父组件
-                this.$emit('share-generated', dataUrl)
-                resolve()
-              })
-              .catch(err => {
-                uni.hideLoading()
-                console.error('html2canvas截取失败:', err)
-                uni.showToast({
-                  title: '图片生成失败，请稍后重试',
-                  icon: 'none',
-                })
-                reject(err)
+              setTimeout(async () => {
+                try {
+                  const result = await snapdom(element, {
+                    width: elementWidth,
+                    height: elementHeight,
+                    quality: 1,
+                    compress: false,
+
+                    // useProxy: true,
+                  })
+                  const canvas = await result.toCanvas()
+
+                  const dataUrl = canvas.toDataURL('image/jpeg')
+
+                  uni.hideLoading()
+                  this.handleShareGenerated(dataUrl)
+                  this.$emit('share-generated', dataUrl)
+                  resolve()
+                } catch (err) {
+                  uni.hideLoading()
+                  console.error('snapDOM截取失败:', err)
+                  uni.showToast({
+                    title: '图片生成失败，请稍后重试',
+                    icon: 'none',
+                  })
+                  reject(err)
+                }
+              }, 500)
+            } catch (err) {
+              uni.hideLoading()
+              console.error('snapDOM初始化失败:', err)
+              uni.showToast({
+                title: '图片生成失败，请稍后重试',
+                icon: 'none',
               })
+              reject(err)
+            }
           }, 1000)
         }
 
@@ -407,10 +457,7 @@ export default {
 .qr-code-outer {
   width: 400rpx;
   height: 400rpx;
-  background: rgba(255, 255, 255, 0.98);
   border-radius: 20rpx;
-  box-shadow: 0px 8rpx 20rpx rgba(50, 50, 90, 0.06);
-  border: 1px solid #f0f0f0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -418,12 +465,6 @@ export default {
   box-sizing: border-box;
 }
 
-/* 特殊场景下的二维码样式 */
-.special-qr-style {
-  /* 用户可以在这里自定义特殊场景下的二维码样式 */
-  /* 例如：不同的位置、大小、边框等 */
-}
-
 .qr-code,
 .qr-code-placeholder {
   width: 100%;
diff --git a/package-lock.json b/package-lock.json
index 680a00a..93c67f9 100644
--- a/package-lock.json
+++ b/package-lock.json
@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
+        "@zumer/snapdom": "^1.9.5",
         "axios": "^1.5.0",
         "dayjs": "^1.11.13",
         "echarts": "^4.9.0",
@@ -768,6 +769,12 @@
       "dev": true,
       "peer": true
     },
+    "node_modules/@zumer/snapdom": {
+      "version": "1.9.5",
+      "resolved": "https://registry.npmjs.org/@zumer/snapdom/-/snapdom-1.9.5.tgz",
+      "integrity": "sha512-p+9C86evbQceSlDBhRA2+BJSotBPO7YFh6b7LeUDPowt/iAx5kzZomO3Fme7mYqfpn990TDKFHn0XascDvUODw==",
+      "license": "MIT"
+    },
     "node_modules/acorn": {
       "version": "6.4.2",
       "resolved": "https://mirrors.cloud.tencent.com/npm/acorn/-/acorn-6.4.2.tgz",
diff --git a/package.json b/package.json
index 0ec7876..19af9e1 100644
--- a/package.json
+++ b/package.json
@@ -4,6 +4,7 @@
   "description": "h5",
   "main": "main.js",
   "dependencies": {
+    "@zumer/snapdom": "^1.9.5",
     "axios": "^1.5.0",
     "dayjs": "^1.11.13",
     "echarts": "^4.9.0",
diff --git a/pages/mine/share/index.vue b/pages/mine/share/index.vue
index 8ac931a..d1a03cd 100644
--- a/pages/mine/share/index.vue
+++ b/pages/mine/share/index.vue
@@ -17,7 +17,7 @@
 
       <!-- 特殊场景 -->
       <SpecialSharePage
-        v-if="isSpecialScene"
+        v-if="isSpecialScene && sourceVisible"
         :qrCodeImage="qrCodeImage"
         :specialBackgroundImage="userInfo.sharePosterImage"
         :userInfo="userInfo"
@@ -70,6 +70,7 @@ export default {
       isWechat: false,
       generatedImageUrl: '',
       userInfo: uni.getStorageSync('User'),
+      sourceVisible: true,
     }
   },
   computed: {
@@ -146,7 +147,9 @@ export default {
 
     // 处理分享图片生成完成
     handleShareGenerated(dataUrl) {
-      console.log('handleShareGenerated', dataUrl)
+      this.$nextTick(() => {
+        this.sourceVisible = false
+      })
       uni.hideLoading()
 
       if (this.isWechat) {
@@ -157,13 +160,6 @@ export default {
         if (this.isSpecialScene) {
           // 特殊场景：设置图片供长按保存（没有下载按钮）
           this.generatedImageUrl = dataUrl
-        } else {
-          // 默认场景：直接下载图片
-          this.downloadImage(dataUrl)
-          uni.showToast({
-            title: '图片已开始下载',
-            icon: 'success',
-          })
         }
       }
     },