feat: 中奖名单页动态人数、分页提示与空态
- 顶部幸运持卡人数由各期中奖总数动态求和 - 名单不足一页时隐藏加载更多,各期加载状态独立管理 - 无名单时展示暂无数据空态 Co-Authored-By: Claude Haiku 4.5 <noreply@anthropic.com>
This commit is contained in:
co-authored by
Claude Haiku 4.5
parent
06e8223c27
commit
f2c8364d87
+80
-36
@@ -15,7 +15,7 @@
|
||||
<view class="stats-card">
|
||||
<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-number">7,000</text>
|
||||
<text class="stats-number">{{ totalWinners.toLocaleString() }}</text>
|
||||
<text class="stats-label">名幸运持卡人</text>
|
||||
</view>
|
||||
</view>
|
||||
@@ -46,18 +46,26 @@
|
||||
|
||||
<!-- 中奖者表格 -->
|
||||
<view class="table-area">
|
||||
<view class="table-header">
|
||||
<text class="table-col col-name">姓名</text>
|
||||
<text class="table-col col-idcard">身份证</text>
|
||||
<text class="table-col col-phone">手机号码</text>
|
||||
</view>
|
||||
<view class="table-row" v-for="(item, index) in currentList" :key="index">
|
||||
<text class="table-col col-name">{{ item.memberName }}</text>
|
||||
<text class="table-col col-idcard">{{ item.memberIdentityNo }}</text>
|
||||
<text class="table-col col-phone">{{ item.memberPhone }}</text>
|
||||
</view>
|
||||
<view class="loadmore-area">
|
||||
<u-loadmore :status="loadStatus" :loading-text="'加载中...'" :loadmore-text="'上拉加载更多'" :nomore-text="'没有更多了'" />
|
||||
<template v-if="currentList.length > 0">
|
||||
<view class="table-header">
|
||||
<text class="table-col col-name">姓名</text>
|
||||
<text class="table-col col-idcard">身份证</text>
|
||||
<text class="table-col col-phone">手机号码</text>
|
||||
</view>
|
||||
<view class="table-row" v-for="(item, index) in currentList" :key="index">
|
||||
<text class="table-col col-name">{{ item.memberName }}</text>
|
||||
<text class="table-col col-idcard">{{ item.memberIdentityNo }}</text>
|
||||
<text class="table-col col-phone">{{ item.memberPhone }}</text>
|
||||
</view>
|
||||
<!-- xuchao: 名单不足一页时隐藏加载更多 -->
|
||||
<view class="loadmore-area" v-if="(totals[currentTab] || 0) > pageSize">
|
||||
<u-loadmore :status="loadStatus" :loading-text="'加载中...'" :loadmore-text="'上拉加载更多'" :nomore-text="'没有更多了'" />
|
||||
</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>
|
||||
@@ -72,9 +80,10 @@ export default {
|
||||
winnerData: {},
|
||||
pageNo: 1,
|
||||
pageSize: 10,
|
||||
total: 0,
|
||||
loading: false,
|
||||
loadStatus: 'loadmore',
|
||||
totals: {},
|
||||
totalWinners: 0,
|
||||
inFlight: 0,
|
||||
loadStatusMap: {},
|
||||
keyword: ''
|
||||
}
|
||||
},
|
||||
@@ -88,6 +97,10 @@ export default {
|
||||
(item.memberName && item.memberName.toLowerCase().includes(kw)) ||
|
||||
(item.memberPhone && item.memberPhone.includes(kw))
|
||||
)
|
||||
},
|
||||
// xuchao: 各期独立的加载状态,避免并行请求互相覆盖
|
||||
loadStatus() {
|
||||
return this.loadStatusMap[this.currentTab] || 'nomore'
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
@@ -110,45 +123,55 @@ export default {
|
||||
data[index] = []
|
||||
})
|
||||
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) {
|
||||
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.loading) return
|
||||
this.loading = true
|
||||
this.loadStatus = 'loading'
|
||||
if (this.inFlight > 0 && !allowConcurrent) return
|
||||
this.inFlight++
|
||||
this.$set(this.loadStatusMap, tabIndex, 'loading')
|
||||
const drawDate = this.tabs[tabIndex].date
|
||||
this.$u.api.getWinnerList({
|
||||
pageNo: this.pageNo,
|
||||
pageNo: pageNo || this.pageNo,
|
||||
pageSize: this.pageSize,
|
||||
drawDate: drawDate
|
||||
}).then(res => {
|
||||
if (res.errcode === 0 && res.data) {
|
||||
const list = res.data.list || []
|
||||
if (this.pageNo === 1) {
|
||||
const page = pageNo || this.pageNo
|
||||
if (page === 1) {
|
||||
this.$set(this.winnerData, tabIndex, list)
|
||||
} else {
|
||||
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(() => {
|
||||
this.loading = false
|
||||
if (this.winnerData[tabIndex].length === 0) {
|
||||
this.loadStatus = 'nomore'
|
||||
} else if (this.winnerData[tabIndex].length >= this.total) {
|
||||
this.loadStatus = 'nomore'
|
||||
} else {
|
||||
this.loadStatus = 'loadmore'
|
||||
}
|
||||
this.inFlight--
|
||||
const len = this.winnerData[tabIndex].length
|
||||
const total = this.totals[tabIndex] || 0
|
||||
this.$set(this.loadStatusMap, tabIndex, len === 0 || len >= total ? 'nomore' : '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.loadWinnerList(this.currentTab)
|
||||
}
|
||||
@@ -157,13 +180,20 @@ export default {
|
||||
this.currentTab = index
|
||||
this.pageNo = 1
|
||||
if (this.winnerData[index].length === 0) {
|
||||
this.loadWinnerList(index)
|
||||
this.loadWinnerList(index, 1)
|
||||
} 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() {
|
||||
uni.navigateBack()
|
||||
// xuchao: 直接通过链接进入(无历史栈)时回到首页
|
||||
const pages = getCurrentPages()
|
||||
if (pages.length > 1) {
|
||||
uni.navigateBack()
|
||||
} else {
|
||||
uni.reLaunch({ url: '/pages/index/index' })
|
||||
}
|
||||
},
|
||||
onSearch() {
|
||||
// 前端过滤,无需重新请求
|
||||
@@ -408,4 +438,18 @@ export default {
|
||||
padding: 24px 0;
|
||||
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>
|
||||
|
||||
Reference in New Issue
Block a user