IHG/pages/goods/goods-lucky/index.vue

<template>
	<view class="goods-lucky">
		<!-- 转盘 -->
		<view class="spinning" :style="{backgroundImage:'url('+backImageUrl+')'}">
			<view class="spinning-title">
				<text>{{drawInfo.draw_template.name?drawInfo.draw_template.name:"幸运大轮盘"}}</text>
			</view>
			<q-turntable ref="turntable" :areaNumber='9' @start="turntableStart" @success="turntableSuccess">
			</q-turntable>
		</view>

		<view style="background-color: #f9f9f9; padding-bottom: 136rpx;">
			<!-- 产品信息 -->
			<view class="produce">
				<view class="produce-title">产品信息</view>
				<view class="produce-main" v-for="item in 6">
					<image style="width: 132rpx;height: 132rpx;border-radius: 10rpx;" src="/static/icon/banner02.png"
						mode=""></image>
					<view class="produce-main-text">
						<text class="produce-main-text-top">一等奖</text>
						<text class="produce-main-text-bom">HUAWEI MateBook X Pro</text>
					</view>
				</view>
			</view>

			<!-- 活动规则 -->
			<view class="rule">
				<view class="rule-title">
					活动规则
				</view>
				<view class="rule-content">
					<view class="introduce-top">
						<text class="introduce-top-rule1"></text>
						<text style="margin: 0 8rpx;">活动规则</text>
						<text class="introduce-top-rule2"></text>
					</view>
					<view class="introduce-text">
						<text>{{drawInfo.draw_template.rule}}</text>
					</view>
				</view>
			</view>

			<!-- 我的奖品 -->
			<view class="prize">
				<view class="prize-title">
					我的奖品
				</view>
				<view class="prize-main" v-for="item in drawRecord" :key="item.id">
					<view class="prize-main-left">
						<text class="prize-main-left-top">{{item.remark}}</text>
						<text class="prize-main-left-bom">{{item.created_at}}</text>
					</view>
					<view :class="item.status==1 ? 'prize-main-rightSelect' : 'prize-main-right' ">
						<text v-if="item.status==1">立即兑换</text>
						<text v-if="item.status==2">已兑换</text>
					</view>
				</view>
			</view>
		</view>
		
		
		<!-- 中奖弹窗 -->
		<uni-popup ref="codePurchase" type="center">
			<view class="code-purchase">
				<view class="img">
					<image style="width: 80rpx;height: 82rpx" src="/static/icon/gift01.png"></image>
					<view class="text">
						<text>恭喜您抽中了<text>{{drawResult.name}}</text></text>
						<text>请尽快去奖品中心兑奖</text>
					</view>
				</view>
				<view class="btn">
					<view class="cancel" @click="dialogClose"><text>待会儿</text></view>
					<view class="download" @click="dialogConfirm"><text>去兑奖</text></view>
				</view>
			</view>
		</uni-popup>
		<!-- 未中奖弹窗 -->
		<uni-popup ref="codePurchaseNone" type="center">
			<view class="code-purchase">
				<view class="img">
					<image style="width: 108rpx;height: 68rpx" src="/static/icon/gift02.png"></image>
					<view class="text">
						<text>很遗憾您没有抽中奖品</text>
						<text>下次再来哟</text>
					</view>
				</view>
				<view class="btn">
					<view class="know" @click="dialogClose"><text>知道了</text></view>
				</view>
			</view>
		</uni-popup>



	</view>
</template>

<script>
	import QTurntable from '@/components/q-turntable/q-turntable.vue'
	export default {
		components: {
			QTurntable
		},
		data() {
			return {
				//中奖等级
				prizeLevel:'',
				isexchange: true,
				backImageUrl: 'http://t9.9026.com/imgs/banner02.png',
				award: 1,
				awardList: [{
						title: '一等奖'
					},
					{
						title: '四等奖'
					},
					{
						title: '谢谢参与'
					},
					{
						title: '一等奖'
					},
					{
						title: '谢谢参与'
					},
					{
						title: '三等奖'
					},
					{
						title: '三等奖'
					},
					{
						title: '二等奖'
					},
					{
						title: '一等奖'
					}
				], // 顺时针对应每个奖项 
				drawInfo:{
					draw_no: ''
				},
				drawRecord:[],
				drawResult:{}
			}
		},
		onLoad(params){
			const {draw_no} = params
			this.drawInfo.draw_no = draw_no;
			
		},
		onReady(){
			// this.judageIsDraw(); //判断是否有权限访问
			this.getDrawInfo();  //获取抽奖信息
			this.getDrawRecord();	//获取获奖记录
		},
		computed:{
			recordMsg:(status)=>{
				const di = ['未中奖','未兑换','已兑换'];
				return di[status];
			}
		},
		methods: {
			judageIsDraw(){
				if(!this.drawInfo.draw_no){
					uni.showToast({
						icon: 'error',
						title: "暂无权限",
						success:()=>{
							uni.reLaunch({
								url:'/pages/index/index'
							})
						}
					})
				}
			},
			getDrawInfo(){
				this.drawInfo.draw_no = "9HzqlNVBMRZo";
				this.$api.draw.drawInfo({
					draw_no: this.drawInfo.draw_no
				}).then(res=>{
					if(res.code == 0){
						this.drawInfo = res.data;
					}else{
						uni.showToast({
							icon: 'error',
							title: res.msg ? res.msg : "暂无权限"
						})
					}
				}).catch(err=>{
					uni.showToast({
						icon: 'error',
						title: "网络繁忙"
					})
				})
			},
			getDrawRecord(page = 1){
				if(page == 1){
					this.drawRecord = []
				}
				this.$api.draw.drawRecord({
					page:page
				}).then(res=>{
					if(res.code == 0){
						res.data.data.forEach(item => {
							if(item.source == 2){
								this.drawRecord.push(item);	
							}
						})
						if(res.data.length >= 15){
							this.getDrawRecord(page + 1);
						}
					}
				})
			},
			//中奖去兑换按钮
			dialogConfirm() {
				this.$utils.jump({
					jump_type: 4,
					jump_config: '/pages/my/prize/prize'
				})
			},
			//中奖待会按钮
			dialogClose() {
				this.drawResult = {};
				this.$refs.codePurchaseNone.close();
				this.$refs.codePurchase.close();
			},

			// 用户点击开始抽奖
			turntableStart() {
				if(this.isDrawing) return;
				this.isDrawing = true
				let index = Math.floor(Math.random() * 6 + 1) //前端随机数，这里应该后台返回中奖结果
				// this.award = index
				this.award = 2
				this.$refs.turntable.begin(this.award);
				this.$api.draw.luckyDraw({
					draw_no: this.drawInfo.draw_no,
				}).then(res => {
					if(res.data.code != 0){
						uni.showToast({
							icon: 'error',
							title: res.msg?res.msg:"网络繁忙",
						})
						return;
					}
					this.drawResult = res.data;
					setTimeout(()=>{
						this.isDrawing = false
					}, 1000)
				});
			},

			// 抽奖完成后操作
			turntableSuccess() {
				let timer = setInterval(()=>{
					if(this.isDrawing){
						return;
					}
					
					if(this.drawResult.status == 1){
						this.$refs.codePurchase.open()
					}else{
						this.$refs.codePurchaseNone.open()
					}
					clearInterval(timer);
				}, 50)
				return;
				
				const index = this.award - 1;
				console.log('bind:success', this.awardList[index]);
				if(this.awardList[index].title == '谢谢参与'){
					this.$refs.codePurchaseNone.open()
				}else{
					let o =  this.awardList[index].title
					console.log(this.awardList[index].title);
					this.prizeLevel = o 
					this.$refs.codePurchase.open()
				}
	
				// uni.showToast({
				// 	title: `恭喜你获得${this.awardList[index].title}`,
				// 	icon: 'none'
				// });
			},


		}
	}
</script>

<style lang="scss" scoped>
	$pageColor:#F9F9F9;
	$bgColor:#FFFFFF;

	@mixin flexlayout {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	page {
		height: 100% !important;
		background: #F9F9F9 !important;
	}

	.goods-lucky {
		height: 100%;
		background: #F9F9F9;
	}

	.code-purchase {
		width: 620rpx;
		// height: 357rpx;
		background: #fff;
		border-radius: 20rpx;
		padding-top: 44rpx;
		box-sizing: border-box;
		.img {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
		}
		.text{
			margin-top: 26rpx;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			font-weight: 400;
			color: #333333;
			font-size: 32rpx;
			line-height: 44rpx;
		}

		.btn {
			margin-top: 26rpx;
			width: 100%;
			height: 90rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			border-top:2rpx solid #E5E5E5;
			.cancel{
				flex: 1;
				display: flex;
				align-items: center;
				justify-content: center;
				font-weight: 400;
				color: #333333;
				font-size: 32rpx;
			}
			.download{
				flex: 1;
				height: 90rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				border-left:2rpx solid #E5E5E5;
				font-weight: 400;
				color: #FF6200;
				font-size: 32rpx;
			}
			.know{
				font-weight: 400;
				color: #FF6200;
				font-size: 32rpx;
			}
		}
	}




	.prize {
		margin-top: 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 40rpx 30rpx 40rpx;

		.prize-title {
			font-weight: bold;
			color: #080F18;
			font-size: 30rpx;
		}

		.prize-main {
			margin-top: 40rpx;
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #F0F0F0;
			padding-bottom: 40rpx;

			&:last-child {
				border-bottom: none;
				padding-bottom: 0rpx;
			}

			.prize-main-left {
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: center;

				.prize-main-left-top {
					font-size: 32rpx;
					font-weight: bold;
					color: #333333;
				}

				.prize-main-left-bom {
					font-weight: 500;
					color: #999999;
					font-size: 24rpx;
					margin-top: 24rpx;
				}

			}

			.prize-main-right {
				flex: none;
				width: 148rpx;
				height: 60rpx;
				background: #FFFFFF;
				border-radius: 30rpx;
				border: 2rpx solid #D0D0D0;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #D0D0D0;
				font-size: 26rpx;
			}

			.prize-main-rightSelect {
				flex: none;
				width: 148rpx;
				height: 60rpx;
				background: #FFFFFF;
				border-radius: 30rpx;
				border: 2rpx solid #FF6200;
				display: flex;
				align-items: center;
				justify-content: center;
				color: #FF6200;
				font-size: 26rpx;
			}
		}
	}

	.rule {
		margin-top: 24rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 40rpx 30rpx 32rpx;

		.rule-title {
			font-weight: bold;
			color: #080F18;
			font-size: 30rpx;
		}

		.rule-content {
			margin-top: 32rpx;
			background: #FFFFFF;
			border-radius: 4rpx;
			border: 2rpx solid #999999;
			padding: 48rpx 20rpx 34rpx;

			.introduce-top {
				height: 32rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 32rpx;
				font-weight: bold;
				letter-spacing: 2rpx;

				.introduce-top-rule1 {
					width: 56rpx;
					height: 4rpx;
					background: linear-gradient(90deg, #FFFFFF 0%, #D9A94D 100%);
				}

				.introduce-top-rule2 {
					width: 56rpx;
					height: 4rpx;
					background: linear-gradient(-90deg, #FFFFFF 0%, #D9A94D 100%);
				}
			}

			.introduce-text {
				margin-top: 72rpx;
				font-weight: bold;
				color: #333333;
				font-size: 28rpx;
				line-height: 56rpx;
			}
		}
	}



	.produce {
		position: relative;
		top: -10rpx;
		background: #FFFFFF;
		border-radius: 16rpx;
		padding: 48rpx 30rpx 0rpx;

		.produce-title {
			font-weight: bold;
			color: #080F18;
			font-size: 30rpx;
			margin-bottom: 40rpx;
		}

		.produce-main {
			display: flex;
			align-items: center;
			justify-content: space-between;
			border-bottom: 2rpx solid #F0F0F0;
			padding-bottom: 32rpx;
			margin-bottom: 32rpx;

			&:last-child {
				border: none;
				margin-bottom: 0;
			}

			.produce-main-text {
				margin-left: 24rpx;
				flex: 1;
				display: flex;
				flex-direction: column;
				align-items: flex-start;
				justify-content: center;

				.produce-main-text-top {
					font-weight: 500;
					color: #080F18;
					font-size: 28rpx;
				}

				.produce-main-text-bom {
					font-weight: 500;
					color: #666666;
					font-size: 24rpx;
					margin-top: 14rpx;
				}
			}
		}

	}

	.spinning {
		padding-top: 64rpx;
		width: 100%;
		height: 790rpx;
		background-repeat: no-repeat;
		background-size: cover;

		.spinning-title {
			margin-bottom: 40rpx;
			display: flex;
			align-items: center;
			justify-content: center;
			font-weight: bold;
			color: #FFFFFF;
			font-size: 64rpx;
		}

	}
</style>