12312

pages/winners/winners.vue

@@ -1,15 +1,5 @@
 <template>
 	<view class="page">
-		<!-- 自定义导航栏 -->
-		<view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
-			<view class="nav-header">
-				<view class="nav-back" @click="goBack">
-					<text class="back-icon">&#xe600;</text>
-				</view>
-				<text class="nav-title">中奖名单</text>
-			</view>
-		</view>
-
 		<!-- 顶部公告区 -->
 		<view class="banner-area">
 			<view class="banner-header">
@@ -41,18 +31,19 @@
 		</view>
 
 		<!-- 中奖者表格 -->
-		<view class="table-area">
+		<scroll-view class="table-area" scroll-y @scrolltolower="loadMore" :lower-threshold="100">
 			<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.name }}</text>
-				<text class="table-col col-idcard">{{ item.idCard }}</text>
-				<text class="table-col col-phone">{{ item.phone }}</text>
+				<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>
+			<u-loadmore :status="loadStatus" :loading-text="'加载中...'" :loadmore-text="'上拉加载更多'" :nomore-text="'没有更多了'" />
+		</scroll-view>
 	</view>
 </template>
 
@@ -60,21 +51,14 @@
 export default {
 	data() {
 		return {
-			statusBarHeight: 44,
 			currentTab: 0,
-			tabs: [
-				{ name: '第一期', date: '2026.02.10' },
-				{ name: '第二期', date: '2026.04.10' },
-				{ name: '第三期', date: '2026.06.10' }
-			],
-			winnerData: {
-				0: [
-					{ name: '王大力分', idCard: '4306********1920', phone: '186****1212' },
-					{ name: '王东林', idCard: '4306********1921', phone: '186****9010' }
-				],
-				1: [],
-				2: []
-			}
+			tabs: [],
+			winnerData: {},
+			pageNo: 1,
+			pageSize: 10,
+			total: 0,
+			loading: false,
+			loadStatus: 'loadmore'
 		}
 	},
 	computed: {
@@ -83,63 +67,83 @@ export default {
 		}
 	},
 	onLoad() {
-		const sysInfo = uni.getSystemInfoSync()
-		this.statusBarHeight = sysInfo.statusBarHeight || 44
+		this.loadDates()
 	},
 	methods: {
-		goBack() {
-			uni.navigateBack()
+		loadDates() {
+			this.$u.api.getWinnerDates().then(res => {
+				if (res.errcode === 0 && res.data) {
+					const dates = res.data
+					this.tabs = dates.map((date, index) => ({
+						name: `第${index + 1}期`,
+						date: date
+					}))
+					const data = {}
+					dates.forEach((date, index) => {
+						data[index] = []
+					})
+					this.winnerData = data
+					if (this.tabs.length > 0) {
+						this.loadWinnerList(0)
+					}
+				}
+			})
+		},
+		loadWinnerList(tabIndex) {
+			if (!this.tabs[tabIndex]) return
+			if (this.loading) return
+			this.loading = true
+			this.loadStatus = 'loading'
+			const drawDate = this.tabs[tabIndex].date
+			this.$u.api.getWinnerList({
+				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) {
+						this.$set(this.winnerData, tabIndex, list)
+					} else {
+						this.winnerData[tabIndex] = this.winnerData[tabIndex].concat(list)
+					}
+					this.total = res.data.total || 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'
+				}
+			})
+		},
+		loadMore() {
+			if (this.winnerData[this.currentTab].length < this.total && !this.loading) {
+				this.pageNo++
+				this.loadWinnerList(this.currentTab)
+			}
 		},
 		switchTab(index) {
 			this.currentTab = index
+			this.pageNo = 1
+			if (this.winnerData[index].length === 0) {
+				this.loadWinnerList(index)
+			} else {
+				this.loadStatus = this.winnerData[index].length >= this.total ? 'nomore' : 'loadmore'
+			}
 		}
 	}
 }
 </script>
-
 <style>
-.page {
-	min-height: 100vh;
-	background-color: #f2f2f7;
-}
-
-/* 自定义导航栏 */
-.nav-bar {
-	background-color: #ffffff;
-	position: sticky;
-	top: 0;
-	z-index: 100;
-}
-
-.nav-header {
-	height: 44px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-	position: relative;
-}
-
-.nav-back {
-	position: absolute;
-	left: 14px;
-	width: 24px;
-	height: 24px;
-	display: flex;
-	align-items: center;
-	justify-content: center;
-}
-
-.back-icon {
-	font-size: 20px;
-	color: #1a1818;
-}
-
-.nav-title {
-	font-size: 16px;
-	font-weight: 500;
-	color: #1a1818;
-}
-
+	page {
+		background-color: #f2f2f7;
+	}
+</style>
+<style scoped lang="less">
 /* 顶部公告区 */
 .banner-area {
 	background-color: #ffffff;
@@ -223,7 +227,7 @@ export default {
 }
 
 .tab-date {
-	font-size: 16px;
+	font-size: 14px;
 	font-weight: 600;
 	color: #b1b1b1;
 	line-height: 22px;
@@ -246,13 +250,9 @@ export default {
 /* 中奖者表格 */
 .table-area {
 	background-color: #ffffff;
-	margin: 0 12px;
-	margin-top: 12px;
-	border-radius: 10px 10px 0 0;
-	padding: 12px;
-	display: flex;
-	flex-direction: column;
-	min-height: 470px;
+	width: 702rpx;
+	margin: 24rpx;
+	border-radius: 8rpx;
 }
 
 .table-header,
@@ -266,6 +266,7 @@ export default {
 .table-header {
 	color: #8e8e93;
 	font-size: 14px;
+	
 }
 
 .table-row {
@@ -291,5 +292,6 @@ export default {
 .col-phone {
 	flex: 1;
 	text-align: right;
+	margin-right: 24rpx;
 }
 </style>