147 lines
3.2 KiB
Vue
147 lines
3.2 KiB
Vue
<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> |