From ee8578e25ec1af22e35d26d2aaf721b0f4cdf449 Mon Sep 17 00:00:00 2001
From: Ethereal <3432649580@qq.com>
Date: Mon, 21 Jul 2025 14:35:28 +0800
Subject: [PATCH] =?UTF-8?q?=E5=AE=8C=E6=88=90=E6=89=80=E6=9C=89=E6=8E=A5?=
 =?UTF-8?q?=E5=8F=A3=E7=9A=84=E6=B5=8B=E8=AF=95?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .env.development                           |   2 +-
 src/api/API.js                             |  12 +++
 src/views/choujiang/lottery/PrizePanel.vue | 138 +++++++++++++++++++----------
 3 files changed, 106 insertions(+), 46 deletions(-)

diff --git a/.env.development b/.env.development
index 555fc75..c5a8ac9 100644
--- a/.env.development
+++ b/.env.development
@@ -5,7 +5,7 @@ VITE_OUTPUT_DIR = 'dev'
 VITE_PUBLIC_PATH = /
 
 #新数据接口
-# VITE_APP_API_BASE_URL = "http://39.101.133.168:8828/link"
+VITE_APP_API_BASE_URL = "https://dbqb.nfdxy.net/devLotApi"
 
 
 # Whether to open mock
diff --git a/src/api/API.js b/src/api/API.js
index 79d641c..19c9e87 100644
--- a/src/api/API.js
+++ b/src/api/API.js
@@ -1,3 +1,4 @@
+import axios from "axios";
 import request from "../utils/request";
 
 const APIurl = import.meta.env.VITE_APP_API_BASE_URL;
@@ -43,4 +44,15 @@ export function drawLottery(data){
             prizeId: data.prizeId
         }
     })
+}
+
+export function updatePrizeList(){
+    return axios({
+        url: APIurl + '/admin/win/list',
+        method: 'post',
+        data: {},
+        headers: {
+            'Content-Type': 'application/json'
+        }
+    })
 }
\ No newline at end of file
diff --git a/src/views/choujiang/lottery/PrizePanel.vue b/src/views/choujiang/lottery/PrizePanel.vue
index 4d54b3d..13db6d4 100644
--- a/src/views/choujiang/lottery/PrizePanel.vue
+++ b/src/views/choujiang/lottery/PrizePanel.vue
@@ -54,7 +54,7 @@
         <div></div>
         <div class="prize-panel-footer">
           <div class="arrow-up" @click="openWinnerList"></div>
-             <button
+          <button
             ref="winnerBtnRef"
             class="winner-btn"
             @click="toggleWinnerList"
@@ -136,8 +136,8 @@
             </div>
           </div>
         </div>
-          <div class="prize-panel-footer">
-            <div class="arrow-down"  @click="toggleWinnerList"></div>
+        <div class="prize-panel-footer">
+          <div class="arrow-down" @click="toggleWinnerList"></div>
           <!-- <div   class="arrow-up " @click="openWinnerList"> </div>
           <button 
           
@@ -161,13 +161,33 @@
               }"
               @click.stop
             >
-              <div class="winner-modal-title"><span>Homily ID</span><span>奖项</span></div>
-              <div style="background:linear-gradient(to left, rgb(232 76 10), rgb(195 6 6), rgb(240 90 9));height:1px;"></div>
+              <div class="winner-modal-title">
+                <span>Homily ID</span><span>奖项</span>
+              </div>
+              <div
+                style="
+                  background: linear-gradient(
+                    to left,
+                    rgb(232 76 10),
+                    rgb(195 6 6),
+                    rgb(240 90 9)
+                  );
+                  height: 1px;
+                "
+              ></div>
               <ul class="winner-list">
-                <li v-for="(user, idx) in fakeWinners" :key="idx" style="display: flex; justify-content: space-between; align-items: center;" >
+                <li
+                  v-for="(user, idx) in fakeWinners"
+                  :key="idx"
+                  style="
+                    display: flex;
+                    justify-content: space-between;
+                    align-items: center;
+                  "
+                >
                   <!-- <span>{{ user.id }}</span> - <span>{{ user.name }}</span> - -->
-                  <span >{{ user.jwcode }}</span>
-                  <span>{{ user.prize }}</span>
+                  <span>{{ user.jwcode }}</span>
+                  <span>{{ user.prizeName }}</span>
                 </li>
               </ul>
             </div>
@@ -179,9 +199,9 @@
 </template>
 
 <script setup>
-import { ref, computed, nextTick, watch } from "vue";
-import { useLotteryStore  } from "../../../store/lottery";
-
+import { ref, computed, nextTick, watch, onMounted } from "vue";
+import { useLotteryStore } from "../../../store/lottery";
+import { updatePrizeList } from "../../../api/API";
 
 const props = defineProps({
   prizes: Array,
@@ -205,10 +225,10 @@ const winners = computed({
 });
 
 // 用watch监听winners的变化
-watch(winners, (newVal) => {
-  console.log('中奖人数列表winners', newVal);
-  fakeWinners.value = newVal;
-});
+// watch(winners, (newVal) => {
+//   console.log("中奖人数列表winners", newVal);
+//   fakeWinners.value = newVal;
+// });
 
 const lastRevealedIdx = ref(-1);
 
@@ -252,7 +272,7 @@ function handleReveal(idx) {
   if (idx === nextRevealIdx.value && canRevealPrize(idx)) {
     revealedCount.value++;
     lastRevealedIdx.value = idx; // 记录最新揭秘的索引
-    if(idx===0){
+    if (idx === 0) {
       waitingForNextReveal.value = false;
     }
     console.log("lastRevealedIdx.value", lastRevealedIdx.value);
@@ -278,18 +298,32 @@ function getLeftCount(prize) {
 
 // 新增部分
 const showWinnerList = ref(false);
-  const fakeWinners = ref([]);
-  fakeWinners.value = winners.value;
-  console.log('fakeWinners', fakeWinners.value);
+const fakeWinners = ref([]);
+// fakeWinners.value = winners.value;
+console.log("fakeWinners", fakeWinners.value);
+
+const updateWinners = async () => {
+  try {
+    const response = await updatePrizeList();
+    console.log("updatePrizeList response", response);
+    fakeWinners.value = response.data.data.list;
+    console.log("updateWinners fakeWinners", fakeWinners.value);
+  } catch (error) {
+    console.error("updatePrizeList error", error);
+  }
+};
+async function openWinnerList() {
 
-function openWinnerList() {
   // showWinnerList.value = true;
-    if (!showWinnerList.value) {
+  if (!showWinnerList.value) {
     if (revealedCount.value === 0) {
-        alert('请先揭晓奖品,并抽奖！');}
+      alert("请先揭晓奖品,并抽奖！");
     }
-    if(revealedCount.value > 0)
- { showWinnerList.value = true;}
+    //  await updatePrizeList();
+  }
+  if (revealedCount.value > 0) {
+    showWinnerList.value = true;
+  }
   // 当存在最新揭秘的奖品时，点击获奖名单将showOne设置为false
   if (lastRevealedIdx.value >= 0) {
     showOne.value = false;
@@ -316,21 +350,30 @@ const winnerBtnRef = ref(null);
 const modalLeft = ref(0);
 const modalTop = ref(0);
 
-function toggleWinnerList() {
+async function toggleWinnerList() {
+  await updateWinners();
+
   showWinnerList.value = !showWinnerList.value;
-  console.log('toggleWinnerList - showWinnerList:', showWinnerList.value, 'showOne:', showOne.value, 'lastRevealedIdx:', lastRevealedIdx.value);
+  console.log(
+    "toggleWinnerList - showWinnerList:",
+    showWinnerList.value,
+    "showOne:",
+    showOne.value,
+    "lastRevealedIdx:",
+    lastRevealedIdx.value
+  );
   if (!showWinnerList.value) {
     if (revealedCount.value === 0) {
-        alert('请先揭晓奖品,并抽奖！');}
+      alert("请先揭晓奖品,并抽奖！");
     }
+  }
 
   if (showWinnerList.value) {
     // 当存在最新揭秘的奖品时，点击获奖名单将showOne设置为false
-   
+
     if (lastRevealedIdx.value > 0) {
       showOne.value = false;
-      console.log('设置 showOne 为 false');
-     
+      console.log("设置 showOne 为 false");
     }
     // 设置弹窗位置
     // nextTick(() => {
@@ -345,8 +388,8 @@ function toggleWinnerList() {
     // 当关闭获奖名单且showOne为false时，将其切换回true
     if (!showOne.value) {
       showOne.value = true;
-     
-      console.log('设置 showOne 为 true');
+
+      console.log("设置 showOne 为 true");
     }
   }
 }
@@ -357,6 +400,11 @@ function getProgressPercent(prize) {
   // 返回剩余数量的百分比，这样开始时是满的，抽完后是空的
   return Math.round((left / total) * 100);
 }
+
+// onMounted(() => {
+//   updateWinners();
+// });
+
 </script>
 
 <style scoped>
@@ -367,7 +415,7 @@ function getProgressPercent(prize) {
   background: none;
   z-index: 10;
   min-width: 320px;
-    max-width: 342px;
+  max-width: 342px;
   text-align: left;
   display: flex;
   flex-direction: column;
@@ -379,7 +427,7 @@ function getProgressPercent(prize) {
   box-shadow: 0 2px 8px rgba(0, 0, 0, 0.08);
   display: flex;
   align-items: center;
- 
+
   min-width: 320px;
 }
 .prize-card {
@@ -419,7 +467,7 @@ function getProgressPercent(prize) {
 }
 .prize-row-top {
   margin-bottom: 8px;
-     border: 1px solid #ea2b0a;
+  border: 1px solid #ea2b0a;
 }
 .prize-level {
   background: linear-gradient(90deg, #ff9800 0%, #ff5722 100%);
@@ -446,7 +494,7 @@ function getProgressPercent(prize) {
   justify-content: center;
   min-width: 80px;
 } */
- .custom-arrow-icon {
+.custom-arrow-icon {
   font-size: 24px; /* 图标大小 */
   color: #d84315; /* 图标颜色，使用项目主题橙色 */
   margin: 5px; /* 外边距 */
@@ -486,26 +534,26 @@ function getProgressPercent(prize) {
   height: 24px;
   margin-bottom: 4px;
   cursor: pointer;
-  background-image: url('../../../assets/展开.png');
+  background-image: url("../../../assets/展开.png");
   background-size: cover;
   background-position: center;
 }
 .arrow-down {
- position: fixed;
+  position: fixed;
   top: 120px;
   left: 165px;
   width: 36px;
   height: 38px;
   margin-bottom: 4px;
   cursor: pointer;
-  background-image: url('../../../assets/展开.png');
+  background-image: url("../../../assets/展开.png");
   background-size: cover;
   background-position: center;
   transform: rotate(180deg);
 }
 .winner-btn {
   background: rgba(255, 210, 131, 0.8);
-  color: #D5291F;
+  color: #d5291f;
   border: #fff;
   border-radius: 8px;
   padding: 15px 79px;
@@ -517,7 +565,7 @@ function getProgressPercent(prize) {
 .winner-modal-mask {
   position: fixed;
   top: 155px;
-  left:10px;
+  left: 10px;
   width: 100vw;
   height: 100vh;
   background: rgba(0, 0, 0, 0.01);
@@ -530,9 +578,9 @@ function getProgressPercent(prize) {
   background: rgba(255, 210, 131, 0.8);
   border-radius: 12px;
   padding-top: 12px;
-      padding-left: 25px;
-    padding-right: 25px;
-    padding-bottom: 10px;
+  padding-left: 25px;
+  padding-right: 25px;
+  padding-bottom: 10px;
   min-width: 280px;
   max-width: 90vw;
   box-shadow: 0 4px 24px rgba(0, 0, 0, 0.12);
@@ -545,7 +593,7 @@ function getProgressPercent(prize) {
   color: #e64f39;
   margin-bottom: 5px;
   text-align: center;
-   display: flex;
+  display: flex;
   justify-content: space-between; /* 左右对齐 */
   align-items: center; /* 垂直居中对齐 */
   /* 可添加padding或margin调整整体间距 */