yj-register/pages/zhuanpan/zhuanpan.vue

<template>
	<view class="page">
<!--		<image class="bg" :src="'/static/img/DM_20240409173533_003.jpg'"></image>-->
		<view class="rule" @click="goRule">
			<text>规则</text>
		</view>
		<view class="flex-col content">
			<view class="flex-row justify-end">
				<view class="flex-row justify-end record"  @click="goRecord">
					<text class="record-left">中奖记录</text>
					<u-icon name="/static/img/DM_20240409173533_004.png" size="45rpx"></u-icon>
				</view>
			</view>

			<view>
				<LuckyWheel ref="myLucky" width="500rpx" height="500rpx"
							:blocks="blocks" :prizes="prizes" :buttons="buttons"
							@start="startCallBack" @end="endCallBack"/>
			</view>
			<view class="count">
				<text>您有{{drawCount}}次抽奖机会</text>
			</view>
			<view id="rollId" class="roll">
				<wfScroll :scrollHeight="scrollHeight" :scrollTimer="true" :listAr="winningRecordList"></wfScroll>
			</view>
		</view>

		<uni-popup ref="winningResult" type="center" :animation="false">
			<view class="result">
				<view class="winningResultView">
					<image :src="'/static/img/1.png'" mode="widthFix" class="winningTitleBac"></image>
					<view class="flex-row justify-center winning">
						<view class="flex-col">
							<text class="" v-if="winningName !== '谢谢参与'">恭喜获得</text>
							<text class="">{{winningName}}</text>
						</view>
					</view>
				</view>
				<view class="flex-row justify-center">
					<image :src="'/static/img/2.png'" mode="widthFix" class="ox" @click="closeWinningResult"></image>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import wfScroll from "../../components/WF-scroll/WF-scroll";
	import LuckyWheel from "../../components/@lucky-canvas/uni/lucky-wheel";
	export default {
		components: {LuckyWheel,wfScroll},
		data() {
			return {
				userId:'',
				drawCount:0,
				winningName:'',
				scrollHeight:0,
				winningRecordList:[],
				blocks: [
						{ padding: '40rpx'},
						{imgs:[{src:'static/img/zpbg.png',width:'500rpx',height:'500rpx',top:'-40rpx',rotate:true}]}
				],
				prizes: [
					// { fonts: [{ text: '一等奖', top: '10%',fontSize:'25rpx' }],imgs:[{src:'static/img/DM_20240409173533_004.png',top:'40%'}], background: '#fff9d9' },
					// { fonts: [{ text: '小米手机', top: '10%',fontSize:'25rpx' }], background: '#f6ecb4' },
					// { fonts: [{ text: '大彩电', top: '10%',fontSize:'25rpx' }], background: '#fff9d9' },
					// { fonts: [{ text: '小踩点', top: '10%',fontSize:'25rpx' }], background: '#f6ecb4' },
					// { fonts: [{ text: '耳机', top: '10%',fontSize:'25rpx' }], background: '#fff9d9' },
					// { fonts: [{ text: '收音机', top: '10%',fontSize:'25rpx' }], background: '#f6ecb4' },
				],
				buttons: [
					{ radius: '70rpx', background: '#fddc6a'},
					// {
					// 	radius: '40px', background: '#fddc6a',
					// 	pointer: true,
					// 	fonts: [{ text: '开始\n抽奖', top: '-30px',fontColor:'#fa4445',fontWeight:'700',fontSize:'40rpx',lineHeight:'50rpx' }]
					// },

					{
						imgs: [{src:'static/img/DM_20240409173533_001.png',width:'150rpx',height:'190rpx',top:'-110rpx'}],
					},
				],
			}
		},

		mounted(){
			this.getScrollHeight();
		},
		onLoad(e){
			if (e.token){
				uni.setStorageSync('accessToken', e.token);
				console.log('获取到的token', e.token)
			}else {
				uni.setStorageSync('accessToken', null);
			}
			this.prizeList()
			this.winningRecord()
			this.getDrawCount()
		},
		methods: {

			getDrawCount(){
				this.$api.service.drawCount({
					userId:this.userId
				}).then(res=>{
					this.drawCount = res.data.data
					console.log(res.data.data)
				})
			},

			closeWinningResult(){
				this.$refs.winningResult.close()
			},

			draw(){
				this.$api.service.draw({
					userId:this.userId
				}).then(res=>{
					console.log(res)
				})
			},

			winningRecord(){
				this.$api.service.winningRecord({
					current: 1,
					size: 50,
					flag:false
				}).then(res=>{
					this.winningRecordList = res.data.data
				})
			},

			prizeList(){
				this.$api.service.prizeList().then(res=>{
					if (res.data.data.length>0){
						this.buildPrize(res.data.data)
					}
					console.log('奖品列表',res.data.data)
				})
			},


			buildPrize(prizeList){
				this.prizes = []
				for (let i = 0;i < prizeList.length ;i++){
					let prize = { fonts: [{ text: '一等奖', top: '10%',fontSize:'25rpx',id:''}],
						imgs:[{src:'static/img/DM_20240409173533_004.png',top:'40%',width:'70rpx',height:'40rpx'}],
						background: '#fff9d9' }
					prize.fonts[0].id = prizeList[i].id
					prize.fonts[0].text = prizeList[i].prizeName
					prize.imgs[0].src = prizeList[i].prizeImage
					if (i%2 === 0){
						prize.background = '#fff9d9'
					}else {
						prize.background = '#f6ecb4'
					}
					this.prizes.push(prize)
				}

			},


			goRecord(){
				uni.navigateTo({
					url:'/pages/lotteryRecord/lotteryRecord'
				})
			},
			goRule(){
				uni.navigateTo({
					url:'/pages/lotteryRule/lotteryRule'
				})
			},

			getScrollHeight(){
				const query = uni.createSelectorQuery().in(this);
				query.select('#rollId').boundingClientRect(data => {
					let sysinfo = uni.getSystemInfoSync()
					this.scrollHeight = (sysinfo.screenWidth/750) * data.height
					console.log('元素的高度：', this.scrollHeight);
				}).exec();
			},

			// 点击抽奖按钮触发回调
			startCallBack () {

				if (this.drawCount === 0){
					uni.showToast({
						icon: 'none',
						duration: 3000,
						title: '您当前的抽奖机会为0'
					});
					return
				}

				// 先开始旋转
				this.$api.service.draw({
					userId:'1734095760943947778'
				}).then(res=>{
					this.$refs.myLucky.play()
					console.log('中奖结果',res.data.data)
					// 使用定时器来模拟请求接口
					setTimeout(() => {
						let index = null
						// 假设后端返回的中奖索引是0
						for (let i = 0;i< this.prizes.length;i++){
							if (this.prizes[i].fonts[0].id == res.data.data.id){
								console.log(this.prizes[i].fonts[0].id)
								console.log(res.data.data.id)
								index = i
							}
						}
						// 调用stop停止旋转并传递中奖索引
						this.$refs.myLucky.stop(index)
					}, 2000)
				}).catch(err=>{
					this.$refs.myLucky.stop()
					uni.$u.toast(err.data.msg)
				})
			},
			// 抽奖结束触发回调
			endCallBack (prize) {
				// 奖品详情
				console.log('奖品详情',prize)
				this.winningRecord()
				this.getDrawCount()
				this.winningName = prize.fonts[0].text
				this.$refs.winningResult.open()
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import './index.rpx.scss';
</style>