<template>
	<view class="container">
		<view v-for="(item, index) in list" :key="index" class="shop-card" @click="goPage('aroundDetail')">
			<u-cell :border="false" class="custom-cell">
				<image slot="icon" :src="item.image" mode="aspectFill" class="cell-image"></image>
				<view slot="title" class="cell-right">
					<view class="shop-name">{{ item.name }}</view>
					<view class="shop-info">
						<!-- <text>★ {{ item.rating }} </text> -->
						<text>人均¥{{ item.perCapita }}</text>
						<text class="distance">直线{{ item.distance }}m</text>
					</view>
					<view class="desc-container">
						<text class="desc">{{ "“" + item.desc + "”" }}</text>
					</view>
				</view>
			</u-cell>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				list: [{
						image: "/static/imgs/service/hema.png", // 假设图片放在 static 目录，根据实际路径调整
						name: '肯德基（南通紫琅店）',
						rating: 4.8,
						monthSales: 4683,
						perCapita: 30,
						distance: 221,
						desc: '超棒，同学们都说好吃'
					},
					{
						image: "/static/imgs/service/hema.png",
						name: '汉堡王（南通紫琅店）',
						rating: 4.8,
						monthSales: 4683,
						perCapita: 30,
						distance: 221,
						desc: '超棒，同学们都说好吃'
					},
					{
						image: "/static/imgs/service/hema.png",
						name: '瑞幸咖啡（南通紫琅店）',
						rating: 4.8,
						monthSales: 4683,
						perCapita: 30,
						distance: 221,
						desc: '超棒，同学们都说不错'
					},
					{
						image: "/static/imgs/service/hema.png",
						name: '绿茶餐厅',
						rating: 4.8,
						monthSales: 4683,
						perCapita: 30,
						distance: 221,
						desc: '超棒，同学们都说好吃'
					}
				]
			};
		},
		onLoad() {
		
		},
		methods: {
			// 跳转不同页面
			goPage(page) {
				console.log("==进来", page)
				uni.navigateTo({
					url: `/pages/${page}/index`,
					success: () => {
						console.log('切换到tabBar页面成功');
					},
					fail: (err) => {
						console.error('切换到tabBar页面失败:', err);
					}
				});
			},
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		padding: 10px;

		.shop-card {
			margin-bottom: 15px;
			border-radius: 10px;
			box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
			background-color: #fff;
		}

		.custom-cell {
			display: flex;
			align-items: center;
			padding: 12px 15px;
		}

		.cell-image {
			width: 80px;
			height: 80px;
			border-radius: 8px;
		}

		.cell-right {
			display: flex;
			flex-direction: column;
			margin-left: 10px;

			.shop-name {
				font-size: 16px;
				font-weight: bold;
				margin-bottom: 4px;
			}

			.shop-info {
				font-size: 12px;
				color: #999;
				margin-bottom: 4px;
				display: flex;
				flex-wrap: wrap;

				.distance {
					margin-left: auto;
				}
			}

			.desc-container {
				display: inline-block;
				margin-top: 5px;
			}

			.desc {
				font-size: 12px;
				padding: 5px 10px;
				color: rgba(128, 128, 128, 1);
				background: rgba(229, 229, 229, 0.5);
				border-radius: 4px;
				display: inline-block;
			}
		}
	}
</style>