优化获奖名单列表

src/views/choujiang/lottery/PrizePanel.vue

@@ -137,7 +137,7 @@
                       ></div>
                       <ul class="winner-list">
                         <li
-                          v-for="(user, idx) in fakeWinners"
+                          v-for="(user, idx) in paginatedWinners"
                           :key="idx"
                           style="
                             display: flex;
@@ -150,6 +150,24 @@
                           <span>{{ user.prizeName }}</span>
                         </li>
                       </ul>
+                      <!-- 分页控件 -->
+                      <div class="pagination-controls">
+                        <button 
+                          class="pagination-btn prev-btn" 
+                          @click="prevPage"
+                          :disabled="currentPage === 1"
+                        >
+                          &lt;
+                        </button>
+                        <span class="page-info">{{ currentPage }} / {{ totalPages }}</span>
+                        <button 
+                          class="pagination-btn next-btn" 
+                          @click="nextPage"
+                          :disabled="currentPage === totalPages"
+                        >
+                          &gt;
+                        </button>
+                      </div>
                     </div>
                   </div>
                 </div>
@@ -298,6 +316,38 @@ const fakeWinners = ref([]);
 // fakeWinners.value = winners.value;
 console.log("fakeWinners", fakeWinners.value);
 
+// 分页相关状态
+const currentPage = ref(1);
+const pageSize = ref(16); // 每页显示20条记录，更好地利用列表空间
+const totalPages = ref(1);
+
+// 计算当前页的数据
+const paginatedWinners = computed(() => {
+  const startIndex = (currentPage.value - 1) * pageSize.value;
+  const endIndex = startIndex + pageSize.value;
+  return fakeWinners.value.slice(startIndex, endIndex);
+});
+
+// 计算总页数
+const calculateTotalPages = () => {
+  totalPages.value = Math.ceil(fakeWinners.value.length / pageSize.value);
+  if (totalPages.value === 0) totalPages.value = 1;
+};
+
+// 上一页
+const prevPage = () => {
+  if (currentPage.value > 1) {
+    currentPage.value--;
+  }
+};
+
+// 下一页
+const nextPage = () => {
+  if (currentPage.value < totalPages.value) {
+    currentPage.value++;
+  }
+};
+
 import { getGetPrizeUserListApi } from "../../../api/API";
 const updateWinners = async () => {
   try {
@@ -306,8 +356,22 @@ const updateWinners = async () => {
       pageNum: 1,
     });
     console.log("updatePrizeList response", response);
-    fakeWinners.value = response.data.list;
+    
+    // 按时间排序，后中奖的排序在前（假设有createTime字段，如果没有则按id倒序）
+    const sortedWinners = response.data.list.sort((a, b) => {
+      if (a.createTime && b.createTime) {
+        return new Date(b.createTime) - new Date(a.createTime);
+      }
+      // 如果没有时间字段，按id倒序排列
+      return (b.id || 0) - (a.id || 0);
+    });
+    
+    fakeWinners.value = sortedWinners;
     console.log("updateWinners fakeWinners", fakeWinners.value);
+    
+    // 重置分页到第一页
+    currentPage.value = 1;
+    calculateTotalPages();
   } catch (error) {
     console.error("updatePrizeList error", error);
   }
@@ -389,6 +453,7 @@ function getProgressPercent(prize) {
 
 onMounted(() => {
   updateWinners();
+  calculateTotalPages();
 });
 </script>
 
@@ -605,6 +670,7 @@ onMounted(() => {
   justify-content: center;
 }
 .winner-modal {
+  height: 700px;
   background: rgba(255, 210, 131, 0.8);
   border-radius: 12px;
   padding-top: 12px;
@@ -638,7 +704,7 @@ onMounted(() => {
   cursor: pointer;
 }
 .winner-list {
-  max-height: 260px;
+  height: 580px;
   /* background: rgba(255, 210, 131, 0.8);/ */
   overflow-y: auto;
   padding: 0;
@@ -653,7 +719,7 @@ onMounted(() => {
   display: none; /* Chrome, Safari and Opera */
 }
 .winner-list li {
-  padding: 8px 0;
+  padding: 7px 0;
   /* border-bottom: 1px solid #f2f2f2; */
   font-size: 17px;
   color: #d84315;
@@ -719,7 +785,7 @@ onMounted(() => {
 }
 .prize-panel-item.revealed-highlight {
   /* border: 3px solid #ff9800; */
-  box-shadow: 0 0 16px 4px #ff9800aa;
+  box-shadow: 0 0 16px 4px #ff9800ff, 0 0 20px 6px #ffcc80ff;
   transform: scale(1.03);
   z-index: 2;
   transition: all 0.3s;
@@ -756,4 +822,51 @@ onMounted(() => {
 .prize-panel-item.disabled:hover::after {
   opacity: 1;
 }
+
+/* 分页控件样式 */
+.pagination-controls {
+  display: flex;
+  justify-content: center;
+  align-items: center;
+  gap: 15px;
+  margin-top: 15px;
+  padding: 10px 0;
+}
+
+.pagination-btn {
+  background: linear-gradient(90deg, #ff9800 0%, #ff5722 100%);
+  color: white;
+  border: none;
+  border-radius: 50%;
+  width: 35px;
+  height: 35px;
+  font-size: 18px;
+  font-weight: bold;
+  cursor: pointer;
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  transition: all 0.3s ease;
+  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
+}
+
+.pagination-btn:hover:not(:disabled) {
+  transform: scale(1.1);
+  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2);
+}
+
+.pagination-btn:disabled {
+  background: #ccc;
+  cursor: not-allowed;
+  transform: none;
+  box-shadow: none;
+}
+
+.page-info {
+  font-size: 18px;
+  font-weight: bold;
+  color: #d84315;
+  min-width: 60px;
+  text-align: center;
+}
 </style>