Merge branch 'develop' of http://192.168.32.253:3000/Software/android-cloud-H5 into develop

pages/activity/lottery/index.vue

@@ -27,12 +27,14 @@
           <div class="txt4">12个月 30H/月 不使用不计时</div>
           <img class="w253h73" src="~/assets/image/activity/lottery/coupon-1.png" alt="">
         </div>
-        <div v-for="item in mealList" :key="item.id" :class="selMealId===item.id ? 'coupon-2 active' : 'coupon-2'" @click="selMealId=item.id;makePoint(item.day === 30 ? 'activity_38月卡' : 'activity_268年卡')">
-          <img v-if="selMealId===item.id" class="coupon-select-icon" src="~/assets/image/activity/lottery/select-icon.png" alt="">
-          <img v-else class="coupon-select-icon" src="~/assets/image/activity/lottery/unselect-icon.png" alt="">
-          <div class="coupon-title"><span class="txt2">{{item.actualPrice}}</span><span>会员</span></div>
-          <div class="txt4">{{item.day === 30 ? '月卡' : '年卡'}}</div>
-          <img class="w111h73" src="~/assets/image/activity/lottery/coupon-2.png" alt="">
+        <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;makePoint(item.day === 30 ? 'activity_38月卡' : 'activity_268年卡')">
+            <img v-if="selMealId===item.id" class="coupon-select-icon" src="~/assets/image/activity/lottery/select-icon.png" alt="">
+            <img v-else class="coupon-select-icon" src="~/assets/image/activity/lottery/unselect-icon.png" alt="">
+            <div class="coupon-title"><span class="txt2">{{item.actualPrice}}</span><span>元</span></div>
+            <div class="txt4">{{item.day === 30 ? '月卡' : '年卡'}}</div>
+            <img class="w111h73" src="~/assets/image/activity/lottery/coupon-2.png" alt="">
+          </div>
         </div>
         <div v-for="item in paySupportType" :key="item" class="fnbc" @click="payType = item;makePoint(item === 'aliPay' ? 'activity_支付宝' : 'activity_微信')">
           <div v-if="item === 'aliPay'" class="fnc">
@@ -53,12 +55,33 @@
       <div class="popup-view popup-view-leave">
         <div class="txt1">确定离开吗</div>
         <div class="txt6">离开后您将失去{{actualPrice}}年卡，24小时付款有效</div>
-        <div class="coupon-1 active">
-          <img class="coupon-select-icon" src="~/assets/image/activity/lottery/select-icon.png" alt="">
-          <div class="coupon-title"><span class="txt2">{{actualPrice}}</span><span>会员</span><span class="txt3">（{{title}}）</span></div>
-          <div class="txt4">年卡（已获得）</div>
+        <div :class="selMealId===mealId ? 'coupon-1 active' : 'coupon-1'" @click="selMealId=mealId">
+          <img v-if="selMealId===mealId" class="coupon-select-icon" src="~/assets/image/activity/lottery/select-icon.png" alt="">
+          <img v-else class="coupon-select-icon" src="~/assets/image/activity/lottery/unselect-icon.png" alt="">
+          <div class="coupon-title"><span class="txt2">{{actualPrice}}</span><span>年卡会员</span></div>
+          <div class="txt4">12个月 30H/月 不使用不计时</div>
           <img class="w253h73" src="~/assets/image/activity/lottery/coupon-1.png" alt="">
         </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;makePoint(item.day === 30 ? 'activity_38月卡' : 'activity_268年卡')">
+            <img v-if="selMealId===item.id" class="coupon-select-icon" src="~/assets/image/activity/lottery/select-icon.png" alt="">
+            <img v-else class="coupon-select-icon" src="~/assets/image/activity/lottery/unselect-icon.png" alt="">
+            <div class="coupon-title"><span class="txt2">{{item.actualPrice}}</span><span>元</span></div>
+            <div class="txt4">{{item.day === 30 ? '月卡' : '年卡'}}</div>
+            <img class="w111h73" src="~/assets/image/activity/lottery/coupon-2.png" alt="">
+          </div>
+        </div>
+        <div v-for="item in paySupportType" :key="item" class="fnbc" @click="payType = item;makePoint(item === 'aliPay' ? 'activity_支付宝' : 'activity_微信')">
+          <div v-if="item === 'aliPay'" class="fnc">
+            <van-icon class="icon-pay" :name="require('~/assets/image/activity/lottery/alipay.png')" />
+            <span class="txt5">支付宝支付</span>
+          </div>
+          <div v-else class="fnc">
+            <van-icon class="icon-pay" :name="require('~/assets/image/activity/lottery/wx.png')" />
+            <span class="txt5">微信支付</span>
+          </div>
+          <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="fnbc">
           <div class="btn-leave" @click="show=false;makePoint('activity_狠心离开')">狠心离开</div>
           <div class="btn-pay" @click="createOrder">立即购买</div>
@@ -81,7 +104,7 @@
             <div class="txt9"><span class="txt7">订购次数：</span>不可重复订购</div>
             <div class="txt9"><span class="txt7">退订说明：</span>特惠产品，不支持退订</div>
             <div class="txt9 mt14">产品说明：</div>
-            <div class="txt7">1、产品内容：本产品为臂云科技旗下双子星VIP机型新人特惠年包，包含每月360H的VIP机型云手机使用时长，连续12个月每月自动续30H时长；按实际使用云手机的时间计时，不使用不计时。2、生效时间：订购扣费后立即生效；</div>
+            <div class="txt7">1、产品内容：本产品为臂云科技旗下双子星VIP机型新人特惠年包，包含每月360H的VIP机型云手机使用时长，连续12个月每月自动续30H时长；按实际使用云手机的时间计时，不使用不计时。</div>
             <div class="txt7">2、生效时间：订购扣费后立即生效；</div>
             <div class="txt7">3、注意事项：</div>
             <div class="txt7">（1）本产品合约期12个月，自生效当月起每月自动续30H时长；</div>
@@ -98,7 +121,7 @@
             <div class="txt7">生效方式：<span class="txt10">立即生效</span></div>
             <div class="txt7">退订说明：<span class="txt10">立即生效产品，不支持退订</span></div>
             <div class="txt7 mt14">
-              产品说明<br />1、生效方式：时长补充包订购后立即生效，直至时长用完则失效，用户可重复订购。
+              产品说明<br />1、生效方式：时长补充包订购后立即生效，直至时长用完则失效，用户可重复订购。<br />
               2、时长使用顺序：优先使用年卡特惠包时长，年卡特惠包时长耗尽，自动使用时长包时长。<br />3、年卡特惠包合约到期后，如时长补充包仍有时长，年卡特惠包所属云手机可继续使用至时长用尽。
             </div>
           </div>
@@ -128,15 +151,15 @@ export default {
       // 转盘上的奖品数据
       prizeData: [
         {
-          id: 1,
+          id: 6,
           level: 29.9
         },
         {
-          id: 2,
+          id: 3,
           level: 58
         },
         {
-          id: 3,
+          id: 2,
           level: 9.9
         },
         {
@@ -148,7 +171,7 @@ export default {
           level: 378
         },
         {
-          id: 6,
+          id: 1,
           level: 15.9
         }
       ],
@@ -205,7 +228,6 @@ export default {
       this.client = 7
     }
     this.getLuckDrawActivity()
-    this.getMealInfo()
     this.getCarouselList()
   },
   methods: {
@@ -215,7 +237,7 @@ export default {
     },
     async getMealInfo() {
       const res = await this.$axios.$get('/pay/v2/meal/info?phoneType=' + this.phoneType);
-      this.mealList = res.data.list.filter(item => item.day === 30 || item.day === 365)
+      this.mealList = res.data.list.filter(item => (item.day === 30 || item.day === 365) && item.id !== this.mealId)
     },
     async createOrder() {
       try {
@@ -269,6 +291,7 @@ export default {
             }
           })
         }
+        this.showPay = false
       } catch (error) {
         Toast({
           message: error.message,
@@ -310,9 +333,12 @@ export default {
       this.activityId = res.data.activityId
       this.status = res.data.status
       this.num = res.data.count
+      if (this.num === 0) {
+        this.getLuckDraw();
+      }
     },
     // 开始抽奖
-    async startRotation() {
+    startRotation() {
       // 如果还不可以转动
       if (!this.canBeRotated()) {
         return false;
@@ -321,37 +347,44 @@ export default {
       // 开始转动
       // 先上锁
       this.isLocking = true;
+      this.getLuckDraw();
+      // 成功后次数减少一次
+      if (this.num > 1) {
+        this.num--;
+      }
+      // 告诉子组件，开始转动了
+      this.$refs.roundTurntable.rotate(this.prizeIndex);
+    },
+    async getLuckDraw() {
       // 设置在哪里停下，应该与后台交互，这里随机抽取0~5
       const res = await this.$axios.$post('/activity/v1/member/luckDraw?activityId=' + this.activityId, {}, { headers: { Authorization: this.token } });
       if (res.status === 0) {
-        const index = this.prizeData.findIndex(item => item.level === res.data.actualPrice)
         this.actualPrice = res.data.actualPrice
-        if (this.actualPrice === 15.9) {
+        if (res.data.luckDrawType === 1) {
           this.makePoint('activity_15.9年卡')
           if (Number(localStorage.getItem('year-15-9')) !== 2)
             localStorage.setItem('year-15-9', 1)
         }
-        if (this.actualPrice === 9.9) {
+        if (res.data.luckDrawType === 2) {
           if (Number(localStorage.getItem('year-9-9')) !== 2)
             this.makePoint('activity_9.9年卡')
           localStorage.setItem('year-9-9', 1)
         }
         this.mealId = res.data.mealId
         this.selMealId = res.data.mealId
+        this.getMealInfo()
         this.paySupportType = res.data.paySupportType
         this.payType = this.paySupportType[0]
         this.phoneType = res.data.phoneType
         this.title = res.data.title
-        this.prizeIndex = index;
+        this.prizeIndex = res.data.luckDrawType;
       } else {
-        return
-      }
-      // 成功后次数减少一次
-      if (this.num > 1) {
-        this.num--;
+        Toast({
+          message: res.msg,
+          position: 'top',
+          duration: 3000
+        });
       }
-      // 告诉子组件，开始转动了
-      this.$refs.roundTurntable.rotate(this.prizeIndex);
     },
     makePoint(positionButton) {
       const now = new Date()
@@ -393,6 +426,10 @@ export default {
         });
         return false;
       }
+      if (this.num === 0) {
+        this.showPay = true
+        return false;
+      }
       return true;
     },
     closed() {
@@ -411,6 +448,12 @@ export default {
 </script>
 
 <style lang="scss" scoped>
+.fb {
+  display: flex;
+  justify-content: space-between;
+  width: 286px;
+  margin: 0 auto;
+}
 .fw500 {
   font-weight: 500;
 }
@@ -665,11 +708,10 @@ export default {
   left: 15px;
 }
 .coupon-2 {
-  display: inline-block;
-  width: 138px;
+  width: 137px;
   height: 106px;
   box-sizing: border-box;
-  margin: 11px 4px 0;
+  margin-top: 11px;
   position: relative;
   border-radius: 13px;
   box-sizing: border-box;