hhrs/pages/winners/winners.vue

<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">
				<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>

		<!-- 中奖者表格 -->
		<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.name }}</text>
				<text class="table-col col-idcard">{{ item.idCard }}</text>
				<text class="table-col col-phone">{{ item.phone }}</text>
			</view>
		</view>
	</view>
</template>

<script>
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: []
			}
		}
	},
	computed: {
		currentList() {
			return this.winnerData[this.currentTab] || []
		}
	},
	onLoad() {
		const sysInfo = uni.getSystemInfoSync()
		this.statusBarHeight = sysInfo.statusBarHeight || 44
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		switchTab(index) {
			this.currentTab = index
		}
	}
}
</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;
}

/* 顶部公告区 */
.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: 16px;
	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;
	margin: 0 12px;
	margin-top: 12px;
	border-radius: 10px 10px 0 0;
	padding: 12px;
	display: flex;
	flex-direction: column;
	min-height: 470px;
}

.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;
}
</style>