Merge branch 'dev' of 47.94.45.65:angelo/web-zk-h5 into test

components/share/DefaultSharePage.vue

@@ -3,38 +3,40 @@
     <!-- 背景图片，替代CSS background -->
     <img
       class="share-bg-image"
-      src="/static/images/share-bg.jpg"
+      src="@/static/images/share-bg.jpg"
       crossorigin="anonymous"
       @load="onBackgroundImageLoad"
       @error="onBackgroundImageError"
     />
-
-    <view class="share-wrapper">
-      <view class="portal-frame" :class="{ 'is-loaded': isLoaded }">
-        <!-- 二维码样式区域 - 用户自定义样式位置 -->
-        <view class="qr-code-outer">
-          <image
-            class="qr-code"
-            :src="qrCodeImage"
-            mode="aspectFit"
-            v-if="qrCodeImage"
-          ></image>
-          <view v-else class="qr-code-placeholder">
-            <view class="loader"></view>
-          </view>
-        </view>
-
-        <!-- 会员编号样式区域 - 用户自定义样式位置 -->
-        <text class="member-code-text">{{
-          desensitization(userInfo.memberCode)
-        }}</text>
+    <view class="qr-code-outer">
+      <image
+        class="qr-code"
+        :src="qrCodeImage"
+        mode="aspectFit"
+        v-if="qrCodeImage"
+      ></image>
+      <view v-else class="qr-code-placeholder">
+        <view class="loader"></view>
       </view>
     </view>
+    <view class="member-code-outer">
+      <text
+        class="member-code-text"
+        style="
+          font-size: 20rpx;
+          color: #fff;
+          font-weight: bold;
+          margin-top: 20rpx;
+        "
+        >{{ desensitization(userInfo.memberCode) }}</text
+      >
+    </view>
   </view>
 </template>
 
 <script>
 import html2canvas from 'html2canvas'
+import { snapdom } from '@zumer/snapdom'
 
 export default {
   name: 'DefaultSharePage',
@@ -91,7 +93,7 @@ export default {
         return
       }
 
-      uni.showLoading({ title: '加载中...', mask: true })
+      uni.showLoading({ title: '加载中...' })
 
       try {
         this.shareButtonShow = false
@@ -128,30 +130,23 @@ export default {
               return
             }
 
-            console.log(
-              '开始html2canvas截取，容器尺寸:',
-              element.offsetWidth,
-              'x',
-              element.offsetHeight
-            )
-
+            const scale = 3
             html2canvas(element, {
               useCORS: true,
-              allowTaint: true,
+              // allowTaint: true,
               backgroundColor: null,
-              scale: 2,
-              dpi: 400,
-              logging: true,
+              scale,
+              // canvas,
               width: element.offsetWidth,
               height: element.offsetHeight,
-              windowWidth: element.offsetWidth,
-              windowHeight: element.offsetHeight,
-              scrollX: 0,
-              scrollY: 0,
-              x: 0,
-              y: 0,
             })
               .then(canvas => {
+                const context = canvas.getContext('2d')
+                // context.scale(2, 2)
+                context.mozImageSmoothingEnabled = false
+                context.webkitImageSmoothingEnabled = false
+                context.msImageSmoothingEnabled = false
+                context.imageSmoothingEnabled = false
                 const dataUrl = canvas.toDataURL('image/jpeg', 1)
                 this.$emit('share-generated', dataUrl)
                 resolve()
@@ -175,7 +170,8 @@ export default {
 .default-share-page {
   position: relative;
   width: 600rpx;
-  height: 1298rpx;
+  height: 1296rpx;
+  // height: 100%;
   display: flex;
   flex-direction: column;
   align-items: center;
@@ -187,23 +183,23 @@ export default {
   top: 0;
   left: 0;
   width: 600rpx;
-  height: 1298rpx;
+  height: 1296rpx;
+  // 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,17 +218,24 @@ export default {
 
 /* 二维码样式区域 - 用户自定义样式位置 */
 .qr-code-outer {
-  width: 240rpx;
-  height: 240rpx;
-  // background: rgba(255, 255, 255, 0.98);
+  width: 140rpx;
+  height: 140rpx;
+  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;
   padding: 12rpx;
   box-sizing: border-box;
+  position: absolute;
+  // bottom: 460rpx;
+  left: 374rpx;
+  top: 708rpx;
+  // right: 130rpx;
+
+  z-index: 10;
 }
 
 .qr-code,
@@ -268,9 +271,47 @@ export default {
 
 /* 会员编号样式区域 - 用户自定义样式位置 */
 .member-code-text {
-  font-size: 24rpx;
-  color: #005bac;
-  font-weight: bold;
-  margin-top: 10rpx;
+  /* 用户可以在这里自定义会员编号的样式 */
+}
+.member-code-outer {
+  position: absolute;
+  top: 1086rpx;
+  left: 246rpx;
+  // width: 300rpx;
+  text-align: center;
+  // background: rgb(217, 24, 25);
+  border-radius: 20rpx;
+  z-index: 10;
+}
+
+/* 下载按钮样式 */
+.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>