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

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

		<view style="background-color: #f9f9f9; padding-bottom: 136rpx;">
			<!-- 产品信息 -->
			<view class="produce">
				<view class="produce-title">奖品信息</view>
				<view class="produce-main" v-for="(item,index) in drawInfo.draw_template.draw_config" :key="item.id">
					<image style="width: 132rpx;height: 132rpx;border-radius: 10rpx;" :src="item.product.img_urls?item.product.img_urls:item.prize_img"
						mode=""></image>
					<view class="produce-main-text">
						<text class="produce-main-text-top">{{item.name}}</text>
						<text class="produce-main-text-bom">{{item.product.name ? item.product.name : (item.integral?item.integral+"积分":"")}}</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">
						<view v-html="bigWheelConfig.big_wheel_rule"></view>
					</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 v-if="!item.integral" :class="item.status==1 ? 'prize-main-rightSelect' : 'prize-main-right' ">
						<text v-if="item.status==1" @click="goExchangePhy(item.id)">立即兑换</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>{{drawResultProduct.name}}</text></text>
						<text>{{drawResult.name?drawResult.name:drawResultProduct.integral+'积分'}}</text>
						<text v-if="drawResult.name">请尽快去奖品中心兑奖</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>

		<uni-popup ref="dialogError" type="center">
			<view style="
				width: 600rpx;
				max-width: 100%;
				text-align: center;
				background: #fff;
				height: 300rpx;
				border-radius: 20rpx
			">
				<view style="
					height: 70%;
					display: flex;
					justify-content: center;
					align-items: center;
					border-bottom: 1px solid rgba(0, 0, 0, 0.1);
				">
					{{error.info}}
				</view>
				<navigator style="height: 30%;display: flex;justify-content: center;align-items: center;" open-type="exit" target="miniProgram">退出</navigator>
			</view>
		</uni-popup>

	</view>
</template>

<script>
	import QTurntable from '@/components/q-turntable'
	export default {
		components: {
			QTurntable
		},
		data() {
			return {
				error:{
					info: ""
				},
				big_wheel:{},
				//中奖等级
				prizeLevel:'',
				isexchange: true,
				backImageUrl: 'http://t9.9026.com/imgs/banner02.png',
				award: 1,
				// 顺时针对应每个奖项 
				drawInfo:{
					draw_no: ''
				},
				drawRecord:[],
				drawResult:{},
				drawResultProduct: {},
				bigWheelConfig:{}
			}
		},
		onLoad(params){
			const {draw_no} = params
			this.drawInfo.draw_no = draw_no;
			this.getBackgroundConfig()
		},
		onShow(){
			if(!this.$store.getters.userInfo){
				uni.navigateTo({
					url: '/pages/login/login'
				})
				return;
			}
			// this.judageIsDraw(); //判断是否有权限访问
			this.getDrawInfo();  //获取抽奖信息
			this.getDrawRecord();	//获取获奖记录
		},
		computed:{
			recordMsg:(status)=>{
				const di = ['未中奖','未兑换','已兑换'];
				return di[status];
			},
		},
		methods: {
			getBackgroundConfig(){
				this.$api.document.allSet().then(res => {
					this.bigWheelConfig = res.data.big_wheel.value
				})
			},
			judageIsDraw(){
				if(!this.drawInfo.draw_no){
					uni.showToast({
						icon: 'error',
						title: "暂无权限",
						success:()=>{
							uni.reLaunch({
								url:'/pages/index/index'
							})
						}
					})
				}
			},
			getDrawInfo(){
				if(!this.drawInfo.draw_no){
					uni.showToast({
						icon: 'error',
						title: "暂无权限"
					})
					return;
				}
				this.$api.draw.drawInfo({
					draw_no: this.drawInfo.draw_no
				}).then(res=>{
					if(res.code == 0){
						this.drawInfo = res.data;
						this.$refs.turntable.init(this.drawInfo.draw_template.draw_config);
					}else{
						this.error.info = res.msg ? res.msg : "暂无权限";
						this.$refs.dialogError.open()
					}
				}).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 && (item.integral>0 || item.product_id>0)){
								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();
				setTimeout(()=>{
					this.drawResult = {};
					this.drawResultProduct = {};
					this.$refs.turntable.reset();
				}, 500)
			},

			// 用户点击开始抽奖
			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.code != 0 || !res.data){
						uni.showToast({
							icon: 'error',
							title: res.msg?res.msg:"网络繁忙",
						})
						this.$refs.turntable.end(0).then(_=>{
							this.$refs.turntable.reset();
						});
						return;
					}
					this.drawResult = res.data;
					const draw_config = this.drawInfo.draw_template.draw_config;
					for(let i=0;i<draw_config.length;i++){
						if(draw_config[i].id == this.drawResult.draw_config_id){
							this.drawResultProduct = draw_config[i];
							setTimeout(()=>{
								this.$refs.turntable.end(i).then(_=>{
									if(this.drawResultProduct.integral<=0 && !this.drawResultProduct.product){
										this.$refs.codePurchaseNone.open()
									}else{
										this.$refs.codePurchase.open()
									}
								});
								if(this.drawResult.draw_type){
									this.getDrawRecord(1)
								}
							}, 5000)
							break;
						}
					}
				});
			},

			// 抽奖完成后操作
			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)				
	// 			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'
				// });
			},
			goExchangePhy(id){
				uni.navigateTo({
					url: `/pages/my/prize/exchangePrize?id=${id}&isPhy=1`
				})
			}
		}
	}
</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: 100% 100%;

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

	}
</style>