jacobxu666andClaude Fable 5
9276bd6140
冲突解决:venue 列表灰底间距与卡片内边距取 feature 侧设计修正;card-address 保留 min-width:0;index 页面取页级滚动方案。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
344 lines
8.3 KiB
Vue
344 lines
8.3 KiB
Vue
<template>
|
||
<view class="page">
|
||
<!-- 搜索栏 -->
|
||
<view class="search-area">
|
||
<view class="nav-row">
|
||
<view class="back-btn" @click="goBack">
|
||
<u-icon name="arrow-left" color="#333333" size="40"></u-icon>
|
||
<text class="back-text">返回</text>
|
||
</view>
|
||
<view class="search-bar">
|
||
<u-icon name="search" color="#8e8e93" size="36"></u-icon>
|
||
<input class="search-input" v-model="keyword" placeholder="请搜索场馆名" confirm-type="search" @confirm="onSearch" />
|
||
<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>
|
||
<view class="card-info">
|
||
<text class="card-name">{{ item.name }}</text>
|
||
<text class="card-category">{{ item.category }}</text>
|
||
<view class="card-bottom">
|
||
<text class="card-address">{{ item.address }}</text>
|
||
<view class="card-distance" v-if="item.distance !== null">
|
||
<u-icon name="map" color="#999999" size="24"></u-icon>
|
||
<text class="distance-text">{{ item.distance < 1 ? Math.round(item.distance * 1000) + 'm' : Math.round(item.distance) + 'km' }}</text>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</view>
|
||
<view v-if="hasScrolled" class="nomore-area">
|
||
<u-loadmore :status="loadStatus" :load-text="{ loadmore: '', loading: '加载中...', nomore: '我也是有底线的' }" />
|
||
</view>
|
||
</view>
|
||
</view>
|
||
</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: '',
|
||
list: [],
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
loading: false,
|
||
lng: '',
|
||
lat: '',
|
||
loadStatus: 'loadmore',
|
||
hasScrolled: false,
|
||
reqSeq: 0,
|
||
// xuchao: 筛选条件与面板选项（选项由列表响应带回）
|
||
districtId: '',
|
||
category: '',
|
||
filters: { districts: [], categories: [] }
|
||
}
|
||
},
|
||
onLoad() {
|
||
const loc = uni.getStorageSync('lng') && uni.getStorageSync('lat')
|
||
? { lng: uni.getStorageSync('lng'), lat: uni.getStorageSync('lat') }
|
||
: null
|
||
if (loc) {
|
||
this.lng = loc.lng
|
||
this.lat = loc.lat
|
||
}
|
||
this.loadList()
|
||
},
|
||
// xuchao: 改用页面级触底加载（scroll-view 无固定高度时 scrolltolower 永不触发）
|
||
onReachBottom() {
|
||
this.loadMore()
|
||
},
|
||
methods: {
|
||
shortDistrict,
|
||
loadList() {
|
||
// xuchao: 请求序号 —— 新请求直接取代在途请求，过期响应整体丢弃（修复搜索竞态，故不再用 loading 提前 return）
|
||
const seq = ++this.reqSeq
|
||
this.loading = true
|
||
this.loadStatus = 'loading'
|
||
const params = {
|
||
pageNo: this.pageNo,
|
||
pageSize: this.pageSize,
|
||
keyword: this.keyword,
|
||
typeId: 1
|
||
}
|
||
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
|
||
} else {
|
||
this.list = this.list.concat(list)
|
||
}
|
||
this.total = res.data.total || 0
|
||
// xuchao: 本页不足一页即已到尾部，钉住 total，防止 total 中途变大时空翻
|
||
if (list.length < this.pageSize) this.total = this.list.length
|
||
}
|
||
}).finally(() => {
|
||
if (seq !== this.reqSeq) return
|
||
this.loading = false
|
||
if (this.list.length === 0) {
|
||
this.loadStatus = 'nomore'
|
||
} else if (this.list.length >= this.total) {
|
||
this.loadStatus = 'nomore'
|
||
} else {
|
||
this.loadStatus = 'loadmore'
|
||
}
|
||
})
|
||
},
|
||
loadMore() {
|
||
this.hasScrolled = true
|
||
if (this.list.length < this.total && !this.loading) {
|
||
this.pageNo++
|
||
this.loadList()
|
||
}
|
||
},
|
||
goBack() {
|
||
// xuchao: 直接通过链接进入（无历史栈）时回到首页
|
||
const pages = getCurrentPages()
|
||
if (pages.length > 1) {
|
||
uni.navigateBack()
|
||
} else {
|
||
uni.reLaunch({ url: '/pages/index/index' })
|
||
}
|
||
},
|
||
onSearch() {
|
||
this.pageNo = 1
|
||
this.list = []
|
||
this.loadList()
|
||
},
|
||
// xuchao: 换筛选条件即回第 1 页重查（关键词保持不变，两者为 AND）
|
||
onFilterChange(e) {
|
||
this.districtId = e.districtId
|
||
this.category = e.category
|
||
this.onSearch()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
page {
|
||
background-color: #f2f2f7;
|
||
}
|
||
</style>
|
||
<style scoped lang="less">
|
||
|
||
|
||
.search-area {
|
||
background-color: #ffffff;
|
||
padding: 6px 12px 0;
|
||
/* xuchao: 滚动时固定在页面顶部；z-index 高于筛选遮罩(90)，保证面板与选中态不被压住 */
|
||
position: sticky;
|
||
top: 0;
|
||
z-index: 100;
|
||
}
|
||
|
||
.nav-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
}
|
||
|
||
.back-btn {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
height: 44px;
|
||
flex-shrink: 0;
|
||
gap: 2px;
|
||
}
|
||
|
||
.back-text {
|
||
font-size: 14px;
|
||
color: #333333;
|
||
}
|
||
|
||
.search-bar {
|
||
flex: 1;
|
||
display: flex;
|
||
align-items: center;
|
||
height: 44px;
|
||
background-color: #ffffff;
|
||
border: 1px solid #f2f2f7;
|
||
border-radius: 100px;
|
||
padding: 4px 8px;
|
||
gap: 12px;
|
||
}
|
||
|
||
.search-input {
|
||
flex: 1;
|
||
font-size: 16px;
|
||
color: #333;
|
||
}
|
||
|
||
.search-btn {
|
||
background-color: #0088ff;
|
||
color: #ffffff;
|
||
font-size: 14px;
|
||
padding: 4px 10px;
|
||
border-radius: 50px;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.list-area {
|
||
/* xuchao: 顶部 12px 必须是页面灰底（不能放进头部的白底里），否则与白色卡片连成一片看不出间隔 */
|
||
padding: 12px;
|
||
}
|
||
|
||
.venue-card {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
background-color: #ffffff;
|
||
border: 1px solid #f2f2f7;
|
||
border-radius: 6px;
|
||
padding: 24px 12px;
|
||
gap: 12px;
|
||
box-shadow: 0 2px 3px #f2f2f7;
|
||
margin: 12px;
|
||
}
|
||
|
||
.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;
|
||
width: 100%;
|
||
min-width: 0;
|
||
}
|
||
|
||
.card-name {
|
||
font-size: 16px;
|
||
font-weight: 500;
|
||
color: #000000;
|
||
width: 100%;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.card-category {
|
||
font-size: 14px;
|
||
color: #727272;
|
||
margin-top: 8px;
|
||
/* xuchao: 分类为空也预留一行高度，防止卡片内容底部对齐时名称上下跳动 */
|
||
min-height: 20px;
|
||
line-height: 20px;
|
||
}
|
||
|
||
.card-bottom {
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: flex-end;
|
||
margin-top: 8px;
|
||
gap: 8px;
|
||
}
|
||
|
||
.card-address {
|
||
flex: 1;
|
||
font-size: 14px;
|
||
color: #727272;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
min-width: 0;
|
||
}
|
||
|
||
.card-distance {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 2px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.distance-text {
|
||
font-size: 12px;
|
||
color: #727272;
|
||
}
|
||
|
||
.nomore-area {
|
||
padding-top: 24px;
|
||
}
|
||
</style>
|