fix: 修复生成推广员二维码图片异常问题

yudao-ui-app/pages/users/user_spread_code/index.vue

@@ -1,19 +1,33 @@
 <template>
   <view class="main-page">
-    <image :src="posterUrl" style="width:100%;height:100%;" mode="scaleToFill" v-show="posterUrl"></image>
+    <img :src="posterUrl" style="width:100%;height:100%;" v-show="posterUrl"/>
     <view class="spread-wrap" id="poster-wrap" v-show="!posterUrl">
       <view class="logo-wrap">
-        <image :src="tenantInfo.logo" class="logo-image"></image>
+        <img :src="`${tenantInfo.logo}?timeStamp=${timeStamp}`" crossorigin="anonymous" class="logo-image" />
       </view>
-      <view class="activity-wrap" v-show="activityList.length > 0">
+      <view class="activity-wrap">
-        <view class="item-wrap" :key="index" v-for="(item, index) in activityList">
+        <view class="item-wrap" v-for="(item, index) in activityList">
+          <view class="title">{{setTitle(index)}}</view>
+          <view class="line"></view>
+          <view class="text-wrap">
             <view class="text">办理会员{{item.gearAmount}}元</view>
             <view class="text">可享一年返回<span>{{item.refundAmount}}元</span>话费</view>
           </view>
+        </view>
         <view class="tips">
           三个活动可同时参与，每个手机号仅限一次，最高可返<span>{{total}}元</span>话费！！！
         </view>
-        <view class="service-phone">{{tenantInfo.serviceMobile}}</view>
+        <view class="extra-info">
+          <view class="extra-item">
+            <view class="text"><span>①</span>扫码主图二维码</view>
+            <view class="text">即可直接参与活动</view>
+          </view>
+          <view class="extra-item">
+            <view class="text"><span>②</span>客服联系电话</view>
+            <view class="text service-phone">{{tenantInfo.serviceMobile}}</view>
+          </view>
+        </view>
+      </view>
       <view class="tenant-info-wrap">
         <view class="info-wrap">
           <view class="info">
@@ -31,7 +45,6 @@
       </view>
     </view>
   </view>
-  </view>
 </template>
 
 <script>
@@ -52,7 +65,8 @@
       return {
         activityList: [],
         posterUrl: '',
-        isHideBtn: false
+        isHideBtn: false,
+        timeStamp: ''
       };
     },
     computed: {
@@ -71,9 +85,22 @@
       } else {
         this.getActivityInfo()
       }
+      this.timeStamp = new Date().getTime()
     },
     onReady() {},
     methods: {
+      setTitle(index) {
+        switch (index) {
+          case 0:
+            return '活动一'
+            break
+          case 1:
+            return '活动二'
+            break
+          case 2:
+            return '活动三'
+        }
+      },
       async downImage() {
         const that = this
         uni.showLoading({
@@ -82,7 +109,11 @@
         });
         that.isHideBtn = true
         setTimeout(() => {
-          html2canvas(document.getElementById('poster-wrap')).then(function(canvas) {
+          html2canvas(document.getElementById('poster-wrap'), {
+            useCORS: true,
+            x: 0,
+            y: window.pageYOffset
+          }).then(function(canvas) {
             that.$util.Tips({
               title: '生成成功，长按保存图片'
             })
@@ -93,7 +124,7 @@
             })
             that.isHideBtn = false
           })
-        }, 200)
+        }, 500)
       },
       // 生成二维码；
       make() {
@@ -144,7 +175,7 @@
   }
 
   .spread-wrap {
-    height: 100%;
+    min-height: 100%;
     background: url('@/static/images/spread_bg.png') center 0 no-repeat;
     background-size: 100% auto;
     position: relative;
@@ -161,18 +192,11 @@
     }
   }
 
-  .activity-wrap {
-    position: absolute;
-    top: 460rpx;
-    left: 104rpx;
-    right: 110rpx;
-
   .tenant-info-wrap {
-      position: absolute;
+    margin: 30rpx 40rpx;
-      left: 0;
+    padding: 30rpx 40rpx;
-      right: 0;
+    border-radius: 20rpx;
-      top: 656rpx;
+    background: #fff;
-
     .info-wrap {
       display: flex;
       justify-content: space-between;
@@ -189,7 +213,7 @@
     .logon {
       width: 100%;
       height: 70rpx;
-        margin: 30rpx 0;
+      margin-top: 40rpx;
       color: #FFFFFF;
       font-size: 28rpx;
       background: linear-gradient(0deg, #E63163 0%, #FF819F 100%);
@@ -197,40 +221,81 @@
     }
   }
 
-    .service-phone {
+  .activity-wrap {
-      position: absolute;
+    margin: 212rpx 40rpx 0;
-      bottom: -114rpx;
+    border: 3px solid #FF77AA;
-      right: 48rpx;
+    border-radius: 20rpx;
-      font-size: 30rpx;
+    padding: 40rpx;
-      color: #ED387C;
-      font-style: italic;
-      font-weight: bold;
-    }
 
     .tips {
       font-size: 28rpx;
       color: #000;
+
       span {
         color: #C80D00;
         font-weight: bold;
       }
     }
 
+    .extra-info{
+      display: flex;
+      justify-content: space-between;
+      align-items: center;
+      margin-top: 40rpx;
+      font-size: 28rpx;
+      .extra-item{
+        flex: 1;
+        .service-phone {
+          font-size: 30rpx;
+          color: #ED387C;
+          font-style: italic;
+          font-weight: bold;
+        }
+        span{
+          color: #ED387C;
+          margin-right: 4rpx;
+        }
+      }
+    }
+
     .item-wrap {
+      display: flex;
+      align-items: center;
+      padding: 10rpx 24rpx;
+      border-radius: 20rpx;
+      // background: linear-gradient(90deg, rgba(200, 16, 86, 1), RGBA(252, 183, 209, 1), RGBA(255, 245, 248, 1), rgba(200, 16, 86, 0));
+      background: #fff;
+      margin-bottom: 38rpx;
+
+      .title {
+        font-size: 42rpx;
+        letter-spacing: 10rpx;
+        color: #ED387C;
+        font-weight: bold;
+        font-style: italic;
+        text-shadow: 0rpx 6rpx 4rpx #EEA5C0;
+      }
+
+      .line {
+        width: 3rpx;
+        height: 40rpx;
+        margin: 0 30rpx;
+        background-color: RGBA(238, 87, 143, 1);
+      }
+
+      .text-wrap {
+        .text {
           font-size: 26rpx;
           font-style: italic;
           color: #010101;
           font-weight: bold;
-      margin-bottom: 54rpx;
-      padding-left: 227rpx;
 
-      .text span {
+          span {
             color: #C80D00;
           }
-    }
-  }
 
-  .canvas {
+        }
-    position: relative;
+      }
+    }
   }
 </style>