Merge branch 'develop' into release/v5.5

pages/activity/doubleEleven/pc.vue

@@ -1,6 +1,6 @@
 <template>
-    <div class="double-eleven">
-      <img src="~/assets/image/activity/double-eleven/head.png" width="100%">
+  <div class="double-eleven">
+    <img src="~/assets/image/activity/double-eleven/head.png" width="100%">
     <div class="double-eleven-body">
       <van-overlay :show="login" style="background: transparent;">
         <div class="wrapper">
@@ -9,17 +9,17 @@
           </div>
         </div>
       </van-overlay>
-        <div class="double-eleven-container">
+      <div class="double-eleven-container">
 
-          <div class="default" v-if="!couponsList.length">
-          <img src="~/assets/image/activity/double-eleven/couponbj.png" width="100%" >
-          <div class="default-img" >
-            <img src="~/assets/image/activity/double-eleven/default.png" >
+        <div v-if="!couponsList.length" class="default">
+          <img src="~/assets/image/activity/double-eleven/couponbj.png" width="100%">
+          <div class="default-img">
+            <img src="~/assets/image/activity/double-eleven/default.png">
             暂无优惠券哦～
           </div>
-          </div>
-  
-           <!-- <div class="coupon" >
+        </div>
+
+        <!-- <div class="coupon" >
             <div class="let-title">
               <div><span>7</span>折</div>
               <div>折扣券</div>
@@ -31,50 +31,50 @@
             </div>
             <div class="btn" @click="receiveCouponRewards({id:11})"></div>
           </div> -->
-  
-          <div class="coupon" v-for="item in couponsList" :key="item.id">
-            <!-- <div class="icon">{{item.couponName}}</div> -->
-            <div class="let-title">
-              <div  v-if="item.couponType===1">¥<span>{{item.couponValue}}</span></div>
-              <div  v-else><span>{{item.deductionPrice}}</span>折</div>
-              <div v-if="item.maxValue" class="maxValue">满{{ item.maxValue }}元减</div>
-              <div v-else class="maxValue">{{ item.useThreshold }}</div>
-            </div>
-            <div class="content">
-              <div class="title-coupon">{{item.couponName}}</div>
-              <div class="tips">{{item.couponExplain}}</div>
-              <div class="number">剩余数量：{{item.remainder}}张</div>
-            </div>
-            <div v-if="item.receivingStatus===1" class="btn" @click="receiveCouponRewards(item)"></div>
-            <div v-else-if="item.receivingStatus===2" class="btn-collect"></div>
-            <div v-else-if="item.receivingStatus===3" class="btn-nocoupon"></div>
+
+        <div v-for="item in couponsList" :key="item.id" class="coupon">
+          <!-- <div class="icon">{{item.couponName}}</div> -->
+          <div class="let-title">
+            <div v-if="item.couponType === 1">¥<span>{{ item.couponValue }}</span></div>
+            <div v-else><span>{{ item.deductionPrice }}</span>折</div>
+            <div v-if="item.maxValue" class="maxValue">满{{ item.maxValue }}元减</div>
+            <div v-else class="maxValue">{{ item.useThreshold }}</div>
           </div>
-  
-         
-  
+          <div class="content">
+            <div class="title-coupon">{{ item.couponName }}</div>
+            <div class="tips">{{ item.couponExplain }}</div>
+            <div class="number">剩余数量:{{ item.remainder }}张</div>
+          </div>
+          <div v-if="item.receivingStatus === 1" class="btn" @click="receiveCouponRewards(item)"></div>
+          <div v-else-if="item.receivingStatus === 2" class="btn-collect"></div>
+          <div v-else-if="item.receivingStatus === 3" class="btn-nocoupon"></div>
+        </div>
+
+
+
         <img src="~/assets/image/activity/double-eleven/game.png" width="100%" style="margin-top:30px">
         <img src="~/assets/image/activity/double-eleven/blacktechnology.png" width="100%">
         <img src="~/assets/image/activity/double-eleven/advantage.png" width="100%">
-        </div>
+      </div>
     </div>
-  
+
     <van-popup v-model="show" style="background: transparent;" :close-on-click-overlay="false">
-           <div class="popup-container">
-            <div class="coupon">
-              <div class="let-title">
-                <div v-if="coupons.couponType===1">¥<span>{{coupons.couponValue}}</span></div>
-                <div v-else><span>{{coupons.deductionPrice}}</span>折</div>
-                <div v-if="coupons.maxValue" class="maxValue">满{{ coupons.maxValue }}元减</div>
-                <div v-else class="maxValue">{{ coupons.useThreshold }}</div>
-              </div>
-                <div class="content">
-                  <div class="title-coupon">{{coupons.couponName}}</div>
-                  <div class="tips">{{coupons.couponExplain}}</div>
-                  <div class="number">有效期至 {{coupons.validityPeriod}}</div>
-                </div>
-            </div>
-  
-              <!-- <div class="coupon" >
+      <div class="popup-container">
+        <div class="coupon">
+          <div class="let-title">
+            <div v-if="coupons.couponType === 1">¥<span>{{ coupons.couponValue }}</span></div>
+            <div v-else><span>{{ coupons.deductionPrice }}</span>折</div>
+            <div v-if="coupons.maxValue" class="maxValue">满{{ coupons.maxValue }}元减</div>
+            <div v-else class="maxValue">{{ coupons.useThreshold }}</div>
+          </div>
+          <div class="content">
+            <div class="title-coupon">{{ coupons.couponName }}</div>
+            <div class="tips">{{ coupons.couponExplain }}</div>
+            <div class="number">有效期:{{ coupons.validityPeriod }}</div>
+          </div>
+        </div>
+
+        <!-- <div class="coupon" >
                 <div class="let-title">
                   <div><span>7</span>折</div>
                   <div class="maxValue">折扣券</div>
@@ -85,155 +85,148 @@
                   <div class="number">有效期至 2022.11.10 16:28</div>
                 </div>
               </div> -->
-  
-  
-            <img src="~/assets/image/activity/double-eleven/btn2.png" width="100%"  @click="goOrder">
-           </div>
-  
-              <div class="coupon-tips">优惠券可在【我的】-【卡券】内查看</div>
-              <img src="~/assets/image/activity/double-eleven/close.png" class="close" @click="show=false"/>
-           </van-popup>
+
+
+        <img src="~/assets/image/activity/double-eleven/btn2.png" width="100%" @click="goOrder">
+      </div>
+
+      <div class="coupon-tips">优惠券可在【我的】-【卡券】内查看</div>
+      <img src="~/assets/image/activity/double-eleven/close.png" class="close" @click="show = false" />
+    </van-popup>
   </div>
-  </template>
-  
-  <script>
-  import { Toast } from 'vant';
-  export default {
-    name: 'doubleEleven',
-    auth: false,
-    components: {
-    },
-    data() {
-      return {
-        show:false,
-        coupons:{},
-        login:false,
-        loading:false,
-        couponsList:[],
-        token:'',
-        client:''
-      };
-    },
-    async fetch() {
-      if (this.$route.query.type === 'pc') {
-        this.token =  window.vgeminipc.getToken()
-      } else if(this.$route.query.token && this.$route.query.token != 'needToken'){
-        this.token = this.$route.query.token;
-      }
-  
-      this.getCoupons()
-  
-      if (this.$userAgent.isSzx && this.$userAgent.isAndroid) {
-        this.client = 1;
-      } else if (this.$userAgent.isSzx && this.$userAgent.isIos) {
-        this.client = 2;
-      } else if (this.$userAgent.isMiniProgram) {
-        this.client = 5;
-      } else {
-        this.client = 7;
-      }
-      this.visit()
-  
-    },
-    head: {
-      title: '双十一 大额优惠券免费领',
-    },
-    created() {
-      // const _this = this
-      // setInterval(() => {
-      //   _this.getCoupons()
-      // }, 600000);
-    },
-    methods: {
+</template>
+  
+<script>
+import { Toast } from 'vant';
+export default {
+  name: 'DoubleEleven',
+  auth: false,
+  components: {
+  },
+  data() {
+    return {
+      show: false,
+      coupons: {},
+      login: false,
+      loading: false,
+      couponsList: [],
+      token: '',
+      client: ''
+    };
+  },
+  fetch() {
+    if (this.$route.query.type === 'pc') {
+      this.token = window.vgeminipc.getToken()
+    } else if (this.$route.query.token && this.$route.query.token !== 'needToken') {
+      this.token = this.$route.query.token;
+    }
+
+    this.getCoupons()
+
+    if (this.$userAgent.isSzx && this.$userAgent.isAndroid) {
+      this.client = 1;
+    } else if (this.$userAgent.isSzx && this.$userAgent.isIos) {
+      this.client = 2;
+    } else if (this.$userAgent.isMiniProgram) {
+      this.client = 5;
+    } else {
+      this.client = 7;
+    }
+    this.visit()
+
+  },
+  head: {
+    title: '双十一 大额优惠券免费领',
+  },
+  created() {
+    // const _this = this
+    // setInterval(() => {
+    //   _this.getCoupons()
+    // }, 600000);
+  },
+  methods: {
     visit() {
-      this.$axios.$post('/user/v5/userAccess/user/visit', 
+      this.$axios.$post('/user/v5/userAccess/user/visit',
         {
           loginType: this.token ? 1 : 2,
           accessType: 13
         },
       );
     },
-      goOrder()
-      {
-        const productId = !this.coupons.products || this.coupons.products.split(',').length > 1 ? -1 : parseInt(this.coupons.products)
-        window.vgeminipc.startPhoneMeal(productId)
-      },
-      async getCoupons()
-      {
-        const res = await this.$axios.$post('/activity/v5/couponActivity/getCouponActivityInfo', {},
-        { headers: { Authorization: this.token }});
-        if(res.status === 0)
-        {
-          res.data.forEach(element => {
-            if(element.receivingStatus !== 3)
-            {
-              element.remainder = element.remainder
-            }
+    goOrder() {
+      const productId = !this.coupons.products || this.coupons.products.split(',').length > 1 ? -1 : parseInt(this.coupons.products)
+      window.vgeminipc.startPhoneMeal(productId)
+    },
+    async getCoupons() {
+      const res = await this.$axios.$post('/activity/v5/couponActivity/getCouponActivityInfo', {},
+        { headers: { Authorization: this.token } });
+      if (res.status === 0) {
+        // res.data.forEach(element => {
+        //   if (element.receivingStatus !== 3) {
+        //     element.remainder = element.remainder
+        //   }
+        // });
+        this.couponsList = res.data;
+      }
+
+    },
+    async receiveCouponRewards(row) {
+      if (!this.token) {
+        this.login = true
+        const _this = this
+        setTimeout(() => { window.location.href = 'https://client.phone.androidscloud.com/cloud/phone/web/#/pages/login/index'; _this.login = false }, 1000);
+        // setTimeout(() => {window.location.href='https://prese.phone.androidscloud.com/cloud/phone/web/#/pages/index/index';_this.login = false},1000);
+        return
+      }
+
+      if (this.loading) return
+      this.loading = true
+      Toast.loading({ duration: 0, forbidClick: true, });
+
+      try {
+        const res = await this.$axios.$get('/activity/v5/couponActivity/receiveCouponRewards', { params: { goodsId: row.id }, headers: { Authorization: this.token } });
+        if (res.status === 0) {
+          this.coupons = res.data
+          this.show = true
+        }
+        else {
+          Toast({
+            message: res.msg,
+            position: 'top',
+            duration: 4000,
           });
-          this.couponsList = res.data;
         }
-    
-      },
-      async receiveCouponRewards(row)
-      {
-        if(!this.token)
-          {
-            this.login = true
-            const _this = this
-            setTimeout(() => {window.location.href='https://client.phone.androidscloud.com/cloud/phone/web/#/pages/login/index';_this.login = false},1000);
-            // setTimeout(() => {window.location.href='https://prese.phone.androidscloud.com/cloud/phone/web/#/pages/index/index';_this.login = false},1000);
-            return
-          }
-      
-        if(this.loading) return
-        this.loading = true
-        Toast.loading({ duration: 0, forbidClick: true,});
-          
-        try {
-            const data = { goodsId: row.id, };
-            const res = await this.$axios.$get('/activity/v5/couponActivity/receiveCouponRewards',{ params: { goodsId:row.id} ,headers: { Authorization: this.token }});
-             if(res.status === 0)
-             {
-               this.coupons = res.data
-               this.show = true
-             }
-             else{
-              Toast({
-                message: res.msg, 
-                position: 'top',
-                duration: 4000,
-              });
-            }
-  
-            await this.getCoupons()
-            this.loading = false
-            Toast.clear();
-  
-            }catch (error) {
-              Toast.clear();
-              this.loading = false
-              // await this.getCoupons()
-              Toast({
-                message: error.message,
-                position: 'top',
-                duration: 4000,
-              });
-            }
-  
+
+        await this.getCoupons()
+        this.loading = false
+        Toast.clear();
+
+      } catch (error) {
+        Toast.clear();
+        this.loading = false
+        // await this.getCoupons()
+        Toast({
+          message: error.message,
+          position: 'top',
+          duration: 4000,
+        });
       }
-    },
-  };
-  </script>
+
+    }
+  },
+};
+</script>
   
-  <style lang="scss" scoped>
-  @media (min-width: 0px) {
-  .double-eleven{
+<style lang="scss" scoped>
+@media (min-width: 0px) {
+  .double-eleven {
     width: 400px;
     position: relative;
     overflow: hidden;
     margin: 0 auto;
   }
-  .double-eleven-body{
+
+  .double-eleven-body {
     background-image: url('../../../assets/image/activity/double-eleven/bj.png');
     background-size: cover;
     background-repeat: round;
@@ -242,28 +235,31 @@
     margin: 0 auto;
     margin-top: -1px;
   }
-  img{
+
+  img {
     display: block;
   }
-  .double-eleven-container{
-   padding: 10px;
-   img{
-    margin-bottom: 30px;
-   }
+
+  .double-eleven-container {
+    padding: 10px;
+
+    img {
+      margin-bottom: 30px;
+    }
   }
-  
-  .coupon{
+
+  .coupon {
     width: 100%;
     height: 100px;
     background: #FDFFFD;
-    box-shadow: 0px 11px 12px 0px rgba(255,121,168,0.46);
+    box-shadow: 0px 11px 12px 0px rgba(255, 121, 168, 0.46);
     border-radius: 12px;
     margin-bottom: 10px;
     display: flex;
     // padding: 18px 10px 8px 10px;
-  
-  
-    .let-title{
+
+
+    .let-title {
       width: 100px;
       height: 100px;
       display: inline-block;
@@ -276,33 +272,36 @@
       padding: 5px 0;
       border-radius: 12px 0 0 12px;
       vertical-align: top;
-      span{
+
+      span {
         font-size: 32px;
       }
-      .maxValue{
+
+      .maxValue {
         font-size: 17px;
       }
     }
-  
-    .content{
+
+    .content {
       width: calc(100% - 182px);
       height: 50px;
       display: inline-block;
       // margin-top: -2px;
       margin-left: 5px;
       padding: 5px 5px;
-     
-      .title-coupon{
-          font-size: 24px !important;
-          font-family: Source Han Sans CN;
-          font-weight: 800;
-          color: #333333;
-          overflow: hidden;
-          text-overflow: ellipsis;
-          white-space: nowrap;
-          line-height: 39px;
+
+      .title-coupon {
+        font-size: 24px !important;
+        font-family: Source Han Sans CN;
+        font-weight: 800;
+        color: #333333;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        white-space: nowrap;
+        line-height: 39px;
       }
-      .tips{
+
+      .tips {
         font-size: 10px;
         font-family: Source Han Sans CN;
         font-weight: 400;
@@ -312,8 +311,8 @@
         white-space: nowrap;
         // line-height: 25px;
       }
-  
-      .number{
+
+      .number {
         margin-top: 5px;
         height: 20px;
         line-height: 20px;
@@ -321,14 +320,15 @@
         font-size: 10px;
         font-family: Source Han Sans CN;
         font-weight: 400;
-        color: #FFFFFF; 
+        color: #FFFFFF;
         padding: 0 5px;
         width: fit-content;
         // display: block;
       }
-  
+
     }
-    .btn{
+
+    .btn {
       width: 60px;
       height: 60px;
       background: url('../../../assets/image/activity/double-eleven/btn.png') no-repeat;
@@ -343,7 +343,8 @@
       margin-left: 2px;
       margin-top: 19px;
     }
-    .btn-collect{
+
+    .btn-collect {
       width: 60px;
       height: 60px;
       background: url('../../../assets/image/activity/double-eleven/collect.png') no-repeat;
@@ -358,8 +359,8 @@
       margin-left: 2px;
       margin-top: 19px;
     }
-  
-    .btn-nocoupon{
+
+    .btn-nocoupon {
       width: 60px;
       height: 60px;
       background: url('../../../assets/image/activity/double-eleven/nocoupon.png') no-repeat;
@@ -375,86 +376,91 @@
       margin-top: 19px;
     }
   }
-  
-  
-  .popup-container{
-    width: 325px;
+
+
+  .popup-container {
+    width: 295px;
     height: 407px;
     background: url('../../../assets/image/activity/double-eleven/bj2.png') no-repeat;
     background-size: 100% 100%;
     padding-top: 210px;
-    padding-left: 15px;
-    padding-right: 15px;
-  
-    .coupon{
-      width: 295px;
+    padding-left: 20px;
+    padding-right: 20px;
+
+    .coupon {
+      width: 255px;
       height: 95px;
       margin-bottom: 20px;
-      .let-title{
-      width: 90px;
-      height: 95px;
-      display: inline-block;
-      background: #F6E1E1;
-      font-size: 18px;
-      font-family: Source Han Sans;
-      font-weight: bold;
-      color: #F04545;
-      text-align: center;
-      padding: 16px 0;
-      border-radius: 12px 0 0 12px;
-      vertical-align: top;
-      span{
-        font-size: 24px;
-      }
-      .maxValue{
-        font-size: 14px;
+
+      .let-title {
+        width: 90px;
+        height: 95px;
+        display: inline-block;
+        background: #F6E1E1;
+        font-size: 18px;
+        font-family: Source Han Sans;
+        font-weight: bold;
+        color: #F04545;
+        text-align: center;
+        padding: 16px 0;
+        border-radius: 12px 0 0 12px;
+        vertical-align: top;
+
+        span {
+          font-size: 24px;
+        }
+
+        .maxValue {
+          font-size: 14px;
+        }
       }
-    }
-      .content{
+
+      .content {
         width: calc(100% - 100px);
         margin-bottom: 25px;
-        // margin-right: 5px;
-        // padding: 10px 2px;
-                .title-coupon{
-                    font-size: 21px !important; 
-                    font-family: Source Han Sans CN;
-                    font-weight: 800;
-                    color: #333333;
-                    overflow: hidden;
-                    text-overflow: ellipsis;
-                    white-space: nowrap;
-                    line-height: 31px;
-                  
-                }
-              .tips{
-                font-size: 12px;
-                font-family: Source Han Sans CN;
-                font-weight: 400;
-                color: #333333;
-                overflow: hidden;
-                text-overflow: ellipsis;
-                white-space: nowrap;
-                // line-height: 20px;
-              }
-  
-              .number{
-                margin-top: 7px;
-                height: 20px;
-                line-height: 20px;
-                background: linear-gradient(90deg, #FF4BD3, #7492FE);
-                font-size: 10px;
-                font-family: Source Han Sans CN;
-                font-weight: 400;
-                color: #FFFFFF; 
-                padding: 0 5px;
-                width: fit-content;
-              }
-  
+        margin-right: 5px;
+
+        .title-coupon {
+          font-size: 21px !important;
+          font-family: Source Han Sans CN;
+          font-weight: 800;
+          color: #333333;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          line-height: 31px;
+
+        }
+
+        .tips {
+          font-size: 12px;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          color: #333333;
+          overflow: hidden;
+          text-overflow: ellipsis;
+          white-space: nowrap;
+          // line-height: 20px;
+        }
+
+        .number {
+          margin-top: 7px;
+          height: 20px;
+          line-height: 20px;
+          background: linear-gradient(90deg, #FF4BD3, #7492FE);
+          font-size: 12px;
+          font-family: Source Han Sans CN;
+          font-weight: 400;
+          color: #FFFFFF;
+          padding: 0 5px;
+          width: fit-content;
+        }
+
       }
     }
   }
-  
-  .coupon-tips{
+
+  .coupon-tips {
     font-size: 14px;
     font-family: Source Han Sans CN;
     font-weight: 400;
@@ -464,45 +470,48 @@
     text-align: center;
     margin-top: 5px;
   }
-  .close{
-      margin-top: 15px;
-      margin-left: calc(50% - 22px);
-      width: 44px;
-    }
-  
-  
-    .wrapper {
-      display: flex;
-      align-items: center;
-      justify-content: center;
-      height: 100%;
-    }
-  
-    .wrapper-login{
-      width: 150px;
-      height: 40px;
-      background: #000000;
-      opacity: 0.6;
-      border-radius: 45px;
-      color: #ffffff;
-      line-height: 40px;
-      text-align:center;
-    }
-  
-    .login{
-      background-color:transparent;
-    }
 
-    .default{
-    width:100%;
+  .close {
+    margin-top: 15px;
+    margin-left: calc(50% - 22px);
+    width: 44px;
+  }
+
+
+  .wrapper {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+
+  .wrapper-login {
+    width: 150px;
+    height: 40px;
+    background: #000000;
+    opacity: 0.6;
+    border-radius: 45px;
+    color: #ffffff;
+    line-height: 40px;
+    text-align: center;
+  }
+
+  .login {
+    background-color: transparent;
+  }
+
+  .default {
+    width: 100%;
     position: relative;
     border-radius: 24px;
     font-size: 14px;
-    .default-img{
+
+    .default-img {
       position: absolute;
       top: calc(50% - 60px);
       left: calc(50% - 50px);
       color: #333;
+
       img {
         width: 100px;
         margin-bottom: 20px;
@@ -510,5 +519,5 @@
     }
   }
 }
-  </style>
+</style>
   

pages/activity/invite-user/fission.vue

@@ -0,0 +1,905 @@
+<template>
+  <v-container class="invite-user" fluid :class="`bg-${type}`">
+    <div class="rule" @click="show = true">规则</div>
+    <activity-invite-user-box class="box1">
+      <template #title>参与步骤</template>
+      <v-img class="cybz-content" :src="returnContent ? returnContent.img : null" />
+      <div class="cybz-content-text">
+        <div class="cybz-content-text-item">分享好友</div>
+        <div class="cybz-content-text-item">邀请好友下单</div>
+        <div class="cybz-content-text-item">
+          {{ returnContent ? returnContent.content : '' }}
+        </div>
+      </div>
+      <v-btn class="share-button" rounded @click="share()">
+        <template v-if="!($userAgent.isSzx || $userAgent.isSzxBrowser)">赶紧分享你的好友，送云机时长</template>
+        <template v-else>分享好友赚云机时长</template>
+      </v-btn>
+      <div class="dqdj-content">
+        <div class="dqdj-item">
+          <div class="dqdj-title">{{ level.currentLevelName }}</div>
+          <div class="dqdj-text">当前等级</div>
+        </div>
+        <div class="dqdj-content-line"></div>
+        <div class="dqdj-item">
+          <div class="dqdj-title">{{ level.shareFriendCount }}</div>
+          <div class="dqdj-text">分享好友数</div>
+        </div>
+        <div class="dqdj-content-line"></div>
+        <div class="dqdj-item">
+          <div class="dqdj-title">{{ level.boostValue }}</div>
+          <div class="dqdj-text">累计助力值</div>
+        </div>
+      </div>
+      <div class="progress">
+        <div class="progress-box" :style="`width: ${width}px`"></div>
+        <div class="progress-list">
+          <div v-for="item in level.levelAwardDetails" :key="item.goodsId" class="fnc">
+            <img v-if="item.status === 0" class="wh38" src="~/assets/image/activity/invite-user/box-gray.png" alt="">
+            <img v-else-if="item.status === 1" class="wh38" src="~/assets/image/activity/invite-user/box-close.png" alt="" @click="receiveLevelAward(item.goodsId)">
+            <img v-else-if="item.status === 2" class="wh38" src="~/assets/image/activity/invite-user/box-open.png" alt="">
+            <span class="progress-text">{{ item.levelName }}</span>
+          </div>
+        </div>
+      </div>
+    </activity-invite-user-box>
+    <div v-if="type === 2" :class="current ? 'box3 tab2' : 'box3'">
+      <div class="tab">
+        <div class="tab-item" @click="current = 0">{{ current === 1 ? '我的奖励' : '' }}</div>
+        <div class="tab-item" @click="current = 1">{{ current === 1 ? '排行榜' : '' }}</div>
+      </div>
+      <div v-show="current === 0">
+        <div v-if="myActivationCode.length" class="code-table">
+          <div class="table-header">
+            <table class="w-full">
+              <colgroup>
+                <col class="time-col" />
+                <col class="code-col" />
+                <col class="award-col" />
+                <col class="status-col" />
+              </colgroup>
+              <thead class="text-left text-sm whitespace-nowrap break-normal">
+                <tr>
+                  <th class="text-center">获取的时间</th>
+                  <th class="text-center">激活码编号</th>
+                  <th class="text-center">奖励内容</th>
+                  <th class="text-center">使用状态</th>
+                </tr>
+              </thead>
+            </table>
+          </div>
+          <div class="table-body">
+            <table class="w-full">
+              <colgroup>
+                <col class="time-col" />
+                <col class="code-col" />
+                <col class="award-col" />
+                <col class="status-col" />
+              </colgroup>
+              <tbody class="text-xs">
+                <tr v-for="(item, index) in myActivationCode" :key="index">
+                  <td class="whitespace-nowrap break-normal text-center">
+                    {{ item.createTime | formatDate('MM月DD日 HH:mm') }}
+                  </td>
+                  <td class="whitespace-nowrap break-normal text-center">
+                    <div class="flex">
+                      <span class="font-mono">{{ item.activationCode | activationCodeMask }} </span><span class="mx-1">|</span>
+                      <v-btn text small color="#FF9616" class="copy-btn" @click="copyCode(item)">复制</v-btn>
+                    </div>
+                  </td>
+                  <td class="whitespace-nowrap break-normal text-center">
+                    {{ item.awardStr }}
+                  </td>
+                  <td class="whitespace-nowrap break-normal text-center">
+                    <span :style="item.activationUse ? 'color: #FF1D02' : '#333333'">{{ ['未使用', '已使用', '已过期'][item.activationUse] }}</span>
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+            <div v-if="myActivationCode.length" v-intersect.quiet="codeLoadMoreIntersect" class="flex item-center justify-center">
+              <v-btn :loading="codeIsLoading" text small>
+                <template v-if="codeIsLoading">加载中</template>
+                <template v-else-if="codeHasMore">加载更多</template>
+                <template v-else>没有更多</template>
+              </v-btn>
+            </div>
+          </div>
+        </div>
+        <div v-else class="fwc">
+          <img src="~/assets/image/activity/invite-user/noReward@2x.png" alt="">
+        </div>
+      </div>
+      <div v-show="current === 1">
+        <div v-if="levelAwardRankings.length" class="code-table">
+          <div class="mylevel">
+            <div class="fcw">
+              <span class="c8F8F8F">当前排名</span>
+              <span>{{ currentRanking > 0 ? currentRanking : '暂未上榜' }}</span>
+            </div>
+            <div class="fcw">
+              <span class="c8F8F8F">本轮助力值</span>
+              <span>{{ boostValue }}</span>
+            </div>
+            <div class="fcw">
+              <span class="c8F8F8F">距上一名</span>
+              <span>{{ preRanking > 0 ? preRanking : '/' }}</span>
+            </div>
+            <div class="fcw">
+              <span class="c8F8F8F">距本轮排行结束时间</span>
+              <span>
+                <van-count-down :time="currentEndTime * 1000" format="DD 天 HH 时 mm 分 ss 秒" />
+              </span>
+            </div>
+          </div>
+          <div class="table-header">
+            <table class="w-full">
+              <colgroup>
+                <col class="num-col" />
+                <col class="user-col" />
+                <col class="friend-col" />
+                <col class="award-col" />
+              </colgroup>
+              <thead class="text-sm whitespace-nowrap break-normal">
+                <tr>
+                  <th class="text-center">排名</th>
+                  <th class="text-center">用户</th>
+                  <th class="text-center">好友助力值</th>
+                  <th class="text-center">排名奖励</th>
+                </tr>
+              </thead>
+            </table>
+          </div>
+          <div class="table-body">
+            <table class="w-full">
+              <colgroup>
+                <col class="num-col" />
+                <col class="user-col" />
+                <col class="friend-col" />
+                <col class="award-col" />
+              </colgroup>
+              <tbody class="text-xs">
+                <tr v-for="(item, index) in levelAwardRankings" :key="index">
+                  <td class="whitespace-nowrap break-normal text-center">
+                    <img v-if="item.ranking === 1" class="w24h28" src="~/assets/image/activity/invite-user/no1.png" alt="">
+                    <img v-else-if="item.ranking === 2" class="w24h28" src="~/assets/image/activity/invite-user/no2.png" alt="">
+                    <img v-else-if="item.ranking === 3" class="w24h28" src="~/assets/image/activity/invite-user/no3.png" alt="">
+                    <span v-else>{{ item.ranking }}</span>
+                  </td>
+                  <td class="whitespace-nowrap break-normal text-center">
+                    {{ item.userName }}
+                  </td>
+                  <td class="whitespace-nowrap break-normal text-center">
+                    {{ item.boostValue }}
+                  </td>
+                  <td class="whitespace-nowrap break-normal text-center">
+                    {{ item.awardStr }}
+                  </td>
+                </tr>
+              </tbody>
+            </table>
+          </div>
+        </div>
+        <div v-else class="fwc">
+          <img src="~/assets/image/activity/invite-user/nodata.png" alt="">
+        </div>
+      </div>
+    </div>
+    <img class="w373h192" src="~/assets/image/activity/invite-user/rule2.png" alt="">
+    <van-popup v-model="show" style="background: transparent;padding-bottom: 60px;width: 100%;">
+      <activity-invite-user-box class="box4">
+        <template #title>活动规则</template>
+        <div class="text-sm" v-html="activityRules"></div>
+      </activity-invite-user-box>
+      <van-icon name="close" class="close1" color="#939393" @click="show = false;" />
+    </van-popup>
+  </v-container>
+</template>
+
+<script>
+import { Toast } from 'vant';
+export default {
+  auth: false,
+  name: 'Fission',
+  filters: {
+    activationCodeMask(value) {
+      return value.replace(/(.{2})(.*)(.{2}$)/, '$1**$3');
+    },
+    timeStamp(StatusMinute) {
+      const day = parseInt(StatusMinute / 60 / 60 / 24);
+      const hour = parseInt((StatusMinute / 60 / 60) % 24);
+      const min = parseInt(StatusMinute / 60 % 60);
+      StatusMinute = '';
+      if (day > 0) {
+        StatusMinute = day + '天';
+      }
+      if (hour > 0) {
+        StatusMinute += hour + '小时';
+      }
+      if (min > 0) {
+        StatusMinute += parseFloat(min) + '分钟';
+      }
+      return StatusMinute;
+    }
+  },
+  data() {
+    return {
+      show: false,
+      current: 0,
+      data: {
+        todayIncomeStarCoin: 0,
+        totalIncomeStarCoin: 0,
+        todayBuyOrderCount: 0,
+        totalBuyOrderCount: 0,
+        todayBuyOrderSuccessCount: 0,
+        totalBuyOrderSuccessCount: 0,
+        withdrawStarCoinNum: 0,
+        inviteUserName: null,
+        activityId: null,
+        status: 0,
+        type: 2
+      },
+      level: {
+        currentLevelName: '',
+        activityId: '',
+        levelAwardDetails: [],
+        shareFriendCount: 0,
+        boostValue: 0
+      },
+      activityRules: '',
+      myActivationCode: [],
+      levelAwardRankings: [],
+      myCodeFrom: {
+        activityId: null,
+        pageNum: 1,
+        pageSize: 8,
+      },
+      codeTotal: -1,
+      codeIsLoading: false,
+      client: 1,
+      token: '',
+      width: 0,
+      boostValue: 0,
+      currentEndTime: 0,
+      currentRanking: 0,
+      preRanking: 0
+    };
+  },
+  async fetch() {
+    // 页面初始化后触发
+    try {
+      this.token = this.$route.query.token;
+      await this.getActiveInfo();
+      this.$native.setShareInfo(this.shareInfo);
+      await Promise.all([
+        this.getActivityRules(),
+        this.type === 2 && this.getMyActivationCode(this.myCodeFrom),
+        this.myCodeFrom.activityId && this.getRanking({ activityId: this.myCodeFrom.activityId })
+      ]);
+    } catch (error) {
+      Toast({
+        message: error.message,
+        duration: 4000
+      });
+    }
+    if (this.$userAgent.isSzx && this.$userAgent.isAndroid) {
+      this.client = 1;
+    } else if (this.$userAgent.isSzx && this.$userAgent.isIos) {
+      this.client = 2;
+    } else if (this.$userAgent.isMiniProgram) {
+      this.client = 5;
+    } else {
+      this.client = 7;
+    }
+  },
+  head: {
+    title: '邀请好友'
+  },
+  computed: {
+    returnContent() {
+      return {
+        1: {
+          img: require('@/assets/image/activity/invite-user/cybz-content@2x.png'),
+          content: '返星币换现金',
+        },
+        2: {
+          img: require('@/assets/image/activity/invite-user/cybz-content-2@2x.png'),
+          content: '云机时长奖励',
+        },
+        3: {
+          img: require('@/assets/image/activity/invite-user/cybz-content-3@2x.png'),
+          content: '返积分',
+        },
+      }[this.type];
+    },
+    codeHasMore() {
+      return (
+        this.codeTotal < 0 ||
+        this.myCodeFrom.pageNum * this.myCodeFrom.pageSize < this.codeTotal
+      );
+    },
+    dataList() {
+      switch (this.type) {
+        case 1: {
+          return [
+            { label: '邀请用户总数', value: this.data.totalPromoter },
+            { label: '购买总订单数', value: this.data.totalBuyOrderCount }
+          ];
+        }
+        case 2: {
+          return [
+            { label: '邀请用户总数', value: this.data.totalPromoter },
+            { label: '购买总订单数', value: this.data.totalBuyOrderCount }
+          ];
+        }
+        case 3: {
+          return [
+            { label: '邀请用户总数', value: this.data.totalPromoter },
+            { label: '购买总订单数', value: this.data.totalBuyOrderCount }
+          ];
+        }
+        default: {
+          return [];
+        }
+      }
+    },
+    type() {
+      return 2;
+    },
+    shareUrl() {
+      return (
+        location.origin +
+        this.$router.resolve({
+          path: '/activity/invite-user/register-fission/',
+          query: {
+            invitationUserName: this.data.inviteUserName,
+            activityId: this.data.activityId,
+            type: this.type,
+          },
+        }).href
+      );
+    },
+    shareInfo() {
+      if (this.$userAgent.isMiniProgram) {
+        return {
+          title: '唔即云APP',
+          path: '/pages/home/home',
+          imgUrl: location.origin + require('~/assets/image/logo.png'),
+        };
+      }
+      return {
+        title: '唔即云云手机',
+        desc: `畅玩“原神”“幻塔”，24小时在线，不限下载流量的手机`,
+        link: this.shareUrl,
+        imgUrl: location.origin + require('~/assets/image/logo.png'),
+      };
+    }
+  },
+  mounted() {
+    this.makePoint('activity_Share_PV')
+    this.makePoint('activity_Share_UV')
+  },
+  methods: {
+    async receiveLevelAward(goodsId) {
+      try {
+        const res = await this.$axios.$post('/activity/v1/level/award/receiveLevelAward', { activityId: this.myCodeFrom.activityId, goodsId }, { headers: { Authorization: this.token } });
+        Toast({
+          message: res.msg,
+          position: 'top'
+        });
+        if (this.myCodeFrom.activityId) {
+          await this.myLevelAward();
+        }
+        this.myCodeFrom.pageNum = 1;
+        this.myActivationCode = [];
+        this.getMyActivationCode(this.myCodeFrom);
+        if (this.myCodeFrom.activityId) {
+          this.getRanking({ activityId: this.myCodeFrom.activityId });
+        }
+      } catch (err) {
+        Toast({
+          message: err.message,
+          position: 'top'
+        });
+      }
+    },
+    async myLevelAward() {
+      const res = await this.$axios.$get(`/activity/v1/level/award/myLevelAward?activityId=${this.myCodeFrom.activityId}`, { headers: { Authorization: this.token } });
+      this.level = res.data;
+      if (this.level.levelAwardDetails) {
+        this.width = 0;
+        const levelLength = 280 / (this.level.levelAwardDetails.length - 1)
+        this.level.levelAwardDetails.forEach((item, index) => {
+          if (item.status > 0) {
+            if (index > 0) {
+              this.width += levelLength
+            }
+            if (index === 0 || index === this.level.levelAwardDetails.length - 1) {
+              this.width += 14
+            }
+          }
+        })
+      }
+    },
+    async getActiveInfo() {
+      const res = await this.$axios.$get('/activity/v1/inviteUser/orderRelation/starCoinOverview', { headers: { Authorization: this.token } });
+      this.data = res.data;
+      this.myCodeFrom.activityId = res.data.activityId;
+      if (this.myCodeFrom.activityId) {
+        await this.myLevelAward();
+      }
+    },
+    async getMyActivationCode(params) {
+      try {
+        this.codeIsLoading = true;
+        const res = await this.$axios.$get('/activity/v1/inviteUser/orderRelation/myActivationCode', { params, headers: { Authorization: this.token } });
+        this.codeTotal = res.data.total;
+
+        this.myActivationCode.push(
+          ...(res.data.list ?? [])
+        );
+        this.myCodeFrom = params;
+      } finally {
+        this.codeIsLoading = false;
+      }
+    },
+    async getRanking(params) {
+      try {
+        this.codeIsLoading = true;
+        const res = await this.$axios.$get('/activity/v1/level/award/ranking', { params, headers: { Authorization: this.token } });
+        this.boostValue = res.data.boostValue
+        this.currentEndTime = res.data.currentEndTime
+        this.currentRanking = res.data.currentRanking
+        this.preRanking = res.data.preRanking
+        this.levelAwardRankings.push(
+          ...(res.data.levelAwardRankings ?? [])
+        );
+      } finally {
+        this.codeIsLoading = false;
+      }
+    },
+    async share() {
+      if (this.data.status !== 1) {
+        if (this.data.status === 0) {
+          Toast({
+            message: '当前活动已过期',
+            position: 'top'
+          });
+          return
+        }
+        if (this.data.status === 2) {
+          Toast({
+            message: '当前活动未开启',
+            position: 'top'
+          });
+          return
+        }
+        if (this.data.status === 3) {
+          Toast({
+            message: '当前活动已结束',
+            position: 'top'
+          });
+          return
+        }
+        Toast({
+          message: '未知活动状态',
+          position: 'top'
+        });
+        return
+      }
+
+      this.$tongji.trackEvent('活动', '分享', '', 0);
+      if (this.$userAgent.isSzx || this.$userAgent.isSzxBrowser) {
+        // app环境
+        this.$native.share(this.shareInfo);
+        this.makePoint('activity_Share_分享好友按钮');
+      } else {
+        // 浏览器环境
+        await this.$native.clipboard.writeText(`${this.shareUrl} 唔即云云手机`);
+        // throw new Error('1231');
+        this.$toast.success('链接复制成功');
+        this.makePoint('activity_Share_复制链接');
+      }
+    },
+    makePoint(positionButton) {
+      this.$axios.$post('/public/v5/buriedPointRecord/reportRecords', [
+        {
+          client: this.client,
+          eventCode: '28_分享活动',
+          userName: this.$auth.user.username,
+          positionButton,
+          operationTime: this.getCurrentTime(),
+          phoneNumber: this.$auth.user.phone,
+          deviceId: ''
+        },
+      ]);
+    },
+    getCurrentTime() {
+      const date = new Date(); // 当前时间
+      const year = date.getFullYear() // 年
+      const month = this.repair(date.getMonth() + 1); // 月
+      const day = this.repair(date.getDate()); // 日
+      const hour = this.repair(date.getHours()); // 时
+      const minute = this.repair(date.getMinutes()); // 分
+      const second = this.repair(date.getSeconds()); // 秒
+      // 当前时间 
+      const curTime = year + "-" + month + "-" + day +
+        " " + hour + ":" + minute + ":" + second;
+      return curTime;
+    },
+    repair(i) {
+      if (i >= 0 && i <= 9) {
+        return "0" + i;
+      } else {
+        return i;
+      }
+    },
+    async getActivityRules() {
+      const agreementCoding = {
+        1: 'iuserrules01',
+        2: 'iuserrules02',
+        3: 'iuserrules03',
+      }[this.type];
+      if (agreementCoding) {
+        const res = await this.$axios.$get(
+          '/public/v4/agreement/content/getContentByType',
+          {
+            params: {
+              agreementCoding,
+              type: 1,
+            },
+          },
+        );
+
+        this.activityRules = res.data.content
+          .replace(/[\d\D]*<body>([\d\D]+)<\/body>[\d\D]*/i, '$1')
+          .replace(/<div class="phone-container">([\d\D]+)<\/div>/g, '$1');
+      }
+    },
+    async copyCode(item) {
+      await this.$native.clipboard.writeText(item.activationCode);
+      Toast({
+        message: '复制激活码，请在【我的-兑换中心】兑换'
+      });
+      this.makePoint('activity_Share_激活码复制')
+    },
+    codeLoadMoreIntersect(event) {
+      if (event[0].isIntersecting && this.codeHasMore && !this.codeIsLoading) {
+        this.getMyActivationCode({
+          ...this.myCodeFrom,
+          pageNum: this.myCodeFrom.pageNum + 1,
+        });
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.w373h192 {
+  width: 373px;
+  height: 192px;
+  display: block;
+  margin: 17px auto 0;
+}
+.fcw {
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  align-items: center;
+  font-size: 12px;
+  color: #333333;
+}
+
+.c8F8F8F {
+  color: #8F8F8F;
+  margin-bottom: 8px;
+}
+
+.mylevel {
+  width: 358px;
+  height: 68px;
+  background: #FFFFFF;
+  box-shadow: 0px 2px 16px 0px rgba(243, 93, 67, 0.22);
+  border-radius: 6px;
+  margin-left: -12px;
+  margin-top: 20px;
+  margin-bottom: 20px;
+  display: flex;
+  justify-content: space-around;
+  align-items: center;
+}
+
+.rule {
+  width: 24px;
+  height: 56px;
+  line-height: 28px;
+  background: rgba(0, 0, 0, 0.19);
+  border-radius: 6px 0px 0px 6px;
+  font-size: 15px;
+  font-weight: 400;
+  color: #FFFFFF;
+  position: absolute;
+  right: 0;
+  top: 28px;
+  text-align: center;
+}
+
+.close1 {
+  font-size: 30px;
+  text-align: center;
+  display: block;
+}
+
+.fwc {
+  text-align: center;
+
+  img {
+    width: 75px;
+    height: 83px;
+    margin-top: 120px;
+  }
+}
+
+.invite-user {
+  color: #333;
+  background-size: 100% auto;
+  overflow: hidden;
+  padding: 0;
+  padding-bottom: env(safe-area-inset-bottom, 30px);
+  background-color: #F67350;
+
+  &.bg-1 {
+    background-image: url('~/assets/image/activity/invite-user/bg@2x.png');
+  }
+
+  &.bg-2 {
+    background-image: url('~/assets/image/activity/invite-user/bg-6@2x.png');
+  }
+
+  &.bg-3 {
+    background-image: url('~/assets/image/activity/invite-user/bg-3@2x.png');
+  }
+}
+
+.box1 {
+  margin-top: 460px;
+
+  .cybz-content {
+    width: 305px;
+    height: 75px;
+    margin: auto;
+    display: block;
+  }
+
+  .cybz-content-text {
+    display: grid;
+    grid-template-columns: 1fr 1fr 1fr;
+    font-size: 12px;
+    color: #333;
+
+    .cybz-content-text-item {
+      text-align: center;
+    }
+  }
+
+  .share-button {
+    display: block;
+    margin: auto;
+    width: 302px !important;
+    height: 62px !important;
+    background-image: url('~/assets/image/activity/invite-user/share-button@2x.png');
+    background-size: 100% 100%;
+    margin-top: 24px;
+    color: #dd1b0d;
+    font-size: 18px;
+    font-weight: bold;
+  }
+
+  .dqdj-content {
+    width: 308px;
+    height: 71px;
+    background: #f9f1f5;
+    border-radius: 6px;
+    margin: 15px auto 0;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .dqdj-content-line {
+      width: 1px;
+      height: 32px;
+      background: #ff1d02;
+      opacity: 0.1;
+    }
+
+    .dqdj-item {
+      width: 96px;
+      text-align: center;
+    }
+
+    .dqdj-title {
+      font-size: 14px;
+      font-weight: 600;
+      color: #ff1d02;
+      line-height: 20px;
+      margin-bottom: 3px;
+    }
+
+    .dqdj-text {
+      font-size: 12px;
+      font-weight: 400;
+      color: #333333;
+      line-height: 17px;
+    }
+  }
+
+  .progress {
+    width: 308px;
+    height: 8px;
+    background: #e8e8e8;
+    border-radius: 4px;
+    margin: 34px auto 33px;
+    position: relative;
+
+    .progress-box {
+      height: 8px;
+      background: linear-gradient(270deg, #ff8a00 0%, #ff4200 100%);
+      border-radius: 4px;
+      position: absolute;
+      top: 0;
+      left: 0;
+    }
+
+    .wh38 {
+      width: 38px;
+      height: 38px;
+    }
+
+    .fnc {
+      display: flex;
+      flex-direction: column;
+      justify-content: center;
+      align-items: center;
+    }
+
+    .progress-text {
+      font-size: 12px;
+      color: #8f8f8f;
+      line-height: 17px;
+      margin-top: 5px;
+    }
+
+    .progress-list {
+      width: 298px;
+      position: absolute;
+      left: 5px;
+      top: -19px;
+      display: flex;
+      justify-content: space-between;
+    }
+  }
+}
+
+.box2 {
+  .value {
+    color: #ff6600;
+  }
+
+  ::v-deep .box-main {
+    padding-left: 20px;
+    padding-right: 20px;
+  }
+}
+
+.box3 {
+  width: 345px;
+  height: 523px;
+  margin: 25px auto 0;
+  background: url('~/assets/image/activity/invite-user/box2@2x.png');
+  background-size: 100% 100%;
+  padding: 0 4px;
+  box-sizing: border-box;
+
+  &.tab2 {
+    background: url('~/assets/image/activity/invite-user/box@2x.png') !important;
+    background-size: 100% 100% !important;
+    height: 627px !important;
+  }
+
+  .tab {
+    display: flex;
+    width: 307px;
+    justify-content: space-between;
+    margin: 0 auto;
+
+    .tab-item {
+      width: 146px;
+      height: 44px;
+      text-align: center;
+      line-height: 44px;
+      font-size: 16px;
+      font-weight: 500;
+      color: #ffffff;
+    }
+  }
+
+  ::v-deep .box-main {
+    padding-left: 10px;
+    padding-right: 10px;
+  }
+}
+
+.code-table {
+  .table-body {
+    max-height: 430px;
+    overflow-y: auto;
+  }
+
+  .time-col {
+    width: 105px;
+  }
+
+  .code-col {
+    width: 94px;
+  }
+
+  .award-col {
+    width: 85px;
+  }
+
+  .status-col {
+    width: 60px;
+  }
+
+  .num-col {
+    width: 53px;
+    text-align: center;
+  }
+
+  .user-col {
+    width: 92px;
+    text-align: center;
+  }
+
+  .friend-col {
+    width: 85px;
+    text-align: center;
+  }
+
+  .award-col {
+    width: 96px;
+    text-align: center;
+  }
+
+  tr {
+    height: 40px;
+    color: #8F8F8F;
+  }
+
+  td {
+    height: 40px;
+    color: #333;
+  }
+
+  .copy-btn {
+    min-width: 0 !important;
+    height: auto !important;
+    padding: 0 !important;
+  }
+}
+
+.box4::v-deep .box-main {
+  padding-left: 10px;
+  padding-right: 10px;
+}
+
+.table-header {
+  margin: 0 2px;
+  background: #F9F1F5;
+}
+
+.w24h28 {
+  width: 24px;
+  height: 28px;
+}
+</style>

pages/activity/invite-user/register-fission.vue

@@ -0,0 +1,263 @@
+<template>
+  <v-container class="register-for-invite pa-0" fluid :class="`type-${type}`">
+    <div class="box1">
+      <validation-observer ref="observer" class="mlr10" slim>
+        <v-form @submit.prevent="submit()">
+          <validation-provider v-slot="{ errors }" ref="providerPhome" name="手机号码" rules="phone" slim>
+            <div style="display: flex;">
+              <div class="label-item">
+                手机号
+              </div>
+              <v-text-field v-model="form.phone" v-mask="$mask.phone" background-color="#F6F6F6" name="phone" required :error-messages="errors" placeholder="请输入11位手机号" solo type="tel" flat maxlength="11" @blur="makePoint(form.channelCode + '_Promotion _activities_输入手机号')" />
+            </div>
+          </validation-provider>
+          <validation-provider v-slot="{ errors }" name="短信验证码" rules="code" slim>
+            <div style="display: flex;">
+              <div class="label-item">
+                验证码
+              </div>
+              <v-text-field ref="code" v-model="form.code" v-mask="'######'" class="w220" background-color="#F6F6F6" label="" :error-messages="errors" name="code" maxlength="6" required placeholder="请输入验证码" solo flat type="tel" @blur="makePoint(form.channelCode + '_Promotion _activities_输入验证码')">
+                <template #append>
+                  <v-btn :loading="codeSending" :disabled="codeTime > 0" small depressed color="#1E3ADE" plain class="text-base" @click="sendSmsCode()">
+                    <template v-if="codeTime > 0">{{ codeTime }}s后重新获取</template>
+                    <template v-else>获取验证码</template>
+                  </v-btn>
+                </template>
+              </v-text-field>
+            </div>
+          </validation-provider>
+          <div class="submit-btn-box">
+            <v-btn type="submit" :loading="submitting" class="submit-btn" rounded>注册并下载APP</v-btn>
+          </div>
+        </v-form>
+      </validation-observer>
+    </div>
+  </v-container>
+</template>
+
+<script>
+import { Toast } from 'vant';
+import { registerForInvite } from '~/api/user/client.js';
+import { sendSmsCode } from '~/api/message/phone.js';
+export default {
+  auth: false,
+  name: 'RegisterForInvite',
+  data() {
+    return {
+      form: {
+        phone: '',
+        code: '',
+        invitationUserName: null,
+        activityId: null,
+        invitationType: 5
+      },
+      codeSending: false,
+      codeTime: 0,
+      submitting: false,
+      client: 1
+    };
+  },
+  fetch() {
+    this.form.invitationUserName = this.$route.query.invitationUserName;
+    this.form.activityId = this.$route.query.activityId;
+    if (this.$userAgent.isSzx && this.$userAgent.isAndroid) {
+      this.client = 1;
+    } else if (this.$userAgent.isSzx && this.$userAgent.isIos) {
+      this.client = 2;
+    } else if (this.$userAgent.isMiniProgram) {
+      this.client = 5;
+    } else {
+      this.client = 7;
+    }
+  },
+  head: {
+    title: '注册',
+  },
+  computed: {
+    type() {
+      return 2;
+    },
+  },
+  mounted() {
+    this.makePoint('activity_download_PV')
+    this.makePoint('activity_download_UV')
+  },
+  methods: {
+    maskPhone(value) {
+      return [/\d/, /\d/];
+    },
+    makePoint(positionButton) {
+      this.$axios.$post('/public/v5/buriedPointRecord/reportRecords', [
+        {
+          client: this.client,
+          eventCode: '28_分享活动',
+          userName: '',
+          positionButton,
+          operationTime: this.getCurrentTime(),
+          phoneNumber: '',
+          deviceId: ''
+        },
+      ]);
+    },
+    getCurrentTime() {
+      const date = new Date(); // 当前时间
+      const year = date.getFullYear() // 年
+      const month = this.repair(date.getMonth() + 1); // 月
+      const day = this.repair(date.getDate()); // 日
+      const hour = this.repair(date.getHours()); // 时
+      const minute = this.repair(date.getMinutes()); // 分
+      const second = this.repair(date.getSeconds()); // 秒
+      // 当前时间 
+      const curTime = year + "-" + month + "-" + day +
+        " " + hour + ":" + minute + ":" + second;
+      return curTime;
+    },
+    repair(i) {
+      if (i >= 0 && i <= 9) {
+        return "0" + i;
+      } else {
+        return i;
+      }
+    },
+    async submit() {
+      try {
+        this.makePoint('activity_Share_注册并下载app按钮')
+        this.submitting = true;
+        const valid = await this.$refs.observer.validate();
+        if (valid) {
+          this.$tongji.trackEvent('活动', '注册', '', 0);
+          await registerForInvite(this, this.form);
+          Toast({
+            message: '注册成功',
+            position: 'top',
+            duration: 3000
+          });
+          this.openSzxApp();
+        }
+      } catch (error) {
+        Toast({
+          message: error.message,
+          position: 'top',
+          duration: 3000
+        });
+        if(error.response.data.status === 1114) {
+          this.openSzxApp();
+        }
+      } finally {
+        this.submitting = false;
+      }
+    },
+    openSzxApp() {
+      this.$callSzx.open({ param: {}, path: '' });
+    },
+    async sendSmsCode() {
+      try {
+        this.codeSending = true;
+        const validationResult = await this.$refs.providerPhome.validate();
+
+        if (validationResult.valid) {
+          this.$tongji.trackEvent('活动', '发送短信', '', 0);
+          this.makePoint('activity_Share_获得验证码')
+          const res = await sendSmsCode(this, {
+            type: 'common',
+            authorizationType: 5,
+            phone: this.form.phone,
+          });
+          this.codeTime = 60;
+          this.codeInterval = setInterval(
+            () => --this.codeTime <= 0 && clearInterval(this.codeInterval),
+            1000,
+          );
+          Toast({
+            message: res.msg,
+            position: 'top',
+            duration: 3000
+          });
+        }
+      } catch (error) {
+        Toast({
+          message: error.message,
+          duration: 3000
+        });
+      } finally {
+        this.codeSending = false;
+      }
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+.mlr10 {
+  margin: 4px;
+  border: 1px solid #FDAF7D;
+  border-radius: 18px 18px 18px 18px;
+  overflow: hidden;
+  width: 344px;
+  height: 227px;
+  box-sizing: border-box;
+  padding: 25px 19px 23px 18px;
+}
+
+.register-for-invite {
+  color: #333;
+  background-size: 100% auto;
+  // background-position-y: -44px;
+  overflow: hidden;
+  padding-bottom: 30px;
+  min-height: 880px;
+
+  &.type-1 {
+    background-image: url('~/assets/image/activity/invite-user/bg@2x.png');
+  }
+
+  &.type-2 {
+    background-image: url('~/assets/image/activity/invite-user/bj@2x.png');
+  }
+
+  &.type-3 {
+    background-image: url('~/assets/image/activity/invite-user/bg-3@2x.png');
+  }
+}
+
+.box1 {
+  margin: 265px auto 0;
+  width: 350px;
+  height: 234px;
+  background: #FFFFFF;
+  border-radius: 18px 18px 18px 18px;
+  overflow: hidden;
+}
+
+.submit-btn-box {
+  // 解决百度APP广告屏蔽导致按钮被隐藏
+  display: flex !important;
+  justify-content: center;
+}
+
+.submit-btn {
+  display: block;
+  width: 308px !important;
+  height: 40px !important;
+  background: linear-gradient(0deg, #F34927 0%, #FDAF7D 100%);
+  border-radius: 20px;
+  text-align: center;
+  font-size: 18px;
+  font-weight: 500;
+  color: #FFFFFF !important;
+  line-height: 40px;
+}
+
+.label-item {
+  width: 64px;
+  font-size: 14px;
+  color: #333;
+  height: 12.8vw;
+  line-height: 12.8vw;
+  text-align: center;
+}
+
+.w220 {
+  width: 220px;
+}
+</style>

pages/activity/lottery/index.vue

@@ -21,19 +21,20 @@
     <RoundTurntable ref="roundTurntable" :prize-data="prizeData" :rotate-circle="rotateCircle" :during-time="duringTime" :turntable-style-option="turntableStyleOption" class="turntable" @endRotation="endRotation">
       <template slot="item" slot-scope="scope">
         <div class="turntable-name">
-          <span class="fs15">￥</span>{{ scope.item.level }}
+          {{ scope.item.level }}
         </div>
         <div class="turntable-img">
-          <img src="~/assets/image/activity/lottery/yearCard.png" />
+          <img v-if="scope.item.type === 1" src="~/assets/image/activity/lottery/yearCard.png" />
+          <img v-if="scope.item.type === 2" src="~/assets/image/activity/lottery/monthCard.png" />
+          <img v-if="scope.item.type === 3" src="~/assets/image/activity/lottery/couponCard.png" />
         </div>
       </template>
     </RoundTurntable>
     <van-popup v-model="showPay" style="background: transparent;" :close-on-click-overlay="false">
       <div class="dialog-view">
         <div>
-          <img v-if="luckDrawType===0" class="w219h26" src="~/assets/image/activity/lottery/title-9.9.png" alt="">
-          <img v-if="luckDrawType===1" class="w219h26" src="~/assets/image/activity/lottery/15.9.png" alt="">
-          <img v-if="luckDrawType===2" class="w219h26" src="~/assets/image/activity/lottery/9.9.png" alt="">
+          <img class="w235h20" src="~/assets/image/activity/lottery/15.9.png" alt="">
+          <div class="w264h28">购买最高有机会获得5折券</div>
           <van-icon name="close" class="close" color="#939393" @click="closed();" />
           <div class="popup-view">
             <div class="meal-item">
@@ -41,7 +42,7 @@
                 <div class="coupon-title">
                   <span>￥</span><span class="txt2">{{ yearActualPrice }}</span>
                 </div>
-                <div class="txt4"> 1年使用权 每月30小时</div>
+                <div class="txt4"> 1年使用权 每月60小时</div>
               </div>
               <div class="fb">
                 <div v-for="item in mealList" :key="item.id" :class="selMealId === item.id ? 'coupon-2 active' : 'coupon-2'" @click="selMealId = item.id;originalPrice=+item.originalPrice;actualPrice=item.actualPrice;copy=item.day===30?'包月':'包年';makePoint(item.day === 30 ? 'activity_38月卡' : 'activity_268年卡');">
@@ -126,7 +127,7 @@
           <van-icon :name="payType === item? require('~/assets/image/activity/lottery/select-round-icon.png'): require('~/assets/image/activity/lottery/unselect-round-icon.png')" size="24" />
         </div>
         <div class="fnbc1">
-          <div class="btn-leave" @click="show = false;makePoint('activity_狠心离开');">
+          <div class="btn-leave" @click="show = false;makePoint(`activity_${luckDrawType===2 ? '狠心离开' : '继续抽奖'}`);">
             {{luckDrawType===2 ? '狠心离开' : '继续抽奖' }}
           </div>
           <div class="btn-pay" @click="createOrder">立即购买</div>
@@ -215,27 +216,33 @@ export default {
       prizeData: [
         {
           id: 6,
-          level: 29.9,
+          level: '7折',
+          type: 1
         },
         {
           id: 3,
-          level: 58,
+          level: '￥58',
+          type: 2
         },
         {
           id: 2,
-          level: 9.9,
+          level: '￥?.9',
+          type: 3
         },
         {
           id: 4,
-          level: 39.9,
+          level: '8折',
+          type: 3
         },
         {
           id: 5,
-          level: 378,
+          level: '9折',
+          type: 3
         },
         {
           id: 1,
-          level: 15.9,
+          level: '￥?.9',
+          type: 1
         },
       ],
       // 转动的圈数
@@ -485,20 +492,36 @@ export default {
       }
     },
     makePoint(positionButton) {
-      const now = new Date();
       this.$axios.$post('/public/v5/buriedPointRecord/reportRecords', [
         {
           client: this.client,
           eventCode: '27_抽奖流程',
           userName: this.$auth.user.username,
           positionButton,
-          operationTime: now
-            .toISOString()
-            .replace(/T/g, ' ')
-            .replace(/\.[\d]{3}Z/, ''),
+          operationTime: this.getCurrentTime()
         },
       ]);
     },
+    getCurrentTime() {
+      const date = new Date(); // 当前时间
+      const year = date.getFullYear() // 年
+      const month = this.repair(date.getMonth() + 1); // 月
+      const day = this.repair(date.getDate()); // 日
+      const hour = this.repair(date.getHours()); // 时
+      const minute = this.repair(date.getMinutes()); // 分
+      const second = this.repair(date.getSeconds()); // 秒
+      // 当前时间 
+      const curTime = year + "-" + month + "-" + day +
+        " " + hour + ":" + minute + ":" + second;
+      return curTime;
+    },
+    repair(i) {
+      if (i >= 0 && i <= 9) {
+        return "0" + i;
+      } else {
+        return i;
+      }
+    },
     // 已经转动完转盘触发的函数
     endRotation() {
       // 提示中奖
@@ -701,12 +724,24 @@ export default {
   border-radius: 5px;
   padding: 7.5px;
 }
-.w219h26 {
-  width: 219px;
-  height: 26px;
+.w235h20 {
+  width: 235px;
+  height: 20px;
   margin: 58px auto 0;
   display: block;
 }
+.w264h28 {
+  width: 264px;
+  height: 28px;
+  background: rgba($color: #ffffff, $alpha: 0.2);
+  border-radius: 14px;
+  font-size: 18px;
+  font-weight: 500;
+  color: #FFFFFF;
+  line-height: 28px;
+  text-align: center;
+  margin: 7px auto 0;
+}
 .sl {
   position: absolute;
   text-align: center;
@@ -843,7 +878,7 @@ export default {
   border-radius: 10px;
   background: #ffffff;
   text-align: center;
-  margin-top: 26.5px;
+  margin-top: 12px;
 }
 
 .popup-view-rule {

pages/activity/lottery/pc.vue

@@ -21,19 +21,20 @@
     <RoundTurntable ref="roundTurntable" :prize-data="prizeData" :rotate-circle="rotateCircle" :during-time="duringTime" :turntable-style-option="turntableStyleOption" class="turntable" @endRotation="endRotation">
       <template slot="item" slot-scope="scope">
         <div class="turntable-name">
-          <span class="fs15">￥</span>{{ scope.item.level }}
+          {{ scope.item.level }}
         </div>
         <div class="turntable-img">
-          <img src="~/assets/image/activity/lottery/yearCard.png" />
+          <img v-if="scope.item.type === 1" src="~/assets/image/activity/lottery/yearCard.png" />
+          <img v-if="scope.item.type === 2" src="~/assets/image/activity/lottery/monthCard.png" />
+          <img v-if="scope.item.type === 3" src="~/assets/image/activity/lottery/couponCard.png" />
         </div>
       </template>
     </RoundTurntable>
     <van-popup v-model="showPay" style="background: transparent;" :close-on-click-overlay="false">
       <div class="dialog-view">
         <div>
-          <img v-if="luckDrawType===0" class="w219h26" src="~/assets/image/activity/lottery/title-9.9.png" alt="">
-          <img v-if="luckDrawType===1" class="w219h26" src="~/assets/image/activity/lottery/15.9.png" alt="">
-          <img v-if="luckDrawType===2" class="w219h26" src="~/assets/image/activity/lottery/9.9.png" alt="">
+          <img class="w235h20" src="~/assets/image/activity/lottery/15.9.png" alt="">
+          <div class="w264h28">购买最高有机会获得5折券</div>
           <van-icon name="close" class="close" color="#939393" @click="closed();" />
           <div class="popup-view">
             <div class="meal-item">
@@ -41,7 +42,7 @@
                 <div class="coupon-title">
                   <span>￥</span><span class="txt2">{{ yearActualPrice }}</span>
                 </div>
-                <div class="txt4"> 1年使用权 每月30小时</div>
+                <div class="txt4"> 1年使用权 每月60小时</div>
               </div>
               <div class="fb">
                 <div v-for="item in mealList" :key="item.id" :class="selMealId === item.id ? 'coupon-2 active' : 'coupon-2'" @click="selMealId = item.id;originalPrice=+item.originalPrice;actualPrice=item.actualPrice;copy=item.day===30?'包月':'包年';makePoint(item.day === 30 ? 'activity_38月卡' : 'activity_268年卡');">
@@ -73,7 +74,7 @@
               <van-icon :name="payType === item? require('~/assets/image/activity/lottery/select-round-icon.png'): require('~/assets/image/activity/lottery/unselect-round-icon.png')" size="24" />
             </div>
             <div v-if="time" class="count-down-time">
-              {{luckDrawType===1 ? '15.9':'9.9'}}元年卡抢购资格有效期：
+              特权年卡抢购资格有效期：
               <van-count-down :time="time">
                 <template #default="timeData">
                   <span class="block">{{ timeData.hours }}</span>
@@ -103,7 +104,7 @@
       <div class="popup-view popup-view-leave">
         <div class="txt1">确定离开吗</div>
         <div class="txt11">
-          离开后您将失去{{luckDrawType===1?'15.9元年卡':'9.9元年卡'}}
+          离开后您将失去{{yearActualPrice}}年卡
         </div>
         <img v-if="luckDrawType===2" class="w283h81" src="~/assets/image/activity/lottery/coupon-9.9.png" alt="">
         <img v-if="luckDrawType===1" class="w283h81" src="~/assets/image/activity/lottery/coupon-15.9.png" alt="">
@@ -126,7 +127,7 @@
           <van-icon :name="payType === item? require('~/assets/image/activity/lottery/select-round-icon.png'): require('~/assets/image/activity/lottery/unselect-round-icon.png')" size="24" />
         </div>
         <div class="fnbc1">
-          <div class="btn-leave" @click="show = false;makePoint('activity_狠心离开');">
+          <div class="btn-leave" @click="show = false;makePoint(`activity_${luckDrawType===2 ? '狠心离开' : '继续抽奖'}`);">
             {{luckDrawType===2 ? '狠心离开' : '继续抽奖' }}
           </div>
           <div class="btn-pay" @click="createOrder">立即购买</div>
@@ -214,27 +215,33 @@ export default {
       prizeData: [
         {
           id: 6,
-          level: 29.9,
+          level: '7折',
+          type: 1
         },
         {
           id: 3,
-          level: 58,
+          level: '￥58',
+          type: 2
         },
         {
           id: 2,
-          level: 9.9,
+          level: '￥?.9',
+          type: 3
         },
         {
           id: 4,
-          level: 39.9,
+          level: '8折',
+          type: 3
         },
         {
           id: 5,
-          level: 378,
+          level: '9折',
+          type: 3
         },
         {
           id: 1,
-          level: 15.9,
+          level: '￥?.9',
+          type: 1
         },
       ],
       // 转动的圈数
@@ -274,7 +281,8 @@ export default {
       carousel: [],
       phoneType: 'SVIP',
       client: 0,
-      yearActualPrice: 0
+      yearActualPrice: 0,
+      myAxios: null
     };
   },
   async fetch() {
@@ -287,6 +295,7 @@ export default {
   created() {
     this.getLuckDrawActivity();
     this.getCarouselList();
+    this.myAxios = this.$axios;
   },
   methods: {
     async getCarouselList() {
@@ -323,7 +332,7 @@ export default {
           id: this.selMealId,
           mealType: 0,
           phoneType: this.phoneType,
-          quantity: 1,
+          quantity: 1
         };
         taocan = this.sort_ASCII(taocan);
         const sign = this.jiaqian(JSON.stringify(taocan));
@@ -438,20 +447,38 @@ export default {
       }
     },
     makePoint(positionButton) {
-      const now = new Date();
       this.$axios.$post('/public/v5/buriedPointRecord/reportRecords', [
         {
           client: this.client,
           eventCode: '27_抽奖流程',
           userName: this.$auth.user.username,
           positionButton,
-          operationTime: now
-            .toISOString()
-            .replace(/T/g, ' ')
-            .replace(/\.[\d]{3}Z/, ''),
+          operationTime: this.getCurrentTime(),
+          phoneNumber: this.$auth.user.phone,
+          deviceId: ''
         },
       ]);
     },
+    getCurrentTime() {
+      const date = new Date(); // 当前时间
+      const year = date.getFullYear() // 年
+      const month = this.repair(date.getMonth() + 1); // 月
+      const day = this.repair(date.getDate()); // 日
+      const hour = this.repair(date.getHours()); // 时
+      const minute = this.repair(date.getMinutes()); // 分
+      const second = this.repair(date.getSeconds()); // 秒
+      // 当前时间 
+      const curTime = year + "-" + month + "-" + day +
+        " " + hour + ":" + minute + ":" + second;
+      return curTime;
+    },
+    repair(i) {
+      if (i >= 0 && i <= 9) {
+        return "0" + i;
+      } else {
+        return i;
+      }
+    },
     // 已经转动完转盘触发的函数
     endRotation() {
       // 提示中奖
@@ -546,7 +573,7 @@ export default {
       line-height: 1.5;
       word-break: break-all;
     }
-    & .van-grid-item__icon + .van-grid-item__text {
+    & .van-grid-item__icon+.van-grid-item__text {
       margin-top: 8px;
     }
   }
@@ -670,12 +697,24 @@ export default {
     border-radius: 5px;
     padding: 7.5px;
   }
-  .w219h26 {
-    width: 219px;
-    height: 26px;
+  .w235h20 {
+    width: 235px;
+    height: 20px;
     margin: 58px auto 0;
     display: block;
   }
+  .w264h28 {
+    width: 264px;
+    height: 28px;
+    background: rgba($color: #ffffff, $alpha: 0.2);
+    border-radius: 14px;
+    font-size: 18px;
+    font-weight: 500;
+    color: #FFFFFF;
+    line-height: 28px;
+    text-align: center;
+    margin: 7px auto 0;
+  }
   .sl {
     position: absolute;
     text-align: center;
@@ -815,7 +854,7 @@ export default {
     border-radius: 10px;
     background: #ffffff;
     text-align: center;
-    margin-top: 26.5px;
+    margin-top: 12px;
   }
 
   .popup-view-rule {