feat(share): 分享图更换

components/share/DefaultSharePage.vue

@@ -1,14 +1,13 @@
 <template>
   <view class="default-share-page">
     <!-- 背景图片，替代CSS background -->
-    <image
+    <img
       class="share-bg-image"
       src="/static/images/share-bg.jpg"
-      mode="scaleToFill"
       crossorigin="anonymous"
       @load="onBackgroundImageLoad"
       @error="onBackgroundImageError"
-    ></image>
+    />
 
     <view class="share-wrapper">
       <view class="portal-frame" :class="{ 'is-loaded': isLoaded }">
@@ -26,25 +25,9 @@
         </view>
 
         <!-- 会员编号样式区域 - 用户自定义样式位置 -->
-        <text
-          class="member-code-text"
-          style="
-            font-size: 30rpx;
-            color: #fff;
-            font-weight: bold;
-            margin-top: 20rpx;
-          "
-          >{{ desensitization(userInfo.memberCode) }}</text
-        >
-
-        <!-- 下载按钮 - 仅在非微信环境显示 -->
-        <button
-          v-if="!isWechat && shareButtonShow"
-          class="share-button"
-          @click="sharePage"
-        >
-          保存图片并分享
-        </button>
+        <text class="member-code-text">{{
+          desensitization(userInfo.memberCode)
+        }}</text>
       </view>
     </view>
   </view>
@@ -191,8 +174,8 @@ export default {
 <style lang="scss" scoped>
 .default-share-page {
   position: relative;
-  width: 100%;
-  height: 100%;
+  width: 600rpx;
+  height: 1298rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -203,23 +186,24 @@ export default {
   position: absolute;
   top: 0;
   left: 0;
-  width: 100%;
-  height: 100%;
+  width: 600rpx;
+  height: 1298rpx;
   z-index: 1;
 }
 
 .share-wrapper {
   position: absolute;
   z-index: 2;
-  bottom: 22%;
+  top: 320rpx;
+  left: 150rpx;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
 .portal-frame {
-  padding: 32rpx;
-  width: 520rpx;
+  // padding: 32rpx;
+  width: 300rpx;
   border-radius: 40rpx;
   display: flex;
   box-sizing: border-box;
@@ -238,12 +222,12 @@ export default {
 
 /* 二维码样式区域 - 用户自定义样式位置 */
 .qr-code-outer {
-  width: 400rpx;
-  height: 400rpx;
-  background: rgba(255, 255, 255, 0.98);
+  width: 240rpx;
+  height: 240rpx;
+  // 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;
+  // box-shadow: 0px 8rpx 20rpx rgba(50, 50, 90, 0.06);
+  // border: 1px solid #990;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -284,37 +268,9 @@ export default {
 
 /* 会员编号样式区域 - 用户自定义样式位置 */
 .member-code-text {
-  /* 用户可以在这里自定义会员编号的样式 */
-}
-
-/* 下载按钮样式 */
-.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%);
+  font-size: 24rpx;
+  color: #005bac;
+  font-weight: bold;
+  margin-top: 10rpx;
 }
 </style>

pages/mine/share/index.vue

@@ -28,10 +28,7 @@
       />
 
       <!-- 微信环境全屏图片显示 -->
-      <view
-        class="wechat-fullscreen-overlay"
-        v-show="(isWechat || userInfo.sharePosterImage) && generatedImageUrl"
-      >
+      <view class="wechat-fullscreen-overlay" v-show="generatedImageUrl">
         <img
           class="fullscreen-image"
           :src="generatedImageUrl"
@@ -41,6 +38,7 @@
         />
       </view>
     </view>
+    <view v-show="!generatedImageUrl" class="mask-loading"></view>
     <cl-tabbar class="tabbar" :current="2" />
   </view>
 </template>
@@ -154,16 +152,7 @@ export default {
       })
       uni.hideLoading()
 
-      if (this.isWechat) {
-        // 微信环境：设置图片供长按保存
       this.generatedImageUrl = dataUrl
-      } else {
-        // 普通浏览器环境
-        if (this.isSpecialScene) {
-          // 特殊场景：设置图片供长按保存（没有下载按钮）
-          this.generatedImageUrl = dataUrl
-        }
-      }
     },
 
     // 下载图片
@@ -240,4 +229,13 @@ export default {
     height: 80px !important;
   }
 }
+.mask-loading {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100vw;
+  height: 100vh;
+  z-index: 1000;
+  background-color: #fff;
+}
 </style>