android-cloud-H5/pages/activity/lottery/index.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',
        });
        return false;
      }
      if (this.status === 2) {
        Toast({
          message: '当前活动未开启',
          position: 'top',
        });
        return false;
      }
      if (this.status === 3) {
        Toast({
          message: '当前活动已结束',
          position: 'top',
        });
        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" scoped>
.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: 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>