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

@@ -1,33 +1,19 @@
 <template>
   <view class="main-page">
-    <img :src="posterUrl" style="width:100%;height:100%;" v-show="posterUrl"/>
+    <image :src="posterUrl" style="width:100%;height:100%;" mode="scaleToFill" v-show="posterUrl"></image>
     <view class="spread-wrap" id="poster-wrap" v-show="!posterUrl">
       <view class="logo-wrap">
-        <img :src="`${tenantInfo.logo}?timeStamp=${timeStamp}`" crossorigin="anonymous" class="logo-image" />
+        <image :src="tenantInfo.logo" class="logo-image"></image>
       </view>
-      <view class="activity-wrap">
-        <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="activity-wrap" v-show="activityList.length > 0">
+        <view class="item-wrap" :key="index" v-for="(item, index) in activityList">
           <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="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="service-phone">{{tenantInfo.serviceMobile}}</view>
         <view class="tenant-info-wrap">
           <view class="info-wrap">
             <view class="info">
@@ -45,6 +31,7 @@
         </view>
       </view>
     </view>
+  </view>
 </template>
 
 <script>
@@ -65,8 +52,7 @@
       return {
         activityList: [],
         posterUrl: '',
-        isHideBtn: false,
-        timeStamp: ''
+        isHideBtn: false
       };
     },
     computed:{
@@ -85,22 +71,9 @@
       } 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({
@@ -109,11 +82,7 @@
         });
         that.isHideBtn = true
         setTimeout(()=>{
-          html2canvas(document.getElementById('poster-wrap'), {
-            useCORS: true,
-            x: 0,
-            y: window.pageYOffset
-          }).then(function(canvas) {
+          html2canvas(document.getElementById('poster-wrap')).then(function(canvas) {
               that.$util.Tips({
                 title: '生成成功，长按保存图片'
               })
@@ -124,7 +93,7 @@
             })
             that.isHideBtn = false
           })
-        }, 500)
+        }, 200)
       },
       // 生成二维码；
       make() {
@@ -175,7 +144,7 @@
   }
 
   .spread-wrap {
-    min-height: 100%;
+    height: 100%;
     background: url('@/static/images/spread_bg.png') center 0 no-repeat;
     background-size: 100% auto;
     position: relative;
@@ -192,11 +161,18 @@
     }
   }
 
+  .activity-wrap {
+    position: absolute;
+    top: 460rpx;
+    left: 104rpx;
+    right: 110rpx;
+
     .tenant-info-wrap {
-    margin: 30rpx 40rpx;
-    padding: 30rpx 40rpx;
-    border-radius: 20rpx;
-    background: #fff;
+      position: absolute;
+      left: 0;
+      right: 0;
+      top: 656rpx;
+
       .info-wrap {
         display: flex;
         justify-content: space-between;
@@ -213,7 +189,7 @@
       .logon {
         width: 100%;
         height: 70rpx;
-      margin-top: 40rpx;
+        margin: 30rpx 0;
         color: #FFFFFF;
         font-size: 28rpx;
         background: linear-gradient(0deg, #E63163 0%, #FF819F 100%);
@@ -221,81 +197,40 @@
       }
     }
 
-  .activity-wrap {
-    margin: 212rpx 40rpx 0;
-    border: 3px solid #FF77AA;
-    border-radius: 20rpx;
-    padding: 40rpx;
-
-    .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 {
+      position: absolute;
+      bottom: -114rpx;
+      right: 48rpx;
       font-size: 30rpx;
       color: #ED387C;
       font-style: italic;
       font-weight: bold;
     }
+
+    .tips {
+      font-size: 28rpx;
+      color: #000;
       span{
-          color: #ED387C;
-          margin-right: 4rpx;
-        }
+        color: #C80D00;
+        font-weight: bold;
       }
     }
 
     .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;
 
-          span {
+      .text span {
         color: #C80D00;
       }
+    }
+  }
 
-        }
-      }
-    }
+  .canvas {
+    position: relative;
   }
 </style>