转盘

package.json

@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
     "preview": "vite preview"
   },

src/style.css

@@ -33,6 +33,7 @@ body {
 h1 {
   font-size: 3.2em;
   line-height: 1.1;
+  margin: 0;
 }
 
 button {
@@ -58,12 +59,6 @@ button:focus-visible {
   padding: 2em;
 }
 
-#app {
-  max-width: 1280px;
-  margin: 0 auto;
-  padding: 2rem;
-  text-align: center;
-}
 
 @media (prefers-color-scheme: light) {
   :root {

src/views/DZP.vue

@@ -1,6 +1,6 @@
 <script setup>
 
-import { ref, onBeforeMount } from 'vue'
+import { ref, onBeforeMount, computed } from 'vue'
 
 const myLucky = ref()
 const wheelConfig = ref({
@@ -21,32 +21,75 @@ const buttons = ref([{
     fonts: [{ text: '开始', top: '-10px' }]
 }])
 
+const prizeList=ref([1,3,5,0,2,4])
+var index=0
 function startCallback() {
     // 调用抽奖组件的play方法开始游戏
     myLucky.value.play()
     // 模拟调用接口异步抽奖
     setTimeout(() => {
         // 假设后端返回的中奖索引是0
-        const index = 0
         // 调用stop停止旋转并传递中奖索引
-        myLucky.value.stop(index)
+        myLucky.value.stop(prizeList.value[index])
+        index=index+1;
     }, 3000)
 }
+const prize = ref(0)
 
 // 抽奖结束end回调
-function endCallback(prize) {
-    console.log(prize)
+function endCallback(prizeObj) {
+    console.log(prizeObj)
+
+    // alert('恭喜你抽中了：' + prizeObj.fonts[0].text)
+    prize.value = prizeObj.fonts[0].text
+    console.log(prize.value);
 }
+const now = computed(() => {
+    return prize.value
+})
+
 </script>
 
 <template>
-    <h1> 大转盘 </h1>
+    <div class="bk">
+        <h1 class="title"> 大转盘 </h1>
 
         <div class="luckyWheel">
 
             <LuckyWheel class="lucky" ref="myLucky" width="300px" height="300px" :default-config="wheelConfig"
                 :prizes="prizes" :blocks="blocks" :buttons="buttons" @start="startCallback" @end="endCallback" />
         </div>
+
+        <div class="prize">
+            <h1>{{ now }}</h1>
+        </div>
+
+    </div>
 </template>
 
-<style scoped></style>
+<style scoped>
+.title {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    font-size: 30px;
+}
+
+.bk {
+    background-color: #8a9bf3;
+    width: 100vw;
+    height: 100vh;
+}
+
+.luckyWheel {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+
+.prize {
+    display: flex;
+    justify-content: center;
+    align-items: center;
+}
+</style>