完成所有接口的测试

.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

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;
@@ -44,3 +45,14 @@ export function drawLottery(data){
         }
     })
 }
+
+export function updatePrizeList(){
+    return axios({
+        url: APIurl + '/admin/win/list',
+        method: 'post',
+        data: {},
+        headers: {
+            'Content-Type': 'application/json'
+        }
+    })
+}

src/views/choujiang/lottery/PrizePanel.vue

@@ -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 { 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 (revealedCount.value === 0) {
-        alert('请先揭晓奖品,并抽奖！');}
+      alert("请先揭晓奖品,并抽奖！");
+    }
+    //  await updatePrizeList();
+  }
+  if (revealedCount.value > 0) {
+    showWinnerList.value = true;
   }
-    if(revealedCount.value > 0)
- { showWinnerList.value = true;}
   // 当存在最新揭秘的奖品时，点击获奖名单将showOne设置为false
   if (lastRevealedIdx.value >= 0) {
     showOne.value = false;
@@ -316,12 +350,22 @@ 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) {
@@ -329,8 +373,7 @@ function toggleWinnerList() {
 
     if (lastRevealedIdx.value > 0) {
       showOne.value = false;
-      console.log('设置 showOne 为 false');
-     
+      console.log("设置 showOne 为 false");
     }
     // 设置弹窗位置
     // nextTick(() => {
@@ -346,7 +389,7 @@ function toggleWinnerList() {
     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>
@@ -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,7 +534,7 @@ 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;
 }
@@ -498,14 +546,14 @@ function getProgressPercent(prize) {
   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);