1

components/LuckyWheel.vue

@@ -1,176 +1,176 @@
-<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;
-}
+<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>