hhrs/pages/discount/discount.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>

		<!-- 商户列表 -->
		<scroll-view class="list-area" scroll-y @scrolltolower="loadMore" :lower-threshold="100">
			<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" :loading-text="'加载中...'" :loadmore-text="''" :nomore-text="'我也是有底线的'" />
			</view>
		</scroll-view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			keyword: '',
			list: [],
			pageNo: 1,
			pageSize: 10,
			total: 0,
			loading: false,
			lng: '',
			lat: '',
			loadStatus: 'loadmore',
			hasScrolled: false
		}
	},
	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()
	},
	methods: {
		loadList() {
			if (this.loading) return
			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 (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
				}
			}).finally(() => {
				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: scroll-view 默认 content-box，100%+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>