universal-wechat-uniapp-241007/pages_order/marketing/turntable.vue

<template>
    <view class="page">

        <navbar leftClick 
        color="#fff"
        bgColor="#667eea"
        @leftClick="$utils.navigateBack" />
        <view class="turntable-container">

            <!-- 头部标题 -->
            <view class="header">
                <text class="title">幸运大转盘</text>
                <text class="subtitle">转一转，好运来！</text>
            </view>

            <!-- 转盘区域 -->
            <view class="turntable-wrapper">
                <view class="turntable" :class="{ 'spinning': isSpinning }" :style="{ transform: `rotate(${rotateAngle}deg)` }">
                    <!-- 使用纯CSS创建转盘 -->
                    <view class="wheel-bg">
                        <!-- 8个扇形区域 -->
                        <view 
                            v-for="(prize, index) in prizes" 
                            :key="index"
                            class="wheel-sector"
                            :style="{ 
                                backgroundColor: sectorColors[index],
                                transform: `rotate(${index * 45}deg)`
                            }"
                        >
                        </view>
                    </view>
                    
                    <!-- 奖品文字覆盖层 -->
                    <view class="prizes-overlay">
                        <view 
                            v-for="(prize, index) in prizes" 
                            :key="index"
                            class="prize-item"
                            :style="prizeStyles[index]"
                        >
                            <view class="prize-content">
                                <text class="prize-icon">{{ prize.icon }}</text>
                                <text class="prize-name">{{ prize.name }}</text>
                                <text class="prize-value">{{ prize.value }}</text>
                            </view>
                        </view>
                    </view>
                </view>

                <!-- 中心指针 -->
                <view class="pointer">
                    <view class="pointer-triangle"></view>
                </view>

                <!-- 中心按钮 -->
                <view class="center-button" @click="startSpin" :class="{ disabled: isSpinning }">
                    <text class="button-text">{{ isSpinning ? '抽奖中...' : '开始抽奖' }}</text>
                </view>
            </view>

            <!-- 抽奖结果弹窗 -->
            <view class="result-modal" v-if="showResult" @click="closeResult">
                <view class="modal-content" @click.stop>
                    <text class="result-title">🎉 恭喜您 🎉</text>
                    <view class="result-prize">
                        <text class="result-icon">{{ currentPrize.icon }}</text>
                        <text class="result-name">{{ currentPrize.name }}</text>
                        <text class="result-value">{{ currentPrize.value }}</text>
                    </view>
                    <view class="result-actions">
                        <button class="confirm-btn" @click="closeResult">确定</button>
                    </view>
                </view>
            </view>

            <!-- 抽奖次数提示 -->
            <view class="spin-info">
                <text>今日剩余抽奖次数: {{ remainingSpins }}</text>
            </view>
        </view>
    </view>
</template>

<script>
	export default {
		data() {
			return {
				// 奖品配置
				prizes: [
					{ name: '现金奖励', value: '¥10', icon: '💰', type: 'money', amount: 10 },
					{ name: '精美礼品', value: '小熊', icon: '🧸', type: 'gift', item: 'teddy_bear' },
					{ name: '现金奖励', value: '¥5', icon: '💰', type: 'money', amount: 5 },
					{ name: '精美礼品', value: '花束', icon: '💐', type: 'gift', item: 'flowers' },
					{ name: '现金奖励', value: '¥20', icon: '💰', type: 'money', amount: 20 },
					{ name: '精美礼品', value: '巧克力', icon: '🍫', type: 'gift', item: 'chocolate' },
					{ name: '现金奖励', value: '¥2', icon: '💰', type: 'money', amount: 2 },
					{ name: '精美礼品', value: '香水', icon: '🌸', type: 'gift', item: 'perfume' }
				],
				sectorColors: [
					'#FF6B6B', '#4ECDC4', '#45B7D1', '#96CEB4',
					'#FFEAA7', '#DDA0DD', '#98D8C8', '#F7DC6F'
				],
				isSpinning: false, // 是否正在旋转
				rotateAngle: 0, // 旋转角度
				showResult: false, // 显示结果弹窗
				currentPrize: null, // 当前中奖奖品
				remainingSpins: 3, // 剩余抽奖次数
				sectorAngle: 45, // 每个扇形的角度 (360/8)
				// 预计算奖品位置样式
				prizeStyles: []
			}
		},
		onLoad() {
			this.calculatePrizeStyles()
		},
		methods: {
			// 计算奖品位置样式
			calculatePrizeStyles() {
				this.prizeStyles = this.prizes.map((prize, index) => {
					// 计算奖品在圆形中的位置
					const angle = (index * 45 + 22.5) * Math.PI / 180; // 转换为弧度，22.5是偏移到扇形中心
					const radius = 150; // 奖品距离中心的距离
					const x = Math.cos(angle - Math.PI/2) * radius; // 减去90度，因为我们希望0度在顶部
					const y = Math.sin(angle - Math.PI/2) * radius;
					
					return `left: calc(50% + ${x}rpx); top: calc(50% + ${y}rpx); transform: translate(-50%, -50%);`
				})
			},
			

			// 开始抽奖
			startSpin() {
				if (this.isSpinning || this.remainingSpins <= 0) {
					if (this.remainingSpins <= 0) {
						uni.showToast({
							title: '今日抽奖次数已用完',
							icon: 'none'
						})
					}
					return
				}

				this.isSpinning = true
				this.remainingSpins--

				// 随机选择奖品
				const prizeIndex = Math.floor(Math.random() * this.prizes.length)
				this.currentPrize = this.prizes[prizeIndex]

				// 计算旋转角度
				// 每个扇形45度，指针指向扇形中心需要额外旋转22.5度
				const targetAngle = 360 - (prizeIndex * this.sectorAngle + this.sectorAngle / 2)
				const spinRounds = 5 // 转5圈
				const finalAngle = this.rotateAngle + spinRounds * 360 + targetAngle

				this.rotateAngle = finalAngle

				// 动画结束后显示结果
				setTimeout(() => {
					this.isSpinning = false
					this.showResult = true
					this.handlePrizeResult()
				}, 3000)
			},

			// 处理中奖结果
			handlePrizeResult() {
				if (this.currentPrize.type === 'money') {
					// 处理现金奖励
					console.log(`获得现金奖励: ${this.currentPrize.amount}元`)
					// 这里可以调用API增加用户余额
				} else if (this.currentPrize.type === 'gift') {
					// 处理礼品奖励
					console.log(`获得礼品: ${this.currentPrize.item}`)
					// 这里可以调用API添加礼品到用户背包
				}
			},

			// 关闭结果弹窗
			closeResult() {
				this.showResult = false
			}
		}
	}
</script>

<style scoped lang="scss">
	.turntable-container {
		min-height: 100vh;
		background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
		padding: 40rpx;
		display: flex;
		flex-direction: column;
		align-items: center;
	}

	.header {
		text-align: center;
		margin-bottom: 60rpx;
		color: white;

		.title {
			font-size: 48rpx;
			font-weight: bold;
			display: block;
			margin-bottom: 20rpx;
		}

		.subtitle {
			font-size: 28rpx;
			opacity: 0.9;
		}
	}

	.turntable-wrapper {
		position: relative;
		width: 600rpx;
		height: 600rpx;
		margin-bottom: 60rpx;
	}

	.turntable {
		width: 100%;
		height: 100%;
		border-radius: 50%;
		position: relative;
		transition: transform 3s cubic-bezier(0.23, 1, 0.32, 1);
		box-shadow: 0 0 40rpx rgba(0, 0, 0, 0.3);
		overflow: hidden;

		&.spinning {
			transition-duration: 3s;
		}
	}

	.wheel-bg {
		position: absolute;
		width: 100%;
		height: 100%;
		border-radius: 50%;
		overflow: hidden;
	}

	.wheel-sector {
		position: absolute;
		width: 50%;
		height: 50%;
		top: 0%;
		left: 50%;
		transform-origin: 0% 100%;
		
		&::before {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			background: inherit;
			clip-path: polygon(0% 100%, 50% 0%, 100% 100%);
		}
		
		// 添加边框线
		&::after {
			content: '';
			position: absolute;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			border-right: 2rpx solid rgba(255,255,255,0.3);
			transform-origin: 0% 100%;
		}
	}

	.prizes-overlay {
		position: absolute;
		width: 100%;
		height: 100%;
		top: 0;
		left: 0;
		z-index: 990;
	}

	.prize-item {
		position: absolute;
		width: 120rpx;
		height: 80rpx;
		z-index: 10;
	}

	.prize-content {
		width: 100%;
		height: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
		text-align: center;
		color: white;
		text-shadow: 0 2rpx 6rpx rgba(0, 0, 0, 0.8);

		.prize-icon {
			font-size: 32rpx;
			display: block;
			margin-bottom: 4rpx;
		}

		.prize-name {
			font-size: 18rpx;
			display: block;
			font-weight: bold;
			margin-bottom: 2rpx;
			line-height: 1.2;
		}

		.prize-value {
			font-size: 20rpx;
			display: block;
			font-weight: bold;
			line-height: 1.2;
		}
	}

	.pointer {
		position: absolute;
		top: -20rpx;
		left: 50%;
		transform: translateX(-50%);
		z-index: 100;

		.pointer-triangle {
			width: 0;
			height: 0;
			border-left: 20rpx solid transparent;
			border-right: 20rpx solid transparent;
			border-top: 60rpx solid #FF4757;
			filter: drop-shadow(0 4rpx 8rpx rgba(0, 0, 0, 0.3));
		}
	}

	.center-button {
		position: absolute;
		top: 50%;
		left: 50%;
		transform: translate(-50%, -50%);
		width: 160rpx;
		height: 160rpx;
		border-radius: 50%;
		background: linear-gradient(145deg, #FF6B6B, #FF4757);
		display: flex;
		align-items: center;
		justify-content: center;
		box-shadow: 0 8rpx 20rpx rgba(255, 71, 87, 0.4);
		z-index: 50;
		transition: transform 0.2s;

		&:active:not(.disabled) {
			transform: translate(-50%, -50%) scale(0.95);
		}

		&.disabled {
			opacity: 0.6;
			cursor: not-allowed;
		}

		.button-text {
			color: white;
			font-size: 24rpx;
			font-weight: bold;
			text-align: center;
		}
	}

	.result-modal {
		position: fixed;
		top: 0;
		left: 0;
		width: 100vw;
		height: 100vh;
		background: rgba(0, 0, 0, 0.7);
		display: flex;
		align-items: center;
		justify-content: center;
		z-index: 1000;

		.modal-content {
			background: white;
			border-radius: 20rpx;
			padding: 60rpx 40rpx;
			text-align: center;
			box-shadow: 0 20rpx 40rpx rgba(0, 0, 0, 0.3);
			min-width: 500rpx;

			.result-title {
				font-size: 36rpx;
				font-weight: bold;
				color: #FF6B6B;
				margin-bottom: 40rpx;
			}

			.result-prize {
				margin-bottom: 40rpx;

				.result-icon {
					font-size: 60rpx;
					display: block;
					margin-bottom: 20rpx;
				}

				.result-name {
					font-size: 32rpx;
					color: #333;
					display: block;
					margin-bottom: 10rpx;
				}

				.result-value {
					font-size: 36rpx;
					color: #FF6B6B;
					font-weight: bold;
				}
			}

			.confirm-btn {
				background: linear-gradient(45deg, #FF6B6B, #FF4757);
				color: white;
				border: none;
				border-radius: 40rpx;
				padding: 20rpx 60rpx;
				font-size: 28rpx;
				font-weight: bold;
			}
		}
	}

	.spin-info {
		text-align: center;
		color: white;
		font-size: 28rpx;
		background: rgba(255, 255, 255, 0.2);
		padding: 20rpx 40rpx;
		border-radius: 40rpx;
		backdrop-filter: blur(10rpx);
	}
</style>