ohplay_h5/src/pages/lottery/index.vue

<template>
  <view class="app-container">
    <view class="nav" :style="{'padding-top': statusBarHeight + 'px'}">
      <uni-icons type="back" style="font-size: 48rpx" @click="close" />
      <text class="title">积分抽奖</text>
    </view>

    <!-- 每次消耗多少积分 -->
    <view class="every">{{lotteryConsumePoint}}积分/次</view>

    <!-- 转盘 -->
    <LuckyWheel class="lucky" ref="lucky" width="568rpx" height="568rpx" :prizes="prizes" :buttons="buttons"
      :defaultStyle="defaultStyle" @start="startCallBack" @end="endCallBack" />

    <!-- 剩余抽奖次数和积分 -->
    <view class="tips">
      <view>今日剩余抽奖机会：{{ hasLotteryCount }}</view>
      <view>可用积分：{{ maySignPoint }}</view>
    </view>

    <!-- 活动规则 -->
    <view class="rules">
      <view class="title">活动规则</view>
      <view v-for="(item, index) in rule" :key="index">{{ item }}</view>
    </view>

    <!-- 弹窗 -->
    <uni-popup ref="popup" type="center">
      <view v-if="this.hasLotteryCount <= 0" class="popup" style="justify-content: space-around">
        <view>
          <view>很遗憾！</view>
          <view>今日抽奖次数已用光</view>
        </view>
        <img src="../../static/lottery/noChance.png" />
      </view>
      <view v-else class="popup">
        <view>{{ form.resultGoodName }}</view>
        <img :src="form.resultGoodPic" />
        <button v-if="form.resultGoodType === 4" @click="getSubmit">领取</button>
        <button v-if="form.resultGoodType === 5" @click="getAgain">再抽一次</button>
        <button v-if="form.resultGoodType === 3" @click="getDetail">填写收货信息</button>
      </view>
    </uni-popup>
  </view>
</template>

<script>
import { page, result, receive } from '@/api/lottery.js'
import LuckyWheel from '@lucky-canvas/uni/lucky-wheel'
export default {
  components: {
    LuckyWheel
  },
  data() {
    return {
      // 状态栏
      statusBarHeight: getApp().globalData.statusBarHeight,
      // 转盘
      prizes: [],
      buttons: [{
        radius: '45%',
        background: '#ffffff40',
        imgs: [{
          src: '../../static/lottery/btn.png',
          top: '-75px',
          width: '96px',
          height: '124px'
        }]
      }],
      defaultStyle: {
        fontSize: '26rpx'
      },
      // 可用积分
      maySignPoint: 0,
      // 每次消耗积分
      lotteryConsumePoint: 0,
      // 今日剩余抽奖机会
      hasLotteryCount: 0,
      // 活动规则
      rule: '',
      // 表单
      form: {},
      // 防止连点
      disabled: true
    }
  },
  onLoad() {
    this.getList()
  },
  methods: {
    // 获取页面信息
    getList() {
      this.prizes = []
      page(getApp().globalData.userInfo).then(res => {
        if (res.data.code === 0) {
          const j = res.data.data
          // 可用积分
          this.maySignPoint = j.maySignPoint
          // 每次消耗积分
          this.lotteryConsumePoint = j.lotteryConsumePoint
          // 今日剩余抽奖机会
          this.hasLotteryCount = j.hasLotteryCount
          // 奖品列表
          j.userLotteryDatas.map(i => {
            this.prizes.push({
              background: i.sort % 2 === 0 ? '#fff7a6' : '#9cc6a5',
              fonts: [{
                text: i.name,
                fontColor: i.sort % 2 === 0 ? '#ff8831' : '#fff',
                top: '10%'
              }],
              imgs: [{
                src: i.pic,
                top: '30%',
                width: '108rpx',
                height: '108rpx'
              }]
            })
          })
          // 活动规则
          this.rule = j.rule.split('\n')
        }
      })
    },

    close() {
      closePage.postMessage('关闭页面')
    },

    // 点击抽奖按钮触发回调
    startCallBack() {
      if (this.hasLotteryCount > 0) {
        if (this.maySignPoint >= this.lotteryConsumePoint) {
          if (this.disabled) {
            this.$refs.lucky.play()
            this.disabled = false
            result(getApp().globalData.userInfo).then(res => {
              if (res.data.code === 0) {
                setTimeout(() => {
                  this.$refs.lucky.stop(res.data.data.resultGoodSort - 1)
                  this.form = res.data.data
                }, 3000)
              } else {
                this.$refs.lucky.stop()
                uni.showToast({
                  icon: 'error',
                  title: res.data.message
                })
              }
            })
          }
        } else {
          uni.showToast({
            icon: 'error',
            title: '可用积分不足'
          })
        }
      } else {
        this.$refs.popup.open()
      }
    },
    // 抽奖结束触发回调
    endCallBack() {
      this.$nextTick(() => {
        this.$refs.popup.open()
        this.disabled = true
        this.getList()
      })
    },

    // 再抽一次
    getAgain() {
      this.$refs.popup.close()
      this.startCallBack()
    },

    // 领取
    getSubmit() {
      if (this.disabled) {
        this.disabled = false
        receive(getApp().globalData.userInfo, {
          prizeId: this.form.resultGoodId,
          lotteryCode: this.form.lotteryCode
        }).then(res => {
          if (res.data.code === 0) {
            this.$refs.popup.close()
            uni.showToast({
              title: '领取成功！'
            })
            this.getList()
            setTimeout(() => {
              this.disabled = true
            }, 2000)
          }
        })
      }
    },

    // 填写收货信息
    getDetail() {
      uni.redirectTo({
        url: `/pages/lottery/detail?prizeId=${this.form.resultGoodId}&lotteryCode=` + encodeURIComponent(this.form.lotteryCode)
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.app-container {
  position: relative;
  background: url('@/static/lottery/bg.png');
  background-size: cover;
  background-repeat: no-repeat;
  width: 100%;
  height: 1880rpx;
  padding: 0 32rpx 32rpx;

  .nav {
    height: 88rpx;
    display: flex;
    align-items: center;
    color: #333333;
    font-weight: bold;
    font-size: 36rpx;
    position: relative;
    box-sizing: content-box;

    .title {
      position: absolute;
      left: 50%;
      transform: translate(-50%);
    }
  }

  .every {
    position: absolute;
    left: 50%;
    top: 380rpx;
    transform: translate(-50%);
    color: #1a5509;
    font-weight: bold;
  }

  .lucky {
    position: absolute;
    top: 496rpx;
    left: 50%;
    transform: translate(-50%);
  }

  .tips {
    position: absolute;
    top: 62%;
    left: 50%;
    transform: translate(-50%);
    text-align: center;
    line-height: 50rpx;
  }

  .rules {
    width: 100%;
    position: absolute;
    left: 0;
    bottom: 40rpx;
    color: #192b24;
    padding: 0 64rpx;
    font-size: 28rpx;
    font-weight: bold;

    .title {
      font-weight: bold;
      font-size: 38rpx;
      text-align: center;
      margin-bottom: 32rpx;
    }
    view {
      margin-bottom: 20rpx;
    }
  }

  .popup {
    width: 576rpx;
    height: 600rpx;
    background: #fff;
    border-radius: 32rpx;
    color: #000;
    font-weight: bold;
    text-align: center;
    padding: 48rpx 0;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;

    img {
      width: 328rpx;
      height: 236rpx;
    }

    button {
      background: linear-gradient(180deg, #72cdae 0%, #599f82 100%);
      color: #fff;
      width: 320rpx;
      height: 80rpx;
      line-height: 80rpx;
      border-radius: 50rpx;
      font-size: 32rpx;
    }
  }
}
</style>