jacobxu666andClaude Fable 5
cdc09b9f8b
本项目 uview 的 u-loadmore 只认 load-text 对象 prop，原先分开传的 loading-text/loadmore-text/nomore-text 被组件静默忽略，footer 一直显示内置默认文案。 Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
292 lines
6.3 KiB
Vue
292 lines
6.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>
|
||
</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="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>
|
||
export default {
|
||
data() {
|
||
return {
|
||
keyword: '',
|
||
list: [],
|
||
pageNo: 1,
|
||
pageSize: 10,
|
||
total: 0,
|
||
loading: false,
|
||
lng: '',
|
||
lat: '',
|
||
loadStatus: 'loadmore',
|
||
hasScrolled: false,
|
||
reqSeq: 0
|
||
}
|
||
},
|
||
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: {
|
||
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
|
||
this.$u.api.getStoreList(params).then(res => {
|
||
if (seq !== this.reqSeq) return
|
||
if (res.errcode === 0 && res.data) {
|
||
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) {
|
||
uni.navigateTo({ url: '/pages/venue/detail?id=' + item.shopId })
|
||
},
|
||
onSearch() {
|
||
this.pageNo = 1
|
||
this.list = []
|
||
this.loadList()
|
||
}
|
||
}
|
||
}
|
||
</script>
|
||
<style>
|
||
page {
|
||
background-color: #f2f2f7;
|
||
}
|
||
</style>
|
||
<style scoped lang="less">
|
||
|
||
|
||
.search-area {
|
||
background-color: #ffffff;
|
||
padding: 6px 12px;
|
||
}
|
||
|
||
.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 {
|
||
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-img {
|
||
width: 75px;
|
||
height: 75px;
|
||
border-radius: 6px;
|
||
flex-shrink: 0;
|
||
}
|
||
|
||
.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;
|
||
}
|
||
|
||
.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>
|