android-cloud-H5/pages/activity/lottery/pc.vue

<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>
    <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>
      <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" />
    </div>
    <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-img">
          <img src="~/assets/image/activity/lottery/yearCard.png" />
        </div>
      </template>
    </RoundTurntable>
    <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">{{ 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>
          </div>
          <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-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>
        </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>
    </van-popup>
    <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" 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>
        <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 ? '狠心离开' : '继续抽奖' }}
          </div>
          <div class="btn-pay" @click="createOrder">立即购买</div>
        </div>
      </div>
      <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">
        <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="txt9 mt5">每月自动续，时长不用愁</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"><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">2、生效时间：订购扣费后立即生效。</div>
            <div class="txt7">3、注意事项：</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="txt8 mt14">温馨提示：</div>
            <div class="txt7">
              1、请您理解：通过任何不正当手段参与活动，如借助非自然流量或外挂工具；利用技术漏洞，恶意退款，批量注册账号、买号等搅乱平台管理秩序的行为，臂云科技有权限制或取消用户的活动资格，不予发放或撤销相关交易及福利内容。
            </div>
            <div class="txt7">2、如有疑问请联系双子星APP客服咨询</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 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" />
        </div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from 'vant';
import RoundTurntable from './component/roundTurntable.vue';
const RSA = require('../../../plugins/wx_rsa');
export default {
  name: 'Lottery',
  auth: false,
  components: {
    RoundTurntable,
  },
  data() {
    return {
      time: 0,
      yearOriginalPrice: 0,
      originalPrice: 0,
      checked: true,
      luckDrawType: 0,
      showRule: false,
      show: false,
      showPay: false,
      // 转盘上的奖品数据
      prizeData: [
        {
          id: 6,
          level: 29.9,
        },
        {
          id: 3,
          level: 58,
        },
        {
          id: 2,
          level: 9.9,
        },
        {
          id: 4,
          level: 39.9,
        },
        {
          id: 5,
          level: 378,
        },
        {
          id: 1,
          level: 15.9,
        },
      ],
      // 转动的圈数
      rotateCircle: 6,
      // 转动需要持续的时间（s）
      duringTime: 4.5,
      // 转盘样式的选项
      turntableStyleOption: {
        // 背景色
        prizeBgColors: [
          '#FFF9F8',
          '#FFECC9',
          '#FFF9F8',
          '#FFECC9',
          '#FFF9F8',
          '#FFECC9',
        ],
        // 转盘的外边框颜色
        borderColor: '#FFD790',
      },
      // 中奖的奖品的index
      prizeIndex: -1,
      // 用来锁定转盘，避免同时多次点击转动
      isLocking: false,
      // 剩余抽奖次数
      num: 2,
      token: '',
      activityId: '',
      actualPrice: 0,
      mealId: '',
      selMealId: '',
      paySupportType: [],
      title: '',
      payType: '',
      mealList: [],
      status: 0,
      carousel: [],
      phoneType: 'SVIP',
      client: 0,
    };
  },
  async fetch() {
    this.token = await this.$route.query.token;
    this.client = 3;
  },
  head: {
    title: '年卡抽奖活动',
  },
  created() {
    this.getLuckDrawActivity();
    this.getCarouselList();
  },
  methods: {
    async getCarouselList() {
      const res = await this.$axios.$post('/activity/v1/member/carousel');
      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,
      );
      this.yearOriginalPrice = +res.data.list.filter((item) => (item.day === 365))[0].originalPrice
      this.originalPrice = this.yearOriginalPrice
    },
    async createOrder() {
      if (!this.checked) {
        Toast({
          message: '请勾选并且阅读购买协议',
          position: 'top',
          duration: 4000
        });
        return
      }
      try {
        Toast.loading({
          duration: 0,
          forbidClick: true,
        });
        this.makePoint('activity_立即购买');
        let taocan = {
          buyType: 1,
          couponId: 0,
          id: this.selMealId,
          mealType: 0,
          phoneType: this.phoneType,
          quantity: 1,
        };
        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 }, client: this.client
        });
        Toast.clear();
        await window.vgeminipc.startPay(
          this.payType === 'aliPay' ? 3 : 2,
          res.data.myOrderNum,
          1
        );
        this.showPay = false;
      } catch (error) {
        Toast.clear();
        Toast({
          message: error.message,
          position: 'top',
          duration: 4000,
        });
      }
    },
    sort_ASCII(obj) {
      const arr = [];
      let num = 0;
      for (const i in obj) {
        arr[num] = i;
        num++;
      }
      const sortArr = arr.sort();
      const sortObj = {};
      for (const i in sortArr) {
        sortObj[sortArr[i]] = obj[sortArr[i]];
      }
      return sortObj;
    },
    jiaqian(content) {
      const PrivateKey =
        '-----BEGIN PRIVATE KEY-----MIICdgIBADANBgkqhkiG9w0BAQEFAASCAmAwggJcAgEAAoGBAKCIK/zTSJCP4XhNsb7Mc5lALog+oAja/spMjg8U6rAmVzRtKv8qhw1HK0CRbW/XV66uM+kY7fhjaYbjbbzu2PMMfs2GVpG15jCWLug9fn2hvPT1wkXfooJX61yHK7+inxAXPi4vPNi263mSQGbhZTeqbU5p7nLeRGbdFyBQXVKpAgMBAAECgYAu/475RxZAlI8rPHvkY1EYteypoMQTs6HSslUI31PSXHc9dxSWfenqHkLwdWM30jDuiDvUa6MIDHrRrfXr0XWcQ0IJ93jT7ABkFCdxcKEOG1WE8f1kZ5JyPDJjeQiI9R4jJCukpGU0DdzO7ORvRb4oTFQ15quM+3+SjnK5TtfUsQJBAOLLk03D2s7t2R0GPLZq+WL/ebowbRSy4VHP/IQi4K1bJrll0HLznov60m9UML1ATlS2ub98fBRFXEAaAwJE2O0CQQC1NDEWhrAPU5o3xjjcxIUbbYskskbhjaiX/1Vz0UzS4XfYek4SL68WBWPGWTrSbgbvXtaXj0gmcChF5jxOHtUtAkA4mPsqxfy99UdgYeUW1P1lgkH7gAhIyRdH1nK6+wU83el9DPaHKVrgrfiEBeuf3wNtSqhyK/u/B0wtRxCHKW1FAkAXfwcGdryJoDuVE9z3s3vXDKNIRN2wDaBY5UD9XZxqk9XoeiN5dDltz5EafSOFecLocxG8YVXntg9i0PHs506ZAkEAge9AKaXisZ4jCNHRn1LR2R82RtHTLb2mN3Cc6sGo+SnAKczwRwVg9RgnmaLG4Z/7kJpq0ALgEBlkOmy+9joxAw==-----END PRIVATE KEY-----';
      const signature = new RSA.KJUR.crypto.Signature({
        alg: 'SHA256withRSA',
      });
      signature.init(PrivateKey);
      signature.updateString(content);
      const signData = signature.sign();
      // 将内容转成base64
      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;
      if (this.num === 0) {
        await this.getLuckDraw();
        this.luckDrawType = 0;
      }
    },
    // 开始抽奖
    async startRotation() {
      // 如果还不可以转动
      if (!this.canBeRotated()) {
        return false;
      }
      this.makePoint('activity_立即抽奖');
      // 开始转动
      // 先上锁
      this.isLocking = true;
      await this.getLuckDraw();
      // 成功后次数减少一次
      if (this.num > 0) {
        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) {
        this.actualPrice = res.data.actualPrice;
        this.luckDrawType = res.data.luckDrawType;
        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 (res.data.luckDrawType === 2) {
          this.makePoint('activity_9.9年卡');
          if (Number(localStorage.getItem('year-9-9')) !== 2) {
            localStorage.setItem('year-9-9', 1);
          }
        }

        this.mealId = res.data.mealId
        this.selMealId = res.data.mealId
        this.getMealInfo()
        this.paySupportType = res.data.paySupportType
        if (this.$userAgent.isMiniProgram) {
          this.paySupportType = ['wxPay']
        }
        this.payType = this.paySupportType[0]
        this.phoneType = res.data.phoneType
        this.title = res.data.title
        this.prizeIndex = res.data.luckDrawType === 1 ? 5 : 2;
        if (this.num === 0) {
          this.showPay = true
        }
      } else {
        Toast({
          message: res.msg,
          position: 'top',
          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/, ''),
        },
      ]);
    },
    // 已经转动完转盘触发的函数
    endRotation() {
      // 提示中奖
      this.showPay = true;
      // 解锁
      this.isLocking = false;
    },
    // 判断是否可以转动
    canBeRotated() {
      if (this.isLocking) {
        return false;
      }
      if (this.status === 0) {
        Toast({
          message: '当前活动已过期',
          position: 'top',
          duration: 4000,
        });
        return false;
      }
      if (this.status === 2) {
        Toast({
          message: '当前活动未开启',
          position: 'top',
          duration: 4000,
        });
        return false;
      }
      if (this.status === 3) {
        Toast({
          message: '当前活动已结束',
          position: 'top',
          duration: 4000,
        });
        return false;
      }
      if (this.num === 0) {
        this.showPay = true;
        return false;
      }
      this.time = 24 * 60 * 60 * 1000;
      return true;
    },
    closed() {
      this.makePoint('activity_关闭抽奖', 'eventCode传27_抽奖流程');
      if (+localStorage.getItem('year-15-9') !== 2) {
        this.show = true;
        localStorage.setItem('year-15-9', 2);
      }
      if (+localStorage.getItem('year-9-9') !== 2) {
        this.show = true;
        localStorage.setItem('year-9-9', 2);
      }
      this.showPay = false
    },
  },
};
</script>

<style>
.lottery-container .van-grid-item__content {
  padding: 0 !important;
}
</style>
<style lang="scss" scoped>
@media (min-width: 0px) {
  .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;
    margin: 58px auto 0;
  }
  .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;
  }
  .fw500 {
    font-weight: 500;
  }
  .mt5 {
    margin-top: 5px;
  }
  .mt14 {
    margin-top: 14px;
  }
  .lottery-container {
    background-color: #bbe5f2;
    background-image: url('../../../assets/image/activity/lottery/bg.png');
    background-size: contain;
    min-height: 100vh;
    max-width: 400px;
    position: relative;
    overflow: hidden;
    margin: 0 auto;
  }
  .lottery-swipe {
    width: 100vw;
    height: 25px;
    background: rgba($color: #000000, $alpha: 0.24);
    position: absolute;
    top: 0px;
    left: 0;
    z-index: 1;
  }
  .lottery-swipe .van-swipe-item {
    color: #ffffff;
    font-size: 13px;
    line-height: 25px;
    text-align: center;
  }
  .w51h26 {
    width: 51px;
    height: 26px;
    position: absolute;
    top: 187px;
    right: 0;
    z-index: 2;
  }
  .roulette {
    width: 372px;
    height: 442px;
    background-image: url('../../../assets/image/activity/lottery/roulette.png');
    background-size: 100% 100%;
    margin: 178px auto 0;
    position: relative;
  }
  .arrow {
    width: 122px;
    height: 135px;
    position: absolute;
    top: 110px;
    left: 125px;
    background-image: url('../../../assets/image/activity/lottery/arrow.png');
    background-size: 100% 100%;
    z-index: 1;
  }
  .turntable {
    position: absolute;
    left: calc(50% - 144px);
    top: 214px;
    width: 288px;
    height: 288px;
  }
  .turntable-name {
    position: absolute;
    left: 10px;
    top: 20px;
    width: calc(100% - 20px);
    font-size: 20px;
    font-weight: 600;
    text-align: center;
    color: #b8320d;
  }
  .fs15 {
    font-size: 15px;
  }
  .turntable-img {
    position: relative;
    /*要居中就要50% - 宽度 / 2*/
    left: calc(50% - 40px / 2);
    top: 43px;
    width: 52px;
    height: 39px;
    img {
      display: inline-block;
      width: 52px;
      height: 39px;
    }
  }
  .start-btn {
    width: 276px;
    height: 55px;
    position: absolute;
    bottom: 16px;
    left: calc(50% - 138px);
  }
  .num {
    margin-top: 8px;
    text-align: center;
    font-size: 14px;
    color: #333333;
    line-height: 20px;
  }
  .popup-view {
    overflow: hidden;
    width: 320px;
    border-radius: 10px;
    background: #ffffff;
    text-align: center;
    margin-top: -40px;
  }

  .popup-view-rule {
    width: 324px;
    height: 452px;
    box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1);
    box-sizing: border-box;
    background: linear-gradient(
      180deg,
      rgba(254, 178, 119, 1),
      rgba(255, 91, 46, 1)
    );
    position: relative;
    border-radius: 18px;
    padding: 6px;
  }
  .popup-view-rule-box {
    width: 312px;
    height: 440px;
    background: linear-gradient(181deg, #fffffe 0%, #f7f2e5 100%);
    border-radius: 18px;
    box-sizing: border-box;
    padding-top: 38px;
  }
  .popup-view-rule-title {
    width: 220px;
    height: 54px;
    background-image: url('../../../assets/image/activity/lottery/buy-rule-title.png');
    background-size: 100% 100%;
    position: absolute;
    top: -14px;
    left: 52px;
    font-size: 18px;
    font-weight: 600;
    color: #fffefc;
    line-height: 54px;
    text-align: center;
  }
  .h330 {
    height: 335px;
    overflow-y: auto;
    padding: 0 16px;
  }
  .txt1 {
    font-size: 30px;
    font-weight: 600;
    color: #333333;
    line-height: 24px;
    text-align: center;
    margin-top: 23.5px;
  }
  .coupon-1 {
    width: 283px;
    height: 81px;
    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%);
  }
  .coupon-title {
    color: #ffffff;
    font-weight: 600;
    font-size: 20px;
    text-align: center;
    z-index: 1;
    width: 100%;
  }
  .txt2 {
    font-weight: 600;
    font-size: 34px;
  }
  .txt3 {
    color: #db6857;
  }
  .txt4 {
    text-align: center;
    font-size: 13px;
    font-weight: 600;
    color: #ffffff;
    z-index: 1;
  }
  .coupon-select-icon {
    width: 34px;
    height: 20px;
    position: absolute;
    top: 0;
    right: 0;
    z-index: 2;
  }
  .w253h73 {
    width: 253px;
    height: 73px;
    position: absolute;
    top: 15px;
    left: 15px;
  }
  .coupon-2 {
    width: 138px;
    height: 81px;
    box-sizing: border-box;
    margin-top: 7px;
    border-radius: 5px;
    background: linear-gradient(0deg, #979797 0%, #c8c8c8 98%);
    & .coupon-title {
      color: #ffffff;
      font-weight: 600;
      font-size: 15px;
      text-align: center;
      z-index: 1;
      margin-top: 22.5px;
      width: 100%;
      line-height: 24px;
    }
    & .txt2 {
      font-size: 15px;
    }
  }
  .w111h73 {
    width: 111px;
    height: 73px;
    position: absolute;
    top: 15px;
    left: 12px;
  }
  .txt5 {
    font-size: 15px;
    color: #333333;
    margin-left: 7px;
    font-weight: 300;
  }
  .icon-pay {
    font-size: 26px;
    line-height: inherit;
  }
  .fnc {
    display: flex;
    align-items: center;
  }
  .fnbc {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 50px;
    padding: 0 21px;
  }
  .fnbc1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 91px;
    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;
    height: 62px;
    margin: 0 auto;
  }
  .txt6 {
    color: #ffffff;
    font-size: 12px;
    line-height: 16px;
    height: 16px;
    text-align: center;
    margin-top: 10px;
    a {
      color: #f5e07e;
    }
  }
  .txt11 {
    color: #666666;
    font-size: 15px;
    line-height: 2;
    margin-top: 8px;
    text-align: center;
  }
  .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%);
    border-radius: 17px;
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    line-height: 34px;
  }
  .btn-pay {
    width: 152px;
    height: 40px;
    background: linear-gradient(0deg, #df4324 0%, #ffbf96 98%);
    border-radius: 20px;
    font-size: 20px;
    font-weight: 600;
    color: #ffffff;
    text-align: center;
    line-height: 40px;
  }
  .txt7 {
    font-size: 13px;
    line-height: 19px;
    color: #666666;
    text-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);
  }
  .txt8 {
    font-size: 15px;
    font-weight: 500;
    line-height: 19px;
    color: #333333;
    text-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);
  }
  .txt9 {
    font-size: 13px;
    color: #333333;
    line-height: 19px;
    text-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);
  }
  .txt10 {
    font-size: 13px;
    line-height: 19px;
    color: #333;
    text-shadow: 0px 1px 20px rgba(0, 0, 0, 0.1);
  }
}
</style>