Merge branch 'feature/mall_product' of http://117.33.142.185:3000/zenghuapei/cyywl_server into feature/mall_product

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

@@ -1,34 +1,47 @@
 <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="text">办理会员{{item.gearAmount}}元</view>
+          <view class="title">{{setTitle(index)}}</view>
-          <view class="text">可享一年返回<span>{{item.refundAmount}}元</span>话费</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="tenant-info-wrap">
+          <view class="extra-item">
-          <view class="info-wrap">
+            <view class="text"><span>①</span>扫码主图二维码</view>
-            <view class="info">
+            <view class="text">即可直接参与活动</view>
-              <view class="name">{{userInfo.nickname}}</view>
+          </view>
-              <view class="phone">{{userInfo.mobile}}</view>
+          <view class="extra-item">
-              <view class="address">
+            <view class="text"><span>②</span>客服联系电话</view>
-                {{userInfo.parentDeptName}}
+            <view class="text service-phone">{{tenantInfo.serviceMobile}}</view>
-              </view>
+          </view>
-            </view>
+        </view>
-            <view class="qrcode-wrap">
+      </view>
-              <canvas id="qrcode" style="width:132rpx;height:132rpx;"></canvas>
+      <view class="tenant-info-wrap">
+        <view class="info-wrap">
+          <view class="info">
+            <view class="name">{{userInfo.nickname}}</view>
+            <view class="phone">{{userInfo.mobile}}</view>
+            <view class="address">
+              {{userInfo.parentDeptName}}
             </view>
           </view>
-          <u-button class="logon" @click="downImage" v-show="!isHideBtn">生成海报</u-button>
+          <view class="qrcode-wrap">
+            <canvas id="qrcode" style="width:132rpx;height:132rpx;"></canvas>
+          </view>
         </view>
+        <u-button class="logon" @click="downImage" v-show="!isHideBtn">生成海报</u-button>
       </view>
     </view>
   </view>
@@ -52,15 +65,16 @@
       return {
         activityList: [],
         posterUrl: '',
-        isHideBtn: false
+        isHideBtn: false,
+        timeStamp: ''
       };
     },
-    computed:{
+    computed: {
       ...mapGetters(['isLogin', 'uid', 'userInfo', 'tenantId', 'tenantInfo']),
-      total: function(){
+      total: function() {
         let _total = 0
         for (let active of this.activityList) {
-          _total+= parseInt(active.refundAmount)
+          _total += parseInt(active.refundAmount)
         }
         return _total
       },
@@ -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({
@@ -81,19 +108,23 @@
           mask: true
         });
         that.isHideBtn = true
-        setTimeout(()=>{
+        setTimeout(() => {
-          html2canvas(document.getElementById('poster-wrap')).then(function(canvas) {
+          html2canvas(document.getElementById('poster-wrap'), {
-              that.$util.Tips({
+            useCORS: true,
-                title: '生成成功，长按保存图片'
+            x: 0,
-              })
+            y: window.pageYOffset
-              that.posterUrl = canvas.toDataURL('image/png')
+          }).then(function(canvas) {
-          }).catch(()=>{
+            that.$util.Tips({
+              title: '生成成功，长按保存图片'
+            })
+            that.posterUrl = canvas.toDataURL('image/png')
+          }).catch(() => {
             that.$util.Tips({
               title: '生成失败'
             })
             that.isHideBtn = false
           })
-        }, 200)
+        }, 500)
       },
       // 生成二维码；
       make() {
@@ -138,13 +169,13 @@
     overflow: auto;
   }
 
-  .main-page{
+  .main-page {
     height: 100%;
     overflow: auto;
   }
 
   .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,76 +192,110 @@
     }
   }
 
+  .tenant-info-wrap {
+    margin: 30rpx 40rpx;
+    padding: 30rpx 40rpx;
+    border-radius: 20rpx;
+    background: #fff;
+    .info-wrap {
+      display: flex;
+      justify-content: space-between;
+    }
+
+    .qrcode-wrap {
+      margin-left: 40rpx;
+    }
+
+    .address {
+      margin-top: 18rpx;
+    }
+
+    .logon {
+      width: 100%;
+      height: 70rpx;
+      margin-top: 40rpx;
+      color: #FFFFFF;
+      font-size: 28rpx;
+      background: linear-gradient(0deg, #E63163 0%, #FF819F 100%);
+      border-radius: 44rpx;
+    }
+  }
+
   .activity-wrap {
-    position: absolute;
+    margin: 212rpx 40rpx 0;
-    top: 460rpx;
+    border: 3px solid #FF77AA;
-    left: 104rpx;
+    border-radius: 20rpx;
-    right: 110rpx;
+    padding: 40rpx;
-
-    .tenant-info-wrap {
-      position: absolute;
-      left: 0;
-      right: 0;
-      top: 656rpx;
-
-      .info-wrap {
-        display: flex;
-        justify-content: space-between;
-      }
-
-      .qrcode-wrap {
-        margin-left: 40rpx;
-      }
-
-      .address {
-        margin-top: 18rpx;
-      }
-
-      .logon {
-        width: 100%;
-        height: 70rpx;
-        margin: 30rpx 0;
-        color: #FFFFFF;
-        font-size: 28rpx;
-        background: linear-gradient(0deg, #E63163 0%, #FF819F 100%);
-        border-radius: 44rpx;
-      }
-    }
-
-    .service-phone {
-      position: absolute;
-      bottom: -114rpx;
-      right: 48rpx;
-      font-size: 30rpx;
-      color: #ED387C;
-      font-style: italic;
-      font-weight: bold;
-    }
 
     .tips {
       font-size: 28rpx;
       color: #000;
-      span{
+
+      span {
         color: #C80D00;
         font-weight: bold;
       }
     }
 
-    .item-wrap {
+    .extra-info{
-      font-size: 26rpx;
+      display: flex;
-      font-style: italic;
+      justify-content: space-between;
-      color: #010101;
+      align-items: center;
-      font-weight: bold;
+      margin-top: 40rpx;
-      margin-bottom: 54rpx;
+      font-size: 28rpx;
-      padding-left: 227rpx;
+      .extra-item{
+        flex: 1;
+        .service-phone {
+          font-size: 30rpx;
+          color: #ED387C;
+          font-style: italic;
+          font-weight: bold;
+        }
+        span{
+          color: #ED387C;
+          margin-right: 4rpx;
+        }
+      }
+    }
 
-      .text span {
+    .item-wrap {
-        color: #C80D00;
+      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;
+
+          span {
+            color: #C80D00;
+          }
+
+        }
       }
     }
   }
-
-  .canvas {
-    position: relative;
-  }
 </style>