JinShan_uniapp/pages/neighbor/index.vue

<template>
	<view class="container">
		<view class="nearby-page">

			<!-- 附近美食模块 -->
			<view class="section shadow" v-for="(item,index) in aroundList" :key="index">
				<view class="section-header" @click="goPage('aroundList')">
					<view class="section-title">{{item.label}}</view>
					<u-icon name="arrow-right" size="20" color="#999"></u-icon>
				</view>
				<view class="goods-list">
					<view class="goods-item" v-for="i in item.serviceList" @click="goDetail(i.id,i.distance)">
						<image class="goods-img" :src="`${IMAGE_BASE_URL}`+i.storeCover"></image>
						<text class="goods-name">{{ i.storeName }}</text>
						<view class="goods-distance">
							<u-icon name="map" size="18" color="#c6d8fa"></u-icon>
							{{ i.distance + '米'}}
						</view>
					</view>
				</view>
			</view>

		</view>
		<Footer></Footer>
	</view>
</template>

<script>
	import Footer from '@/components/footer_common.vue';
	import {
		get,
		post
	} from '@/utils/request';
	import {
		IMAGE_BASE_URL,
		BASE_URL
	} from '@/utils/config';
	import {
		formatTime,
		formatRelativeTime
	} from '@/utils/timeFormat';

	export default {
		components: {
			Footer
		},
		data() {
			return {
				IMAGE_BASE_URL,
				aroundList:[],
			}
		},
		onLoad() {

		},
		mounted() {
			this.surroundingList();
		},
		methods: {
			// 跳转不同页面
			goDetail(id,local) {
				uni.navigateTo({
					url: `/pages/aroundDetail/index?Id=${id}&local=${local}`,
				});
			},
			async surroundingList() {
				const position = await this.getCurrentPosition();
				let params = {
					current: 1,
					pageSize: 10,
					longitude: position.longitude,
					latitude: position.latitude,

					// statusArray:"2,3,4",
				};
				try {
					const res = await get('/api/v1/apps/surrounding-type', params);
					if (!res || !res.success) {
						throw new Error('获取周边服务失败');
					}
					console.log("---res", res)
			        this.aroundList = [...res.data];
					// res.data.forEach(item => {
					// 	let imgUrl = item.cover;
					// 	if (!imgUrl.startsWith('http') && !imgUrl.startsWith('https')) {
					// 		item.cover = IMAGE_BASE_URL + imgUrl;
					// 	}
					// })
					// this.activityList = [...res.data];

				} catch (err) {
					console.error('获取周边服务失败:', err);
				}

			},
			getCurrentPosition() {
			    return new Promise((resolve, reject) => {
			        uni.getLocation({
			            type: 'wgs84',
			            success: (res) => {
			                console.log('当前位置:', res);
			                resolve({
			                    longitude: res.longitude,
			                    latitude: res.latitude
			                });  
			            },
			            fail: (err) => {
			                console.error('获取位置失败:', err);
			                uni.showToast({
			                    title: '获取位置失败，请检查位置权限设置',
			                    icon: 'none'
			                });
			                reject(err);
			            }
			        });
			    });
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		background: #f8faff;
		padding-bottom: 400rpx;

		.nearby-page {
			padding: 20rpx;
			width: 100%;
			box-sizing: border-box;
		}

		// 优化后的section样式
		.section {
			margin: 30rpx 0; // 增大上下间距
			padding: 20rpx;
			border-radius: 16rpx; // 圆角更圆润
			background-color: #fff;
			transition: transform 0.3s ease; // 添加过渡效果

			// 鼠标悬停效果
			&:hover {
				transform: translateY(-5rpx);
			}
		}

		// 添加阴影效果
		.shadow {
			box-shadow: 0 8rpx 16rpx rgba(0, 0, 0, 0.08); // 更细腻的阴影
		}

		.section-header {
			display: flex;
			align-items: center;
			justify-content: space-between;
			margin-bottom: 20rpx;
			padding: 0 10rpx;
		}

		.section-title {
			font-size: 34rpx;
			font-weight: 600;
			color: #333;
			/* 修正后的边框样式 */
			border-left: 10rpx solid rgba(141, 186, 252, 0.55);
			padding-left: 16rpx;
		}

		.goods-list {
			display: flex;
			flex-wrap: wrap;
			// justify-content:;
		}

		.goods-item {
			width: 23%;
			text-align: center;
			margin-bottom: 20rpx;
		}

		.goods-img {
			width: 150rpx;
			height: 150rpx;
			border-radius: 12rpx;
			// margin-bottom: 10rpx;
			object-fit: cover; // 确保图片比例正确
		}

		.goods-name {
			font-size: 24rpx;
			display: block;
			margin-bottom: 6rpx;
			color: #333;
			white-space: nowrap;
			overflow: hidden;
			text-overflow: ellipsis;
			text-align: left;
		}

		// 新增样式：使图标和文字在同一行显示
		.goods-distance {
			font-size: 22rpx;
			color: #999;
			display: flex;
			justify-content: flex-end;
			align-items: center;
			text-align: right;

			// 调整图标与文字之间的间距
			.u-icon {
				margin-right: 6rpx;
				font-size: 18rpx;
			}
		}
	}
</style>