feat(hhrs): 新增权益包、门店详情、权益详情、我的四个H5页面

- 权益包页面支持3种状态切换：认证表单、未中奖空状态、权益信息（统计卡片+Tab+列表）
- 门店详情页展示场馆信息、营业时间、商户优惠说明
- 权益详情页含日期选择卡片和底部预约按钮
- 我的页面含用户信息、菜单列表和底部TabBar
- 新增权益相关API接口定义（getRightsInfo/getRightsDetail/doRightsAuth/doRightsBook）
- 商户折扣列表跳转统一至门店详情页

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>

common/http.api.js

@@ -5,12 +5,14 @@ let VenueDetailUrl = 'mp-api/hhrs/venue/detail';
 let MerchantListUrl = 'mp-api/hhrs/merchant/list';
 let MerchantDetailUrl = 'mp-api/hhrs/merchant/detail';
 let WinnerListUrl = 'mp-api/hhrs/winner/list';
+let RightsInfoUrl = 'mp-api/hhrs/rights/info';
+let RightsDetailUrl = 'mp-api/hhrs/rights/detail';
+let RightsAuthUrl = 'mp-api/hhrs/rights/auth';
+let RightsBookUrl = 'mp-api/hhrs/rights/book';
 
 
-// 此处第二个参数vm，就是我们在页面使用的this，你可以通过vm获取vuex等操作，更多内容详见uView对拦截器的介绍部分：
+// 此处第二个参数vm，就是我们在页面使用的this
-// https://uviewui.com/js/http.html#%E4%BD%95%E8%B0%93%E8%AF%B7%E6%B1%82%E6%8B%A6%E6%88%AA%EF%BC%9F
 const install = (Vue, vm) => {
-	// 此处没有使用传入的params参数
 	let checkerLogin = (params = {}) => vm.$u.post(LoginUrl, params);
 
 	// 文旅场馆
@@ -24,7 +26,12 @@ const install = (Vue, vm) => {
 	// 中奖名单
 	let getWinnerList = (params = {}) => vm.$u.get(WinnerListUrl, params);
 
-	// 将各个定义的接口名称，统一放进对象挂载到vm.$u.api(因为vm就是this，也即this.$u.api)下
+	// 权益包
+	let getRightsInfo = (params = {}) => vm.$u.get(RightsInfoUrl, params);
+	let getRightsDetail = (params = {}) => vm.$u.post(RightsDetailUrl, params);
+	let doRightsAuth = (params = {}) => vm.$u.post(RightsAuthUrl, params);
+	let doRightsBook = (params = {}) => vm.$u.post(RightsBookUrl, params);
+
 	vm.$u.api = {
 		checkerLogin,
 		getVenueList,
@@ -32,6 +39,10 @@ const install = (Vue, vm) => {
 		getMerchantList,
 		getMerchantDetail,
 		getWinnerList,
+		getRightsInfo,
+		getRightsDetail,
+		doRightsAuth,
+		doRightsBook,
 	};
 }
 

pages.json

@@ -13,7 +13,8 @@
 		{
 			"path": "pages/mine/mine",
 			"style": {
-				"navigationBarTitleText": "我的"
+				"navigationBarTitleText": "我的",
+				"navigationStyle": "custom"
 			}
 		},
 		{
@@ -33,7 +34,22 @@
 		{
 			"path": "pages/rights/rights",
 			"style": {
-				"navigationBarTitleText": "权益包"
+				"navigationBarTitleText": "权益信息",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/rights/detail",
+			"style": {
+				"navigationBarTitleText": "权益详情",
+				"navigationStyle": "custom"
+			}
+		},
+		{
+			"path": "pages/venue/detail",
+			"style": {
+				"navigationBarTitleText": "门店详情",
+				"navigationStyle": "custom"
 			}
 		},
 		{

pages/discount/discount.vue

@@ -72,7 +72,7 @@ export default {
 			uni.navigateBack()
 		},
 		goDetail(item) {
-			uni.navigateTo({ url: '/pages/discount/detail?id=' + item.id })
+			uni.navigateTo({ url: '/pages/venue/detail?id=' + item.id })
 		},
 		onSearch() {
 			// TODO: 调用搜索接口

pages/mine/mine.vue

@@ -1,24 +1,193 @@
 <template>
-	<view class="content">
+	<view class="page">
-		<text>我的</text>
+		<!-- 自定义导航栏 -->
+		<view class="nav-bar" :style="{ paddingTop: statusBarHeight + 'px' }">
+			<view class="nav-header">
+				<text class="nav-title">我的</text>
+			</view>
+		</view>
+
+		<!-- 用户信息 -->
+		<view class="user-section">
+			<view class="user-info">
+				<image class="user-avatar" src="https://aliyunoss.hn12301.net/hhrs/hhrs_avatar.png" mode="aspectFill" />
+				<view class="user-detail">
+					<text class="user-name">王东林</text>
+					<text class="user-phone">186****9010</text>
+				</view>
+			</view>
+			<view class="logout-btn" @click="onLogout">退出登录</view>
+		</view>
+
+		<!-- 菜单列表 -->
+		<view class="menu-list">
+			<view class="menu-item" @click="goWinners">
+				<text class="menu-icon icon-ticket">&#xe60a;</text>
+				<text class="menu-label">用户中奖查询</text>
+				<text class="menu-arrow">&#xe602;</text>
+			</view>
+			<view class="menu-item" @click="goGuide">
+				<text class="menu-icon icon-book">&#xe60b;</text>
+				<text class="menu-label">使用指南</text>
+				<text class="menu-arrow">&#xe602;</text>
+			</view>
+			<view class="menu-item" @click="goService">
+				<text class="menu-icon icon-headset">&#xe60c;</text>
+				<text class="menu-label">联系客服</text>
+				<text class="menu-arrow">&#xe602;</text>
+			</view>
+		</view>
+
+		<!-- 底部 TabBar -->
+		<tab-bar :current="1" />
 	</view>
 </template>
 
 <script>
-	export default {
+import tabBar from '@/components/TabBar/TabBar.vue'
+
+export default {
+	components: { tabBar },
 	data() {
-			return {}
+		return {
-		},
+			statusBarHeight: 44
-		onLoad() {},
-		methods: {}
 		}
+	},
+	onLoad() {
+		const sysInfo = uni.getSystemInfoSync()
+		this.statusBarHeight = sysInfo.statusBarHeight || 44
+	},
+	methods: {
+		onLogout() {
+			uni.showModal({
+				title: '提示',
+				content: '确定要退出登录吗？',
+				success: (res) => {
+					if (res.confirm) {
+						uni.removeStorageSync('token')
+						uni.showToast({ title: '已退出登录', icon: 'success' })
+					}
+				}
+			})
+		},
+		goWinners() {
+			uni.navigateTo({ url: '/pages/winners/winners' })
+		},
+		goGuide() {
+			uni.navigateTo({ url: '/pages/guide/use' })
+		},
+		goService() {
+			// TODO: 联系客服
+		}
+	}
+}
 </script>
 
 <style>
-	.content {
+.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;
-		flex-direction: column;
 	align-items: center;
 	justify-content: center;
-	}
+}
+
+.nav-title {
+	font-size: 16px;
+	font-weight: 500;
+	color: #1a1818;
+}
+
+/* 用户信息 */
+.user-section {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	background-color: #ffffff;
+	padding: 20px 16px;
+}
+
+.user-info {
+	display: flex;
+	align-items: center;
+	gap: 12px;
+}
+
+.user-avatar {
+	width: 48px;
+	height: 48px;
+	border-radius: 50%;
+}
+
+.user-detail {
+	display: flex;
+	flex-direction: column;
+	gap: 4px;
+}
+
+.user-name {
+	font-size: 16px;
+	font-weight: 500;
+	color: #1a1818;
+}
+
+.user-phone {
+	font-size: 14px;
+	color: #666666;
+}
+
+.logout-btn {
+	background-color: #e8e8e8;
+	color: #666666;
+	font-size: 13px;
+	padding: 6px 16px;
+	border-radius: 4px;
+}
+
+/* 菜单列表 */
+.menu-list {
+	margin-top: 12px;
+	background-color: #ffffff;
+}
+
+.menu-item {
+	display: flex;
+	align-items: center;
+	padding: 16px;
+	border-bottom: 1px solid #f5f5f5;
+}
+
+.menu-item:last-child {
+	border-bottom: none;
+}
+
+.menu-icon {
+	font-size: 18px;
+	color: #0088ff;
+	width: 24px;
+	text-align: center;
+}
+
+.menu-label {
+	flex: 1;
+	font-size: 15px;
+	color: #333333;
+	margin-left: 12px;
+}
+
+.menu-arrow {
+	font-size: 14px;
+	color: #cccccc;
+}
 </style>

pages/rights/detail.vue

@@ -0,0 +1,386 @@
+<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="store-card">
+			<image class="store-img" :src="store.image" mode="aspectFill" />
+			<view class="store-info">
+				<text class="store-name">{{ store.name }}</text>
+				<text class="store-category">{{ store.category }}</text>
+				<text class="store-hours">营业时间：{{ store.hours }}</text>
+			</view>
+		</view>
+
+		<!-- 地址行 -->
+		<view class="address-row">
+			<text class="address-text">{{ store.address }}</text>
+			<view class="distance-row">
+				<text class="distance-icon">&#xe609;</text>
+				<text class="distance-text">{{ store.distance }}km</text>
+			</view>
+		</view>
+
+		<!-- 选择预约日期 -->
+		<view class="date-section">
+			<view class="section-title">
+				<text class="section-icon">!</text>
+				<text class="section-title-text">选择预约日期</text>
+			</view>
+			<view class="date-list">
+				<view
+					v-for="(item, index) in dateList"
+					:key="index"
+					class="date-card"
+					:class="{ active: selectedDate === index }"
+					@click="selectDate(index)"
+				>
+					<text class="date-weekday">{{ item.weekday }}</text>
+					<text class="date-day">{{ item.day }}</text>
+					<text class="date-stock">{{ item.stock }}</text>
+				</view>
+			</view>
+			<text class="date-tip">该日期无需选择场次，直接预约即可！仅可预约近 3 日内时段</text>
+		</view>
+
+		<!-- 商户优惠 -->
+		<view class="discount-section">
+			<view class="section-title">
+				<text class="discount-tag-icon">&#xe60d;</text>
+				<text class="discount-title">商户优惠</text>
+			</view>
+			<view class="discount-list">
+				<text class="discount-item" v-for="(item, index) in store.discounts" :key="index">{{ item }}</text>
+			</view>
+		</view>
+
+		<!-- 底部预约按钮 -->
+		<view class="bottom-bar">
+			<view class="book-btn" @click="onBook">立即预约</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			statusBarHeight: 44,
+			selectedDate: 0,
+			store: {
+				id: 1,
+				name: '怀化黄岩白马风景区',
+				category: '景区',
+				hours: '08:00~12:00',
+				address: '怀化市鹤城区万达广场 C 区501',
+				distance: '1.4',
+				image: 'https://aliyunoss.hn12301.net/hhrs/hhrs_venue1.png',
+				discounts: [
+					'用本人 62 开头社保卡凭电子社保码，可享景区免费入园权益',
+					'仅限社保卡持卡人本人使用，非持卡人核销后会扣除使用次数且无法入园',
+					'电子社保码截图无效，需在核销时打开电子社保卡页面。电子社保卡可在云闪付-湖南社保卡，或者微信-湖南智慧人社公众号'
+				]
+			},
+			dateList: [
+				{ weekday: '明天', day: '7月14日', stock: '无限库存' },
+				{ weekday: '周三', day: '7月15日', stock: '无限库存' },
+				{ weekday: '周四', day: '7月16日', stock: '无限库存' }
+			]
+		}
+	},
+	onLoad(options) {
+		const sysInfo = uni.getSystemInfoSync()
+		this.statusBarHeight = sysInfo.statusBarHeight || 44
+		if (options.id) {
+			this.loadDetail(options.id)
+		}
+	},
+	methods: {
+		goBack() {
+			uni.navigateBack()
+		},
+		selectDate(index) {
+			this.selectedDate = index
+		},
+		onBook() {
+			// TODO: 调用预约接口
+			uni.showToast({ title: '预约成功', icon: 'success' })
+		},
+		loadDetail(id) {
+			// TODO: 调用接口
+		}
+	}
+}
+</script>
+
+<style>
+.page {
+	min-height: 100vh;
+	background-color: #f2f2f7;
+	padding-bottom: 80px;
+}
+
+.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;
+}
+
+/* 门店卡片 */
+.store-card {
+	display: flex;
+	background-color: #ffffff;
+	margin: 12px;
+	border-radius: 8px;
+	padding: 12px;
+	gap: 12px;
+}
+
+.store-img {
+	width: 100px;
+	height: 100px;
+	border-radius: 6px;
+	flex-shrink: 0;
+}
+
+.store-info {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	gap: 6px;
+}
+
+.store-name {
+	font-size: 16px;
+	font-weight: 500;
+	color: #1a1818;
+}
+
+.store-category {
+	font-size: 13px;
+	color: #999999;
+}
+
+.store-hours {
+	font-size: 13px;
+	color: #666666;
+}
+
+/* 地址行 */
+.address-row {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	background-color: #ffffff;
+	padding: 12px 16px;
+}
+
+.address-text {
+	font-size: 13px;
+	color: #999999;
+	flex: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.distance-row {
+	display: flex;
+	align-items: center;
+	gap: 2px;
+	flex-shrink: 0;
+	margin-left: 8px;
+}
+
+.distance-icon {
+	font-size: 12px;
+	color: #999999;
+}
+
+.distance-text {
+	font-size: 12px;
+	color: #999999;
+}
+
+/* 选择预约日期 */
+.date-section {
+	background-color: #ffffff;
+	margin: 12px;
+	border-radius: 8px;
+	padding: 16px;
+}
+
+.section-title {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	margin-bottom: 16px;
+}
+
+.section-icon {
+	width: 18px;
+	height: 18px;
+	background-color: #0088ff;
+	color: #ffffff;
+	border-radius: 50%;
+	text-align: center;
+	line-height: 18px;
+	font-size: 12px;
+	font-weight: 700;
+}
+
+.section-title-text {
+	font-size: 15px;
+	font-weight: 600;
+	color: #1a1818;
+}
+
+.date-list {
+	display: flex;
+	gap: 12px;
+}
+
+.date-card {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	padding: 12px 8px;
+	border: 1px solid #e8e8e8;
+	border-radius: 8px;
+	gap: 4px;
+}
+
+.date-card.active {
+	background-color: #0088ff;
+	border-color: #0088ff;
+}
+
+.date-weekday {
+	font-size: 12px;
+	color: #999999;
+}
+
+.date-card.active .date-weekday {
+	color: rgba(255,255,255,0.8);
+}
+
+.date-day {
+	font-size: 15px;
+	font-weight: 600;
+	color: #1a1818;
+}
+
+.date-card.active .date-day {
+	color: #ffffff;
+}
+
+.date-stock {
+	font-size: 11px;
+	color: #999999;
+}
+
+.date-card.active .date-stock {
+	color: rgba(255,255,255,0.8);
+}
+
+.date-tip {
+	font-size: 12px;
+	color: #999999;
+	margin-top: 12px;
+	display: block;
+}
+
+/* 商户优惠 */
+.discount-section {
+	background-color: #ffffff;
+	margin: 12px;
+	border-radius: 8px;
+	padding: 16px;
+}
+
+.discount-tag-icon {
+	font-size: 16px;
+	color: #0088ff;
+}
+
+.discount-title {
+	font-size: 15px;
+	font-weight: 600;
+	color: #1a1818;
+}
+
+.discount-list {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.discount-item {
+	font-size: 13px;
+	color: #666666;
+	line-height: 1.6;
+}
+
+/* 底部预约按钮 */
+.bottom-bar {
+	position: fixed;
+	bottom: 0;
+	left: 0;
+	right: 0;
+	background-color: #ffffff;
+	padding: 12px 16px;
+	padding-bottom: calc(12px + env(safe-area-inset-bottom));
+	z-index: 100;
+}
+
+.book-btn {
+	background-color: #0088ff;
+	color: #ffffff;
+	text-align: center;
+	font-size: 16px;
+	font-weight: 500;
+	height: 44px;
+	line-height: 44px;
+	border-radius: 22px;
+}
+</style>

pages/rights/rights.vue

@@ -1,30 +1,602 @@
 <template>
 	<view class="page">
-		<view class="content">
+		<!-- 自定义导航栏 -->
-			<text>权益包</text>
+		<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">{{ navTitle }}</text>
+			</view>
+		</view>
+
+		<!-- 状态1: 权益资格认证 -->
+		<view v-if="status === 'auth'" class="auth-container">
+			<view class="section-title">
+				<view class="title-bar"></view>
+				<text class="title-text">权益资格认证</text>
+			</view>
+			<view class="form-area">
+				<view class="form-item">
+					<text class="form-label required">真实姓名</text>
+					<input class="form-input" v-model="form.realName" placeholder="请输入真实姓名" />
+				</view>
+				<view class="form-item">
+					<text class="form-label required">手机号码</text>
+					<text class="form-value phone-value">{{ form.phone }}</text>
+				</view>
+				<view class="form-item" @click="showIdTypePicker = true">
+					<text class="form-label required">证件类型</text>
+					<text class="form-value">{{ form.idType }}</text>
+					<text class="form-arrow">&#xe602;</text>
+				</view>
+				<view class="form-item">
+					<text class="form-label required">证件号码</text>
+					<input class="form-input" v-model="form.idNumber" placeholder="请输入真实证件号码" />
+				</view>
+			</view>
+			<view class="auth-btn" @click="onAuth">开始认证</view>
+			<view class="tips-section">
+				<view class="section-title">
+					<view class="title-bar"></view>
+					<text class="title-text">温馨提示</text>
+				</view>
+				<view class="tips-list">
+					<text class="tip-item">1. 请输入真实的身份信息用来进行活动权益资格认证</text>
+					<text class="tip-item">2. 认证通过后系统会显示出您的所获得的权益信息</text>
+					<text class="tip-item">3. 手机号码为您登录的手机，无法修改。若号码对，请更换登录手机。</text>
+				</view>
+			</view>
+		</view>
+
+		<!-- 状态2: 未中奖 -->
+		<view v-if="status === 'noWin'" class="empty-container">
+			<image class="empty-img" src="https://aliyunoss.hn12301.net/hhrs/hhrs_empty.png" mode="widthFix" />
+			<text class="empty-text">您暂未中奖</text>
+		</view>
+
+		<!-- 状态3: 权益信息 -->
+		<view v-if="status === 'info'">
+			<!-- 蓝色头部横幅 -->
+			<view class="banner-area">
+				<text class="banner-title">恭喜您！获得怀化市社保卡权益包</text>
+				<view class="banner-expire">
+					<text class="expire-icon">!</text>
+					<text class="expire-text">2026年12月31日</text>
+					<text class="expire-label">到期</text>
+				</view>
+			</view>
+
+			<!-- 权益统计卡片 -->
+			<view class="stats-card">
+				<view class="stats-item">
+					<text class="stats-label">总权益价值</text>
+					<view class="stats-value-row">
+						<text class="stats-currency">￥</text>
+						<text class="stats-number">1500</text>
+						<text class="stats-unit">元</text>
+					</view>
+				</view>
+				<view class="stats-divider"></view>
+				<view class="stats-item">
+					<text class="stats-label">剩余可用权益数</text>
+					<view class="stats-value-row">
+						<text class="stats-number-large">10</text>
+						<text class="stats-unit">个</text>
+					</view>
+				</view>
+			</view>
+
+			<!-- Tab 切换 -->
+			<view class="tab-bar">
+				<view
+					v-for="(tab, index) in tabs"
+					:key="index"
+					class="tab-item"
+					:class="{ active: currentTab === index }"
+					@click="switchTab(index)"
+				>
+					<text class="tab-text">{{ tab }}</text>
+				</view>
+			</view>
+
+			<!-- 搜索栏 -->
+			<view class="search-area">
+				<view class="search-bar">
+					<text class="search-icon">&#xe610;</text>
+					<input class="search-input" v-model="keyword" placeholder="搜索权益商家" />
+				</view>
+			</view>
+
+			<!-- 权益列表 -->
+			<view class="list-area">
+				<view class="rights-card" v-for="item in rightsList" :key="item.id" @click="goDetail(item)">
+					<image class="card-img" :src="item.image" mode="aspectFill" />
+					<view class="card-info">
+						<text class="card-name">{{ item.name }}</text>
+						<text class="card-category">{{ item.category }}</text>
+						<text class="card-address">{{ item.address }}</text>
+					</view>
+					<view class="card-distance">
+						<text class="distance-icon">&#xe609;</text>
+						<text class="distance-text">{{ item.distance }}km</text>
+					</view>
+				</view>
+			</view>
 		</view>
 	</view>
 </template>
 
 <script>
-	export default {
+export default {
 	data() {
-			return {}
+		return {
+			statusBarHeight: 44,
+			// auth | noWin | info
+			status: 'info',
+			navTitle: '权益信息',
+			form: {
+				realName: '',
+				phone: '18684839400',
+				idType: '居民身份证',
+				idNumber: ''
 			},
-		onLoad() {},
+			showIdTypePicker: false,
-		methods: {}
+			tabs: ['待使用', '已预约', '已使用'],
+			currentTab: 0,
+			keyword: '',
+			rightsList: [
+				{
+					id: 1,
+					name: '怀化黄岩白马风景区',
+					category: '景区',
+					address: '怀化市鹤城区万达广场 C 区501',
+					image: 'https://aliyunoss.hn12301.net/hhrs/hhrs_venue1.png',
+					distance: '1.4'
+				},
+				{
+					id: 2,
+					name: '穿岩山国家森林公园景区',
+					category: '景区',
+					address: '怀化市鹤城区万达广场 C 区501',
+					image: 'https://aliyunoss.hn12301.net/hhrs/hhrs_venue2.png',
+					distance: '1.4'
 				}
+			]
+		}
+	},
+	onLoad(options) {
+		const sysInfo = uni.getSystemInfoSync()
+		this.statusBarHeight = sysInfo.statusBarHeight || 44
+		if (options.status) {
+			this.status = options.status
+			this.updateNavTitle()
+		}
+	},
+	methods: {
+		updateNavTitle() {
+			const titles = { auth: '权益资格认证', noWin: '中奖名单', info: '权益信息' }
+			this.navTitle = titles[this.status] || '权益信息'
+		},
+		goBack() {
+			uni.navigateBack()
+		},
+		onAuth() {
+			// TODO: 调用认证接口
+		},
+		switchTab(index) {
+			this.currentTab = index
+		},
+		goDetail(item) {
+			uni.navigateTo({ url: '/pages/rights/detail?id=' + item.id })
+		}
+	}
+}
 </script>
 
-<style scoped>
+<style>
-	.page {
+.page {
 	min-height: 100vh;
-		background-color: #f5f5f5;
+	background-color: #f2f2f7;
-	}
+}
-	.content {
+
+/* 导航栏 */
+.nav-bar {
+	background-color: #ffffff;
+	position: sticky;
+	top: 0;
+	z-index: 100;
+}
+
+.nav-header {
+	height: 44px;
 	display: flex;
 	align-items: center;
 	justify-content: center;
-		height: 100vh;
+	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;
+}
+
+/* 认证表单 */
+.auth-container {
+	padding: 16px;
+}
+
+.section-title {
+	display: flex;
+	align-items: center;
+	margin-bottom: 16px;
+}
+
+.title-bar {
+	width: 4px;
+	height: 16px;
+	background-color: #0088ff;
+	border-radius: 2px;
+	margin-right: 8px;
+}
+
+.title-text {
+	font-size: 16px;
+	font-weight: 600;
+	color: #1a1818;
+}
+
+.form-area {
+	background-color: #ffffff;
+	border-radius: 8px;
+	padding: 0 16px;
+}
+
+.form-item {
+	display: flex;
+	align-items: center;
+	height: 50px;
+	border-bottom: 1px solid #f0f0f0;
+	position: relative;
+}
+
+.form-item:last-child {
+	border-bottom: none;
+}
+
+.form-label {
+	font-size: 14px;
+	color: #333333;
+	width: 80px;
+	flex-shrink: 0;
+}
+
+.form-label.required::before {
+	content: '*';
+	color: #ff4d4f;
+	margin-right: 4px;
+}
+
+.form-input {
+	flex: 1;
+	font-size: 14px;
+	color: #333333;
+}
+
+.form-value {
+	flex: 1;
+	font-size: 14px;
+	color: #333333;
+}
+
+.phone-value {
+	color: #999999;
+}
+
+.form-arrow {
+	font-size: 14px;
+	color: #cccccc;
+}
+
+.auth-btn {
+	margin: 24px 0;
+	background-color: #0088ff;
+	color: #ffffff;
+	text-align: center;
+	font-size: 16px;
+	font-weight: 500;
+	height: 48px;
+	line-height: 48px;
+	border-radius: 24px;
+}
+
+.tips-section {
+	margin-top: 8px;
+}
+
+.tips-list {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+	padding: 0 4px;
+}
+
+.tip-item {
+	font-size: 13px;
+	color: #ff4d4f;
+	line-height: 1.6;
+}
+
+/* 未中奖空状态 */
+.empty-container {
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+	justify-content: center;
+	padding-top: 160px;
+}
+
+.empty-img {
+	width: 200px;
+}
+
+.empty-text {
+	font-size: 18px;
+	color: #999999;
+	margin-top: 24px;
+}
+
+/* 权益信息 - 蓝色横幅 */
+.banner-area {
+	background-color: #0088ff;
+	padding: 20px 16px 24px;
+}
+
+.banner-title {
+	font-size: 16px;
+	color: #ffffff;
+	font-weight: 500;
+	display: block;
+	text-align: center;
+	margin-bottom: 12px;
+}
+
+.banner-expire {
+	display: flex;
+	align-items: center;
+	justify-content: center;
+	gap: 6px;
+}
+
+.expire-icon {
+	width: 18px;
+	height: 18px;
+	background-color: #ffffff;
+	color: #0088ff;
+	border-radius: 50%;
+	text-align: center;
+	line-height: 18px;
+	font-size: 12px;
+	font-weight: 700;
+}
+
+.expire-text {
+	font-size: 16px;
+	color: #ffffff;
+	font-weight: 600;
+}
+
+.expire-label {
+	font-size: 14px;
+	color: rgba(255,255,255,0.8);
+}
+
+/* 统计卡片 */
+.stats-card {
+	display: flex;
+	align-items: center;
+	background-color: #ffffff;
+	margin: -12px 12px 0;
+	border-radius: 8px;
+	padding: 16px 24px;
+	box-shadow: 0 2px 8px rgba(0,0,0,0.06);
+	position: relative;
+	z-index: 1;
+}
+
+.stats-item {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	align-items: center;
+}
+
+.stats-label {
+	font-size: 12px;
+	color: #999999;
+	margin-bottom: 8px;
+}
+
+.stats-value-row {
+	display: flex;
+	align-items: baseline;
+}
+
+.stats-currency {
+	font-size: 14px;
+	color: #1a1818;
+	font-weight: 600;
+}
+
+.stats-number {
+	font-size: 28px;
+	color: #1a1818;
+	font-weight: 700;
+}
+
+.stats-number-large {
+	font-size: 28px;
+	color: #1a1818;
+	font-weight: 700;
+}
+
+.stats-unit {
+	font-size: 12px;
+	color: #999999;
+	margin-left: 2px;
+}
+
+.stats-divider {
+	width: 1px;
+	height: 36px;
+	background-color: #eeeeee;
+}
+
+/* Tab 切换 */
+.tab-bar {
+	display: flex;
+	background-color: #ffffff;
+	margin-top: 12px;
+	padding: 0 16px;
+}
+
+.tab-item {
+	flex: 1;
+	text-align: center;
+	padding: 12px 0;
+	position: relative;
+}
+
+.tab-item.active::after {
+	content: '';
+	position: absolute;
+	bottom: 0;
+	left: 50%;
+	transform: translateX(-50%);
+	width: 24px;
+	height: 3px;
+	background-color: #0088ff;
+	border-radius: 2px;
+}
+
+.tab-text {
+	font-size: 14px;
+	color: #999999;
+}
+
+.tab-item.active .tab-text {
+	color: #0088ff;
+	font-weight: 600;
+}
+
+/* 搜索栏 */
+.search-area {
+	padding: 12px;
+}
+
+.search-bar {
+	display: flex;
+	align-items: center;
+	height: 36px;
+	background-color: #ffffff;
+	border-radius: 18px;
+	padding: 0 12px;
+	gap: 8px;
+}
+
+.search-icon {
+	font-size: 16px;
+	color: #cccccc;
+}
+
+.search-input {
+	flex: 1;
+	font-size: 14px;
+	color: #333333;
+}
+
+/* 权益列表 */
+.list-area {
+	padding: 0 12px 12px;
+	display: flex;
+	flex-direction: column;
+	gap: 10px;
+}
+
+.rights-card {
+	display: flex;
+	align-items: flex-end;
+	background-color: #ffffff;
+	border-radius: 6px;
+	padding: 12px;
+	gap: 12px;
+}
+
+.card-img {
+	width: 75px;
+	height: 75px;
+	border-radius: 6px;
+	flex-shrink: 0;
+}
+
+.card-info {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+}
+
+.card-name {
+	font-size: 15px;
+	font-weight: 500;
+	color: #1a1818;
+}
+
+.card-category {
+	font-size: 13px;
+	color: #999999;
+	margin-top: 4px;
+}
+
+.card-address {
+	font-size: 13px;
+	color: #999999;
+	margin-top: 4px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+	max-width: 180px;
+}
+
+.card-distance {
+	display: flex;
+	align-items: center;
+	gap: 2px;
+	flex-shrink: 0;
+}
+
+.distance-icon {
+	font-size: 12px;
+	color: #999999;
+}
+
+.distance-text {
+	font-size: 12px;
+	color: #999999;
+}
 </style>

pages/venue/detail.vue

@@ -0,0 +1,240 @@
+<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="store-card">
+			<image class="store-img" :src="store.image" mode="aspectFill" />
+			<view class="store-info">
+				<text class="store-name">{{ store.name }}</text>
+				<text class="store-category">{{ store.category }}</text>
+				<text class="store-hours">营业时间：{{ store.hours }}</text>
+			</view>
+		</view>
+
+		<!-- 地址行 -->
+		<view class="address-row">
+			<text class="address-text">{{ store.address }}</text>
+			<view class="distance-row">
+				<text class="distance-icon">&#xe609;</text>
+				<text class="distance-text">{{ store.distance }}km</text>
+			</view>
+		</view>
+
+		<!-- 商户优惠 -->
+		<view class="discount-section">
+			<view class="section-title">
+				<text class="discount-tag-icon">&#xe60d;</text>
+				<text class="discount-title">商户优惠</text>
+			</view>
+			<view class="discount-list">
+				<text class="discount-item" v-for="(item, index) in store.discounts" :key="index">{{ item }}</text>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+export default {
+	data() {
+		return {
+			statusBarHeight: 44,
+			store: {
+				id: 1,
+				name: '怀化黄岩白马风景区',
+				category: '景区',
+				hours: '08:00~12:00',
+				address: '怀化市鹤城区万达广场 C 区501',
+				distance: '1.4',
+				image: 'https://aliyunoss.hn12301.net/hhrs/hhrs_venue1.png',
+				discounts: [
+					'用本人 62 开头社保卡凭电子社保码，可享景区免费入园权益',
+					'仅限社保卡持卡人本人使用，非持卡人核销后会扣除使用次数且无法入园',
+					'电子社保码截图无效，需在核销时打开电子社保卡页面。电子社保卡可在云闪付-湖南社保卡，或者微信-湖南智慧人社公众号'
+				]
+			}
+		}
+	},
+	onLoad(options) {
+		const sysInfo = uni.getSystemInfoSync()
+		this.statusBarHeight = sysInfo.statusBarHeight || 44
+		if (options.id) {
+			this.loadDetail(options.id)
+		}
+	},
+	methods: {
+		goBack() {
+			uni.navigateBack()
+		},
+		loadDetail(id) {
+			// TODO: 调用接口 this.$u.api.getVenueDetail({ id })
+		}
+	}
+}
+</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;
+}
+
+/* 门店卡片 */
+.store-card {
+	display: flex;
+	background-color: #ffffff;
+	margin: 12px;
+	border-radius: 8px;
+	padding: 12px;
+	gap: 12px;
+}
+
+.store-img {
+	width: 100px;
+	height: 100px;
+	border-radius: 6px;
+	flex-shrink: 0;
+}
+
+.store-info {
+	flex: 1;
+	display: flex;
+	flex-direction: column;
+	justify-content: center;
+	gap: 6px;
+}
+
+.store-name {
+	font-size: 16px;
+	font-weight: 500;
+	color: #1a1818;
+}
+
+.store-category {
+	font-size: 13px;
+	color: #999999;
+}
+
+.store-hours {
+	font-size: 13px;
+	color: #666666;
+}
+
+/* 地址行 */
+.address-row {
+	display: flex;
+	align-items: center;
+	justify-content: space-between;
+	background-color: #ffffff;
+	padding: 12px 16px;
+}
+
+.address-text {
+	font-size: 13px;
+	color: #999999;
+	flex: 1;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
+.distance-row {
+	display: flex;
+	align-items: center;
+	gap: 2px;
+	flex-shrink: 0;
+	margin-left: 8px;
+}
+
+.distance-icon {
+	font-size: 12px;
+	color: #999999;
+}
+
+.distance-text {
+	font-size: 12px;
+	color: #999999;
+}
+
+/* 商户优惠 */
+.discount-section {
+	background-color: #ffffff;
+	margin: 12px;
+	border-radius: 8px;
+	padding: 16px;
+}
+
+.section-title {
+	display: flex;
+	align-items: center;
+	gap: 6px;
+	margin-bottom: 16px;
+}
+
+.discount-tag-icon {
+	font-size: 16px;
+	color: #0088ff;
+}
+
+.discount-title {
+	font-size: 15px;
+	font-weight: 600;
+	color: #1a1818;
+}
+
+.discount-list {
+	display: flex;
+	flex-direction: column;
+	gap: 12px;
+}
+
+.discount-item {
+	font-size: 13px;
+	color: #666666;
+	line-height: 1.6;
+}
+</style>