fix: 云闪付控件唤起路线B——发布脚本向构建产物index.html注入upsdk静态标签（HBuilderX不吃根模板，控件桥需静态加载）；白名单豁免下线，唤起失败统一弹指引模态

Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
fix: 权益详情页修复底部预约条遮挡「权益说明」
2026-09-28 19:25:11 +08:00 · 2026-09-28 16:27:03 +08:00 · 2026-09-28 15:55:17 +08:00 · 2026-09-28 15:12:38 +08:00
9 changed files with 487 additions and 49 deletions
@@ -0,0 +1,10 @@
+// xuchao: 卡片角标用的区县简称。后端 districtName 返回的是 region.name 行政区划全称
+//         （如「芷江侗族自治县」「怀化高新技术产业开发区」），列表缩略图只有 75px，必须缩短显示
+export function shortDistrict(name) {
+	if (!name) return ''
+	return name
+		.replace('高新技术产业开发区', '高新区')
+		.replace(/(苗族|侗族|瑶族|回族|土家族|各族)*自治县$/, '')
+		.replace(/(苗族|侗族|瑶族|回族|土家族|各族)*自治州$/, '')
+		.replace(/([^市])县$/, '$1')
+}
@@ -1,10 +1,8 @@
 // xuchao: 怀化石油汽油减免券——前端常量与工具（全写死，只服务这一个门店，决策 1/10/15）
-// 价格真相在后端常量（20000 分），此处 200.00 仅展示用，两处改价必须同步
+// 价格真相=后端配置 hh.voucher.price-fen 经 latest 下发；此处 200.00 仅为接口未返回时的展示兜底

 export const PETROL_SHOP_ID = '851219003520709'
 export const VOUCHER_PRICE_TEXT = '200.00'
-// xuchao: 非云闪付环境豁免拦截的联调手机号（决策 13）
-export const VOUCHER_PAY_WHITELIST_PHONE = '18684839400'

 export const VOUCHER_NAME = '怀化石油汽油电子券'

@@ -35,12 +33,6 @@ export function injectUpSdk() {
 	document.head.appendChild(s)
 }

-// xuchao: 云闪付容器判定只看 UA——不能掺 window.upsdk 是否已加载（SDK 是异步注入的，
-//         首屏点击时可能还没 load 完，会把云闪付内首点误判为站外）。UA 关键字真机实测后定稿。
-export function isUnionPayApp() {
-	if (typeof navigator === 'undefined' || !navigator.userAgent) return false
-	return /unionpay|upsdk|云闪付/i.test(navigator.userAgent)
-}

 // xuchao: open-api/hhService/voucher/* 为双层壳：外层 errcode，内层 data.code 才是业务码
 //         （同 login.vue 的 isBizOk 判定，提到公共层复用）
@@ -0,0 +1,215 @@
+<template>
+	<!-- xuchao: 列表页「所属县区 + 所属类型」筛选条。两个入口等宽平分并占满容器宽，无底色，
+	     选中态只用品牌蓝字表达；面板第一行「全部 X」即清空该维度（所以没有独立重置按钮）。
+	     选项与各选项条数由列表接口在响应里一并返回，已按关键词与另一维度筛算好（districts/categories 首项即「全部」）。 -->
+	<view class="hfb" v-if="ready">
+		<view class="hfb-row">
+			<view class="hfb-item" v-if="districtReady" :class="{ 'hfb-item--on': !!districtId }" @click="toggle('district')">
+				<text class="hfb-text">{{ districtText }}</text>
+				<view class="hfb-caret" :class="{ 'hfb-caret--up': openKey === 'district' }">
+					<u-icon name="arrow-down-fill" size="20" :color="districtId ? '#0088ff' : '#bbbbbb'"></u-icon>
+				</view>
+			</view>
+			<view class="hfb-item" v-if="categoryReady" :class="{ 'hfb-item--on': !!category }" @click="toggle('category')">
+				<text class="hfb-text">{{ categoryText }}</text>
+				<view class="hfb-caret" :class="{ 'hfb-caret--up': openKey === 'category' }">
+					<u-icon name="arrow-down-fill" size="20" :color="category ? '#0088ff' : '#bbbbbb'"></u-icon>
+				</view>
+			</view>
+		</view>
+
+		<view class="hfb-mask" v-if="openKey" @click="close"></view>
+		<view class="hfb-panel" v-if="openKey">
+			<scroll-view scroll-y class="hfb-list">
+				<view class="hfb-opt" v-for="o in openOptions" :key="o.value"
+					:class="{ 'hfb-opt--sel': current === o.value }" @click="pick(o.value)">
+					<text class="hfb-opt-label">{{ o.label }}</text>
+					<text class="hfb-opt-count">{{ o.count }}</text>
+				</view>
+			</scroll-view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'hhrs-filter-bar',
+		props: {
+			// xuchao: [{value,label,count}]，首项为「全部 X」(value='')，县区 value 是行政区划码
+			districts: { type: Array, default: () => [] },
+			categories: { type: Array, default: () => [] },
+			districtId: { type: String, default: '' },
+			category: { type: String, default: '' }
+		},
+		data() {
+			return {
+				openKey: '',
+				// xuchao: 记住见过的 value→label，避免关键词把选中项挤出选项列表后入口只能显示区划码
+				labelCache: {}
+			}
+		},
+		computed: {
+			// xuchao: 选项首项固定是「全部」，长度>1 才算该维度真有可选项。
+			//        某维度没有可选项（如商铺未录入「所在地区」）时只隐藏它自己的入口，
+			//        两个都没有则整条筛选不渲染，避免出现点开是空面板
+			districtReady() { return this.districts.length > 1 },
+			categoryReady() { return this.categories.length > 1 },
+			ready() { return this.districtReady || this.categoryReady },
+			openOptions() {
+				return this.openKey === 'district' ? this.districts : this.categories
+			},
+			current() {
+				return this.openKey === 'district' ? this.districtId : this.category
+			},
+			districtText() {
+				return this.districtId ? this.cachedLabel('district', this.districtId) : '所属县区'
+			},
+			categoryText() {
+				return this.category ? this.cachedLabel('category', this.category) : '所属类型'
+			}
+		},
+		watch: {
+			districts(list) { this.remember(list, 'district') },
+			categories(list) { this.remember(list, 'category') }
+		},
+		created() {
+			this.remember(this.districts, 'district')
+			this.remember(this.categories, 'category')
+		},
+		methods: {
+			remember(list, kind) {
+				// xuchao: 必须用 $set，Vue2 对新增对象键不做响应，入口文字会跟不上缓存
+				(list || []).forEach(o => {
+					if (o.value) this.$set(this.labelCache, kind + ':' + o.value, o.label)
+				})
+			},
+			cachedLabel(kind, value) {
+				return this.labelCache[kind + ':' + value] || value
+			},
+			toggle(key) {
+				// xuchao: 再点同一个入口即收起，避免面板卡在打开态
+				this.openKey = this.openKey === key ? '' : key
+			},
+			close() {
+				this.openKey = ''
+			},
+			pick(value) {
+				if (this.openKey === 'district') {
+					this.$emit('change', { districtId: value, category: this.category })
+				} else {
+					this.$emit('change', { districtId: this.districtId, category: value })
+				}
+				this.openKey = ''
+			}
+		}
+	}
+</script>
+
+<style scoped lang="less">
+	/* xuchao: 根节点贴在 sticky 头部内，面板绝对定位到筛选条下方。
+	   只留上内边距：与列表的 12px 间隔必须落在头部的白底之外（各页 .list-area 的 padding-top），
+	   放在这里会是白色，头部白底和白色卡片连成一片，看上去就等于没有间隔 */
+	.hfb {
+		position: relative;
+		padding: 24rpx 0 0;
+	}
+
+	.hfb-row {
+		display: flex;
+		gap: 20rpx;
+	}
+
+	.hfb-item {
+		flex: 1;
+		min-width: 0;
+		height: 64rpx;
+		display: flex;
+		align-items: center;
+		justify-content: center;
+		gap: 8rpx;
+		font-size: 28rpx;
+		color: #333333;
+	}
+
+	.hfb-item--on {
+		color: #0088ff;
+		font-weight: 600;
+	}
+
+	.hfb-text {
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+	}
+
+	.hfb-caret {
+		display: flex;
+		transition: transform 0.18s;
+	}
+
+	.hfb-caret--up {
+		transform: rotate(180deg);
+	}
+
+	/* xuchao: 遮罩绝对定位在筛选条下方（不用 fixed）—— fixed 会盖进 sticky 头部的层叠上下文，
+	   把搜索栏和筛选条一起压灰。这里从筛选条下边缘开始向下铺满一屏，列表变暗、头部保持原色 */
+	.hfb-mask {
+		position: absolute;
+		top: 100%;
+		left: -12px;
+		right: -12px;
+		height: 100vh;
+		background: rgba(0, 0, 0, 0.3);
+		z-index: 90;
+	}
+
+	/* xuchao: 面板左右各超出 12px（与页面头部的 12px 内边距等值，用 px 才能在各屏宽下都对齐），
+	   使面板与手机边缘齐平 */
+	.hfb-panel {
+		position: absolute;
+		left: -12px;
+		right: -12px;
+		top: 100%;
+		z-index: 100;
+		background: #ffffff;
+		border-radius: 0 0 28rpx 28rpx;
+		box-shadow: 0 20rpx 48rpx rgba(0, 0, 0, 0.12);
+		padding: 12rpx 12rpx 16rpx;
+	}
+
+	.hfb-list {
+		max-height: 620rpx;
+	}
+
+	.hfb-opt {
+		display: flex;
+		align-items: center;
+		justify-content: space-between;
+		height: 84rpx;
+		padding: 0 24rpx;
+		border-radius: 16rpx;
+		font-size: 28rpx;
+		color: #333333;
+	}
+
+	.hfb-opt--sel {
+		background: #e6f2ff;
+		color: #0088ff;
+		font-weight: 600;
+	}
+
+	.hfb-opt-label {
+		flex: 1;
+		min-width: 0;
+		overflow: hidden;
+		text-overflow: ellipsis;
+		white-space: nowrap;
+		margin-right: 16rpx;
+	}
+
+	.hfb-opt-count {
+		flex-shrink: 0;
+		font-size: 24rpx;
+		color: #bbbbbb;
+	}
+</style>
@@ -0,0 +1,14 @@
+#!/bin/bash
+# xuchao: hhrs H5 发布脚本 —— HBuilderX 构建不吃项目根 index.html（静态标签会被丢），
+# 云闪付控件(upsdk)必须静态标签加载才能注册控件桥（路线B，2026-09-28 定），
+# 故构建后把标签注入产物 index.html 再打包上传。发布 = sh h5-release.sh
+set -e
+cd "$(dirname "$0")"
+rm -rf unpackage/dist/build/web
+/Applications/HBuilderX.app/Contents/MacOS/cli publish web --project hhrs
+BUILT=unpackage/dist/build/web/index.html
+# 注入云闪付 SDK 静态标签（幂等：已有则跳过）
+grep -q "open.95516.com" "$BUILT" || sed -i '' 's#<title>怀化人社</title>#<title>怀化人社</title><script src="https://open.95516.com/s/open/js/upsdk.js" data-upsdk="1"></script>#' "$BUILT"
+grep -q "open.95516.com" "$BUILT" && echo "[h5-release] upsdk 静态标签已在产物 index.html"
+tar czf /tmp/hh-voucher/web_release.tgz -C unpackage/dist/build/web .
+echo "[h5-release] 产物就绪：/tmp/hh-voucher/web_release.tgz —— 用 expect rsh.exp scp 上传后原子切换"
@@ -13,12 +13,19 @@
 					<view class="search-btn" @click="onSearch">搜索</view>
 				</view>
 			</view>
+			<!-- xuchao: 所属县区 + 所属类型筛选，选项与联动条数由列表接口一并返回 -->
+			<hhrs-filter-bar :districts="filters.districts" :categories="filters.categories"
+				:district-id="districtId" :category="category" @change="onFilterChange" />
 		</view>

 		<!-- 商户列表 -->
 		<view class="list-area">
 			<view class="venue-card" v-for="item in list" :key="item.shopId" @click="goDetail(item)">
-				<image class="card-img" :src="item.image" mode="aspectFill" />
+				<view class="card-thumb">
+					<image class="card-img" :src="item.image" mode="aspectFill" />
+					<!-- xuchao: 左上角所属地区角标（districtName 来自商铺「所在地区」，未录入则不显示） -->
+					<text class="card-area" v-if="item.districtName">{{ shortDistrict(item.districtName) }}</text>
+				</view>
 				<view class="card-info">
 					<text class="card-name">{{ item.name }}</text>
 					<text class="card-category">{{ item.category }}</text>
@@ -40,7 +47,13 @@
 </template>

 <script>
+// xuchao: 角标区县简称（后端返回的是行政区划全称）
+import { shortDistrict } from '@/common/district.js'
+// xuchao: 县区 + 类型筛选条，三个列表页共用（pages.json 的 easycom 只给 u- 前缀配了规则，这里显式引入）
+import HhrsFilterBar from '@/components/hhrs-filter-bar/hhrs-filter-bar.vue'
+
 export default {
+	components: { HhrsFilterBar },
 	data() {
 		return {
 			keyword: '',
@@ -53,7 +66,11 @@ export default {
 			lat: '',
 			loadStatus: 'loadmore',
 			hasScrolled: false,
-			reqSeq: 0
+			reqSeq: 0,
+			// xuchao: 筛选条件与面板选项（选项由列表响应带回）
+			districtId: '',
+			category: '',
+			filters: { districts: [], categories: [] }
 		}
 	},
 	onLoad() {
@@ -78,6 +95,7 @@ export default {
 		this.loadMore()
 	},
 	methods: {
+		shortDistrict,
 		loadList() {
 			// xuchao: 请求序号 —— 新请求直接取代在途请求，过期响应整体丢弃（修复搜索竞态，故不再用 loading 提前 return）
 			const seq = ++this.reqSeq
@@ -91,9 +109,16 @@ export default {
 			}
 			if (this.lng) params.lng = this.lng
 			if (this.lat) params.lat = this.lat
+			if (this.districtId) params.districtId = this.districtId
+			if (this.category) params.category = this.category
 			this.$u.api.getStoreList(params).then(res => {
 				if (seq !== this.reqSeq) return
 				if (res.errcode === 0 && res.data) {
+					// xuchao: 面板选项随列表一起回来（后端已按关键词与另一维度算好条数）
+					this.filters = {
+						districts: res.data.districts || [],
+						categories: res.data.categories || []
+					}
 					const list = res.data.list || []
 					if (this.pageNo === 1) {
 						this.list = list
@@ -140,6 +165,12 @@ export default {
 			this.pageNo = 1
 			this.list = []
 			this.loadList()
+		},
+		// xuchao: 换筛选条件即回第 1 页重查（关键词保持不变，两者为 AND）
+		onFilterChange(e) {
+			this.districtId = e.districtId
+			this.category = e.category
+			this.onSearch()
 		}
 	}
 }
@@ -154,11 +185,11 @@ export default {

 .search-area {
 	background-color: #ffffff;
-	padding: 6px 12px;
-	// xuchao: 滚动时固定在页面顶部
+	padding: 6px 12px 0;
+	// xuchao: 滚动时固定在页面顶部；z-index 高于筛选遮罩(90)，保证面板与选中态不被压住
 	position: sticky;
 	top: 0;
-	z-index: 10;
+	z-index: 100;
 }

 .nav-row {
@@ -209,6 +240,7 @@ export default {
 }

 .list-area {
+	// xuchao: 顶部 12px 必须是页面灰底（不能放进头部的白底里），否则与白色卡片连成一片看不出间隔
 	padding: 12px;
 	// xuchao: border-box 防止 padding 撑出页面横向滚动
 	box-sizing: border-box;
@@ -228,13 +260,39 @@ export default {
 	margin-bottom: 12px;
 }

-.card-img {
+.card-thumb {
 	width: 75px;
 	height: 75px;
 	border-radius: 6px;
+	overflow: hidden;
+	position: relative;
 	flex-shrink: 0;
 }

+/* xuchao: image 由 thumb 裁圆角，自身不再设圆角 */
+.card-img {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+.card-area {
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: block;
+	max-width: 100%;
+	padding: 1px 5px;
+	border-radius: 0 0 6px 0;
+	background: rgba(0, 0, 0, 0.45);
+	color: #ffffff;
+	font-size: 10px;
+	line-height: 14px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
 .card-info {
 	flex: 1;
 	// xuchao: min-width:0 允许 flex 子项收缩到内容宽度以下，配合 nowrap 文本出省略号
@@ -53,7 +53,7 @@
 <script>
 import {
 	VOUCHER_NAME, VOUCHER_PRICE_TEXT, VOUCHER_GUIDE_TEXT,
-	VOUCHER_PAY_WHITELIST_PHONE, isUnionPayApp, bizOk, bizMsg, bizData
+	bizOk, bizMsg, bizData
 } from '@/common/petrolVoucher.js'

 export default {
@@ -81,7 +81,7 @@ export default {
 			uni.redirectTo({ url: '/pages/index/login?redirect=' + encodeURIComponent('/pages/venue/detail?id=851219003520709&type=2') })
 			return
 		}
-		this.loadUpSdk() // xuchao: 运行时注入云闪付 SDK（构建模板不可靠，见 loadUpSdk 注释）
+		this.loadUpSdk() // xuchao: 运行时兜底注入（静态标签已在发布脚本注入产物 index.html，见 h5-release.sh）
 		if (options.orderNo) this.orderNo = options.orderNo
 		this.initFromServer()
 	},
@@ -116,7 +116,7 @@ export default {
 			this._upSdkPromise = loading
 			return loading
 		},
-		// xuchao: 价格展示以服务端 latest 为准（测试期 0.01）；已有待支付单自动续用；已发券直接跳券详情
+		// xuchao: 价格展示以服务端 latest 为准；已有待支付单自动续用；已发券直接跳券详情
 		initFromServer() {
 			this.$u.api.voucherLatest({ phone: this.phone }).then(res => {
 				if (!bizOk(res)) return
@@ -133,11 +133,8 @@ export default {
 		},
 		onConfirmPay() {
 			if (this.submitting) return
-			// xuchao: 容器拦截——非云闪付且非联调白名单号，弹窗不发起支付（决策 11/13）
-			if (!isUnionPayApp() && this.phone !== VOUCHER_PAY_WHITELIST_PHONE) {
-				this.guideModal = true
-				return
-			}
+			// xuchao: 不做容器/白名单前置拦截，直接发起；云闪付控件在站外唤不起时
+			//         由 pay 的 fail 回调统一弹「去云闪付」指引模态（决策 11 修订：去白名单）
 			this.submitting = true
 			this.doPay()
 		},
@@ -168,7 +165,7 @@ export default {
 			const ready = await this.loadUpSdk()
 			if (!ready) {
 				this.submitting = false
-				uni.showToast({ title: '支付组件加载失败，请稍后重试', icon: 'none' })
+				this.guideModal = true
 				return
 			}
 			window.upsdk.pluginReady(() => {
@@ -178,8 +175,10 @@ export default {
 						uni.redirectTo({ url: '/pages/petrol/voucherDetail?orderNo=' + this.orderNo })
 					},
 					fail: () => {
+						// xuchao: 唤起失败（多为不在云闪付内）→ 指引模态；云闪付内取消也会走这里，
+						//         订单仍保留可"继续支付"，统一用文案引导，不做环境猜测
 						this.submitting = false
-						uni.showToast({ title: '支付未完成，可在门店页继续支付', icon: 'none' })
+						this.guideModal = true
 					}
 				})
 			})
@@ -1,6 +1,8 @@
 <template>
 	<view class="page">
-		<view v-if="detail">
+		<!-- xuchao: 底部「立即预约」是 fixed 不占位，短屏滚到底会把「权益说明」压住；
+		     有底栏时给内容区预留 80px（底栏 68px + 12px 呼吸位）+ 安全区 -->
+		<view v-if="detail" :class="{ 'has-bottom-bar': detail.isAppointment }">
 			<!-- 门店信息卡片（信息+地址合并容器） -->
 			<view class="store-card">
 				<view class="store-main">
@@ -442,6 +444,11 @@ export default {
 }

 /* 底部预约按钮 */
+/* xuchao: 内容区为 fixed 底栏预留的高度，短屏下「权益说明」才不会被遮住 */
+.has-bottom-bar {
+	padding-bottom: calc(80px + env(safe-area-inset-bottom));
+}
+
 .bottom-bar {
 	position: fixed;
 	bottom: 0;
@@ -89,7 +89,9 @@
 						</view>
 					</view>
 				</view>
-
+			</view>
+			<!-- xuchao: Tab + 搜索 + 县区/类型筛选一起吸顶；筛选只作用于「待使用」（另两个 Tab 的接口不返回地址与分类） -->
+			<view class="info-sticky">
 				<!-- Tab 切换 -->
 				<view class="tab-bar">
 					<view v-for="(tab, index) in tabs" :key="index" class="tab-item"
@@ -97,20 +99,27 @@
 						<text class="tab-text">{{ tab }}</text>
 					</view>
 				</view>
-			</view>
-			<!-- 搜索栏 -->
-			<view class="search-area" v-if="currentTab==0">
-				<view class="search-bar">
-					<u-icon name="search" color="#cccccc" size="24"></u-icon>
-					<input class="search-input" v-model="keyword" placeholder="搜索权益商家" @confirm="onSearch" />
+				<!-- 搜索栏 -->
+				<view class="search-area" v-if="currentTab==0">
+					<view class="search-bar">
+						<u-icon name="search" color="#cccccc" size="24"></u-icon>
+						<input class="search-input" v-model="keyword" placeholder="搜索权益商家" @confirm="onSearch" />
+					</view>
+					<!-- xuchao: 所属县区 + 所属类型筛选，选项与联动条数由列表接口一并返回 -->
+					<hhrs-filter-bar :districts="filters.districts" :categories="filters.categories"
+						:district-id="districtId" :category="category" @change="onFilterChange" />
 				</view>
 			</view>

 			<!-- 权益列表 -->
 			<!-- xuchao: 三 Tab 列表统一改普通容器 + 页面级触底分页（scroll-view 无固定高度时 scrolltolower 永不触发） -->
-			<view class="list-area" v-if="currentTab==0">
+			<view class="list-area list-area--todo" v-if="currentTab==0">
 				<view class="rights-card" v-for="item in rightsList" :key="item.ruleId" @click="goDetail(item)">
-					<image class="card-img" :src="item.image" mode="aspectFill" />
+					<view class="card-thumb">
+						<image class="card-img" :src="item.image" mode="aspectFill" />
+						<!-- xuchao: 左上角所属地区角标（districtName 来自商铺「所在地区」，未录入则不显示） -->
+						<text class="card-area" v-if="item.districtName">{{ shortDistrict(item.districtName) }}</text>
+					</view>
 					<view class="card-info">
 						<view class="card-name">{{ item.name }}</view>
 						<view class="card-category">{{ item.category }}</view>
@@ -171,7 +180,13 @@
 </template>

 <script>
+	// xuchao: 角标区县简称（后端返回的是行政区划全称）
+	import { shortDistrict } from '@/common/district.js'
+	// xuchao: 县区 + 类型筛选条，三个列表页共用（pages.json 的 easycom 只给 u- 前缀配了规则，这里显式引入）
+	import HhrsFilterBar from '@/components/hhrs-filter-bar/hhrs-filter-bar.vue'
+
 	export default {
+		components: { HhrsFilterBar },
 		data() {
 			return {
 				status: 'auth',
@@ -189,6 +204,14 @@
 				tabs: ['待使用', '已预约', '已使用'],
 				currentTab: 0,
 				keyword: '',
+				// xuchao: 待使用列表的县区/类型筛选条件与面板选项（选项由列表响应带回）
+				districtId: '',
+				category: '',
+				filters: { districts: [], categories: [] },
+				// xuchao: 待使用列表的县区/类型筛选条件与面板选项（选项由列表响应带回）
+				districtId: '',
+				category: '',
+				filters: { districts: [], categories: [] },
 				rightsList: [],
 				appointmentList: [],
 				checkList: [],
@@ -262,6 +285,7 @@
 			}
 		},
 		methods: {
+			shortDistrict,
 			// xuchao: 缓存的权益状态可能过期（中奖/权益包会变化），每次进页面仅凭手机号向服务端
 			//         复查最新状态并覆盖缓存（不带证件号，避免触发被动认证）
 			refreshStatus() {
@@ -495,10 +519,19 @@
 					params.keyword = this.keyword
 					params.lng = this.lng
 					params.lat = this.lat
+					if (this.districtId) params.districtId = this.districtId
+					if (this.category) params.category = this.category
 					request = this.$u.api.getRightsList(params)
 				}
 				request.then(res => {
 					if (seq !== p.reqSeq) return
+					// xuchao: 筛选面板选项只随「待使用」列表返回，另两个 Tab 不覆盖
+					if (tab === 0 && res.errcode === 0 && res.data) {
+						this.filters = {
+							districts: res.data.districts || [],
+							categories: res.data.categories || []
+						}
+					}
 					if (res.errcode === 0 && res.data) {
 						const list = res.data.list || []
 						const prev = this.listOf(tab)
@@ -538,6 +571,12 @@
 			onSearch() {
 				this.loadList(0, true)
 			},
+			// xuchao: 换筛选条件即回第 1 页重查（关键词保持不变，两者为 AND）
+			onFilterChange(e) {
+				this.districtId = e.districtId
+				this.category = e.category
+				this.loadList(0, true)
+			},
 			goDetail(item) {
 				uni.navigateTo({
 					url: '/pages/rights/detail?id=' + item.ruleId
@@ -794,11 +833,20 @@
 		background-color: #eeeeee;
 	}

+	/* xuchao: Tab + 搜索 + 筛选条一起吸顶。padding-top 替代原 tab-bar 的 margin-top，
+	   否则吸顶后顶部会留一条能透出列表内容的缝隙；z-index 需高于筛选遮罩(90) */
+	.info-sticky {
+		background-color: #ffffff;
+		padding-top: 12px;
+		position: sticky;
+		top: 0;
+		z-index: 100;
+	}
+
 	/* Tab 切换 */
 	.tab-bar {
 		display: flex;
 		background-color: #ffffff;
-		margin-top: 12px;
 		padding: 0 16px;
 	}

@@ -833,7 +881,8 @@

 	/* 搜索栏 */
 	.search-area {
-		padding: 12px;
+		/* xuchao: 底部留白交给筛选条的 20rpx 上内边距，保证三段间距一致 */
+		padding: 12px 12px 0;
 	}

 	.search-bar {
@@ -841,6 +890,10 @@
 		align-items: center;
 		height: 36px;
 		background-color: #ffffff;
+		/* xuchao: 头部改白底后，白色搜索框在白色吸顶栏上必须描边才分得出来；
+		   显式 border-box 保证加边框后高度仍是 36px */
+		border: 1px solid #e5e5ea;
+		box-sizing: border-box;
 		border-radius: 18px;
 		padding: 0 12px;
 		gap: 8px;
@@ -861,6 +914,12 @@
 		flex-direction: column;
 	}

+	/* xuchao: 「待使用」列表顶部 24rpx(=12px) 灰底间隔，与卡片之间的间距一致，
+	   也与筛选条和列表之间的 12px 对齐；只加在这个 Tab，不影响「已预约/已使用」 */
+	.list-area--todo {
+		padding-top: 24rpx;
+	}
+
 	.nomore-area {
 		width: 100%;
 		padding-bottom: 24px;
@@ -876,12 +935,38 @@
 		margin-bottom: 24rpx;
 	}

-	.card-img {
-		width: 150rpx;
-		height: 150rpx;
-		border-radius: 6px;
-		flex-shrink: 0;
-	}
+	.card-thumb {
+	width: 150rpx;
+	height: 150rpx;
+	border-radius: 6px;
+	overflow: hidden;
+	position: relative;
+	flex-shrink: 0;
+}
+
+/* xuchao: image 由 thumb 裁圆角，自身不再设圆角 */
+.card-img {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+.card-area {
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: block;
+	max-width: 100%;
+	padding: 1px 5px;
+	border-radius: 0 0 6px 0;
+	background: rgba(0, 0, 0, 0.45);
+	color: #ffffff;
+	font-size: 10px;
+	line-height: 14px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}

 	.card-info {
 		width: 490rpx;
@@ -13,12 +13,19 @@
 					<view class="search-btn" @click="onSearch">搜索</view>
 				</view>
 			</view>
+			<!-- xuchao: 所属县区 + 所属类型筛选，选项与联动条数由列表接口一并返回 -->
+			<hhrs-filter-bar :districts="filters.districts" :categories="filters.categories"
+				:district-id="districtId" :category="category" @change="onFilterChange" />
 		</view>

 		<!-- 场馆列表 -->
 		<view class="list-area">
 			<view class="venue-card" v-for="item in list" :key="item.shopId">
-				<image class="card-img" :src="item.image" mode="aspectFill" />
+				<view class="card-thumb">
+					<image class="card-img" :src="item.image" mode="aspectFill" />
+					<!-- xuchao: 左上角所属地区角标（districtName 来自商铺「所在地区」，未录入则不显示） -->
+					<text class="card-area" v-if="item.districtName">{{ shortDistrict(item.districtName) }}</text>
+				</view>
 				<view class="card-info">
 					<text class="card-name">{{ item.name }}</text>
 					<text class="card-category">{{ item.category }}</text>
@@ -37,7 +44,13 @@
 </template>

 <script>
+// xuchao: 角标区县简称（后端返回的是行政区划全称）
+import { shortDistrict } from '@/common/district.js'
+// xuchao: 县区 + 类型筛选条，三个列表页共用（pages.json 的 easycom 只给 u- 前缀配了规则，这里显式引入）
+import HhrsFilterBar from '@/components/hhrs-filter-bar/hhrs-filter-bar.vue'
+
 export default {
+	components: { HhrsFilterBar },
 	data() {
 		return {
 			keyword: '',
@@ -50,7 +63,11 @@ export default {
 			lat: '',
 			loadStatus: 'loadmore',
 			hasScrolled: false,
-			reqSeq: 0
+			reqSeq: 0,
+			// xuchao: 筛选条件与面板选项（选项由列表响应带回）
+			districtId: '',
+			category: '',
+			filters: { districts: [], categories: [] }
 		}
 	},
 	onLoad() {
@@ -68,6 +85,7 @@ export default {
 		this.loadMore()
 	},
 	methods: {
+		shortDistrict,
 		loadList() {
 			// xuchao: 请求序号 —— 新请求直接取代在途请求，过期响应整体丢弃（修复搜索竞态，故不再用 loading 提前 return）
 			const seq = ++this.reqSeq
@@ -81,9 +99,16 @@ export default {
 			}
 			if (this.lng) params.lng = this.lng
 			if (this.lat) params.lat = this.lat
+			if (this.districtId) params.districtId = this.districtId
+			if (this.category) params.category = this.category
 			this.$u.api.getStoreList(params).then(res => {
 				if (seq !== this.reqSeq) return
 				if (res.errcode === 0 && res.data) {
+					// xuchao: 面板选项随列表一起回来（后端已按关键词与另一维度算好条数）
+					this.filters = {
+						districts: res.data.districts || [],
+						categories: res.data.categories || []
+					}
 					const list = res.data.list || []
 					if (this.pageNo === 1) {
 						this.list = list
@@ -126,6 +151,12 @@ export default {
 			this.pageNo = 1
 			this.list = []
 			this.loadList()
+		},
+		// xuchao: 换筛选条件即回第 1 页重查（关键词保持不变，两者为 AND）
+		onFilterChange(e) {
+			this.districtId = e.districtId
+			this.category = e.category
+			this.onSearch()
 		}
 	}
 }
@@ -140,11 +171,11 @@ export default {

 .search-area {
 	background-color: #ffffff;
-	padding: 6px 12px;
-	/* xuchao: 滚动时固定在页面顶部 */
+	padding: 6px 12px 0;
+	/* xuchao: 滚动时固定在页面顶部；z-index 高于筛选遮罩(90)，保证面板与选中态不被压住 */
 	position: sticky;
 	top: 0;
-	z-index: 10;
+	z-index: 100;
 }

 .nav-row {
@@ -195,6 +226,7 @@ export default {
 }

 .list-area {
+	/* xuchao: 顶部 12px 必须是页面灰底（不能放进头部的白底里），否则与白色卡片连成一片看不出间隔 */
 	padding: 12px;
 }

@@ -210,13 +242,39 @@ export default {
 	margin-bottom: 12px;
 }

-.card-img {
+.card-thumb {
 	width: 75px;
 	height: 75px;
 	border-radius: 6px;
+	overflow: hidden;
+	position: relative;
 	flex-shrink: 0;
 }

+/* xuchao: image 由 thumb 裁圆角，自身不再设圆角 */
+.card-img {
+	width: 100%;
+	height: 100%;
+	display: block;
+}
+
+.card-area {
+	position: absolute;
+	top: 0;
+	left: 0;
+	display: block;
+	max-width: 100%;
+	padding: 1px 5px;
+	border-radius: 0 0 6px 0;
+	background: rgba(0, 0, 0, 0.45);
+	color: #ffffff;
+	font-size: 10px;
+	line-height: 14px;
+	overflow: hidden;
+	text-overflow: ellipsis;
+	white-space: nowrap;
+}
+
 .card-info {
 	flex: 1;
 	/* xuchao: flex 项默认 min-width:auto，nowrap 地址会把列宽撑破卡片；置 0 后子元素在实宽内省略 */
Author	SHA1	Message	Date
jacobxu666andClaude Fable 5	b6bbb0b219	fix: 云闪付控件唤起路线B——发布脚本向构建产物index.html注入upsdk静态标签（HBuilderX不吃根模板，控件桥需静态加载）；白名单豁免下线，唤起失败统一弹指引模态 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-09-28 19:25:11 +08:00
jacobxu666andClaude Fable 5	8b3ac20e34	fix: 权益详情页修复底部预约条遮挡「权益说明」 - .bottom-bar 是 position:fixed 不占文档流，「权益说明」作为最后一个内容块，短屏滚到底会被预约条压住 - 内容容器按底栏高度预留空间：padding-bottom calc(80px + env(safe-area-inset-bottom)) （底栏 12 + 按钮 44 + 12 = 68px，另留 12px 呼吸位，并兼容全面屏安全区） - 仅在存在底栏时生效：类名与底栏共用 detail.isAppointment 条件，不可预约的权益不会多出空白 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-09-28 16:27:03 +08:00
jacobxu666andClaude Fable 5	eb01701709	feat: 列表卡片新增所属地区角标，并修正筛选条间距与遮罩压灰 - 三个列表（文旅场馆/商户折扣/权益待使用）缩略图左上角增加所属地区角标：缩略图外套 .card-thumb 承担尺寸与圆角裁切，角标半透明黑底白字 10px； districtName 为空的记录不渲染角标，避免空色块 - 新增 common/district.js：后端返回的是行政区划全称，卡片位宽只有 75px，按「芷江侗族自治县→芷江、中方县→中方、怀化高新技术产业开发区→怀化高新区」缩短显示 - 筛选条与列表的 12px 间隔移到头部白底之外（各页 .list-area 顶部内边距），此前放在头部内是白色、与白色卡片连成一片，视觉上等于没有间隔 - 遮罩由 fixed 改为从筛选条下边缘绝对定位铺开：fixed 会落进 sticky 头部的层叠上下文，把搜索栏和筛选条一起压灰；现改为列表变暗、头部保持原色 - 权益页搜索框加 1px #e5e5ea 描边：吸顶栏改白底后白色输入框无边框可辨 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-09-28 15:55:17 +08:00
jacobxu666andClaude Fable 5	eeb6b91e0a	feat: 场馆/折扣/权益待使用列表新增「所属县区 + 所属类型」筛选条 - 新增 components/hhrs-filter-bar：两个等宽入口平分并占满容器宽、无底色、蓝字选中态；面板首项「全部 X」即清空该维度（因此没有独立重置按钮） - 三页接入；选项与各选项命中条数由列表接口在响应里一并返回（后端已按关键词与另一维度算好） - 筛选与关键词为 AND；切筛选回第 1 页，复用各页现有 reqSeq 竞态保护 - 某维度无可选项时（如商铺未录入所在地区）该入口自动不渲染，避免点开空面板 - 三页头部间距统一为「搜索栏↔筛选条 = 筛选条↔列表 = 10px」 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>	2026-09-28 15:12:38 +08:00