Merge branch 'develop' into feature/99年卡活动

pages/activity/lottery/index.vue

@@ -1,131 +1,396 @@
 <template>
   <div class="lottery-container">
-    <van-swipe v-if="carousel.length" :autoplay="3000" class="lottery-swipe" vertical :show-indicators="false">
-      <van-swipe-item v-for="item in carousel" :key="item.mealId">有{{item.count}}个用户 {{['', '抽奖', '购买'][item.type]}}{{item.title}}</van-swipe-item>
+    <van-swipe
+      v-if="carousel.length"
+      :autoplay="3000"
+      class="lottery-swipe"
+      vertical
+      :show-indicators="false"
+    >
+      <van-swipe-item v-for="item in carousel" :key="item.mealId"
+        >有{{ item.count }}个用户 {{ ['', '抽奖', '购买'][item.type]
+        }}{{ item.title }}</van-swipe-item
+      >
     </van-swipe>
-    <img class="w51h26" src="~/assets/image/activity/lottery/rule.png" alt="" @click="showRule=true;makePoint('activity_购买协议')">
+    <img
+      class="w51h26"
+      src="~/assets/image/activity/lottery/rule.png"
+      alt=""
+      @click="
+        showRule = true;
+        makePoint('activity_购买协议');
+      "
+    />
+
+    <div class="sl">
+      <img
+        src="~/assets/image/activity/lottery/solgan.png"
+        alt=""
+        class="slogan"
+      />
+      <img
+        src="~/assets/image/activity/lottery/bannerTitle.png"
+        alt=""
+        class="bannerTitle"
+      />
+    </div>
+
     <div class="roulette">
       <div class="arrow" @click="startRotation"></div>
-      <img class="start-btn" src="~/assets/image/activity/lottery/start-btn.png" alt="" @click="startRotation">
+      <div class="gesture">
+        <img src="~/assets/image/activity/lottery/gesture.gif" />
+      </div>
+      <img
+        class="start-btn"
+        src="~/assets/image/activity/lottery/start-btn.png"
+        alt=""
+        @click="startRotation"
+      />
     </div>
-    <RoundTurntable ref="roundTurntable" :prize-data="prizeData" :rotate-circle="rotateCircle" :during-time="duringTime" :turntable-style-option="turntableStyleOption" class="turntable" @endRotation="endRotation">
+    <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 }}</div>
+        <div class="turntable-name">
+          <span class="fs15">￥</span>{{ scope.item.level }}
+        </div>
         <div class="turntable-img">
           <img src="~/assets/image/activity/lottery/yearCard.png" />
         </div>
       </template>
     </RoundTurntable>
-    <van-popup v-model="showPay" closeable close-icon-position="top-right" round :close-on-click-overlay="false" @closed="closed">
+    <div class="num">剩余机会{{ num }}次</div>
+    <van-popup
+      v-model="showPay"
+      closeable
+      close-icon-position="top-right"
+      round
+      :close-on-click-overlay="false"
+      @closed="closed"
+    >
       <div class="popup-view">
-        <div class="txt1">恭喜你获得{{actualPrice}}年卡</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="txt1">恭喜你获得{{ actualPrice }}年卡</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="">
+          <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.originalPrice ? item.originalPrice : 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
+            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.originalPrice ? item.originalPrice : 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-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')" />
+            <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')" />
+            <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" />
+          <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>
+        <img
+          class="w304h62"
+          src="~/assets/image/activity/lottery/pay-btn.png"
+          alt=""
+          @click="createOrder"
+        />
+        <div class="txt6">
+          开通前阅读并同意<a
+            @click="
+              showRule = true;
+              makePoint('activity_购买协议');
+            "
+            >购买协议</a
+          >
         </div>
-        <img class="w304h62" src="~/assets/image/activity/lottery/pay-btn.png" alt="" @click="createOrder">
-        <div class="txt6">开通前阅读并同意<a @click="showRule=true;makePoint('activity_购买协议')">购买协议</a></div>
       </div>
     </van-popup>
-    <van-popup v-model="show" closeable close-icon-position="top-right" round @closed="makePoint('activity_关闭弹窗')">
+    <van-popup
+      v-model="show"
+      closeable
+      close-icon-position="top-right"
+      round
+      @closed="makePoint('activity_关闭弹窗')"
+    >
       <div class="popup-view popup-view-leave">
         <div class="txt1">确定离开吗</div>
-        <div class="txt6">离开后您将失去{{actualPrice}}年卡，24小时付款有效</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="txt6">
+          离开后您将失去{{ actualPrice }}年卡，24小时付款有效
+        </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="">
+          <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.originalPrice ? item.originalPrice : 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
+            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.originalPrice ? item.originalPrice : 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-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')" />
+            <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')" />
+            <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" />
+          <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-leave"
+            @click="
+              show = false;
+              makePoint('activity_狠心离开');
+            "
+          >
+            狠心离开
+          </div>
           <div class="btn-pay" @click="createOrder">立即购买</div>
         </div>
       </div>
     </van-popup>
-    <van-popup v-model="showRule" style="background: transparent;padding-top: 14px;">
+    <van-popup
+      v-model="showRule"
+      style="background: transparent; padding-top: 14px"
+    >
       <div class="popup-view-rule">
         <div class="popup-view-rule-box">
           <div class="popup-view-rule-title">购买协议</div>
           <div class="h330">
-            <div class="txt7"> 参与活动前，请仔细阅读购买协议，特别是产品说明和注意事项。用户参与本活动即视为已充分阅读、理解本活动规则，并自愿受活动规则约束。</div>
-            <div class="txt8 mt14 fw500">年卡特惠包 </div>
+            <div class="txt7">
+              参与活动前，请仔细阅读购买协议，特别是产品说明和注意事项。用户参与本活动即视为已充分阅读、理解本活动规则，并自愿受活动规则约束。
+            </div>
+            <div class="txt8 mt14 fw500">年卡特惠包</div>
             <div class="txt9 mt5">每月自动续，时长不用愁</div>
-            <div class="txt8 mt5 fw500">1年使用权  每月30小时</div>
+            <div class="txt8 mt5 fw500">1年使用权 每月30小时</div>
             <div class="txt9 mt5">按实际使用计时，星曜机型可用，立即生效</div>
-            <div class="txt9 mt14"><span class="txt7">有效时间：</span>按实际使用云手机的时间计时，不使用不计时；每月30H，当月时长不跨月；</div>
+            <div class="txt9 mt14">
+              <span class="txt7">有效时间：</span
+              >按实际使用云手机的时间计时，不使用不计时；每月30H，当月时长不跨月；
+            </div>
             <div class="txt9"><span class="txt7">可用范围：</span>星曜机型</div>
             <div class="txt9"><span class="txt7">生效方式：</span>立即生效</div>
-            <div class="txt9"><span class="txt7">订购次数：</span>不可重复订购</div>
-            <div class="txt9"><span class="txt7">退订说明：</span>特惠产品，不支持退订</div>
+            <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、产品内容：本产品为臂云科技旗下双子星云手机星曜机型新人特惠年包，包含星曜机型云手机1年使用权，连续12个月每月发放30H时长；进入云手机开始计时，下机后不计时。</div>
+            <div class="txt7">
+              1、产品内容：本产品为臂云科技旗下双子星云手机星曜机型新人特惠年包，包含星曜机型云手机1年使用权，连续12个月每月发放30H时长；进入云手机开始计时，下机后不计时。
+            </div>
             <div class="txt7">2、生效时间：订购扣费后立即生效。</div>
             <div class="txt7">3、注意事项：</div>
-            <div class="txt7">（1）本产品合约期12个月，自生效当月起每月发放30H时长；</div>
+            <div class="txt7">
+              （1）本产品合约期12个月，自生效当月起每月发放30H时长；
+            </div>
             <div class="txt7">（2）合约到期后需用户另外购买时长；</div>
-            <div class="txt7">（3）合约到期后，年卡特惠包剩余时长自动失效；</div>
-            <div class="txt7">（4）合约到期后，另外续费时长包所得的时长仍有效，云机可继续使用；</div>
-            <div class="txt7">（5）年卡特惠包云手机与普通包月云手机计时逻辑不同，两种云手机时长不可叠加，若另外订购普通包月云手机将获得一台新云手机。</div>
+            <div class="txt7">
+              （3）合约到期后，年卡特惠包剩余时长自动失效；
+            </div>
+            <div class="txt7">
+              （4）合约到期后，另外续费时长包所得的时长仍有效，云机可继续使用；
+            </div>
+            <div class="txt7">
+              （5）年卡特惠包云手机与普通包月云手机计时逻辑不同，两种云手机时长不可叠加，若另外订购普通包月云手机将获得一台新云手机。
+            </div>
             <div class="txt8 mt14">温馨提示：</div>
-            <div class="txt7">1、请您理解：通过任何不正当手段参与活动，如借助非自然流量或外挂工具；利用技术漏洞，恶意退款，批量注册账号、买号等搅乱平台管理秩序的行为，臂云科技有权限制或取消用户的活动资格，不予发放或撤销相关交易及福利内容。</div>
+            <div class="txt7">
+              1、请您理解：通过任何不正当手段参与活动，如借助非自然流量或外挂工具；利用技术漏洞，恶意退款，批量注册账号、买号等搅乱平台管理秩序的行为，臂云科技有权限制或取消用户的活动资格，不予发放或撤销相关交易及福利内容。
+            </div>
             <div class="txt7">2、如有疑问请联系双子星APP客服咨询</div>
-            <div class="txt8 mt5 fw500" style="color: #EC6250;">时长包使用规则</div>
+            <div class="txt8 mt5 fw500" style="color: #ec6250">
+              时长包使用规则
+            </div>
             <div class="txt7 mt5">年卡特惠云手机，按需补充时长包</div>
-            <div class="txt7">有效时间：<span class="txt10">时长用完前一直有效，支持跨月</span></div>
-            <div class="txt7">可用范围：<span class="txt10">可续时长的机型</span></div>
-            <div class="txt7">生效方式：<span class="txt10">立即生效</span></div>
-            <div class="txt7">退订说明：<span class="txt10">立即生效产品，不支持退订</span></div>
+            <div class="txt7">
+              有效时间：<span class="txt10">时长用完前一直有效，支持跨月</span>
+            </div>
+            <div class="txt7">
+              可用范围：<span class="txt10">可续时长的机型</span>
+            </div>
+            <div class="txt7">
+              生效方式：<span class="txt10">立即生效</span>
+            </div>
+            <div class="txt7">
+              退订说明：<span class="txt10">立即生效产品，不支持退订</span>
+            </div>
             <div class="txt7 mt14">
               产品说明<br />1、生效方式：时长补充包订购后立即生效，直至时长用完则失效，用户可重复订购。<br />
               2、时长使用顺序：优先使用年卡特惠包时长，年卡特惠包时长耗尽，自动使用时长包时长。<br />3、年卡特惠包合约到期后，如时长补充包仍有时长，年卡特惠包所属云手机可继续使用至时长用尽。
             </div>
           </div>
-          <img class="w304h62" src="~/assets/image/activity/lottery/buy-rule-icon.png" alt="" @click="showRule=false">
+          <img
+            class="w304h62"
+            src="~/assets/image/activity/lottery/buy-rule-icon.png"
+            alt=""
+            @click="showRule = false"
+          />
         </div>
       </div>
     </van-popup>
@@ -133,15 +398,15 @@
 </template>
 
 <script>
-import { Toast } from 'vant'
-import RoundTurntable from './component/roundTurntable.vue'
+import { Toast } from 'vant';
+import RoundTurntable from './component/roundTurntable.vue';
 const RSA = require('../../../plugins/wx_rsa');
 const webUni = require('../../../plugins/uni');
 export default {
   name: 'Lottery',
   auth: false,
   components: {
-    RoundTurntable
+    RoundTurntable,
   },
   data() {
     return {
@@ -152,28 +417,28 @@ export default {
       prizeData: [
         {
           id: 6,
-          level: 29.9
+          level: 29.9,
         },
         {
           id: 3,
-          level: 58
+          level: 58,
         },
         {
           id: 2,
-          level: 9.9
+          level: 9.9,
         },
         {
           id: 4,
-          level: 39.9
+          level: 39.9,
         },
         {
           id: 5,
-          level: 378
+          level: 378,
         },
         {
           id: 1,
-          level: 15.9
-        }
+          level: 15.9,
+        },
       ],
       // 转动的圈数
       rotateCircle: 6,
@@ -182,9 +447,16 @@ export default {
       // 转盘样式的选项
       turntableStyleOption: {
         // 背景色
-        prizeBgColors: ['#FFF9F8', '#FFECC9', '#FFF9F8', '#FFECC9', '#FFF9F8', '#FFECC9'],
+        prizeBgColors: [
+          '#FFF9F8',
+          '#FFECC9',
+          '#FFF9F8',
+          '#FFECC9',
+          '#FFF9F8',
+          '#FFECC9',
+        ],
         // 转盘的外边框颜色
-        borderColor: '#FFD790'
+        borderColor: '#FFD790',
       },
       // 中奖的奖品的index
       prizeIndex: -1,
@@ -204,8 +476,8 @@ export default {
       status: 0,
       carousel: [],
       phoneType: 'SVIP',
-      client: 0
-    }
+      client: 0,
+    };
   },
   async fetch() {
     if (this.$userAgent.isAndroid) {
@@ -215,20 +487,20 @@ export default {
     }
   },
   head: {
-    title: '年卡抽奖活动'
+    title: '年卡抽奖活动',
   },
   created() {
     if (this.$userAgent.isSzx && this.$userAgent.isAndroid) {
-      this.client = 1
+      this.client = 1;
     } else if (this.$userAgent.isSzx && this.$userAgent.isIos) {
-      this.client = 2
+      this.client = 2;
     } else if (this.$userAgent.isMiniProgram) {
-      this.client = 5
+      this.client = 5;
     } else {
-      this.client = 7
+      this.client = 7;
     }
-    this.getLuckDrawActivity()
-    this.getCarouselList()
+    this.getLuckDrawActivity();
+    this.getCarouselList();
   },
   methods: {
     async getCarouselList() {
@@ -236,8 +508,13 @@ export default {
       this.carousel = res.data;
     },
     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) && item.id !== this.mealId)
+      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) && item.id !== this.mealId,
+      );
     },
     async createOrder() {
       try {
@@ -245,7 +522,7 @@ export default {
           duration: 0,
           forbidClick: true,
         });
-        this.makePoint('activity_立即购买')
+        this.makePoint('activity_立即购买');
         let taocan = {
           buyType: 1,
           couponId: 0,
@@ -256,22 +533,30 @@ export default {
         };
         taocan = this.sort_ASCII(taocan);
         const sign = this.jiaqian(JSON.stringify(taocan));
-        const res = await this.$axios.$post('/pay/v1/order/create', taocan, { headers: { Authorization: this.token, sign } });
+        const res = await this.$axios.$post('/pay/v1/order/create', taocan, {
+          headers: { Authorization: this.token, sign },
+        });
         Toast.clear();
         if (this.$userAgent.isSzx && this.$userAgent.isAndroid) {
-          window.native.startPay(this.payType === 'aliPay' ? 3 : 2, res.data.myOrderNum, 1);
+          window.native.startPay(
+            this.payType === 'aliPay' ? 3 : 2,
+            res.data.myOrderNum,
+            1,
+          );
         } else if (this.$userAgent.isSzx && this.$userAgent.isIos) {
           window.webkit.messageHandlers.startPay.postMessage({
             payType: this.payType === 'aliPay' ? 3 : 2,
             orderNum: res.data.myOrderNum,
-            actualPrice: this.actualPrice
+            actualPrice: this.actualPrice,
           });
         } else if (this.$userAgent.isMiniProgram) {
           this.$wx.miniProgram.navigateTo({
-            url: '/packageA/order/status/index?record=' + JSON.stringify({
-              payActive: this.payType === 'wxPay' ? 1 : 0,
-              myOrderNum: res.data.myOrderNum
-            }),
+            url:
+              '/packageA/order/status/index?record=' +
+              JSON.stringify({
+                payActive: this.payType === 'wxPay' ? 1 : 0,
+                myOrderNum: res.data.myOrderNum,
+              }),
           });
         } else {
           // 使用postMessage 方法可以发送消息到应用, 消息内容需要在data 对象中,否则webview无法接收到
@@ -280,17 +565,17 @@ export default {
               payType: this.payType === 'aliPay' ? 3 : 2,
               orderNum: res.data.myOrderNum,
               buyType: 1,
-              price: this.actualPrice
-            }
-          })
+              price: this.actualPrice,
+            },
+          });
         }
-        this.showPay = false
+        this.showPay = false;
       } catch (error) {
         Toast.clear();
         Toast({
           message: error.message,
           position: 'top',
-          duration: 4000
+          duration: 4000,
         });
       }
     },
@@ -321,10 +606,12 @@ export default {
       return RSA.hex2b64(signData);
     },
     async getLuckDrawActivity() {
-      const res = await this.$axios.$post('/activity/v1/member/luckDrawActivity');
-      this.activityId = res.data.activityId
-      this.status = res.data.status
-      this.num = res.data.count
+      const res = await this.$axios.$post(
+        '/activity/v1/member/luckDrawActivity',
+      );
+      this.activityId = res.data.activityId;
+      this.status = res.data.status;
+      this.num = res.data.count;
       if (this.num === 0) {
         this.getLuckDraw();
       }
@@ -335,7 +622,7 @@ export default {
       if (!this.canBeRotated()) {
         return false;
       }
-      this.makePoint('activity_立即抽奖')
+      this.makePoint('activity_立即抽奖');
       // 开始转动
       // 先上锁
       this.isLocking = true;
@@ -349,19 +636,24 @@ export default {
     },
     async getLuckDraw() {
       // 设置在哪里停下，应该与后台交互，这里随机抽取0~5
-      const res = await this.$axios.$post('/activity/v1/member/luckDraw?activityId=' + this.activityId, {}, { headers: { Authorization: this.token } });
+      const res = await this.$axios.$post(
+        '/activity/v1/member/luckDraw?activityId=' + this.activityId,
+        {},
+        { headers: { Authorization: this.token } },
+      );
       if (res.status === 0) {
-        this.actualPrice = res.data.actualPrice
+        this.actualPrice = res.data.actualPrice;
         if (res.data.luckDrawType === 1) {
-          this.makePoint('activity_15.9年卡')
+          this.makePoint('activity_15.9年卡');
           if (Number(localStorage.getItem('year-15-9')) !== 2)
-            localStorage.setItem('year-15-9', 1)
+            localStorage.setItem('year-15-9', 1);
         }
         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.makePoint('activity_9.9年卡');
+          localStorage.setItem('year-9-9', 1);
         }
+
         this.mealId = res.data.mealId
         this.selMealId = res.data.mealId
         this.getMealInfo()
@@ -377,18 +669,29 @@ export default {
         Toast({
           message: res.msg,
           position: 'top',
-          duration: 4000
+          duration: 4000,
         });
       }
     },
     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/, '') }])
+      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/, ''),
+        },
+      ]);
     },
     // 已经转动完转盘触发的函数
     endRotation() {
       // 提示中奖
-      this.showPay = true
+      this.showPay = true;
       // 解锁
       this.isLocking = false;
     },
@@ -401,7 +704,7 @@ export default {
         Toast({
           message: '当前活动已过期',
           position: 'top',
-          duration: 4000
+          duration: 4000,
         });
         return false;
       }
@@ -409,7 +712,7 @@ export default {
         Toast({
           message: '当前活动未开启',
           position: 'top',
-          duration: 4000
+          duration: 4000,
         });
         return false;
       }
@@ -417,32 +720,53 @@ export default {
         Toast({
           message: '当前活动已结束',
           position: 'top',
-          duration: 4000
+          duration: 4000,
         });
         return false;
       }
       if (this.num === 0) {
-        this.showPay = true
+        this.showPay = true;
         return false;
       }
       return true;
     },
     closed() {
-      this.makePoint('activity_关闭抽奖', 'eventCode传27_抽奖流程')
+      this.makePoint('activity_关闭抽奖', 'eventCode传27_抽奖流程');
       if (Number(localStorage.getItem('year-15-9')) !== 2) {
-        this.show = true
-        localStorage.setItem('year-15-9', 2)
+        this.show = true;
+        localStorage.setItem('year-15-9', 2);
       }
       if (Number(localStorage.getItem('year-9-9')) !== 2) {
-        this.show = true
-        localStorage.setItem('year-9-9', 2)
+        this.show = true;
+        localStorage.setItem('year-9-9', 2);
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>
 
 <style lang="scss" scoped>
+.sl {
+  position: absolute;
+  text-align: center;
+  margin-top: 64px;
+  .slogan {
+    width: 270px;
+  }
+  .bannerTitle {
+    width: 186px;
+    margin-top: 5px;
+  }
+}
+.gesture {
+  position: absolute;
+  z-index: 22;
+  top: 174px;
+  left: 185px;
+  img {
+    width: 101px;
+  }
+}
 .fb {
   display: flex;
   justify-content: space-between;
@@ -486,7 +810,7 @@ export default {
   width: 51px;
   height: 26px;
   position: absolute;
-  top: 128px;
+  top: 187px;
   right: 0;
   z-index: 2;
 }
@@ -495,7 +819,7 @@ export default {
   height: 442px;
   background-image: url('../../../assets/image/activity/lottery/roulette.png');
   background-size: 100% 100%;
-  margin: 127px auto 0;
+  margin: 178px auto 0;
   position: relative;
 }
 .arrow {
@@ -511,7 +835,7 @@ export default {
 .turntable {
   position: absolute;
   left: calc(50% - 144px);
-  top: 163px;
+  top: 214px;
   width: 288px;
   height: 288px;
 }