android-cloud-H5/pages/activity/lottery/index.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">
        <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">
      <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年卡');">
              <div class="coupon-title">
                <span>￥</span><span class="txt2">{{
                item.originalPrice ? item.originalPrice : item.actualPrice
              }}</span>
              </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>
          </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>
      <div class="buy-bar">
        原价¥{{originalPrice}}
        <div class="buy-bar-btn" @click="createOrder">
          <div>立即购买</div>
          <div>(节省¥{{originalPrice-actualPrice}})</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">
      <div class="popup-view popup-view-leave">
        <div class="txt1">确定离开吗</div>
        <div class="txt11">
          离开后您将失去
        </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-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 class="fnbc1">
          <div class="btn-leave" @click="show = false;makePoint('activity_狠心离开');">
            狠心离开
          </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');
const webUni = require('../../../plugins/uni');
export default {
  name: 'Lottery',
  auth: false,
  components: {
    RoundTurntable,
  },
  data() {
    return {
      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() {
    if (this.$userAgent.isAndroid) {
      this.token = await window.native.getToken();
    } else {
      this.token = this.$route.query.token;
    }
  },
  head: {
    title: '年卡抽奖活动',
  },
  created() {
    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.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() {
      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 },
        });
        Toast.clear();
        if (this.$userAgent.isSzx && this.$userAgent.isAndroid) {
          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,
          });
        } 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,
              }),
          });
        } else {
          // 使用postMessage 方法可以发送消息到应用, 消息内容需要在data 对象中,否则webview无法接收到
          webUni.webView.postMessage({
            data: {
              payType: this.payType === 'aliPay' ? 3 : 2,
              orderNum: res.data.myOrderNum,
              buyType: 1,
              price: this.actualPrice,
            },
          });
        }
        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) {
        this.getLuckDraw();
      }
    },
    // 开始抽奖
    startRotation() {
      // 如果还不可以转动
      if (!this.canBeRotated()) {
        return false;
      }
      this.makePoint('activity_立即抽奖');
      // 开始转动
      // 先上锁
      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) {
        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) {
          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
        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;
        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;
      }
      return true;
    },
    closed() {
      this.makePoint('activity_关闭抽奖', 'eventCode传27_抽奖流程');
      if (Number(localStorage.getItem('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.showPay = false
    },
  },
};
</script>

<style>
  .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: 24px;
      margin-top: 5px;
    }
    & div:nth-child(2) {
      text-align: center;
      font-size: 12px;
      color: #FFFFFF;
      line-height: 24px;
    }
  }
  .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;

  }
.w219h26 {
  width: 219px;
  height: 26px;
  display: block;
  margin: 0 auto 26.5px;
}
.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;
  overflow: hidden;
  margin: 0 auto;
}
.lottery-swipe {
  width: 188px;
  height: 25px;
  background: rgba($color: #000000, $alpha: 0.24);
  border-radius: 0px 16px 16px 0px;
  position: absolute;
  top: 134px;
  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;
}

.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;
}
.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;
  margin-top: 15.5px;
  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: 16px;
  color: #333333;
  margin-left: 7px;
}
.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 10px;
}
.fnbc1 {
  display: flex;
  justify-content: space-around;
  align-items: center;
  height: 91px;
  border-top: 1px dashed #333;
}
.w304h62 {
  width: 304px;
  height: 62px;
  margin: 0 auto;
}
.txt6 {
  color: #666666;
  font-size: 12px;
  line-height: 16px;
  margin-top: 11px;
  text-align: center;
  a {
    color: #F5E07E;
  }
}
.txt11 {
  color: #666666;
  font-size: 15px;
  line-height: 2;
  margin-top: 8px;
  text-align: center;
}
.popup-view-leave {
  margin-bottom: 70px;
}
.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>