JinShan_uniapp/pages/aroundList/index.vue

<template>
	<view class="container">
		<view v-for="(item, index) in list" :key="index" class="shop-card" @click="goDetail(item.id,item.distance)">
			<u-cell :border="false" class="custom-cell">
				<image slot="icon" :src="`${IMAGE_BASE_URL}`+item.storeCover" mode="aspectFill" class="cell-image"></image>
				<view slot="title" class="cell-right">
					<view class="shop-name">{{ item.storeName }}</view>
					<view class="shop-info">
						<text class="price">{{ item.price > 0 ? `人均¥${item.price}` : '免费开放' }}</text>
						<text class="distance">{{ formatDistance(item.distance) }}</text>
					</view>
					<view class="shop-desc" v-if="item.content">
						<text>{{ truncateContent(item.content) }}</text>
					</view>
					<view class="open-time" v-if="item.openAt">
						<u-icon name="clock" size="24" color="#8a8a8a"></u-icon>
						<text>开放时间：{{ item.openAt }}</text>
					</view>
				</view>
			</u-cell>
		</view>
	</view>
</template>

<script>
	import { get, post } from '@/utils/request';
	import { IMAGE_BASE_URL, BASE_URL } from '@/utils/config';
	
	export default {
		data() {
			return {
				IMAGE_BASE_URL,
				Id: null,
				latitude: null,
				longitude: null,
				list: []
			};
		},
		onLoad(options) {
			if (options && options.Id && options.latitude && options.longitude) { 
				this.Id = options.Id;
				this.longitude = options.longitude;
				this.latitude = options.latitude;
			}
		},
		mounted() {
			this.getAroundList();
		},
		methods: {
			async getAroundList() {
				let params = {
					current: 1,
					pageSize: 100,
					longitude: this.longitude,
					latitude: this.latitude,
					typeId: this.Id,
				}
				try {
					const res = await get('/api/v1/apps/surrounding', params);
					if (!res || !res.success) {
						throw new Error('获取列表失败');
					}
					this.list = res.data || [];
				} catch (err) {
					console.error('获取列表失败:', err);
					uni.showToast({
						title: '加载失败',
						icon: 'none'
					});
				}
			},
			goDetail(id, local) {
				uni.navigateTo({
					url: `/pages/aroundDetail/index?Id=${id}&local=${local}`,
				});
			},
			formatDistance(distance) {
				if (distance >= 1000) {
					return `距离${(distance / 1000).toFixed(1)}km`;
				}
				return `距离${Math.round(distance)}m`;
			},
			truncateContent(content) {
				if (content.length > 60) {
					return content.substring(0, 60) + '...';
				}
				return content;
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 20rpx;
		background-color: #f8f9fa;
		min-height: 100vh;
	}

	.shop-card {
		margin-bottom: 24rpx;
		border-radius: 16rpx;
		background-color: #fff;
		box-shadow: 0 4rpx 16rpx rgba(0, 0, 0, 0.05);
		overflow: hidden;
		transition: all 0.2s ease;
		
		&:active {
			transform: scale(0.98);
			box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1);
		}
	}

	.custom-cell {
		padding: 0;
	}

	.cell-image {
		width: 240rpx;
		height: 240rpx;
		flex-shrink: 0;
		background-color: #f5f5f5;
	}

	.cell-right {
		padding: 24rpx;
		flex: 1;
	}

	.shop-name {
		font-size: 32rpx;
		font-weight: 600;
		color: #2c3e50;
		margin-bottom: 12rpx;
		line-height: 1.4;
	}

	.shop-info {
		display: flex;
		justify-content: space-between;
		align-items: center;
		margin-bottom: 12rpx;
		font-size: 26rpx;
		
		.price {
			color: #3498db;
			font-weight: 500;
			background-color: rgba(52, 152, 219, 0.1);
			padding: 4rpx 12rpx;
			border-radius: 6rpx;
		}
		
		.distance {
			color: #7f8c8d;
			font-size: 24rpx;
			display: flex;
			align-items: center;
			
			&::before {
				content: '';
				display: inline-block;
				width: 24rpx;
				height: 24rpx;
				background-image: url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 24 24" fill="%237f8c8d"><path d="M12 2C8.13 2 5 5.13 5 9c0 5.25 7 13 7 13s7-7.75 7-13c0-3.87-3.13-7-7-7zm0 9.5c-1.38 0-2.5-1.12-2.5-2.5s1.12-2.5 2.5-2.5 2.5 1.12 2.5 2.5-1.12 2.5-2.5 2.5z"/></svg>');
				background-size: contain;
				background-repeat: no-repeat;
				margin-right: 6rpx;
			}
		}
	}

	.shop-desc {
		font-size: 26rpx;
		color: #555;
		line-height: 1.6;
		margin: 12rpx 0;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 2;
		overflow: hidden;
		text-overflow: ellipsis;
	}

	.open-time {
		display: flex;
		align-items: center;
		font-size: 24rpx;
		color: #7f8c8d;
		margin-top: 8rpx;
		
		.u-icon {
			margin-right: 8rpx;
		}
	}
</style>