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">
|
<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,18 +46,26 @@
|
|||||||
|
|
||||||
<!-- 中奖者表格 -->
|
<!-- 中奖者表格 -->
|
||||||
<view class="table-area">
|
<view class="table-area">
|
||||||
<view class="table-header">
|
<template v-if="currentList.length > 0">
|
||||||
<text class="table-col col-name">姓名</text>
|
<view class="table-header">
|
||||||
<text class="table-col col-idcard">身份证</text>
|
<text class="table-col col-name">姓名</text>
|
||||||
<text class="table-col col-phone">手机号码</text>
|
<text class="table-col col-idcard">身份证</text>
|
||||||
</view>
|
<text class="table-col col-phone">手机号码</text>
|
||||||
<view class="table-row" v-for="(item, index) in currentList" :key="index">
|
</view>
|
||||||
<text class="table-col col-name">{{ item.memberName }}</text>
|
<view class="table-row" v-for="(item, index) in currentList" :key="index">
|
||||||
<text class="table-col col-idcard">{{ item.memberIdentityNo }}</text>
|
<text class="table-col col-name">{{ item.memberName }}</text>
|
||||||
<text class="table-col col-phone">{{ item.memberPhone }}</text>
|
<text class="table-col col-idcard">{{ item.memberIdentityNo }}</text>
|
||||||
</view>
|
<text class="table-col col-phone">{{ item.memberPhone }}</text>
|
||||||
<view class="loadmore-area">
|
</view>
|
||||||
<u-loadmore :status="loadStatus" :loading-text="'加载中...'" :loadmore-text="'上拉加载更多'" :nomore-text="'没有更多了'" />
|
<!-- 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>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
@@ -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() {
|
||||||
uni.navigateBack()
|
// xuchao: 直接通过链接进入(无历史栈)时回到首页
|
||||||
|
const pages = getCurrentPages()
|
||||||
|
if (pages.length > 1) {
|
||||||
|
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>
|
||||||
|
|||||||
Reference in New Issue
Block a user