components/share/DefaultSharePage.vue

@@ -1,13 +1,14 @@
 <template>
   <view class="default-share-page">
     <!-- 背景图片，替代CSS background -->
-    <img
+    <image
       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 }">
@@ -25,9 +26,25 @@
         </view>
 
         <!-- 会员编号样式区域 - 用户自定义样式位置 -->
-        <text class="member-code-text">{{
-          desensitization(userInfo.memberCode)
-        }}</text>
+        <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>
       </view>
     </view>
   </view>
@@ -174,8 +191,8 @@ export default {
 <style lang="scss" scoped>
 .default-share-page {
   position: relative;
-  width: 600rpx;
-  height: 1298rpx;
+  width: 100%;
+  height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -186,24 +203,23 @@ export default {
   position: absolute;
   top: 0;
   left: 0;
-  width: 600rpx;
-  height: 1298rpx;
+  width: 100%;
+  height: 100%;
   z-index: 1;
 }
 
 .share-wrapper {
   position: absolute;
   z-index: 2;
-  top: 320rpx;
-  left: 150rpx;
+  bottom: 22%;
   display: flex;
   flex-direction: column;
   align-items: center;
 }
 
 .portal-frame {
-  // padding: 32rpx;
-  width: 300rpx;
+  padding: 32rpx;
+  width: 520rpx;
   border-radius: 40rpx;
   display: flex;
   box-sizing: border-box;
@@ -222,12 +238,12 @@ export default {
 
 /* 二维码样式区域 - 用户自定义样式位置 */
 .qr-code-outer {
-  width: 240rpx;
-  height: 240rpx;
-  // background: rgba(255, 255, 255, 0.98);
+  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 #990;
+  box-shadow: 0px 8rpx 20rpx rgba(50, 50, 90, 0.06);
+  border: 1px solid #f0f0f0;
   display: flex;
   align-items: center;
   justify-content: center;
@@ -268,9 +284,37 @@ export default {
 
 /* 会员编号样式区域 - 用户自定义样式位置 */
 .member-code-text {
-  font-size: 24rpx;
-  color: #005bac;
-  font-weight: bold;
-  margin-top: 10rpx;
+  /* 用户可以在这里自定义会员编号的样式 */
+}
+
+/* 下载按钮样式 */
+.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>

pages/mine/share/index.vue

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