海报修改

config/index.js

@@ -18,7 +18,7 @@ module.exports = {
       }
     },
     // Various Dev Server settings
-    host: '192.168.31.242', // can be overwritten by process.env.HOST
+    host: '192.168.31.169', // can be overwritten by process.env.HOST
     port: 8085, // can be overwritten by process.env.PORT, if port is in use, a free one will be determined
     autoOpenBrowser: false,
     errorOverlay: true,

package-lock.json

@@ -9284,6 +9284,11 @@
         "aproba": "1.2.0"
       }
     },
+    "sa-sdk-javascript": {
+      "version": "1.12.7",
+      "resolved": "https://registry.npmjs.org/sa-sdk-javascript/-/sa-sdk-javascript-1.12.7.tgz",
+      "integrity": "sha512-D63wuqkUV+oOwaxsa2v/kggdtBS8Q9RAkmk2HCcU3SKuEMTKdv56zoPXpCa4KYy6qHW/IsDa0I4ytsxuTTsxhw=="
+    },
     "safe-buffer": {
       "version": "5.1.2",
       "resolved": "https://registry.npmjs.org/safe-buffer/-/safe-buffer-5.1.2.tgz",

package.json

@@ -16,7 +16,7 @@
     "js-md5": "^0.7.3",
     "mint-ui": "^2.2.13",
     "qrcodejs2": "0.0.2",
-    "sa-sdk-javascript": "^1.12.5",
+    "sa-sdk-javascript": "^1.12.7",
     "vue": "^2.5.2",
     "vue-aplayer": "^1.6.1",
     "vue-awesome-swiper": "^3.1.3",

src/components/buy/activity.vue

@@ -49,9 +49,11 @@
   import closeUrl from '../../assets/closemy.png'
   import html2canvas from 'html2canvas'
 
-  import header_1 from '../../assets/activity/header_01.png'
+  // import header_1 from '../../assets/activity/header_01.png'
+  import header_1 from '../../assets/activity/header_t01.png'
   import header_2 from '../../assets/activity/header_02.png'
-  import header_4 from '../../assets/activity/header_04.png'
+  // import header_4 from '../../assets/activity/header_04.png'
+  import header_4 from '../../assets/activity/header_t04.png'
   import invite_result_title from '../../assets/activity/invite_result.png'
   import more_result from '../../assets/activity/more.png'
   import invite_poster from '../../assets/activity/btn.png'

src/components/buy/activityInvite.vue

 <template>
   <div class="group-index" ref="index" v-if="groupDetail" style="background-color: #fda813;">
     <div>
-      <img class="tips" :src="tipsUrl"/>
       <div class="img-cvs" id="capture" ref="imageWrapper" v-if="groupDetail.share_desc.refImg && groupDetail.share_desc.refImg.length > 0">
-        <template v-if="avatar && QRCodeB">
-          <img :src="groupDetail.share_desc.refImg[0].url">
+        <div v-if="avatar && QRCodeB">
+          <img :src="groupDetail.share_desc.refImg[0].url" v-if="showLoad" id="showImg">
           <div class="avatar-container"><img :src="avatar" class="avatar"/> 我已加入，邀请你一起加入</div>
-        </template>
+        </div>
         <div id="qrcode" class="qrcode">
         </div>
       </div>
       <img :src="dataURL" class="cvs-img" id="cvs-img"/>
+      
       <div class="inviteBtn" id="inviteBtn">
+        <div class="content-text">
+        <h3>长按保存海报 或发送给好友</h3>
+        <p>越多朋友购买，您可得越多奖励</p>
+      </div>
         <div class="i-btn flex-start" @click="show=true">
           <img class="i-env" :src="whiteEnvelopeUrl"/>
           <span class="i-env-title">邀请语：</span>
@@ -57,7 +61,6 @@
   import whiteEnvelopeUrl from '../../assets/activity/white-envelope.png'
   import closePopUrl from '../../assets/activity/close.png'
   import switchUrl from '../../assets/activity/switch.png'
-  import tipsUrl from '../../assets/activity/tips.png'
   import html2canvas from 'html2canvas'
   import { Toast } from 'mint-ui';
   export default {
@@ -68,6 +71,7 @@
     },
     data(){
       return {
+        showLoad:false,
         refBg:refBg,
         join:false,
         popType:false,
@@ -81,7 +85,6 @@
         weChatIcon:weChatIcon,
         closeUrl:closeUrl,
         moreUrl:moreUrl,
-        tipsUrl:tipsUrl,
         refIcon:refIcon,
         swiperOption: {
           pagination: {
@@ -104,10 +107,15 @@
         closePopUrl: closePopUrl,
         switchUrl: switchUrl,
         show: false,
-        comments: [
-          '英语这样启蒙效果太棒啦，唱唱这个90天启蒙课程做真不错，推荐给你们！坚持打卡全额返学费，报课即送价值498元教具礼盒。数量有限，抢完即止！',
-          '发现一款对宝宝英语启蒙特别有用的产品，每天10分钟宝宝已经爱上英语、爱唱英语。现在他们这个90天课程在做活动，坚持打卡全额返学费。我体验过了，真的很好！快带着宝宝一起唱玩英语吧~',
-          '第一次接触线上启蒙英语，发现唱唱课程实在太棒啦，既省事宝宝学起来还方便，每天快乐中学习。现在他们这个90天课程在做活动，限时免费学，不花1分钱，学习90天，还送实物教具，机不可失，速来领取~'
+        // comments: [
+        //   '英语这样启蒙效果太棒啦，唱唱这个90天启蒙课程做真不错，推荐给你们！坚持打卡全额返学费，报课即送价值498元教具礼盒。数量有限，抢完即止！',
+        //   '发现一款对宝宝英语启蒙特别有用的产品，每天10分钟宝宝已经爱上英语、爱唱英语。现在他们这个90天课程在做活动，坚持打卡全额返学费。我体验过了，真的很好！快带着宝宝一起唱玩英语吧~',
+        //   '第一次接触线上启蒙英语，发现唱唱课程实在太棒啦，既省事宝宝学起来还方便，每天快乐中学习。现在他们这个90天课程在做活动，限时免费学，不花1分钱，学习90天，还送实物教具，机不可失，速来领取~'
+        // ],
+         comments: [
+          '英语这样启蒙效果太棒啦，唱唱这个启蒙课程做得真不错，推荐给你们！现在限时免费抢，打卡5次全额返学费，报名立送价值98元教具礼盒，数量有限，先到先得！',
+          '发现一款对宝宝英语启蒙特别有用的产品，每天10分钟宝宝已经爱上英语、爱唱英语。现在他们有体验课，我体验过了，真的很好！现限时限量免费领取，速来~',
+          '第一次接触线上启蒙英语，发现唱唱课程实在太棒啦，既省事宝宝学起来还方便，每天在快乐中学习。现在他们有体验课了，限时免费领取，报名立送价值98元教具礼盒，快来和我一起参与吧！'
         ],
         commentIndex: 0,
         shareTitle: '钜惠来袭！唱唱启蒙英语90天课程免费学！',
@@ -167,11 +175,14 @@
             this.$nextTick(()=>{
               if(!this.dataURL){
                 setTimeout(()=>{
-                  let {
+                  this.showLoad=true;
+                    this.$nextTick(()=>{
+                  document.getElementById('showImg').onload=()=>{
+                   let {
                     height,
                     width,
                     top
-                  } = document.getElementById('capture').getClientRects()[0]
+                  } = document.getElementById('capture').getClientRects()[0];
                   document.getElementById('capture').style.width = width + 'px';
                   let o = this.getOffsetRect(this.$refs.imageWrapper);
                   let {
@@ -181,20 +192,24 @@
                   console.log('document.getElementById', document.getElementById('capture').getClientRects()[0]);
                   document.getElementById('inviteBtn').style.top = height + top + 20 + 'px';
                   document.getElementById('inviteBtn').style.opacity = 1;
-                  html2canvas(document.getElementById('capture'),{
-                    async: true,
-                    timeout: 500,
-                    scrollX:1,
-                    scale: 3,
-                    width: width1,
-                    height: height1,
-                    letterRendering: true,
-                  }).then((canvas) => {
-                    let dataURL = canvas.toDataURL("image/jpg");
-                    this.dataURL = dataURL;
-                    Indicator.close();
-                  }).catch(res=>{alert(res);console.log()});
+                        html2canvas(document.getElementById('capture'),{
+                        async: true,
+                        timeout: 500,
+                        scrollX:1,
+                        scale: 3,
+                        width: width1,
+                        height: height1,
+                        letterRendering: true,
+                      }).then((canvas) => {
+                        let dataURL = canvas.toDataURL("image/jpg");
+                        this.dataURL = dataURL;
+                        Indicator.close();
+                      }).catch(res=>{alert(res);console.log()});
+                  }
+                })
+                  
                 },500)
+
               }else{
 
               }
@@ -415,7 +430,7 @@
   .img-cvs{
     position: absolute;
     width: 525 / 2 * @toVw;
-    top: 90 * @toVh;
+    top: 25 * @toVh;
     left: 113 / 2 * @toVw;
     .avatar-container {
       position: absolute;
@@ -445,7 +460,7 @@
   .cvs-img{
     position: absolute;
     width: 525 / 2 * @toVw;
-    top: 90 * @toVh;
+    top: 25 * @toVh;
     left: 113 / 2 * @toVw;
     z-index: 10;
   }
@@ -780,7 +795,15 @@
   }
   }
   }
-
+  }
+  .content-text{
+    margin-bottom: 15 * @toVw;
+    h3{
+      margin-bottom: 5 * @toVw;
+    };
+    p{
+      font-size: 16 * @toVw;
+    }
   }
 
 </style>