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>
    <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="txt4">12个月 30H/月 不使用不计时</div>
          <img
            class="w253h73"
            src="~/assets/image/activity/lottery/coupon-1.png"
            alt=""
          />
        </div>
        <div class="fb">
          <div
            v-for="item in mealList"
            :key="item.id"
            :class="selMealId === item.id ? 'coupon-2 active' : 'coupon-2'"
            @click="
              selMealId = item.id;
              makePoint(
                item.day === 30 ? 'activity_38月卡' : 'activity_268年卡',
              );
            "
          >
            <img
              v-if="selMealId === item.id"
              class="coupon-select-icon"
              src="~/assets/image/activity/lottery/select-icon.png"
              alt=""
            />
            <img
              v-else
              class="coupon-select-icon"
              src="~/assets/image/activity/lottery/unselect-icon.png"
              alt=""
            />
            <div class="coupon-title">
              <span class="txt2">{{
                item.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-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>
        <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_关闭弹窗')"
    >
      <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="txt4">12个月 30H/月 不使用不计时</div>
          <img
            class="w253h73"
            src="~/assets/image/activity/lottery/coupon-1.png"
            alt=""
          />
        </div>
        <div class="fb">
          <div
            v-for="item in mealList"
            :key="item.id"
            :class="selMealId === item.id ? 'coupon-2 active' : 'coupon-2'"
            @click="
              selMealId = item.id;
              makePoint(
                item.day === 30 ? 'activity_38月卡' : 'activity_268年卡',
              );
            "
          >
            <img
              v-if="selMealId === item.id"
              class="coupon-select-icon"
              src="~/assets/image/activity/lottery/select-icon.png"
              alt=""
            />
            <img
              v-else
              class="coupon-select-icon"
              src="~/assets/image/activity/lottery/unselect-icon.png"
              alt=""
            />
            <div class="coupon-title">
              <span class="txt2">{{
                item.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-if="item === 'aliPay'" class="fnc">
            <van-icon
              class="icon-pay"
              :name="require('~/assets/image/activity/lottery/alipay.png')"
            />
            <span class="txt5">支付宝支付</span>
          </div>
          <div v-else class="fnc">
            <van-icon
              class="icon-pay"
              :name="require('~/assets/image/activity/lottery/wx.png')"
            />
            <span class="txt5">微信支付</span>
          </div>
          <van-icon
            :name="
              payType === item
                ? require('~/assets/image/activity/lottery/select-round-icon.png')
                : require('~/assets/image/activity/lottery/unselect-round-icon.png')
            "
            size="24"
          />
        </div>
        <div class="fnbc">
          <div
            class="btn-leave"
            @click="
              show = false;
              makePoint('activity_狠心离开');
            "
          >
            狠心离开
          </div>
          <div class="btn-pay" @click="createOrder">立即购买</div>
        </div>
      </div>
    </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 {
      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,
      );
    },
    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;
        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;
      } 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);
      }
    },
  },
};
</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;
  width: 286px;
  margin: 0 auto;
}
.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 {
  width: 324px;
  padding: 20px 10px;
  box-shadow: 0px 1px 20px 0px rgba(0, 0, 0, 0.1);
  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: 18px;
  font-weight: 600;
  color: #333333;
  line-height: 25px;
  text-align: center;
}
.coupon-1 {
  width: 286px;
  height: 106px;
  box-sizing: border-box;
  margin: 11px auto 0;
  position: relative;
  border-radius: 13px;
  border: 2px solid;
  border-color: #e8e8e8;
  box-sizing: border-box;
  &::before,
  &::after {
    background-color: white;
    border-radius: 50%;
    content: '';
    width: 20px;
    height: 20px;
    position: absolute;
    top: 43px;
    z-index: 1;
  }
  &::before {
    border-right: 2px solid;
    border-color: #e8e8e8;
    left: -12px;
    border-radius: 0 10px 10px 0;
  }

  &::after {
    border-left: 2px solid;
    border-color: #e8e8e8;
    right: -12px;
    border-radius: 10px 0 0 10px;
  }
}
.coupon-1.active,
.coupon-2.active {
  border-left: 2px solid;
  border-color: #d96a57 !important;
  &::before {
    border-right: 2px solid;
    border-color: #d96a57;
  }

  &::after {
    border-left: 2px solid;
    border-color: #d96a57;
  }
}
.coupon-title {
  color: #362113;
  font-size: 12px;
  text-align: center;
  z-index: 1;
  position: absolute;
  top: 23px;
  width: 100%;
}
.txt2 {
  font-weight: 600;
  font-size: 24px;
}
.txt3 {
  color: #db6857;
}
.txt4 {
  position: absolute;
  top: 68px;
  width: 100%;
  text-align: center;
  font-size: 14px;
  font-weight: 600;
  color: #ffffff;
  line-height: 20px;
  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: 137px;
  height: 106px;
  box-sizing: border-box;
  margin-top: 11px;
  position: relative;
  border-radius: 13px;
  box-sizing: border-box;
  border: 2px solid;
  border-color: #e8e8e8;
  &::before,
  &::after {
    background-color: white;
    border-radius: 50%;
    content: '';
    width: 20px;
    height: 20px;
    position: absolute;
    top: 43px;
    z-index: 1;
  }
  &::before {
    border-right: 2px solid;
    border-color: #e8e8e8;
    left: -12px;
    border-radius: 0 10px 10px 0;
  }

  &::after {
    border-left: 2px solid;
    border-color: #e8e8e8;
    right: -12px;
    border-radius: 10px 0 0 10px;
  }
}
.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;
}
.w304h62 {
  width: 304px;
  height: 62px;
  margin: 0 auto;
}
.txt6 {
  color: #333333;
  font-size: 11px;
  line-height: 16px;
  a {
    color: #ff7656;
    text-decoration: underline;
  }
}
.popup-view-leave {
  background: linear-gradient(180deg, #ffffff 0%, #f7f1e3 100%);
}
.btn-leave {
  width: 140px;
  height: 48px;
  background: linear-gradient(180deg, #ffdb94 0%, #ff9539 100%);
  box-shadow: 0px 2px 7px 0px rgba(237, 76, 0, 0.17),
    inset 0px -5px 0px 0px #ff7700;
  border-radius: 24px;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  line-height: 43px;
  margin-top: 15px;
}
.btn-pay {
  width: 140px;
  height: 48px;
  background: linear-gradient(180deg, #ff9278 0%, #ff562f 100%);
  box-shadow: 0px 2px 7px 0px rgba(237, 76, 0, 0.17),
    inset 0px -5px 0px 0px #f62e00;
  border-radius: 24px;
  border-radius: 24px;
  font-size: 18px;
  font-weight: 600;
  color: #ffffff;
  text-align: center;
  line-height: 43px;
  margin-top: 15px;
}
.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>