hhrs/pages/winners/winners.vue

<template>
	<view class="page">
		<!-- 顶部公告区 -->
		<view class="banner-area">
			<view class="banner-header">
				<text class="banner-icon">&#x1F3C6;</text>
				<text class="banner-title">中奖名单公示</text>
			</view>
			<text class="banner-subtitle">总计 10,000份权益包，分三期公证抽取</text>
			<view class="stats-card">
				<text class="stats-gift">&#x1F381;</text>
				<text class="stats-label">已产生</text>
				<text class="stats-number">7,000</text>
				<text class="stats-label">名幸运持卡人</text>
			</view>
		</view>

		<!-- 三期 Tab -->
		<view class="tab-bar">
			<view
				class="tab-item"
				:class="{ active: currentTab === index }"
				v-for="(tab, index) in tabs"
				:key="index"
				@click="switchTab(index)"
			>
				<text class="tab-label">{{ tab.name }}</text>
				<text class="tab-date">{{ tab.date }}</text>
				<view class="tab-indicator" v-if="currentTab === index"></view>
			</view>
		</view>

		<!-- 中奖者表格 -->
		<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.memberName }}</text>
				<text class="table-col col-idcard">{{ item.memberIdentityNo }}</text>
				<text class="table-col col-phone">{{ item.memberPhone }}</text>
			</view>
			<u-loadmore :status="loadStatus" :loading-text="'加载中...'" :loadmore-text="'上拉加载更多'" :nomore-text="'没有更多了'" />
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			currentTab: 0,
			tabs: [],
			winnerData: {},
			pageNo: 1,
			pageSize: 10,
			total: 0,
			loading: false,
			loadStatus: 'loadmore'
		}
	},
	computed: {
		currentList() {
			return this.winnerData[this.currentTab] || []
		}
	},
	onLoad() {
		this.loadDates()
	},
	methods: {
		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 {
		background-color: #f2f2f7;
	}
</style>
<style scoped lang="less">
/* 顶部公告区 */
.banner-area {
	background-color: #ffffff;
	padding: 24px;
	border-radius: 0 0 10px 10px;
	display: flex;
	flex-direction: column;
	align-items: center;
	gap: 17px;
}

.banner-header {
	display: flex;
	align-items: center;
	gap: 4px;
}

.banner-icon {
	font-size: 50px;
}

.banner-title {
	font-size: 32px;
	font-weight: bold;
	color: #0d387d;
}

.banner-subtitle {
	font-size: 14px;
	color: #8e8e93;
	text-align: center;
}

.stats-card {
	width: 100%;
	display: flex;
	align-items: center;
	gap: 12px;
	padding: 12px;
	background: linear-gradient(146deg, #4981d2 0%, #1853af 100%);
	border-radius: 10px;
}

.stats-gift {
	font-size: 36px;
}

.stats-label {
	font-size: 14px;
	color: #ffffff;
}

.stats-number {
	font-size: 36px;
	font-weight: 600;
	color: #fce7b0;
}

/* 三期 Tab */
.tab-bar {
	display: flex;
	background-color: #ffffff;
	padding-top: 12px;
	justify-content: space-around;
}

.tab-item {
	display: flex;
	flex-direction: column;
	align-items: center;
	width: 88px;
	position: relative;
	padding-bottom: 12px;
}

.tab-label {
	font-size: 16px;
	font-weight: 600;
	color: #b1b1b1;
	line-height: 22px;
}

.tab-date {
	font-size: 14px;
	font-weight: 600;
	color: #b1b1b1;
	line-height: 22px;
}

.tab-item.active .tab-label,
.tab-item.active .tab-date {
	color: #3d85ff;
}

.tab-indicator {
	position: absolute;
	bottom: 0;
	width: 24px;
	height: 4px;
	background-color: #3d85ff;
	border-radius: 100px;
}

/* 中奖者表格 */
.table-area {
	background-color: #ffffff;
	width: 702rpx;
	margin: 24rpx;
	border-radius: 8rpx;
}

.table-header,
.table-row {
	display: flex;
	align-items: center;
	padding: 12px 0;
	border-bottom: 1px solid #f2f2f7;
}

.table-header {
	color: #8e8e93;
	font-size: 14px;
	
}

.table-row {
	color: #000000;
	font-size: 14px;
}

.table-col {
	flex: 1;
}

.col-name {
	width: 80px;
	flex: none;
	text-align: center;
}

.col-idcard {
	flex: 1;
	text-align: right;
}

.col-phone {
	flex: 1;
	text-align: right;
	margin-right: 24rpx;
}
</style>