feat: 中奖名单页动态人数、分页提示与空态

- 顶部幸运持卡人数由各期中奖总数动态求和
- 名单不足一页时隐藏加载更多,各期加载状态独立管理
- 无名单时展示暂无数据空态

Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
jacobxu666
2026-08-27 15:17:08 +08:00
co-authored by Claude Haiku 4.5
parent 06e8223c27
commit f2c8364d87
+68 -24
View File
@@ -15,7 +15,7 @@
<view class="stats-card"> <view class="stats-card">
<image class="stats-gift" src="https://zhihuiyou.oss-cn-shenzhen.aliyuncs.com/hhrs/hhrs_xyckr.png" mode="aspectFit"></image> <image class="stats-gift" src="https://zhihuiyou.oss-cn-shenzhen.aliyuncs.com/hhrs/hhrs_xyckr.png" mode="aspectFit"></image>
<text class="stats-label">已产生</text> <text class="stats-label">已产生</text>
<text class="stats-number">7,000</text> <text class="stats-number">{{ totalWinners.toLocaleString() }}</text>
<text class="stats-label">名幸运持卡人</text> <text class="stats-label">名幸运持卡人</text>
</view> </view>
</view> </view>
@@ -46,6 +46,7 @@
<!-- 中奖者表格 --> <!-- 中奖者表格 -->
<view class="table-area"> <view class="table-area">
<template v-if="currentList.length > 0">
<view class="table-header"> <view class="table-header">
<text class="table-col col-name">姓名</text> <text class="table-col col-name">姓名</text>
<text class="table-col col-idcard">身份证</text> <text class="table-col col-idcard">身份证</text>
@@ -56,9 +57,16 @@
<text class="table-col col-idcard">{{ item.memberIdentityNo }}</text> <text class="table-col col-idcard">{{ item.memberIdentityNo }}</text>
<text class="table-col col-phone">{{ item.memberPhone }}</text> <text class="table-col col-phone">{{ item.memberPhone }}</text>
</view> </view>
<view class="loadmore-area"> <!-- xuchao: 名单不足一页时隐藏加载更多 -->
<view class="loadmore-area" v-if="(totals[currentTab] || 0) > pageSize">
<u-loadmore :status="loadStatus" :loading-text="'加载中...'" :loadmore-text="'上拉加载更多'" :nomore-text="'没有更多了'" /> <u-loadmore :status="loadStatus" :loading-text="'加载中...'" :loadmore-text="'上拉加载更多'" :nomore-text="'没有更多了'" />
</view> </view>
</template>
<!-- xuchao: 无名单时展示空态 -->
<view class="empty-area" v-else>
<u-icon name="empty" size="60" color="#c8c8c8"></u-icon>
<text class="empty-text">暂无数据</text>
</view>
</view> </view>
</view> </view>
</template> </template>
@@ -72,9 +80,10 @@ export default {
winnerData: {}, winnerData: {},
pageNo: 1, pageNo: 1,
pageSize: 10, pageSize: 10,
total: 0, totals: {},
loading: false, totalWinners: 0,
loadStatus: 'loadmore', inFlight: 0,
loadStatusMap: {},
keyword: '' keyword: ''
} }
}, },
@@ -88,6 +97,10 @@ export default {
(item.memberName && item.memberName.toLowerCase().includes(kw)) || (item.memberName && item.memberName.toLowerCase().includes(kw)) ||
(item.memberPhone && item.memberPhone.includes(kw)) (item.memberPhone && item.memberPhone.includes(kw))
) )
},
// xuchao: 各期独立的加载状态,避免并行请求互相覆盖
loadStatus() {
return this.loadStatusMap[this.currentTab] || 'nomore'
} }
}, },
onLoad() { onLoad() {
@@ -110,45 +123,55 @@ export default {
data[index] = [] data[index] = []
}) })
this.winnerData = data this.winnerData = data
// xuchao: 预置各期 key,保证 totals/loadStatusMap 的响应式
this.totals = {}
this.loadStatusMap = {}
dates.forEach((date, index) => {
this.$set(this.totals, index, 0)
this.$set(this.loadStatusMap, index, 'loading')
})
// xuchao: 预取各期第一页,汇总已产生总人数
if (this.tabs.length > 0) { if (this.tabs.length > 0) {
this.loadWinnerList(0) this.tabs.forEach((tab, index) => {
this.loadWinnerList(index, 1, true)
})
} }
} }
}) })
}, },
loadWinnerList(tabIndex) { loadWinnerList(tabIndex, pageNo, allowConcurrent) {
if (!this.tabs[tabIndex]) return if (!this.tabs[tabIndex]) return
if (this.loading) return if (this.inFlight > 0 && !allowConcurrent) return
this.loading = true this.inFlight++
this.loadStatus = 'loading' this.$set(this.loadStatusMap, tabIndex, 'loading')
const drawDate = this.tabs[tabIndex].date const drawDate = this.tabs[tabIndex].date
this.$u.api.getWinnerList({ this.$u.api.getWinnerList({
pageNo: this.pageNo, pageNo: pageNo || this.pageNo,
pageSize: this.pageSize, pageSize: this.pageSize,
drawDate: drawDate drawDate: drawDate
}).then(res => { }).then(res => {
if (res.errcode === 0 && res.data) { if (res.errcode === 0 && res.data) {
const list = res.data.list || [] const list = res.data.list || []
if (this.pageNo === 1) { const page = pageNo || this.pageNo
if (page === 1) {
this.$set(this.winnerData, tabIndex, list) this.$set(this.winnerData, tabIndex, list)
} else { } else {
this.winnerData[tabIndex] = this.winnerData[tabIndex].concat(list) this.winnerData[tabIndex] = this.winnerData[tabIndex].concat(list)
} }
this.total = res.data.total || 0 this.$set(this.totals, tabIndex, res.data.total || 0)
// xuchao: 各期总人数求和,用于顶部幸运持卡人数
this.totalWinners = Object.values(this.totals).reduce((sum, n) => sum + n, 0)
} }
}).finally(() => { }).finally(() => {
this.loading = false this.inFlight--
if (this.winnerData[tabIndex].length === 0) { const len = this.winnerData[tabIndex].length
this.loadStatus = 'nomore' const total = this.totals[tabIndex] || 0
} else if (this.winnerData[tabIndex].length >= this.total) { this.$set(this.loadStatusMap, tabIndex, len === 0 || len >= total ? 'nomore' : 'loadmore')
this.loadStatus = 'nomore'
} else {
this.loadStatus = 'loadmore'
}
}) })
}, },
loadMore() { loadMore() {
if (this.winnerData[this.currentTab].length < this.total && !this.loading) { const total = this.totals[this.currentTab] || 0
if (this.winnerData[this.currentTab].length < total && this.inFlight === 0) {
this.pageNo++ this.pageNo++
this.loadWinnerList(this.currentTab) this.loadWinnerList(this.currentTab)
} }
@@ -157,13 +180,20 @@ export default {
this.currentTab = index this.currentTab = index
this.pageNo = 1 this.pageNo = 1
if (this.winnerData[index].length === 0) { if (this.winnerData[index].length === 0) {
this.loadWinnerList(index) this.loadWinnerList(index, 1)
} else { } else {
this.loadStatus = this.winnerData[index].length >= this.total ? 'nomore' : 'loadmore' const total = this.totals[index] || 0
this.$set(this.loadStatusMap, index, this.winnerData[index].length >= total ? 'nomore' : 'loadmore')
} }
}, },
goBack() { goBack() {
// xuchao: 直接通过链接进入(无历史栈)时回到首页
const pages = getCurrentPages()
if (pages.length > 1) {
uni.navigateBack() uni.navigateBack()
} else {
uni.reLaunch({ url: '/pages/index/index' })
}
}, },
onSearch() { onSearch() {
// 前端过滤,无需重新请求 // 前端过滤,无需重新请求
@@ -408,4 +438,18 @@ export default {
padding: 24px 0; padding: 24px 0;
color: #999999; color: #999999;
} }
/* 空态 */
.empty-area {
display: flex;
flex-direction: column;
align-items: center;
padding: 80px 0;
color: #999999;
}
.empty-text {
margin-top: 12px;
font-size: 14px;
}
</style> </style>