Compare commits
1
Commits
b6bbb0b219
..
master
| Author | SHA1 | Date | |
|---|---|---|---|
 jacobxu666andClaude Fable 5
|
b15ca69811 |
@@ -1,10 +0,0 @@
|
||||
// xuchao: 卡片角标用的区县简称。后端 districtName 返回的是 region.name 行政区划全称
|
||||
// （如「芷江侗族自治县」「怀化高新技术产业开发区」），列表缩略图只有 75px，必须缩短显示
|
||||
export function shortDistrict(name) {
|
||||
if (!name) return ''
|
||||
return name
|
||||
.replace('高新技术产业开发区', '高新区')
|
||||
.replace(/(苗族|侗族|瑶族|回族|土家族|各族)*自治县$/, '')
|
||||
.replace(/(苗族|侗族|瑶族|回族|土家族|各族)*自治州$/, '')
|
||||
.replace(/([^市])县$/, '$1')
|
||||
}
|
||||
@@ -1,215 +0,0 @@
|
||||
<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>
|
||||
@@ -13,19 +13,12 @@
|
||||
<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)">
|
||||
<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>
|
||||
<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>
|
||||
@@ -47,13 +40,7 @@
|
||||
</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: '',
|
||||
@@ -66,11 +53,7 @@ export default {
|
||||
lat: '',
|
||||
loadStatus: 'loadmore',
|
||||
hasScrolled: false,
|
||||
reqSeq: 0,
|
||||
// xuchao: 筛选条件与面板选项（选项由列表响应带回）
|
||||
districtId: '',
|
||||
category: '',
|
||||
filters: { districts: [], categories: [] }
|
||||
reqSeq: 0
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
@@ -95,7 +78,6 @@ export default {
|
||||
this.loadMore()
|
||||
},
|
||||
methods: {
|
||||
shortDistrict,
|
||||
loadList() {
|
||||
// xuchao: 请求序号 —— 新请求直接取代在途请求，过期响应整体丢弃（修复搜索竞态，故不再用 loading 提前 return）
|
||||
const seq = ++this.reqSeq
|
||||
@@ -109,16 +91,9 @@ 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
|
||||
@@ -165,12 +140,6 @@ export default {
|
||||
this.pageNo = 1
|
||||
this.list = []
|
||||
this.loadList()
|
||||
},
|
||||
// xuchao: 换筛选条件即回第 1 页重查（关键词保持不变，两者为 AND）
|
||||
onFilterChange(e) {
|
||||
this.districtId = e.districtId
|
||||
this.category = e.category
|
||||
this.onSearch()
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -185,11 +154,11 @@ export default {
|
||||
|
||||
.search-area {
|
||||
background-color: #ffffff;
|
||||
padding: 6px 12px 0;
|
||||
// xuchao: 滚动时固定在页面顶部；z-index 高于筛选遮罩(90)，保证面板与选中态不被压住
|
||||
padding: 6px 12px;
|
||||
// xuchao: 滚动时固定在页面顶部
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.nav-row {
|
||||
@@ -240,7 +209,6 @@ export default {
|
||||
}
|
||||
|
||||
.list-area {
|
||||
// xuchao: 顶部 12px 必须是页面灰底（不能放进头部的白底里），否则与白色卡片连成一片看不出间隔
|
||||
padding: 12px;
|
||||
// xuchao: border-box 防止 padding 撑出页面横向滚动
|
||||
box-sizing: border-box;
|
||||
@@ -260,39 +228,13 @@ export default {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card-thumb {
|
||||
.card-img {
|
||||
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 文本出省略号
|
||||
|
||||
@@ -1,8 +1,6 @@
|
||||
<template>
|
||||
<view class="page">
|
||||
<!-- xuchao: 底部「立即预约」是 fixed 不占位，短屏滚到底会把「权益说明」压住；
|
||||
有底栏时给内容区预留 80px（底栏 68px + 12px 呼吸位）+ 安全区 -->
|
||||
<view v-if="detail" :class="{ 'has-bottom-bar': detail.isAppointment }">
|
||||
<view v-if="detail">
|
||||
<!-- 门店信息卡片（信息+地址合并容器） -->
|
||||
<view class="store-card">
|
||||
<view class="store-main">
|
||||
@@ -444,11 +442,6 @@ export default {
|
||||
}
|
||||
|
||||
/* 底部预约按钮 */
|
||||
/* xuchao: 内容区为 fixed 底栏预留的高度，短屏下「权益说明」才不会被遮住 */
|
||||
.has-bottom-bar {
|
||||
padding-bottom: calc(80px + env(safe-area-inset-bottom));
|
||||
}
|
||||
|
||||
.bottom-bar {
|
||||
position: fixed;
|
||||
bottom: 0;
|
||||
|
||||
+17
-102
@@ -89,9 +89,7 @@
|
||||
</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"
|
||||
@@ -99,27 +97,20 @@
|
||||
<text class="tab-text">{{ tab }}</text>
|
||||
</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>
|
||||
<!-- xuchao: 所属县区 + 所属类型筛选，选项与联动条数由列表接口一并返回 -->
|
||||
<hhrs-filter-bar :districts="filters.districts" :categories="filters.categories"
|
||||
:district-id="districtId" :category="category" @change="onFilterChange" />
|
||||
</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>
|
||||
</view>
|
||||
|
||||
<!-- 权益列表 -->
|
||||
<!-- xuchao: 三 Tab 列表统一改普通容器 + 页面级触底分页（scroll-view 无固定高度时 scrolltolower 永不触发） -->
|
||||
<view class="list-area list-area--todo" v-if="currentTab==0">
|
||||
<view class="list-area" v-if="currentTab==0">
|
||||
<view class="rights-card" v-for="item in rightsList" :key="item.ruleId" @click="goDetail(item)">
|
||||
<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>
|
||||
<image class="card-img" :src="item.image" mode="aspectFill" />
|
||||
<view class="card-info">
|
||||
<view class="card-name">{{ item.name }}</view>
|
||||
<view class="card-category">{{ item.category }}</view>
|
||||
@@ -180,13 +171,7 @@
|
||||
</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',
|
||||
@@ -204,14 +189,6 @@
|
||||
tabs: ['待使用', '已预约', '已使用'],
|
||||
currentTab: 0,
|
||||
keyword: '',
|
||||
// xuchao: 待使用列表的县区/类型筛选条件与面板选项（选项由列表响应带回）
|
||||
districtId: '',
|
||||
category: '',
|
||||
filters: { districts: [], categories: [] },
|
||||
// xuchao: 待使用列表的县区/类型筛选条件与面板选项（选项由列表响应带回）
|
||||
districtId: '',
|
||||
category: '',
|
||||
filters: { districts: [], categories: [] },
|
||||
rightsList: [],
|
||||
appointmentList: [],
|
||||
checkList: [],
|
||||
@@ -285,7 +262,6 @@
|
||||
}
|
||||
},
|
||||
methods: {
|
||||
shortDistrict,
|
||||
// xuchao: 缓存的权益状态可能过期（中奖/权益包会变化），每次进页面仅凭手机号向服务端
|
||||
// 复查最新状态并覆盖缓存（不带证件号，避免触发被动认证）
|
||||
refreshStatus() {
|
||||
@@ -519,19 +495,10 @@
|
||||
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)
|
||||
@@ -571,12 +538,6 @@
|
||||
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
|
||||
@@ -833,20 +794,11 @@
|
||||
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;
|
||||
}
|
||||
|
||||
@@ -881,8 +833,7 @@
|
||||
|
||||
/* 搜索栏 */
|
||||
.search-area {
|
||||
/* xuchao: 底部留白交给筛选条的 20rpx 上内边距，保证三段间距一致 */
|
||||
padding: 12px 12px 0;
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
@@ -890,10 +841,6 @@
|
||||
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;
|
||||
@@ -914,12 +861,6 @@
|
||||
flex-direction: column;
|
||||
}
|
||||
|
||||
/* xuchao: 「待使用」列表顶部 24rpx(=12px) 灰底间隔，与卡片之间的间距一致，
|
||||
也与筛选条和列表之间的 12px 对齐；只加在这个 Tab，不影响「已预约/已使用」 */
|
||||
.list-area--todo {
|
||||
padding-top: 24rpx;
|
||||
}
|
||||
|
||||
.nomore-area {
|
||||
width: 100%;
|
||||
padding-bottom: 24px;
|
||||
@@ -935,38 +876,12 @@
|
||||
margin-bottom: 24rpx;
|
||||
}
|
||||
|
||||
.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-img {
|
||||
width: 150rpx;
|
||||
height: 150rpx;
|
||||
border-radius: 6px;
|
||||
flex-shrink: 0;
|
||||
}
|
||||
|
||||
.card-info {
|
||||
width: 490rpx;
|
||||
|
||||
+6
-64
@@ -13,19 +13,12 @@
|
||||
<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">
|
||||
<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>
|
||||
<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>
|
||||
@@ -44,13 +37,7 @@
|
||||
</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: '',
|
||||
@@ -63,11 +50,7 @@ export default {
|
||||
lat: '',
|
||||
loadStatus: 'loadmore',
|
||||
hasScrolled: false,
|
||||
reqSeq: 0,
|
||||
// xuchao: 筛选条件与面板选项（选项由列表响应带回）
|
||||
districtId: '',
|
||||
category: '',
|
||||
filters: { districts: [], categories: [] }
|
||||
reqSeq: 0
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
@@ -85,7 +68,6 @@ export default {
|
||||
this.loadMore()
|
||||
},
|
||||
methods: {
|
||||
shortDistrict,
|
||||
loadList() {
|
||||
// xuchao: 请求序号 —— 新请求直接取代在途请求，过期响应整体丢弃（修复搜索竞态，故不再用 loading 提前 return）
|
||||
const seq = ++this.reqSeq
|
||||
@@ -99,16 +81,9 @@ 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
|
||||
@@ -151,12 +126,6 @@ export default {
|
||||
this.pageNo = 1
|
||||
this.list = []
|
||||
this.loadList()
|
||||
},
|
||||
// xuchao: 换筛选条件即回第 1 页重查（关键词保持不变，两者为 AND）
|
||||
onFilterChange(e) {
|
||||
this.districtId = e.districtId
|
||||
this.category = e.category
|
||||
this.onSearch()
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -171,11 +140,11 @@ export default {
|
||||
|
||||
.search-area {
|
||||
background-color: #ffffff;
|
||||
padding: 6px 12px 0;
|
||||
/* xuchao: 滚动时固定在页面顶部；z-index 高于筛选遮罩(90)，保证面板与选中态不被压住 */
|
||||
padding: 6px 12px;
|
||||
/* xuchao: 滚动时固定在页面顶部 */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
z-index: 10;
|
||||
}
|
||||
|
||||
.nav-row {
|
||||
@@ -226,7 +195,6 @@ export default {
|
||||
}
|
||||
|
||||
.list-area {
|
||||
/* xuchao: 顶部 12px 必须是页面灰底（不能放进头部的白底里），否则与白色卡片连成一片看不出间隔 */
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
@@ -242,39 +210,13 @@ export default {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.card-thumb {
|
||||
.card-img {
|
||||
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 后子元素在实宽内省略 */
|
||||
|
||||
Reference in New Issue
Block a user