176 lines
3.9 KiB
Vue
176 lines
3.9 KiB
Vue
<template>
|
|
<view class="turntable-container" :style="{ backgroundColor: bgColor }">
|
|
<view class="turntable" :style="turntableStyle" @click="startRotate">
|
|
<!-- 奖项区域 -->
|
|
<view
|
|
v-for="(item, index) in prizes"
|
|
:key="index"
|
|
class="prize-sector"
|
|
:style="getPrizeStyle(index)"
|
|
>
|
|
<view class="prize-text">{{ item.name }}</view>
|
|
</view>
|
|
|
|
<!-- 装饰点 -->
|
|
<view
|
|
v-for="(item, index) in prizes"
|
|
:key="'dot'+index"
|
|
class="decorative-dot"
|
|
:style="getDotStyle(index)"
|
|
/>
|
|
|
|
<!-- 中心指针 -->
|
|
<view class="center-pointer" />
|
|
</view>
|
|
|
|
<button @click="startRotate">开始抽奖</button>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
props: {
|
|
prizes: {
|
|
type: Array,
|
|
default: () => [
|
|
{ name: "一等奖", color: "#FF4444" },
|
|
{ name: "二等奖", color: "#66CC33" },
|
|
{ name: "三等奖", color: "#44AAFF" },
|
|
{ name: "谢谢参与", color: "#CCCCCC" }
|
|
]
|
|
},
|
|
bgColor: {
|
|
type: String,
|
|
default: "#F0F0F0"
|
|
},
|
|
turntableColor: {
|
|
type: String,
|
|
default: "#FFFFFF"
|
|
}
|
|
},
|
|
data() {
|
|
return {
|
|
isRotating: false,
|
|
currentRotation: 0
|
|
}
|
|
},
|
|
computed: {
|
|
turntableStyle() {
|
|
return {
|
|
transform: `rotate(${this.currentRotation}deg)`,
|
|
backgroundColor: this.turntableColor
|
|
}
|
|
}
|
|
},
|
|
methods: {
|
|
getPrizeStyle(index) {
|
|
const total = this.prizes.length
|
|
const angle = 360 / total
|
|
return {
|
|
clipPath: `polygon(50% 0%, 100% 0, 100% ${100 * (index + 1) / total}%, 50% 100%, 0 ${100 * index / total}%, 0 0)`,
|
|
backgroundColor: this.prizes[index].color
|
|
}
|
|
},
|
|
getDotStyle(index) {
|
|
const total = this.prizes.length
|
|
const angle = (360 / total) * index
|
|
return {
|
|
transform: `rotate(${angle}deg) translateX(70%)`,
|
|
backgroundColor: this.prizes[index].color
|
|
}
|
|
},
|
|
async startRotate() {
|
|
if (this.isRotating) return
|
|
|
|
this.isRotating = true
|
|
const targetIndex = Math.floor(Math.random() * this.prizes.length)
|
|
const targetRotation = this.currentRotation + 360 * 5 + (360 / this.prizes.length) * targetIndex
|
|
|
|
await this.$nextTick()
|
|
this.currentRotation = targetRotation
|
|
|
|
setTimeout(() => {
|
|
this.isRotating = false
|
|
this.$emit('result', this.prizes[targetIndex])
|
|
}, 3000)
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.turntable-container {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
padding: 20px;
|
|
border-radius: 20px;
|
|
}
|
|
|
|
.turntable {
|
|
position: relative;
|
|
width: 300px;
|
|
height: 300px;
|
|
border-radius: 50%;
|
|
transition: transform 3s ease-out;
|
|
overflow: hidden;
|
|
cursor: pointer;
|
|
}
|
|
|
|
.prize-sector {
|
|
position: absolute;
|
|
width: 50%;
|
|
height: 50%;
|
|
left: 50%;
|
|
top: 0;
|
|
transform-origin: left bottom;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.prize-text {
|
|
transform: rotate(45deg);
|
|
color: white;
|
|
font-weight: bold;
|
|
text-shadow: 1px 1px 2px rgba(0,0,0,0.5);
|
|
}
|
|
|
|
.decorative-dot {
|
|
position: absolute;
|
|
width: 8px;
|
|
height: 8px;
|
|
border-radius: 50%;
|
|
top: 10%;
|
|
left: 50%;
|
|
}
|
|
|
|
.center-pointer {
|
|
position: absolute;
|
|
width: 0;
|
|
height: 0;
|
|
border-left: 20px solid transparent;
|
|
border-right: 20px solid transparent;
|
|
border-top: 40px solid #333;
|
|
top: 50%;
|
|
left: 50%;
|
|
transform: translate(-50%, -50%);
|
|
z-index: 2;
|
|
}
|
|
|
|
button {
|
|
margin-top: 20px;
|
|
padding: 10px 20px;
|
|
font-size: 16px;
|
|
cursor: pointer;
|
|
background-color: #44AAFF;
|
|
color: white;
|
|
border: none;
|
|
border-radius: 5px;
|
|
transition: background-color 0.3s;
|
|
}
|
|
|
|
button:hover {
|
|
background-color: #3399FF;
|
|
}
|
|
</style> |