From 1aace8a7049b092ab4995e0f6a3a0d6aa533f2c2 Mon Sep 17 00:00:00 2001
From: no99 <17663930442@163.com>
Date: Tue, 15 Apr 2025 14:12:59 +0800
Subject: [PATCH] =?UTF-8?q?=E8=BD=AC=E7=9B=98?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json      |  2 +-
 src/style.css     |  7 +------
 src/views/DZP.vue | 63 ++++++++++++++++++++++++++++++++++++++++++++++---------
 3 files changed, 55 insertions(+), 17 deletions(-)

diff --git a/package.json b/package.json
index f533a05..835f996 100644
--- a/package.json
+++ b/package.json
@@ -4,7 +4,7 @@
   "version": "0.0.0",
   "type": "module",
   "scripts": {
-    "dev": "vite",
+    "dev": "vite --host",
     "build": "vite build",
     "preview": "vite preview"
   },
diff --git a/src/style.css b/src/style.css
index f691315..b30313a 100644
--- a/src/style.css
+++ b/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 {
diff --git a/src/views/DZP.vue b/src/views/DZP.vue
index ecde358..4d1d454 100644
--- a/src/views/DZP.vue
+++ b/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">
+        <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>
 
-        <LuckyWheel class="lucky" ref="myLucky" width="300px" height="300px" :default-config="wheelConfig"
-            :prizes="prizes" :blocks="blocks" :buttons="buttons" @start="startCallback" @end="endCallback" />
     </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>