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

<template>
	<view class="goods-lucky">
		<!-- 转盘 -->
		<view class="spinning" :style="{backgroundImage:'url('+backImageUrl+')'}">
			<view class="spinning-title">
				<text>幸运大转盘</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>活动奖品分为线上和线下两种类型活动奖品分为线上和线下两种类型奖品活动奖品分为线上和线下两种类型奖品奖品，线上活动奖品分为线上和线下两种类型奖品，线上活动奖品分为线上和线下两种类型奖品，线上</text>
					</view>
				</view>
			</view>

			<!-- 我的奖品 -->
			<view class="prize">
				<view class="prize-title">
					我的奖品
				</view>
				<view class="prize-main" v-for="item in 3">
					<view class="prize-main-left">
						<text class="prize-main-left-top">HUAWEI MateBook X Pro</text>
						<text class="prize-main-left-bom">2022-02-10</text>
					</view>
					<view :class="isexchange ? 'prize-main-rightSelect' : 'prize-main-right' ">
						<text v-if="isexchange">立即兑换</text>
						<text v-if="!isexchange">已兑换</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>{{prizeLevel}}</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: '一等奖'
					}
				] // 顺时针对应每个奖项 
			}
		},
		methods: {
			
			//中奖去兑换按钮
			dialogConfirm() {
				console.log('确认');
			},
			//中奖待会按钮
			dialogClose() {
				console.log('取消');
			},

			// 用户点击开始抽奖
			turntableStart() {
				let index = Math.floor(Math.random() * 6 + 1) //前端随机数，这里应该后台返回中奖结果
				// this.award = index
				this.award = 2
				this.$refs.turntable.begin(this.award);
			},

			// 抽奖完成后操作
			turntableSuccess() {
				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>