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

<template>
  <div class="lottery-container">
    <van-swipe :autoplay="3000" class="lottery-swipe" vertical :show-indicators="false">
      <van-swipe-item>有23245个用户 购买15.9年卡</van-swipe-item>
      <van-swipe-item>有23245个用户 购买15.9年卡</van-swipe-item>
      <van-swipe-item>有23245个用户 购买15.9年卡</van-swipe-item>
      <van-swipe-item>有23245个用户 购买15.9年卡</van-swipe-item>
    </van-swipe>
    <img class="w51h26" src="~/assets/image/activity/lottery/rule.png" alt="" @click="showRule=true">
    <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>
    <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><span class="txt3">（{{title}}）</span></div>
          <div class="txt4">年卡（已获得）</div>
          <img class="w253h73" src="~/assets/image/activity/lottery/coupon-1.png" alt="">
        </div>
        <div v-for="item in mealList" :key="item.id" :class="selMealId===item.id ? 'coupon-2 active' : 'coupon-2'" @click="selMealId=item.id">
          <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.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 v-for="item in paySupportType" :key="item" class="fnbc" @click="payType = item">
          <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">购买协议</a></div>
      </div>
    </van-popup>
    <van-popup v-model="show" closeable close-icon-position="top-right" round>
      <div class="popup-view popup-view-leave">
        <div class="txt1">确定离开吗</div>
        <div class="txt6">离开后您将失去{{actualPrice}}年卡，24小时付款有效</div>
        <div class="coupon-1 active">
          <img class="coupon-select-icon" src="~/assets/image/activity/lottery/select-icon.png" alt="">
          <div class="coupon-title"><span class="txt2">{{actualPrice}}</span><span>会员</span><span class="txt3">（{{title}}）</span></div>
          <div class="txt4">年卡（已获得）</div>
          <img class="w253h73" src="~/assets/image/activity/lottery/coupon-1.png" alt="">
        </div>
        <div class="fnbc">
          <div class="btn-leave" @click="show=false">狠心离开</div>
          <div class="btn-pay" @click="createOrder">立即购买</div>
        </div>
      </div>
    </van-popup>
    <van-popup v-model="showRule" closeable close-icon-position="top-right" round>
      <div class="popup-view popup-view-leave" style="text-align: left;">
        <div class="txt1">购买协议</div>
        <div class="txt7">时长包使用规则</div>
        <div class="txt6"> 年卡特惠云手机，按需补充时长包</div>
        <div class="txt6">有效时间：时长用完前一直有效，支持跨月。</div>
        <div class="txt6">可用范围：可续时长的机型</div>
        <div class="txt6">生效方式：立即生效</div>
        <div class="txt6">退订说明：立即生效产品，不支持退订</div>
        <div class="txt7">产品说明</div>
        <div class="txt6">1、生效方式：时长补充包订购后立即生效，直至时长用完则失效，用户可重复订购。</div>
        <div class="txt6">2、时长使用顺序：优先使用年卡特惠包时长，年卡特惠包时长耗尽，自动使用时长包时长。</div>
        <div class="txt6">3、年卡特惠包合约到期后，如时长补充包仍有时长，年卡特惠包所属云手机可继续使用至时长用尽。</div>
        <div class="txt7">温馨提示：</div>
        <div class="txt6">1、请您理解：通过任何不正当手段参与活动，如借助非自然流量/外挂工具；利用技术漏洞，恶意退款，批量注册账号、买号等搅乱平台管理秩序的行为，臂云科技有权限制/取消用户的活动资格，不予发放/撤销相关交易及福利内容。</div>
        <div class="txt6">2、如有疑问请联系唔即云APP客服咨询。</div>
      </div>
    </van-popup>
  </div>
</template>

<script>
import { Toast } from 'vant'
import RoundTurntable from './component/roundTurntable.vue'
export default {
  name: 'Lottery',
  auth: false,
  components: {
    RoundTurntable
  },
  data() {
    return {
      showRule: false,
      show: false,
      showPay: false,
      // 转盘上的奖品数据
      prizeData: [
        {
          id: 1,
          level: 29.9
        },
        {
          id: 2,
          level: 58
        },
        {
          id: 3,
          level: 9.9
        },
        {
          id: 4,
          level: 39.9
        },
        {
          id: 5,
          level: 378
        },
        {
          id: 6,
          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
    }
  },
  async fetch() {
    if (this.$userAgent.isAndroid) {
      this.token = await window.native.getToken();
    } else {
      this.token = this.$route.query.token;
    }
  },
  head: {
    title: '年卡抽奖活动'
  },
  created() {
    this.getLuckDrawActivity()
    this.getMealInfo()
  },
  methods: {
    async getMealInfo() {
      const res = await this.$axios.$get('/pay/v2/meal/info?phoneType=SVIP');
      this.mealList = res.data.list.filter(item => item.day === 30 || item.day === 365)
    },
    createOrder() {
      if (this.$userAgent.isAndroid) {
        window.native.startPay(1, this.mealId, 1);
      }
    },
    async getLuckDrawActivity() {
      const res = await this.$axios.$post('/activity/v1/member/luckDrawActivity');
      this.activityId = res.data.activityId
      this.status = res.data.status
    },
    // 开始抽奖
    async startRotation() {
      // 如果还不可以转动
      if (!this.canBeRotated()) {
        return false;
      }
      // 开始转动
      // 先上锁
      this.isLocking = true;
      // 设置在哪里停下，应该与后台交互，这里随机抽取0~5
      const res = await this.$axios.$post('/activity/v1/member/luckDraw?activityId=' + this.activityId, {}, { headers: { Authorization: this.token } });
      if (res.status === 0) {
        const index = this.prizeData.findIndex(item => item.level === res.data.actualPrice)
        this.actualPrice = res.data.actualPrice
        if (Number(localStorage.getItem('year-15-9')) !== 2 && this.actualPrice === 15.9) {
          localStorage.setItem('year-15-9', 1)
        }
        if (Number(localStorage.getItem('year-9-9')) !== 2 && this.actualPrice === 9.9) {
          localStorage.setItem('year-9-9', 1)
        }
        this.mealId = res.data.mealId
        this.selMealId = res.data.mealId
        this.paySupportType = res.data.paySupportType
        this.payType = this.paySupportType[0]
        this.title = res.data.title
        this.prizeIndex = index;
      } else {
        return
      }
      // 成功后次数减少一次
      this.num--;
      // 告诉子组件，开始转动了
      this.$refs.roundTurntable.rotate(this.prizeIndex);
    },
    // 已经转动完转盘触发的函数
    endRotation() {
      // 提示中奖
      this.showPay = true
      // 解锁
      this.isLocking = false;
    },
    // 判断是否可以转动
    canBeRotated() {
      if (this.isLocking) {
        return false;
      }
      if (this.status === 0) {
        Toast({
          message: '当前活动已过期',
          position: 'top',
          className: 'lottery-container-toast'
        });
        return false;
      }
      if (this.status === 2) {
        Toast({
          message: '当前活动未开启',
          position: 'top',
          className: 'lottery-container-toast'
        });
        return false;
      }
      if (this.status === 3) {
        Toast({
          message: '当前活动已结束',
          position: 'top',
          className: 'lottery-container-toast'
        });
        return false;
      }
      return true;
    },
    closed() {
      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">
@media (min-width: 0px) {
  .lottery-container-toast {
    &.van-toast--text {
      min-width: 94px;
      padding: 8px 12px;
    }
    &.van-toast {
      font-size: 13px;
      line-height: 21px;
    }
  }
}
</style>

<style lang="scss" scoped>
@media (min-width: 0px) {
  .lottery-container {
    background-color: #bbe5f2;
    background-image: url('../../../assets/image/activity/lottery/bg.png');
    background-size: contain;
    min-height: 100vh;
    overflow: hidden;
    max-width: 500px;
    margin: 0 auto;
    position: relative;
  }
  .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: 128px;
    right: 0;
    z-index: 2;
  }
  .roulette {
    width: 372px;
    height: 442px;
    background-image: url('../../../assets/image/activity/lottery/roulette.png');
    background-size: 100% 100%;
    margin: 127px 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: 163px;
    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;
  }
  .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 {
    display: inline-block;
    width: 138px;
    height: 106px;
    box-sizing: border-box;
    margin: 11px 4px 0;
    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: 14px;
    line-height: 18px;
    margin-top: 10px;
  }
}
</style>