|
|
@@ -0,0 +1,324 @@
|
|
|
+<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" :is-mask-click="false">
|
|
|
+ <view v-if="this.hasLotteryCount <= 0" class="popup" style="justify-content: space-around">
|
|
|
+ <view style="fontSize: 36rpx">
|
|
|
+ <view>很遗憾！</view>
|
|
|
+ <view>今日抽奖次数已用光</view>
|
|
|
+ </view>
|
|
|
+ <img src="../../static/lottery/noChance.png" />
|
|
|
+ </view>
|
|
|
+ <view v-else class="popup">
|
|
|
+ <view style="fontSize: 36rpx">{{ 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-icons class="close" type="close" size="45" color="#FFF" @click="closePopup" />
|
|
|
+ </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()
|
|
|
+ console.log(getApp());
|
|
|
+ },
|
|
|
+ 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()
|
|
|
+ this.getList()
|
|
|
+ setTimeout(() => {
|
|
|
+ this.disabled = true
|
|
|
+ uni.showToast({
|
|
|
+ title: '领取成功，已累积到积分中！'
|
|
|
+ })
|
|
|
+ }, 500)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 填写收货信息
|
|
|
+ getDetail() {
|
|
|
+ uni.redirectTo({
|
|
|
+ url: `/pages/lottery/detail?prizeId=${this.form.resultGoodId}&lotteryCode=` + encodeURIComponent(this.form.lotteryCode)
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 关闭弹窗
|
|
|
+ closePopup() {
|
|
|
+ this.$refs.popup.close()
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+</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;
|
|
|
+ }
|
|
|
+
|
|
|
+ button {
|
|
|
+ background: linear-gradient(180deg, #72cdae 0%, #599f82 100%);
|
|
|
+ color: #fff;
|
|
|
+ width: 320rpx;
|
|
|
+ height: 80rpx;
|
|
|
+ line-height: 80rpx;
|
|
|
+ border-radius: 50rpx;
|
|
|
+ font-size: 32rpx;
|
|
|
+ }
|
|
|
+ }
|
|
|
+ .close {
|
|
|
+ position: absolute;
|
|
|
+ left: 50%;
|
|
|
+ transform: translate(-50%);
|
|
|
+ margin-top: 20rpx;
|
|
|
+ }
|
|
|
+}
|
|
|
+</style>
|
