frontend-app/components/LuckyWheel.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>