From eb017017093b09c7f4b56a038d92e40adc6f517a Mon Sep 17 00:00:00 2001
From: jacobxu666 <jacobxu666@gmail.com>
Date: Mon, 28 Sep 2026 15:55:17 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E5=88=97=E8=A1=A8=E5=8D=A1=E7=89=87?=
 =?UTF-8?q?=E6=96=B0=E5=A2=9E=E6=89=80=E5=B1=9E=E5=9C=B0=E5=8C=BA=E8=A7=92?=
 =?UTF-8?q?=E6=A0=87=EF=BC=8C=E5=B9=B6=E4=BF=AE=E6=AD=A3=E7=AD=9B=E9=80=89?=
 =?UTF-8?q?=E6=9D=A1=E9=97=B4=E8=B7=9D=E4=B8=8E=E9=81=AE=E7=BD=A9=E5=8E=8B?=
 =?UTF-8?q?=E7=81=B0?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

- 三个列表（文旅场馆/商户折扣/权益待使用）缩略图左上角增加所属地区角标：
  缩略图外套 .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>
---
 common/district.js                            | 10 ++++
 .../hhrs-filter-bar/hhrs-filter-bar.vue       | 18 +++---
 pages/discount/discount.vue                   | 41 +++++++++++--
 pages/rights/rights.vue                       | 59 ++++++++++++++++---
 pages/venue/venue.vue                         | 41 +++++++++++--
 5 files changed, 146 insertions(+), 23 deletions(-)
 create mode 100644 common/district.js

diff --git a/common/district.js b/common/district.js
new file mode 100644
index 0000000..f353d3c
--- /dev/null
+++ b/common/district.js
@@ -0,0 +1,10 @@
+// xuchao: 卡片角标用的区县简称。后端 districtName 返回的是 region.name 行政区划全称
+//         （如「芷江侗族自治县」「怀化高新技术产业开发区」），列表缩略图只有 75px，必须缩短显示
+export function shortDistrict(name) {
+	if (!name) return ''
+	return name
+		.replace('高新技术产业开发区', '高新区')
+		.replace(/(苗族|侗族|瑶族|回族|土家族|各族)*自治县$/, '')
+		.replace(/(苗族|侗族|瑶族|回族|土家族|各族)*自治州$/, '')
+		.replace(/([^市])县$/, '$1')
+}
diff --git a/components/hhrs-filter-bar/hhrs-filter-bar.vue b/components/hhrs-filter-bar/hhrs-filter-bar.vue
index 98ebd2a..d0d6ec9 100644
--- a/components/hhrs-filter-bar/hhrs-filter-bar.vue
+++ b/components/hhrs-filter-bar/hhrs-filter-bar.vue
@@ -106,10 +106,12 @@
 </script>
 
 <style scoped lang="less">
-	/* xuchao: 根节点贴在 sticky 头部内，面板绝对定位到筛选条下方，遮罩 fixed 盖住整屏 */
+	/* xuchao: 根节点贴在 sticky 头部内，面板绝对定位到筛选条下方。
+	   只留上内边距：与列表的 12px 间隔必须落在头部的白底之外（各页 .list-area 的 padding-top），
+	   放在这里会是白色，头部白底和白色卡片连成一片，看上去就等于没有间隔 */
 	.hfb {
 		position: relative;
-		padding: 20rpx 0;
+		padding: 24rpx 0 0;
 	}
 
 	.hfb-row {
@@ -149,12 +151,14 @@
 		transform: rotate(180deg);
 	}
 
+	/* xuchao: 遮罩绝对定位在筛选条下方（不用 fixed）—— fixed 会盖进 sticky 头部的层叠上下文，
+	   把搜索栏和筛选条一起压灰。这里从筛选条下边缘开始向下铺满一屏，列表变暗、头部保持原色 */
 	.hfb-mask {
-		position: fixed;
-		top: 0;
-		left: 0;
-		right: 0;
-		bottom: 0;
+		position: absolute;
+		top: 100%;
+		left: -12px;
+		right: -12px;
+		height: 100vh;
 		background: rgba(0, 0, 0, 0.3);
 		z-index: 90;
 	}
diff --git a/pages/discount/discount.vue b/pages/discount/discount.vue
index a1ca754..929fb0e 100644
--- a/pages/discount/discount.vue
+++ b/pages/discount/discount.vue
@@ -21,7 +21,11 @@
 		<!-- 商户列表 -->
 		<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>
@@ -43,6 +47,8 @@
 </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'
 
@@ -89,6 +95,7 @@ export default {
 		this.loadMore()
 	},
 	methods: {
+		shortDistrict,
 		loadList() {
 			// xuchao: 请求序号 —— 新请求直接取代在途请求，过期响应整体丢弃（修复搜索竞态，故不再用 loading 提前 return）
 			const seq = ++this.reqSeq
@@ -233,8 +240,8 @@ export default {
 }
 
 .list-area {
-	// xuchao: 顶部留白交给筛选条的 20rpx 下内边距，保证「搜索栏↔筛选条」与「筛选条↔列表」间距一致
-	padding: 0 12px 12px;
+	// xuchao: 顶部 12px 必须是页面灰底（不能放进头部的白底里），否则与白色卡片连成一片看不出间隔
+	padding: 12px;
 	// xuchao: border-box 防止 padding 撑出页面横向滚动
 	box-sizing: border-box;
 }
@@ -253,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 文本出省略号
diff --git a/pages/rights/rights.vue b/pages/rights/rights.vue
index 8ea10f1..980445e 100644
--- a/pages/rights/rights.vue
+++ b/pages/rights/rights.vue
@@ -113,9 +113,13 @@
 
 			<!-- 权益列表 -->
 			<!-- 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>
@@ -176,6 +180,8 @@
 </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'
 
@@ -279,6 +285,7 @@
 			}
 		},
 		methods: {
+			shortDistrict,
 			// xuchao: 缓存的权益状态可能过期（中奖/权益包会变化），每次进页面仅凭手机号向服务端
 			//         复查最新状态并覆盖缓存（不带证件号，避免触发被动认证）
 			refreshStatus() {
@@ -883,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;
@@ -903,6 +914,12 @@
 		flex-direction: column;
 	}
 
+	/* xuchao: 「待使用」列表顶部 24rpx(=12px) 灰底间隔，与卡片之间的间距一致，
+	   也与筛选条和列表之间的 12px 对齐；只加在这个 Tab，不影响「已预约/已使用」 */
+	.list-area--todo {
+		padding-top: 24rpx;
+	}
+
 	.nomore-area {
 		width: 100%;
 		padding-bottom: 24px;
@@ -918,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;
diff --git a/pages/venue/venue.vue b/pages/venue/venue.vue
index 8d0f023..c41dd09 100644
--- a/pages/venue/venue.vue
+++ b/pages/venue/venue.vue
@@ -21,7 +21,11 @@
 		<!-- 场馆列表 -->
 		<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>
@@ -40,6 +44,8 @@
 </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'
 
@@ -79,6 +85,7 @@ export default {
 		this.loadMore()
 	},
 	methods: {
+		shortDistrict,
 		loadList() {
 			// xuchao: 请求序号 —— 新请求直接取代在途请求，过期响应整体丢弃（修复搜索竞态，故不再用 loading 提前 return）
 			const seq = ++this.reqSeq
@@ -219,8 +226,8 @@ export default {
 }
 
 .list-area {
-	/* xuchao: 顶部留白交给筛选条的 20rpx 下内边距，保证「搜索栏↔筛选条」与「筛选条↔列表」间距一致 */
-	padding: 0 12px 12px;
+	/* xuchao: 顶部 12px 必须是页面灰底（不能放进头部的白底里），否则与白色卡片连成一片看不出间隔 */
+	padding: 12px;
 }
 
 .venue-card {
@@ -235,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 后子元素在实宽内省略 */