jacobxu666andClaude Fable 5
eb01701709
- 三个列表（文旅场馆/商户折扣/权益待使用）缩略图左上角增加所属地区角标： 缩略图外套 .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>
358 lines
8.9 KiB
Vue
358 lines
8.9 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" @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>
|
||
<view class="card-info">
|
||
<text class="card-name">{{ item.name }}</text>
|
||
<text class="card-category">{{ item.category }}</text>
|
||
<!-- xuchao: 地址与距离同属一个模块 -->
|
||
<view class="card-address-row">
|
||
<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 hasLoc = uni.getStorageSync('lng') && uni.getStorageSync('lat')
|
||
if (hasLoc) {
|
||
this.lng = uni.getStorageSync('lng')
|
||
this.lat = uni.getStorageSync('lat')
|
||
this.loadList()
|
||
} else {
|
||
// xuchao: 定位仅在首页触发过，直接进本页无缓存时主动获取一次，保证距离列可展示
|
||
import('@/common/location.js').then(module => module.default.getLocation())
|
||
.then(({ lng, lat }) => {
|
||
this.lng = lng
|
||
this.lat = lat
|
||
})
|
||
.catch(() => {})
|
||
.finally(() => 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: 2
|
||
}
|
||
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' })
|
||
}
|
||
},
|
||
goDetail(item) {
|
||
// xuchao: type=2 标记商户折扣入口，详情页据此展示商品信息+商户优惠模块
|
||
uni.navigateTo({ url: '/pages/venue/detail?id=' + item.shopId + '&type=2' })
|
||
},
|
||
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;
|
||
// xuchao: border-box 防止 padding 撑出页面横向滚动
|
||
box-sizing: border-box;
|
||
}
|
||
|
||
.venue-card {
|
||
display: flex;
|
||
align-items: flex-end;
|
||
box-sizing: border-box;
|
||
background-color: #ffffff;
|
||
border: 1px solid #f2f2f7;
|
||
border-radius: 6px;
|
||
width: 702rpx;
|
||
padding: 24px 12px;
|
||
gap: 12px;
|
||
box-shadow: 0 2px 3px #f2f2f7;
|
||
margin-bottom: 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: min-width:0 允许 flex 子项收缩到内容宽度以下，配合 nowrap 文本出省略号
|
||
min-width: 0;
|
||
display: flex;
|
||
flex-direction: column;
|
||
gap: 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-address-row {
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 8px;
|
||
width: 100%;
|
||
margin-top: 8px;
|
||
}
|
||
|
||
.card-address {
|
||
flex: 1;
|
||
min-width: 0;
|
||
font-size: 14px;
|
||
color: #727272;
|
||
overflow: hidden;
|
||
text-overflow: ellipsis;
|
||
white-space: nowrap;
|
||
}
|
||
|
||
.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>
|