修改bug

pages/activity/lottery/index.vue

@@ -13,7 +13,7 @@
 
     <div class="roulette">
       <div class="arrow" @click="startRotation"></div>
-      <div class="gesture">
+      <div class="gesture" @click="startRotation">
         <img src="~/assets/image/activity/lottery/gesture.gif" />
       </div>
       <img class="start-btn" src="~/assets/image/activity/lottery/start-btn.png" alt="" @click="startRotation" />
@@ -28,73 +28,102 @@
         </div>
       </template>
     </RoundTurntable>
-    <van-popup v-model="showPay" style="background: transparent" :close-on-click-overlay="false">
-      <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="">
-      <div class="popup-view">
-        <van-icon name="close" class="close" color="#939393"  @click="closed" />
-        <div class="meal-item">
-          <div :class="selMealId === mealId ? 'coupon-1 active' : 'coupon-1'" @click="selMealId = mealId;originalPrice=yearOriginalPrice">
-            <div class="coupon-title">
-              <span>￥</span><span class="txt2">{{ actualPrice }}</span>
-            </div>
-            <div class="txt4"> 1年使用权  每月30小时</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;makePoint(item.day === 30 ? 'activity_38月卡' : 'activity_268年卡');">
+    <van-popup v-model="showPay" style="background: transparent;" :close-on-click-overlay="false">
+      <div class="dialog-view">
+        <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="">
+        <van-icon name="close" class="close" color="#939393" @click="closed();" />
+        <div class="popup-view">
+          <div class="meal-item">
+            <div :class="selMealId === mealId ? 'coupon-1 active' : 'coupon-1'" @click="selMealId = mealId;originalPrice=yearOriginalPrice">
               <div class="coupon-title">
-                <span>￥</span><span class="txt2">{{
+                <span>￥</span><span class="txt2">{{ actualPrice }}</span>
+              </div>
+              <div class="txt4"> 1年使用权 每月30小时</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;makePoint(item.day === 30 ? 'activity_38月卡' : 'activity_268年卡');">
+                <div class="coupon-title">
+                  <span>￥</span><span class="txt2">{{
                 item.actualPrice
               }}</span>
+                </div>
+                <div class="txt4">{{ item.day === 30 ? '月卡 30天' : '年卡 365天' }}</div>
               </div>
-              <div class="txt4">{{ item.day === 30 ? '月卡' : '年卡' }}</div>
             </div>
           </div>
-        </div>
-        <van-grid :column-num="5" :border="false">
-          <van-grid-item :icon="require('../../../assets/image/activity/lottery/icon1.png')" text="包月" />
-          <van-grid-item :icon="require('../../../assets/image/activity/lottery/icon2.png')" text="游戏托管" />
-          <van-grid-item :icon="require('../../../assets/image/activity/lottery/icon3.png')" text="苹果玩安卓" />
-          <van-grid-item :icon="require('../../../assets/image/activity/lottery/icon4.png')" text="上班自由" />
-          <van-grid-item :icon="require('../../../assets/image/activity/lottery/icon5.png')" text="影音听歌" />
-        </van-grid>
-        <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>
+          <van-grid :column-num="5" :border="false" class="plr10">
+            <van-grid-item :icon="require('../../../assets/image/activity/lottery/icon1.png')" text="按时计费" />
+            <van-grid-item :icon="require('../../../assets/image/activity/lottery/icon2.png')" text="游戏托管" />
+            <van-grid-item :icon="require('../../../assets/image/activity/lottery/icon3.png')" text="iOS玩安卓" />
+            <van-grid-item :icon="require('../../../assets/image/activity/lottery/icon4.png')" text="上班自由" />
+            <van-grid-item :icon="require('../../../assets/image/activity/lottery/icon5.png')" text="影音听歌" />
+          </van-grid>
+          <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 v-else class="fnc">
-            <van-icon class="icon-pay" :name="require('~/assets/image/activity/lottery/wx.png')" />
-            <span class="txt5">微信支付</span>
+          <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>
+                <span class="colon">:</span>
+                <span class="block">{{ timeData.minutes }}</span>
+                <span class="colon">:</span>
+                <span class="block">{{ timeData.seconds }}</span>
+              </template>
+            </van-count-down>
           </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>
-      <div class="buy-bar">
-        原价¥{{originalPrice}}
-        <div class="buy-bar-btn" @click="createOrder">
-          <div>立即购买</div>
+        <div>
+          <div class="buy-bar">
+            原价¥{{originalPrice}}
+            <div class="buy-bar-btn" @click="createOrder">
+              <div>立即购买</div>
+            </div>
+          </div>
+          <div class="txt6">
+            <van-icon :name="checked?'checked':'circle'" color="#666666" class="check" @click="checked=!checked" />开通前阅读并同意<a @click="showRule = true;makePoint('activity_购买协议');">《购买协议》</a>
+          </div>
         </div>
       </div>
-      <div class="txt6">
-        <van-icon :name="checked?'checked':'circle'" color="#666666" class="check" @click="checked=!checked" />开通前阅读并同意<a @click="showRule = true;makePoint('activity_购买协议');">《购买协议》</a>
-      </div>
     </van-popup>
-    <van-popup v-model="show" style="background: transparent;" :close-on-click-overlay="false">
+    <van-popup v-model="show" style="background: transparent" :close-on-click-overlay="false">
       <div class="popup-view popup-view-leave">
         <div class="txt1">确定离开吗</div>
         <div class="txt11">
-          离开后您将失去
+          离开后您将失去{{luckDrawType===1?'15.9元年卡':'9.9元年卡'}}
         </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="">
-        <van-grid :column-num="5" :border="false">
-          <van-grid-item :icon="require('../../../assets/image/activity/lottery/icon1.png')" text="包月" />
+        <van-grid :column-num="5" :border="false" class="plr10">
+          <van-grid-item :icon="require('../../../assets/image/activity/lottery/icon1.png')" text="按时计费" />
           <van-grid-item :icon="require('../../../assets/image/activity/lottery/icon2.png')" text="游戏托管" />
           <van-grid-item :icon="require('../../../assets/image/activity/lottery/icon3.png')" text="iOS玩安卓" />
           <van-grid-item :icon="require('../../../assets/image/activity/lottery/icon4.png')" text="上班自由" />
-          <van-grid-item :icon="require('../../../assets/image/activity/lottery/icon7.png')" text="影音听歌" />
+          <van-grid-item :icon="require('../../../assets/image/activity/lottery/icon7.png')" text="年卡会员" />
         </van-grid>
+        <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="fnbc1">
           <div class="btn-leave" @click="show = false;makePoint('activity_狠心离开');">
             {{luckDrawType===2 ? '狠心离开' : '继续抽奖' }}
@@ -102,7 +131,7 @@
           <div class="btn-pay" @click="createOrder">立即购买</div>
         </div>
       </div>
-      <van-icon name="close" class="close1" color="#939393"  @click="show=false;makePoint('activity_关闭弹窗')" />
+      <van-icon name="close" class="close1" color="#939393" @click="show=false;makePoint('activity_关闭弹窗')" />
     </van-popup>
     <van-popup v-model="showRule" style="background: transparent; padding-top: 14px">
       <div class="popup-view-rule">
@@ -192,6 +221,7 @@ export default {
   },
   data() {
     return {
+      time: 0,
       yearOriginalPrice: 0,
       originalPrice: 0,
       checked: true,
@@ -276,9 +306,9 @@ export default {
     title: '年卡抽奖活动',
   },
   created() {
-    if (this.$userAgent.isSzx && this.$userAgent.isAndroid) {
+    if (this.$userAgent.isAndroid) {
       this.client = 1;
-    } else if (this.$userAgent.isSzx && this.$userAgent.isIos) {
+    } else if (this.$userAgent.isIos) {
       this.client = 2;
     } else if (this.$userAgent.isMiniProgram) {
       this.client = 5;
@@ -304,7 +334,7 @@ export default {
         (item) =>
           (item.day === 30 || item.day === 365) && item.id !== this.mealId,
       );
-      this.yearOriginalPrice = +res.data.list.filter((item) =>(item.day === 365))[0].originalPrice
+      this.yearOriginalPrice = +res.data.list.filter((item) => (item.day === 365))[0].originalPrice
       this.originalPrice = this.yearOriginalPrice
     },
     async createOrder() {
@@ -412,7 +442,8 @@ export default {
       this.status = res.data.status;
       this.num = res.data.count;
       if (this.num === 0) {
-        this.getLuckDraw();
+        await this.getLuckDraw();
+        this.luckDrawType = 0;
       }
     },
     // 开始抽奖
@@ -427,7 +458,7 @@ export default {
       this.isLocking = true;
       await this.getLuckDraw();
       // 成功后次数减少一次
-      if (this.num > 1) {
+      if (this.num > 0) {
         this.num--;
       }
       // 告诉子组件，开始转动了
@@ -533,6 +564,7 @@ export default {
         this.showPay = true;
         return false;
       }
+      this.time = 24 * 60 * 60 * 1000;
       return true;
     },
     closed() {
@@ -552,79 +584,117 @@ export default {
 </script>
 
 <style>
-  .lottery-container .van-grid-item__content {
-    padding: 0 !important;
-  }
+.lottery-container .van-grid-item__content {
+  padding: 0 !important;
+}
 </style>
 <style lang="scss" scoped>
-  .w283h81 {
-    width: 283px;
-    height: 81px;
-    display: block;
-    margin: 0 auto;
-  }
-  .close {
-    font-size: 30px;
-    position: absolute;
-    top: 0;
-    right: 0;
-  }
-  .close1 {
-    font-size: 30px;
-    position: absolute;
-    bottom: 0px;
-    left: calc(50% - 15px);
-  }
-  .check {
-    font-size: 15px;
-    margin-right: 8.5px;
-    line-height: 10px;
-  }
-  .buy-bar-btn {
-    width: 184.5px;
-    height: 50px;
-    background: linear-gradient(0deg, #DF4324 0%, #FFBF96 98%);
-    border-radius: 10px;
-    position: absolute;
-    right: 0;
-    bottom: 0;
-    & div:nth-child(1) {
-      text-align: center;
-      font-size: 18px;
-      font-weight: 600;
-      color: #FFFFFF;
-      line-height: 50px;
-    }
-  }
-  .buy-bar {
-    width: 320px;
-    height: 40px;
-    line-height: 40px;
-    background: #FFFFFF;
-    border-radius: 10px;
-    margin-top: 25px;
-    position: relative;
-    font-size: 15px;
-    text-decoration: line-through;
-    color: #666666;
-    padding-left: 28px;
-
-  }
-  .van-grid-item__text {
-    font-size: 11px;
-  }
-  .meal-item {
-    margin: 10px;
-    background: #F2F2F2;
-    border-radius: 5px;
-    padding: 7.5px;
-
+.count-down-time {
+  height: 46.5px;
+  background: #333333;
+  font-size: 12px;
+  color: #FFFFFF;
+  display: flex;
+  justify-content: center;
+  align-items: center;
+}
+.colon {
+  display: inline-block;
+  margin: 0 4.5px;
+  color: #FFFFFF;;
+}
+.block {
+  display: inline-block;
+  width: 17px;
+  height: 17px;
+  line-height: 17px;
+  color: #fff;
+  font-size: 11px;
+  background: rgba($color: #FFFFFF, $alpha: 0.2);
+  text-align: center;
+}
+.plr10 {
+  padding: 0 10px;
+  margin-bottom: 22px;
+}
+.dialog-view {
+  width: 100vw;
+  height: 100vh;
+  background: url('../../../assets/image/activity/lottery/dialog-bg.png');
+  background-size: 100%;
+  background-repeat: no-repeat;
+  position: relative;
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: center;
+  align-items: flex-start;
+}
+.w283h81 {
+  width: 283px;
+  height: 81px;
+  display: block;
+  margin: 0 auto 16px;
+}
+.close {
+  font-size: 30px;
+  position: absolute;
+  top: 18.5px;
+  right: 26px;
+}
+.close1 {
+  font-size: 30px;
+  position: absolute;
+  bottom: 0px;
+  left: calc(50% - 15px);
+}
+.check {
+  font-size: 15px;
+  margin-right: 8.5px;
+  line-height: 10px;
+}
+.buy-bar-btn {
+  width: 184.5px;
+  height: 50px;
+  background: linear-gradient(0deg, #df4324 0%, #ffbf96 98%);
+  border-radius: 10px;
+  position: absolute;
+  right: 0;
+  bottom: 0;
+  & div:nth-child(1) {
+    text-align: center;
+    font-size: 18px;
+    font-weight: 600;
+    color: #ffffff;
+    line-height: 50px;
   }
+}
+.buy-bar {
+  width: 320px;
+  height: 40px;
+  line-height: 40px;
+  background: #ffffff;
+  border-radius: 10px;
+  margin-top: 25px;
+  position: relative;
+  font-size: 15px;
+  text-decoration: line-through;
+  color: #666666;
+  padding-left: 28px;
+  margin-top: -40px;
+}
+.van-grid-item__text {
+  font-size: 11px;
+}
+.meal-item {
+  margin: 10px;
+  background: #f2f2f2;
+  border-radius: 5px;
+  padding: 7.5px;
+}
 .w219h26 {
   width: 219px;
   height: 26px;
-  display: block;
-  margin: 0 auto 26.5px;
+  margin: 58px auto 0;
 }
 .sl {
   position: absolute;
@@ -762,6 +832,7 @@ export default {
   border-radius: 10px;
   background: #ffffff;
   text-align: center;
+  margin-top: -40px;
 }
 
 .popup-view-rule {
@@ -816,21 +887,21 @@ export default {
 .coupon-1 {
   width: 283px;
   height: 81px;
-  background: linear-gradient(0deg, #979797 0%, #C8C8C8 98%);
+  background: linear-gradient(0deg, #979797 0%, #c8c8c8 98%);
   border-radius: 6px;
   box-sizing: border-box;
+  overflow: hidden;
 }
 .coupon-1.active,
 .coupon-2.active {
-background: linear-gradient(0deg, #DF4324 0%, #FFBF96 98%);
+  background: linear-gradient(0deg, #df4324 0%, #ffbf96 98%);
 }
 .coupon-title {
-  color: #FFFFFF;
+  color: #ffffff;
   font-weight: 600;
   font-size: 20px;
   text-align: center;
   z-index: 1;
-  margin-top: 15.5px;
   width: 100%;
 }
 .txt2 {
@@ -868,9 +939,9 @@ background: linear-gradient(0deg, #DF4324 0%, #FFBF96 98%);
   box-sizing: border-box;
   margin-top: 7px;
   border-radius: 5px;
-  background: linear-gradient(0deg, #979797 0%, #C8C8C8 98%);
+  background: linear-gradient(0deg, #979797 0%, #c8c8c8 98%);
   & .coupon-title {
-    color: #FFFFFF;
+    color: #ffffff;
     font-weight: 600;
     font-size: 15px;
     text-align: center;
@@ -891,9 +962,10 @@ background: linear-gradient(0deg, #DF4324 0%, #FFBF96 98%);
   left: 12px;
 }
 .txt5 {
-  font-size: 16px;
+  font-size: 15px;
   color: #333333;
   margin-left: 7px;
+  font-weight: 300;
 }
 .icon-pay {
   font-size: 26px;
@@ -908,14 +980,33 @@ background: linear-gradient(0deg, #DF4324 0%, #FFBF96 98%);
   justify-content: space-between;
   align-items: center;
   height: 50px;
-  padding: 0 10px;
+  padding: 0 21px;
 }
 .fnbc1 {
   display: flex;
-  justify-content: space-around;
+  justify-content: space-between;
   align-items: center;
   height: 91px;
-  border-top: 1px dashed #333;
+  margin: 0 22.5px;
+  border-top: 1px dashed rgba($color: #333, $alpha: 0.3);
+  position: relative;
+  &::before, &::after {
+    content: '';
+    background: rgba($color: #000000, $alpha: 0.7);
+    width: 28px;
+    height: 28px;
+    border-radius: 50%;
+  }
+  &::before {
+    position: absolute;
+    left: -36.5px;
+    top: -14px;
+  }
+  &::after {
+    position: absolute;
+    right: -36.5px;
+    top: -14px;
+  }
 }
 .w304h62 {
   width: 304px;
@@ -923,13 +1014,14 @@ background: linear-gradient(0deg, #DF4324 0%, #FFBF96 98%);
   margin: 0 auto;
 }
 .txt6 {
-  color: #666666;
+  color: #ffffff;
   font-size: 12px;
   line-height: 16px;
-  margin-top: 11px;
+  height: 16px;
   text-align: center;
+  margin-top: 10px;
   a {
-    color: #F5E07E;
+    color: #f5e07e;
   }
 }
 .txt11 {
@@ -941,11 +1033,12 @@ background: linear-gradient(0deg, #DF4324 0%, #FFBF96 98%);
 }
 .popup-view-leave {
   margin-bottom: 70px;
+  margin-top: 0 !important;
 }
 .btn-leave {
   width: 106.5px;
   height: 34px;
-  background: linear-gradient(0deg, #979797 0%, #C8C8C8 98%);
+  background: linear-gradient(0deg, #979797 0%, #c8c8c8 98%);
   border-radius: 17px;
   font-size: 16px;
   font-weight: 600;
@@ -956,7 +1049,7 @@ background: linear-gradient(0deg, #DF4324 0%, #FFBF96 98%);
 .btn-pay {
   width: 152px;
   height: 40px;
-  background: linear-gradient(0deg, #DF4324 0%, #FFBF96 98%);
+  background: linear-gradient(0deg, #df4324 0%, #ffbf96 98%);
   border-radius: 20px;
   font-size: 20px;
   font-weight: 600;