合并:中奖名单公示页搜索修复(feature/venue-discount-rights-filter → xuchao)
冲突解决:venue 列表灰底间距与卡片内边距取 feature 侧设计修正;card-address 保留 min-width:0;index 页面取页级滚动方案。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
jacobxu666
+74
-9
@@ -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="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>
|
||||
<view class="card-info">
|
||||
<text class="card-name">{{ item.name }}</text>
|
||||
<text class="card-category">{{ item.category }}</text>
|
||||
@@ -39,7 +46,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: '',
|
||||
@@ -52,7 +65,11 @@ export default {
|
||||
lat: '',
|
||||
loadStatus: 'loadmore',
|
||||
hasScrolled: false,
|
||||
reqSeq: 0
|
||||
reqSeq: 0,
|
||||
// xuchao: 筛选条件与面板选项（选项由列表响应带回）
|
||||
districtId: '',
|
||||
category: '',
|
||||
filters: { districts: [], categories: [] }
|
||||
}
|
||||
},
|
||||
onLoad() {
|
||||
@@ -70,6 +87,7 @@ export default {
|
||||
this.loadMore()
|
||||
},
|
||||
methods: {
|
||||
shortDistrict,
|
||||
loadList() {
|
||||
// xuchao: 请求序号 —— 新请求直接取代在途请求，过期响应整体丢弃（修复搜索竞态，故不再用 loading 提前 return）
|
||||
const seq = ++this.reqSeq
|
||||
@@ -83,9 +101,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
|
||||
@@ -124,13 +149,16 @@ export default {
|
||||
uni.reLaunch({ url: '/pages/index/index' })
|
||||
}
|
||||
},
|
||||
goDetail(item) {
|
||||
uni.navigateTo({ url: '/pages/venue/detail?id=' + item.shopId })
|
||||
},
|
||||
onSearch() {
|
||||
this.pageNo = 1
|
||||
this.list = []
|
||||
this.loadList()
|
||||
},
|
||||
// xuchao: 换筛选条件即回第 1 页重查（关键词保持不变，两者为 AND）
|
||||
onFilterChange(e) {
|
||||
this.districtId = e.districtId
|
||||
this.category = e.category
|
||||
this.onSearch()
|
||||
}
|
||||
}
|
||||
}
|
||||
@@ -145,7 +173,11 @@ export default {
|
||||
|
||||
.search-area {
|
||||
background-color: #ffffff;
|
||||
padding: 6px 12px;
|
||||
padding: 6px 12px 0;
|
||||
/* xuchao: 滚动时固定在页面顶部；z-index 高于筛选遮罩(90)，保证面板与选中态不被压住 */
|
||||
position: sticky;
|
||||
top: 0;
|
||||
z-index: 100;
|
||||
}
|
||||
|
||||
.nav-row {
|
||||
@@ -196,6 +228,8 @@ export default {
|
||||
}
|
||||
|
||||
.list-area {
|
||||
/* xuchao: 顶部 12px 必须是页面灰底（不能放进头部的白底里），否则与白色卡片连成一片看不出间隔 */
|
||||
padding: 12px;
|
||||
}
|
||||
|
||||
.venue-card {
|
||||
@@ -204,21 +238,49 @@ export default {
|
||||
background-color: #ffffff;
|
||||
border: 1px solid #f2f2f7;
|
||||
border-radius: 6px;
|
||||
padding: 12px;
|
||||
padding: 24px 12px;
|
||||
gap: 12px;
|
||||
box-shadow: 0 2px 3px #f2f2f7;
|
||||
margin: 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 后子元素在实宽内省略 */
|
||||
min-width: 0;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
gap: 0;
|
||||
@@ -240,6 +302,9 @@ export default {
|
||||
font-size: 14px;
|
||||
color: #727272;
|
||||
margin-top: 8px;
|
||||
/* xuchao: 分类为空也预留一行高度，防止卡片内容底部对齐时名称上下跳动 */
|
||||
min-height: 20px;
|
||||
line-height: 20px;
|
||||
}
|
||||
|
||||
.card-bottom {
|
||||
|
||||
Reference in New Issue
Block a user