|
|
@@ -0,0 +1,306 @@
|
|
|
+<template>
|
|
|
+ <view class="app-container">
|
|
|
+ <view class="nav" :style="{'margin-top': statusBarHeight}">
|
|
|
+ <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 in ruleList" :key="item.sort">
|
|
|
+ {{ item.description }}
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+
|
|
|
+ <!-- 弹窗 -->
|
|
|
+ <uni-popup ref="popup" type="center">
|
|
|
+ <view class="popup" v-if="form.resultGoodType === 5">
|
|
|
+ <view>谢谢参与</view>
|
|
|
+ <view style="color: #999999; font-size: 28rpx">别灰心，再来一次~</view>
|
|
|
+ <img src="@/static/lottery/thankYou.png" />
|
|
|
+ <button @click="getAgain">再抽一次</button>
|
|
|
+ </view>
|
|
|
+ <view class="popup" v-if="form.resultGoodType === 4">
|
|
|
+ <view>恭喜您中奖啦！</view>
|
|
|
+ <img src="@/static/lottery/point.png" />
|
|
|
+ <view style="color: #1A5509; font-size: 32rpx">+ {{ form.resultGoodName }}</view>
|
|
|
+ <button @click="getSubmit">领取</button>
|
|
|
+ </view>
|
|
|
+ <view class="popup" v-if="form.resultGoodType === 3">
|
|
|
+ <view>恭喜您中奖啦！</view>
|
|
|
+ <img :src="form.resultGoodPic" />
|
|
|
+ <view>{{ form.resultGoodName }}</view>
|
|
|
+ <button @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 {
|
|
|
+ // 用户id
|
|
|
+ userId: '',
|
|
|
+ statusBarHeight: 0,
|
|
|
+ // 转盘
|
|
|
+ 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,
|
|
|
+ // 活动规则
|
|
|
+ ruleList: [],
|
|
|
+ // 表单
|
|
|
+ form: {}
|
|
|
+ }
|
|
|
+ },
|
|
|
+ onLoad(e) {
|
|
|
+ this.userId = e.userId
|
|
|
+ this.statusBarHeight = uni.getWindowInfo().statusBarHeight + 'px'
|
|
|
+ this.getList()
|
|
|
+ },
|
|
|
+ methods: {
|
|
|
+ close() {
|
|
|
+ closePage.postMessage('关闭页面')
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取页面信息
|
|
|
+ getList() {
|
|
|
+ page({
|
|
|
+ userId: this.userId
|
|
|
+ }).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.ruleList = j.ruleList
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 点击抽奖按钮触发回调
|
|
|
+ startCallBack() {
|
|
|
+ if (this.hasLotteryCount > 0) {
|
|
|
+ if (this.maySignPoint > this.lotteryConsumePoint) {
|
|
|
+ this.$refs.lucky.play()
|
|
|
+ result({
|
|
|
+ userId: this.userId
|
|
|
+ }).then(res => {
|
|
|
+ if (res.data.code === 0) {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.$refs.lucky.stop(res.data.data.resultGoodSort - 1)
|
|
|
+ this.form = res.data.data
|
|
|
+ }, 3000)
|
|
|
+ }
|
|
|
+ })
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'error',
|
|
|
+ title: '可用积分不足'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ } else {
|
|
|
+ uni.showToast({
|
|
|
+ icon: 'error',
|
|
|
+ title: '今日抽奖次数已用光'
|
|
|
+ })
|
|
|
+ }
|
|
|
+ },
|
|
|
+ // 抽奖结束触发回调
|
|
|
+ endCallBack(prize) {
|
|
|
+ this.$nextTick(() => {
|
|
|
+ this.$refs.popup.open()
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 再抽一次
|
|
|
+ getAgain() {
|
|
|
+ this.$refs.popup.close()
|
|
|
+ this.startCallBack()
|
|
|
+ },
|
|
|
+
|
|
|
+ // 领取
|
|
|
+ getSubmit() {
|
|
|
+ receive({
|
|
|
+ prizeId: this.form.resultGoodId,
|
|
|
+ userId: this.form.userId,
|
|
|
+ lotteryCode: this.form.lotteryCode
|
|
|
+ }).then(res => {
|
|
|
+ if (res.data.code === 0) {
|
|
|
+ uni.showToast({
|
|
|
+ title: '领取成功！'
|
|
|
+ })
|
|
|
+ this.$refs.popup.close()
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 填写收货信息
|
|
|
+ getDetail() {
|
|
|
+ uni.navigateTo({
|
|
|
+ url: `/pages/lottery/detail?userId=${this.userId}&prizeId=${this.form.resultGoodId}&lotteryCode=${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;
|
|
|
+
|
|
|
+ .nav {
|
|
|
+ height: 88rpx;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ color: #333333;
|
|
|
+ font-weight: bold;
|
|
|
+ font-size: 36rpx;
|
|
|
+ position: relative;
|
|
|
+
|
|
|
+ .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>
|
