hotfix(share): 分享背景图临时更换发版

components/DefaultSharePage.vue

@@ -0,0 +1,307 @@
+<template>
+  <view class="default-share-page">
+    <!-- 背景图片，替代CSS background -->
+    <img
+      class="share-bg-image"
+      src="/static/images/share-bg.jpg"
+      mode="scaleToFill"
+      crossorigin="anonymous"
+      @load="onBackgroundImageLoad"
+      @error="onBackgroundImageError"
+    />
+
+    <view class="share-wrapper">
+      <view class="portal-frame" :class="{ 'is-loaded': isLoaded }">
+        <!-- 二维码样式区域 - 用户自定义样式位置 -->
+        <view class="qr-code-outer">
+          <img
+            class="qr-code"
+            :src="qrCodeImage"
+            mode="aspectFit"
+            v-if="qrCodeImage"
+          />
+          <view v-else class="qr-code-placeholder">
+            <view class="loader"></view>
+          </view>
+        </view>
+
+        <!-- 会员编号样式区域 - 用户自定义样式位置 -->
+        <text
+          class="member-code-text"
+          style="font-size: 30rpx; color: #fff; font-weight: bold"
+          >{{ desensitization(userInfo.memberCode) }}</text
+        >
+      </view>
+    </view>
+  </view>
+</template>
+
+<script>
+import html2canvas from 'html2canvas'
+
+export default {
+  name: 'DefaultSharePage',
+  props: {
+    qrCodeImage: {
+      type: String,
+      default: '',
+    },
+    userInfo: {
+      type: Object,
+      default: () => ({}),
+    },
+    isWechat: {
+      type: Boolean,
+      default: false,
+    },
+    isLoaded: {
+      type: Boolean,
+      default: false,
+    },
+  },
+  data() {
+    return {
+      backgroundImageLoaded: false,
+      shareButtonShow: true,
+    }
+  },
+  methods: {
+    desensitization(str) {
+      if (!str) return ''
+      if (str.length <= 8) return str.slice(0, 4) + '****'
+      const len = str.length - 6
+      const placeholder = '*'.repeat(len)
+      return str.slice(0, 4) + placeholder + str.slice(-2)
+    },
+
+    // 背景图片加载成功
+    onBackgroundImageLoad() {
+      this.backgroundImageLoaded = true
+      console.log('默认场景背景图片加载成功')
+    },
+
+    // 背景图片加载失败
+    onBackgroundImageError(e) {
+      console.error('默认场景背景图片加载失败:', e)
+    },
+
+    async sharePage() {
+      if (!this.qrCodeImage) {
+        uni.showToast({
+          title: '二维码尚未生成',
+          icon: 'none',
+        })
+        return
+      }
+
+      uni.showLoading({ title: '加载中...' })
+
+      try {
+        this.shareButtonShow = false
+        await this.$nextTick()
+
+        await this.capturePageWithHtml2Canvas()
+      } catch (error) {
+        uni.hideLoading()
+        uni.showToast({ title: '图片生成失败，请稍后重试', icon: 'none' })
+        console.error('sharePage error:', error)
+      } finally {
+        // 恢复按钮显示
+        this.shareButtonShow = true
+      }
+    },
+
+    // 使用html2canvas截取整个页面
+    async capturePageWithHtml2Canvas() {
+      console.log('开始使用html2canvas截取页面')
+
+      return new Promise((resolve, reject) => {
+        // 确保所有图片都已加载完成
+        const waitForImages = () => {
+          if (!this.backgroundImageLoaded || !this.qrCodeImage) {
+            setTimeout(waitForImages, 100)
+            return
+          }
+
+          // 额外等待确保渲染完成
+          setTimeout(() => {
+            const element = this.$el
+            if (!element) {
+              reject(new Error('找不到组件容器'))
+              return
+            }
+
+            console.log(
+              '开始html2canvas截取，容器尺寸:',
+              element.offsetWidth,
+              'x',
+              element.offsetHeight
+            )
+
+            html2canvas(element, {
+              useCORS: true,
+              allowTaint: true,
+              backgroundColor: null,
+              scale: 2,
+              dpi: 400,
+              logging: true,
+              width: element.offsetWidth,
+              height: element.offsetHeight,
+              windowWidth: element.offsetWidth,
+              windowHeight: element.offsetHeight,
+              scrollX: 0,
+              scrollY: 0,
+              x: 0,
+              y: 0,
+            })
+              .then(canvas => {
+                const dataUrl = canvas.toDataURL('image/jpeg', 1)
+                this.$emit('share-generated', dataUrl)
+                resolve()
+              })
+              .catch(err => {
+                console.error('html2canvas截取失败:', err)
+                reject(err)
+              })
+          }, 1000)
+        }
+
+        // 开始等待图片加载
+        waitForImages()
+      })
+    },
+  },
+}
+</script>
+
+<style lang="scss" scoped>
+.default-share-page {
+  position: relative;
+  width: 100%;
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+}
+
+/* 背景图片样式 */
+.share-bg-image {
+  height: 100%;
+  width: 100%;
+  // height: 100%;
+  z-index: 1;
+  // object-fit: cover;
+}
+
+.share-wrapper {
+  position: absolute;
+  z-index: 2;
+  top: 25%;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+
+.portal-frame {
+  padding: 32rpx;
+  width: 520rpx;
+  border-radius: 40rpx;
+  display: flex;
+  box-sizing: border-box;
+  flex-direction: column;
+  align-items: center;
+  justify-content: center;
+  margin: 0 auto;
+  opacity: 0;
+  text-align: center;
+}
+
+.portal-frame.is-loaded {
+  opacity: 1;
+}
+
+/* 二维码样式区域 - 用户自定义样式位置 */
+.qr-code-outer {
+  width: 280rpx;
+  height: 280rpx;
+  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;
+  padding: 12rpx;
+  box-sizing: border-box;
+}
+
+.qr-code,
+.qr-code-placeholder {
+  width: 100%;
+  height: 100%;
+}
+
+.qr-code {
+  border-radius: 16rpx;
+}
+
+.qr-code-placeholder {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+}
+
+.loader {
+  width: 100rpx;
+  height: 100rpx;
+  border: 8rpx solid rgba(0, 0, 0, 0.1);
+  border-left-color: #0072ff;
+  border-radius: 50%;
+  animation: spin 1s linear infinite;
+}
+
+@keyframes spin {
+  to {
+    transform: rotate(360deg);
+  }
+}
+
+/* 会员编号样式区域 - 用户自定义样式位置 */
+.member-code-text {
+  display: block;
+  text-align: center;
+  /* 用户可以在这里自定义会员编号的样式 */
+}
+
+/* 下载按钮样式 */
+.share-button {
+  margin-top: 28rpx;
+  width: 280rpx;
+  height: 72rpx;
+  line-height: 72rpx;
+  color: #fff;
+  border-radius: 36rpx;
+  font-size: 26rpx;
+  font-weight: 500;
+  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
+  box-shadow: 0 5rpx 12rpx 0 rgba(102, 126, 234, 0.2);
+  border: none;
+  padding: 0;
+  text-align: center;
+  transition: all 0.3s ease;
+  letter-spacing: 1rpx;
+}
+
+button.share-button {
+  padding: 0;
+  line-height: 72rpx;
+  border: none;
+}
+
+.share-button:active {
+  transform: translateY(1rpx);
+  box-shadow: 0 4rpx 10rpx rgba(102, 126, 234, 0.4);
+  background: linear-gradient(135deg, #5a67d8 0%, #6b46c1 100%);
+}
+</style>

config/request.js

@@ -19,7 +19,7 @@ module.exports = vm => {
 
     //#ifdef DEV_SERVER
     console.log('DEV_SERVER')
-    config.baseURL = 'https://t-bl.beida777.com/prod-api'
+    config.baseURL = 'https://bl.beida777.com/prod-api'
     //#endif
 
     //#ifdef QA_SERVER

pages/mine/share/index.vue

@@ -1,80 +1,31 @@
 <template>
   <view
     class="share-page"
-    style="display: flex; flex-direction: column; height: 100vh"
+    style="
+      display: flex;
+      flex-direction: column;
+      height: 100vh;
+      align-items: center;
+      width: 100%;
+    "
   >
     <view id="shareContainer" class="share-container">
-      <!-- 微信环境：只有在未生成分享图时才显示原始内容 -->
+      <!-- 默认场景 -->
-      <template v-if="!isWechat || (isWechat && !generatedImageUrl)">
+      <DefaultSharePage
-        <!-- 背景图片，替代CSS background -->
+        :qrCodeImage="qrCodeImage"
-        <img
+        :userInfo="userInfo"
-          class="share-bg-image"
+        :isWechat="isWechat"
-          src="/static/images/share-bg.jpg"
+        :isLoaded="isLoaded"
-          mode="scaleToFill"
+        @share-generated="handleShareGenerated"
-          crossorigin="anonymous"
+        ref="defaultSharePage"
-          @load="onBackgroundImageLoad"
+      />
-          @error="onBackgroundImageError"
-        />
-        <view class="share-wrapper">
-          <view class="portal-frame" :class="{ 'is-loaded': isLoaded }">
-            <view class="qr-code-outer">
-              <img
-                class="qr-code"
-                :src="qrCodeImage"
-                mode="aspectFit"
-                v-if="qrCodeImage"
-              />
-              <view v-else class="qr-code-placeholder">
-                <view class="loader"></view>
-              </view>
-            </view>
-
-            <div
-              style="
-                font-size: 18rpx;
-                color: #fff;
-                font-weight: bold;
-                margin-top: 10rpx;
-                text-align: center;
-                display: flex;
-                align-items: center;
-                justify-content: center;
-              "
-            >
-              {{ desensitization(userInfo.memberCode) }}
-            </div>
-            <div v-if="!isWechat" class="share-button" @click="sharePage">
-              保存图片并分享
-            </div>
-            <img
-              v-if="isWechat"
-              class="share-btn"
-              style="margin-top: 30rpx"
-              src="/static/images/share-btn.svg"
-              mode="scaleToFill"
-            />
-          </view>
-          <!-- <image
-            class="share-bg-logo"
-            src="/static/images/share-logo.png"
-            mode="scaleToFill"
-          ></image> -->
-        </view>
-      </template>
 
+      <!-- 微信环境全屏图片显示 -->
       <view
         class="wechat-fullscreen-overlay"
-        v-show="isWechat && generatedImageUrl"
+        v-show="(isWechat || userInfo.sharePosterImage) && generatedImageUrl"
-        @click="closeFullscreenImage"
       >
-        <image
+        <img class="fullscreen-image" :src="generatedImageUrl" @click.stop="" />
-          class="fullscreen-image"
-          :src="generatedImageUrl"
-          mode="scaleToFill"
-          @load="onGeneratedImageLoad"
-          @error="onGeneratedImageError"
-          @click.stop=""
-        ></image>
       </view>
     </view>
     <cl-tabbar class="tabbar" :current="2" />
@@ -82,54 +33,58 @@
 </template>
 
 <script>
-import html2canvas from 'html2canvas'
 import { getShareCode } from '@/config/share'
 import clTabbar from '@/components/cl-tabbar.vue'
+import DefaultSharePage from '@/components/DefaultSharePage.vue'
 
 export default {
   name: 'ShareQRCode',
   components: {
     'cl-tabbar': clTabbar,
+    DefaultSharePage,
   },
   data() {
     return {
       qrCodeImage: '',
-      // Set canvas dimensions. It's better to get device screen width for this.
       canvasWidth: 375,
       canvasHeight: 800,
       isLoaded: false,
-      shareButtonShow: true,
+      isWechat: false,
-      isWechat: false, // 是否微信环境
+      generatedImageUrl: '',
-      generatedImageUrl: '', // 生成的图片URL，用于微信长按保存
-      backgroundImageLoaded: false, // 背景图片是否加载完成
       userInfo: uni.getStorageSync('User'),
+      sourceVisible: true,
     }
   },
+  computed: {
+    isSpecialScene() {
+      return this.userInfo && this.userInfo.sharePosterImage
+    },
+    isDefaultScene() {
+      return !this.isSpecialScene
+    },
+  },
   onLoad() {
     this.checkWechatEnvironment()
     this.handleGetShareCode()
-    // Get screen width to set canvas width dynamically
+    // 获取屏幕尺寸
     uni.getSystemInfo({
       success: res => {
         this.canvasWidth = res.windowWidth
         this.canvasHeight = res.windowHeight
       },
     })
+    uni.showLoading({
+      title: '加载中...',
+      mask: true,
+    })
   },
   onReady() {
-    // Use a short timeout to ensure the initial render is complete before animation
+    // 短暂延迟后启用加载动画
     setTimeout(() => {
       this.isLoaded = true
     }, 100)
   },
   methods: {
-    desensitization(str) {
-      if (!str) return ''
-      if (str.length <= 8) return str.slice(0, 4) + '****'
-      const len = str.length - 6
-      const placeholder = '*'.repeat(len)
-      return str.slice(0, 4) + placeholder + str.slice(-2)
-    },
     // 检测微信环境
     checkWechatEnvironment() {
       const ua = navigator.userAgent.toLowerCase()
@@ -137,18 +92,14 @@ export default {
       console.log('微信环境检测:', this.isWechat)
     },
 
+    // 获取分享二维码
     handleGetShareCode() {
-      // Don't show loading toast, use the placeholder loader instead
-      // uni.showLoading({ title: '加载中...' })
       getShareCode()
         .then(res => {
-          // The screenshot shows the base64 string is in data.datStr
           if (res.code === 200 && res.data && res.data.dataStr) {
             this.qrCodeImage = 'data:image/png;base64,' + res.data.dataStr
             this.$nextTick(() => {
-              if (this.isWechat) {
+              this.generateShareImage()
-                this.sharePage()
-              }
             })
           } else {
             uni.showToast({
@@ -166,162 +117,38 @@ export default {
         })
     },
 
-    async sharePage() {
+    // 生成分享图片
-      if (!this.qrCodeImage) {
+    async generateShareImage() {
-        uni.showToast({
-          title: '二维码尚未生成',
-          icon: 'none',
-        })
-        return
-      }
-
-      // 统一使用html2canvas生成图片
-      uni.showLoading({ title: '加载中...' })
-
       try {
-        // 隐藏按钮，等待DOM更新
+        if (this.isSpecialScene) {
-        this.shareButtonShow = false
+          await this.$refs.specialSharePage.generateShareImage()
-        await this.$nextTick()
+        } else {
-
+          // 默认场景生成图片
-        // 使用html2canvas截取页面
+          await this.$refs.defaultSharePage.sharePage()
-        await this.capturePageWithHtml2Canvas()
+        }
       } catch (error) {
-        uni.hideLoading()
+        console.error('生成分享图片失败:', error)
-        uni.showToast({ title: '图片生成失败，请稍后重试', icon: 'none' })
-        console.error('sharePage error:', error)
-      } finally {
-        // 恢复按钮显示
-        this.shareButtonShow = true
       }
     },
 
-    // 生成的图片加载成功
+    // 处理分享图片生成完成
-    onGeneratedImageLoad() {
+    handleShareGenerated(dataUrl) {
-      console.log('生成的图片加载成功')
+      uni.hideLoading()
-    },
+      this.$nextTick(() => {
-
+        this.sourceVisible = false
-    // 生成的图片加载失败
-    onGeneratedImageError(e) {
-      console.error('生成的图片加载失败:', e)
-      uni.showToast({
-        title: '图片显示失败',
-        icon: 'none',
       })
-    },
+      uni.hideLoading()
 
-    // 关闭全屏图片
+      if (this.isWechat) {
-    closeFullscreenImage() {
+        // 微信环境：设置图片供长按保存
-      this.generatedImageUrl = ''
+        this.generatedImageUrl = dataUrl
-      console.log('关闭全屏图片')
+      } else {
-    },
+        // 普通浏览器环境
-
+        if (this.isSpecialScene) {
-    // 背景图片加载成功
+          // 特殊场景：设置图片供长按保存（没有下载按钮）
-    onBackgroundImageLoad() {
+          this.generatedImageUrl = dataUrl
-      this.backgroundImageLoaded = true
-      console.log('背景图片加载成功')
-    },
-
-    // 背景图片加载失败
-    onBackgroundImageError(e) {
-      console.error('背景图片加载失败:', e)
-    },
-
-    // 使用html2canvas截取整个页面
-    async capturePageWithHtml2Canvas() {
-      console.log('开始使用html2canvas截取页面')
-
-      return new Promise((resolve, reject) => {
-        // 确保所有图片都已加载完成
-        const waitForImages = () => {
-          if (!this.backgroundImageLoaded || !this.qrCodeImage) {
-            setTimeout(waitForImages, 100)
-            return
-          }
-
-          // 额外等待确保渲染完成
-          setTimeout(() => {
-            const element = document.getElementById('shareContainer')
-            if (!element) {
-              reject(new Error('找不到页面容器'))
-              return
-            }
-
-            console.log(
-              '开始html2canvas截取，容器尺寸:',
-              element.offsetWidth,
-              'x',
-              element.offsetHeight
-            )
-
-            html2canvas(element, {
-              useCORS: true,
-              allowTaint: true,
-              backgroundColor: null,
-              scale: 2,
-              dpi: 400,
-              logging: true, // 开启日志便于调试
-              width: element.offsetWidth,
-              height: element.offsetHeight,
-              windowWidth: element.offsetWidth,
-              windowHeight: element.offsetHeight,
-              scrollX: 0,
-              scrollY: 0,
-              x: 0,
-              y: 0,
-            })
-              .then(canvas => {
-                const dataUrl = canvas.toDataURL('image/jpeg', 1)
-
-                // 根据环境处理结果
-                if (this.isWechat) {
-                  // 微信环境：设置图片供长按保存
-                  this.generatedImageUrl = dataUrl
-                  uni.hideLoading()
-                } else {
-                  // 普通浏览器：直接下载图片
-                  this.downloadImage(dataUrl)
-                  uni.hideLoading()
-                  uni.showToast({
-                    title: '图片已开始下载',
-                    icon: 'success',
-                  })
-                }
-
-                resolve()
-              })
-              .catch(err => {
-                console.error('html2canvas截取失败:', err)
-                reject(err)
-              })
-          }, 1000) // 增加等待时间到1000ms
         }
-
+      }
-        // 开始等待图片加载
-        waitForImages()
-      })
-    },
-
-    // 原生图片加载器
-    loadImage(src) {
-      return new Promise((resolve, reject) => {
-        const img = new Image()
-        img.crossOrigin = 'anonymous'
-
-        img.onload = () => {
-          console.log(
-            `图片加载成功: ${src.substring(0, 50)}...`,
-            `${img.width}x${img.height}`
-          )
-          resolve(img)
-        }
-
-        img.onerror = error => {
-          console.error(`图片加载失败: ${src}`, error)
-          reject(new Error(`图片加载失败: ${src}`))
-        }
-
-        img.src = src
-      })
     },
 
     // 下载图片
@@ -345,176 +172,37 @@ export default {
   position: relative;
   overflow: hidden;
   display: flex;
+  width: 100%;
   flex-direction: column;
   align-items: center;
 }
 
-/* 背景图片样式 */
-.share-bg-image {
-  position: absolute;
-  top: 0;
-  left: 0;
-  width: 100%;
-  height: 100%;
-  z-index: 1;
-}
-
-.share-bg {
-  width: 100%;
-  height: 100%;
-  img {
-    width: 100%;
-    height: 100%;
-  }
-}
-.share-wrapper {
-  position: absolute;
-  z-index: 2;
-  top: 370rpx;
-  display: flex;
-  flex-direction: column;
-  align-items: center;
-}
-.share-bg-logo {
-  width: 100%;
-  height: 360rpx;
-  // margin-top: -60rpx;
-}
-
-.portal-frame {
-  padding: 32rpx;
-  width: 520rpx;
-  border-radius: 40rpx;
-
-  display: flex;
-  box-sizing: border-box;
-  flex-direction: column;
-  align-items: center;
-  margin: 0 auto;
-  text-align: center;
-}
-
-.portal-frame.is-loaded {
-  opacity: 1;
-  transform: translateY(0);
-}
-
-/* The single white card for the QR code */
-.qr-code-outer {
-  width: 300rpx; /* 从400rpx缩小到320rpx */
-  height: 300rpx; /* 从400rpx缩小到320rpx */
-  background: rgba(255, 255, 255, 0.98);
-  border-radius: 20rpx; /* 从24rpx减小到20rpx */
-  box-shadow: 0px 8rpx 20rpx rgba(50, 50, 90, 0.06);
-  border: 1px solid #f0f0f0;
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  padding: 12rpx; /* 从16rpx减小到12rpx */
-  box-sizing: border-box;
-}
-
-/* The image and the placeholder both live inside the outer card */
-.qr-code,
-.qr-code-placeholder {
-  width: 100%;
-  height: 100%;
-}
-
-.qr-code {
-  border-radius: 16rpx;
-}
-
-.qr-code-placeholder {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-}
-
-.loader {
-  width: 100rpx;
-  height: 100rpx;
-  border: 8rpx solid rgba(0, 0, 0, 0.1);
-  border-left-color: #0072ff;
-  border-radius: 50%;
-  animation: spin 1s linear infinite;
-}
-
-@keyframes spin {
-  to {
-    transform: rotate(360deg);
-  }
-}
-
-.tip {
-  font-size: 30rpx;
-  color: #888;
-}
-
-.share-button {
-  margin-top: 58rpx; /* 从32rpx减小到28rpx */
-  width: 380rpx; /* 设置固定宽度 */
-  color: #fff;
-  border-radius: 36rpx; /* 从44rpx减小到36rpx */
-  font-size: 16rpx; /* 从30rpx减小到26rpx */
-  font-weight: 500;
-  padding: 12rpx 0;
-  display: flex;
-  align-items: flex-start;
-  justify-content: center;
-  background: linear-gradient(
-    135deg,
-    #d4af37 0%,
-    #ffd700 30%,
-    #b8860b 70%,
-    #8b7355 100%
-  );
-  // box-shadow: 0 5rpx 12rpx 0 rgba(102, 126, 234, 0.2);
-  border: none;
-  border-radius: 70rpx;
-  text-align: center;
-  letter-spacing: 1rpx;
-}
-
 /* 微信环境全屏覆盖样式 */
 .wechat-fullscreen-overlay {
   position: absolute;
   top: 0;
   left: 0;
-  width: 100vw;
+  height: 100%;
-  height: 100%; /* 减去tab栏高度 */
+  width: 100%;
-
+  background-color: transparent;
-  background-color: transparent; /* 移除背景色 */
   z-index: 999;
   display: flex;
   flex-direction: column;
-  align-items: stretch; /* 拉伸对齐 */
+  align-items: stretch;
-  justify-content: stretch; /* 拉伸对齐 */
+  justify-content: stretch;
   padding: 0;
   margin: 0;
 }
 
 .fullscreen-image {
-  width: 100vw;
+  height: 100%;
-  height: 100%; /* 减去tab栏高度 */
+  width: 100%;
-  object-fit: cover; /* 覆盖整个容器，可能会裁剪 */
   margin: 0;
   padding: 0;
   border: none;
   display: block;
 }
-@media screen and (max-height: 667px) {
-  .tabbar {
-    height: 70px !important;
-  }
-}
 
-@media screen and (min-height: 812px) {
-  /* iPhone X及以上机型 */
-  .tabbar {
-    height: 80px !important;
-  }
-}
 .tabbar {
   position: static;
   bottom: 0;
@@ -524,8 +212,17 @@ export default {
   :v-deep .u-tabbar--fixed {
     height: 100px !important;
   }
-  // ::v-deep .u-safe-area-inset-bottom {
+}
-  //   display: none !important;
+
-  // }
+@media screen and (max-height: 667px) {
+  .tabbar {
+    height: 70px !important;
+  }
+}
+
+@media screen and (min-height: 812px) {
+  .tabbar {
+    height: 80px !important;
+  }
 }
 </style>