Huanyuyuehui/pages/users/user_luckyDraw/index.vue

<template>
	<view class="content">
		<view class="bg">
			<view class="rule">
				<text>活动规则</text>
			</view>
			<view class="top">

			</view>
			<view class="lucky-draw">
				<view class="title">
					恭喜你获得 {{wheel}} 次抽奖机会
				</view>
<!-- 				<LuckyWheel ref="myLucky" width="600rpx" height="600rpx" :blocks="blocks" :prizes="prizes"
					:buttons="buttons" :defaultStyle="defaultStyle" @start="startCallBack" @end="endCallBack" :defaultConfig="defaultConfig" /> -->
			</view>
			<view class="lucky-draw-info">
				<view class="title">
					- 抽奖纪录 -
				</view>
				<view class="list">
					<view class="item" v-for="item in list">
						<view>{{item.create_time}}</view>
						<view>{{item.title}}</view>
					</view>
				</view>
			</view>
			
		</view>
		<view class="coupon_popups" v-if="popShow">
			<view class="bg2"></view>
			<view class="con" >
				<view class="content">
					<image :src="drawInfo.img" mode=""></image>
					<view class="text-black">恭喜您获得</view>
					<view class="text-red">{{drawInfo.text}}</view>
					<view class="btn" @click="popShow = false">开心收下</view>
				</view>
				<view class='iconfont icon-guanbi3' @click="popShow = false"></view>
			</view>
		</view>
	</view>
</template>

<script>
	import {getWhellNumber,getWhellConfig,getWhellAction,getWhellList} from '@/api/user.js'
	// import LuckyWheel from 'uni-luck-draw/lucky-wheel'
	export default {
		// components: {
		// 	LuckyWheel
		// },
		data() {
			return {
				wheel:0,
				blocks: [{
					padding: '4px',
					
					imgs:[{src:'https://plus.hwms.shop/uploads/def/20240402/9bcfea91fd2ebc06cc9eea5de95d624e.png', width: '100%',
        height: '100%'}]
					
				},{
					padding:'14px',
					imgs:[{src:'https://plus.hwms.shop/uploads/def/20240402/db41a1225c12cfb7a0d429fab8397fe5.png', width: '100%',
        height: '100%'}]
				}],
				 
				prizes: [{
						fonts: [{
							text: '0',
							top: '40%'
						}],
						background: '#faf7d5',
						imgs:[{src:'https://plus.hwms.shop/uploads/def/20240402/de991ebf4c190afcc5de692a910949f4.png',width:'25px',height:'25px',top:'10%'}]
					},
					{
						fonts: [{
							text: '1',
							top: '10%'
						}],
						background: '#FC3E8F'
					},
					{
						fonts: [{
							text: '2',
							top: '10%'
						}],
						background: '#faf7d5'
					},
					{
						fonts: [{
							text: '3',
							top: '10%'
						}],
						background: '#FC3E8F'
					},
					{
						fonts: [{
							text: '4',
							top: '10%'
						}],
						background: '#faf7d5'
					},
					{
						fonts: [{
							text: '5',
							top: '10%'
						}],
						background: '#FC3E8F'
					},
				],
				buttons: [{
						radius: '50px',
						// background: '#e81c47',
						imgs:[{src:'https://plus.hwms.shop/uploads/def/20240402/25da054fc2f6c52349bb193ee4919e6c.png',width: '100%',
						top: '-190%'}],
						// pointer: true,
						
					},
					{
						radius: '45px',
						background: '#faf7d5'
					},
					{
						radius: '40px',
						imgs:[{src:'https://plus.hwms.shop/uploads/def/20240402/1e1ce5f047e6282554200f316b975c06.png',width: '100%',
          top: '-100%'}],
						// background: linear-gradient( #F8A059 0%, #E22B70 100%)',
						// background: '#ec4656',
						// pointer: true,
						fonts: [{
							text: '开始\n抽奖',
							top: '-20px',
							fontColor:'#fff',
						}]
					},
				],
				defaultConfig: {
					gutter: '5px',
					speed: 60,
					stopRange:'0.95'
				},
				popShow:false,
				list:[],
				drawInfo:{
					img:'',
					text:'',
					
				}
			}
		},
		onLoad() {
			this.init()
		},
		methods: {
			init(){
				getWhellNumber().then((res)=>{
					if(res){
						this.wheel=res.data.userInfo.wheel;
					}
				})
				getWhellConfig().then((res)=>{
					let ary=res.data;
					this.prizes.map((e,index)=>{
						ary.map((e2,index2)=>{
							if(index==index2){
								e.fonts[0].text=e2.value.title;
								e.fonts[0].top='40%';
								e.fonts[0].fontSize='14px';
								e.imgs=[];
								e.imgs.push({src:e2.value.icon,width:'25px',height:'25px',top:'10%'})
							}
						})
					})
				})
				getWhellList().then((res)=>{
					if(res){
						this.list=res.data.list;
					}
				})
			},
			// 点击抽奖按钮触发回调
			async startCallBack() {
				if(this.wheel>0){
					// 先开始旋转
					this.$refs.myLucky.play()
					await getWhellAction().then((res)=>{
						if(res){
							this.drawInfo.img=res.data.win.value.icon;
							this.drawInfo.text=res.data.win.value.title;
							// 使用定时器来模拟请求接口
							const index = res.data.win.winKey;
							setTimeout(() => {
								// 假设后端返回的中奖索引是0
								// 调用stop停止旋转并传递中奖索引
								this.$refs.myLucky.stop(index)
							},5000)
						}
					})
					
				}
			},
			// 抽奖结束触发回调
			endCallBack(prize) {
				setTimeout(()=>{
					
					this.popShow=true;
				},2000)
				// 奖品详情
				console.log(prize)
			}
		}
	}
</script>

<style lang="less" scoped>
	.content {
		width: 100%;
		height: 100vh;
		.coupon_popups{
			z-index: 999;
			position: fixed;
			left: 0;
			top: 0;
			width: 100%;
			height: 100%;
			text-align: center;
			.bg2{
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background-color: rgba(0,0,0,.5);
			}
			
			.con{
				position: absolute;
				left: 50%;
				top: 50%;
				transform: translate(-50%,-50%);
				width: 680rpx;
				height: 900rpx;
				background-size: 100% 700rpx;
				background-repeat: no-repeat;
				.content{
					width: 500rpx;
					height: 520rpx;
					border-radius: 20rpx;
					margin: 0 auto;
					background-color: white;
					display: flex;
					flex-direction: column;
					justify-content: center;
					align-items: center;
					grid-gap: 40rpx;
					image{
						width: 300rpx;
						height: 200rpx;
						margin-top: 50rpx;
					}
					.text-black{
						font-size: 32rpx;
						font-weight: bold;
					}
					.text-red{
						font-size: 28rpx;
						color: #FC3C70;
					}
					.btn{
						color: white;
						margin-bottom: 40rpx;
						width: 328rpx;
						height: 68rpx;
						line-height: 68rpx;
						padding: 4rpx 0;
						border-radius: 60rpx;
						background: linear-gradient(136deg, #D753FC 0%, #FC276C 53%, #FC3E8F 100%);
					
					}
					
				}
				.text{
					width: 600rpx;
					margin: 30rpx auto 0;
					font-size: 20rpx;
					color: #ffffff;
				}
				.icon-guanbi3{
					color: #ffffff;
					font-size: 70rpx;
					position: absolute;
					bottom: 250rpx;
					left: 310rpx;
				}
			}
		}
		.bg {
			width: 100%;
			// height: 100vh;
			background-image: url('https://plus.hwms.shop/uploads/def/20240402/de991ebf4c190afcc5de692a910949f4.png');
			background-size: 100% 100%;
			position: relative;
			padding-bottom: 40rpx;
			
			.rule {
				width: 80rpx;
				height: 120rpx;
				background-image: url('https://store.tropjoin.com/images/right-btn.png');
				background-size: 100%;
				background-repeat: no-repeat;
				position: absolute;
				right: 0;
				top: 320rpx;
				// text-align: center;
				display: flex;
				align-items: center;
				justify-content: center;
				text {
					width: 56rpx;
					height: 80rpx;
					font-family: PingFang SC;
					font-weight: 500;
					font-size: 28rpx;
					color: #DC3424;
					line-height: 36rpx;
				}
			}
			.top{
				height: 330rpx;
			}
			.lucky-draw{
				display: flex;
				flex-direction: column;
				align-items: center;
				justify-content: center;
				.title{
					position: relative;
					bottom: 20rpx;
					width:60%;
					height: 50rpx;
					font-family: PingFang SC;
					font-weight: 400;
					font-size: 32rpx;
					color: #FFFFFF;
					margin: 20rpx 0;
					line-height: 54rpx;
					text-align: center;
					background: url('https://store.tropjoin.com/images/font-bg.png') no-repeat 100%;
					background-position: center;
				}
			}
			.lucky-draw-info{
				margin: 80rpx auto;
				width: 680rpx;
				height: 440rpx;
				background-color: white;
				display: flex;
				flex-direction: column;
				border-radius: 32rpx;
				.title{
					
					text-align: center;
					font-size: 36rpx;
					color: #FC3C70;
					line-height: 72rpx;
				}
				.list{
					flex: 1;
					overflow: scroll;
					display: flex;
					flex-direction: column;
					grid-gap: 20rpx;
					.item{
						font-size: 32rpx;
						font-weight: bold;
						padding: 10rpx 20rpx;
						width: 100%;
						display: flex;
						justify-content: space-between;
						
					}
				}
			}
		}
	}
</style>