diff --git a/src/views/choujiang/lottery/PrizePanel.vue b/src/views/choujiang/lottery/PrizePanel.vue
index 043d2ae..25da741 100644
--- a/src/views/choujiang/lottery/PrizePanel.vue
+++ b/src/views/choujiang/lottery/PrizePanel.vue
@@ -137,7 +137,7 @@
>
-
+
+ {{ currentPage }} / {{ totalPages }}
+
+
@@ -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();
});
@@ -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;
+}
\ No newline at end of file