213 lines
5.2 KiB
Vue
213 lines
5.2 KiB
Vue
<template>
|
|
<view class="shop-list">
|
|
<view class="shop-card" v-for="shop in shops" :key="shop.id">
|
|
<image :src="shop.image" class="shop-img"></image>
|
|
<view class="shop-info">
|
|
<view class="shop-title">{{ shop.title }}</view>
|
|
<view class="rating-count">{{ shop.ratingCount }}条评价</view>
|
|
<view class="shop-rating">
|
|
<view class="rating-stars">
|
|
<text class="star">★</text>
|
|
<text class="rating-score">{{ shop.rating }}</text>
|
|
</view>
|
|
<view class="distance">
|
|
<text class="distance-value">{{ shop.distance }}km</text>
|
|
</view>
|
|
<view class="fans">
|
|
<text class="fans-count">{{ shop.fans }}个粉丝</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
<button class="enter-shop-btn" @click="goShop">进店</button>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import {
|
|
request,
|
|
picUrl,
|
|
NavgateTo,
|
|
menuButtonInfo,
|
|
} from "../../../utils/index";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
shops: [
|
|
{
|
|
id: 1,
|
|
image: "https://static.hshuishang.com/test.png",
|
|
title: "专业到家服务",
|
|
ratingCount: 5,
|
|
rating: 4.8,
|
|
distance: 3.0,
|
|
fans: 120,
|
|
},
|
|
{
|
|
id: 2,
|
|
image: "https://static.hshuishang.com/test.png",
|
|
title: "专业到家服务",
|
|
ratingCount: 5,
|
|
rating: 4.8,
|
|
distance: 3.0,
|
|
fans: 120,
|
|
},
|
|
{
|
|
id: 3,
|
|
image: "https://static.hshuishang.com/test.png",
|
|
title: "专业到家服务",
|
|
ratingCount: 5,
|
|
rating: 4.8,
|
|
distance: 3.0,
|
|
fans: 120,
|
|
},
|
|
{
|
|
id: 4,
|
|
image: "https://static.hshuishang.com/test.png",
|
|
title: "专业到家服务",
|
|
ratingCount: 5,
|
|
rating: 4.8,
|
|
distance: 3.0,
|
|
fans: 120,
|
|
},
|
|
{
|
|
id: 5,
|
|
image: "https://static.hshuishang.com/test.png",
|
|
title: "专业到家服务",
|
|
ratingCount: 5,
|
|
rating: 4.8,
|
|
distance: 3.0,
|
|
fans: 120,
|
|
},
|
|
{
|
|
id: 6,
|
|
image: "https://static.hshuishang.com/test.png",
|
|
title: "专业到家服务",
|
|
ratingCount: 5,
|
|
rating: 4.8,
|
|
distance: 3.0,
|
|
fans: 120,
|
|
},
|
|
{
|
|
id: 7,
|
|
image: "https://static.hshuishang.com/test.png",
|
|
title: "专业到家服务",
|
|
ratingCount: 5,
|
|
rating: 4.8,
|
|
distance: 3.0,
|
|
fans: 120,
|
|
},
|
|
{
|
|
id: 7,
|
|
image: "https://static.hshuishang.com/test.png",
|
|
title: "专业到家服务",
|
|
ratingCount: 5,
|
|
rating: 4.8,
|
|
distance: 3.0,
|
|
fans: 120,
|
|
},
|
|
{
|
|
id: 7,
|
|
image: "https://static.hshuishang.com/test.png",
|
|
title: "专业到家服务",
|
|
ratingCount: 5,
|
|
rating: 4.8,
|
|
distance: 3.0,
|
|
fans: 120,
|
|
},
|
|
{
|
|
id: 7,
|
|
image: "https://static.hshuishang.com/test.png",
|
|
title: "专业到家服务",
|
|
ratingCount: 5,
|
|
rating: 4.8,
|
|
distance: 3.0,
|
|
fans: 120,
|
|
},
|
|
{
|
|
id: 7,
|
|
image: "https://static.hshuishang.com/test.png",
|
|
title: "专业到家服务",
|
|
ratingCount: 5,
|
|
rating: 4.8,
|
|
distance: 3.0,
|
|
fans: 120,
|
|
},
|
|
{
|
|
id: 7,
|
|
image: "https://static.hshuishang.com/test.png",
|
|
title: "专业到家服务",
|
|
ratingCount: 5,
|
|
rating: 4.8,
|
|
distance: 3.0,
|
|
fans: 120,
|
|
},
|
|
{
|
|
id: 7,
|
|
image: "https://static.hshuishang.com/test.png",
|
|
title: "专业到家服务",
|
|
ratingCount: 5,
|
|
rating: 4.8,
|
|
distance: 3.0,
|
|
fans: 120,
|
|
},
|
|
{
|
|
id: 7,
|
|
image: "https://static.hshuishang.com/test.png",
|
|
title: "专业到家服务",
|
|
ratingCount: 5,
|
|
rating: 4.8,
|
|
distance: 3.0,
|
|
fans: 120,
|
|
},
|
|
{
|
|
id: 7,
|
|
image: "https://static.hshuishang.com/test.png",
|
|
title: "专业到家服务",
|
|
ratingCount: 5,
|
|
rating: 4.8,
|
|
distance: 3.0,
|
|
fans: 120,
|
|
},
|
|
{
|
|
id: 7,
|
|
image: "https://static.hshuishang.com/test.png",
|
|
title: "专业到家服务",
|
|
ratingCount: 5,
|
|
rating: 4.8,
|
|
distance: 3.0,
|
|
fans: 120,
|
|
},
|
|
{
|
|
id: 7,
|
|
image: "https://static.hshuishang.com/test.png",
|
|
title: "专业到家服务",
|
|
ratingCount: 5,
|
|
rating: 4.8,
|
|
distance: 3.0,
|
|
fans: 120,
|
|
},
|
|
{
|
|
id: 7,
|
|
image: "https://static.hshuishang.com/test.png",
|
|
title: "专业到家服务",
|
|
ratingCount: 5,
|
|
rating: 4.8,
|
|
distance: 3.0,
|
|
fans: 120,
|
|
},
|
|
],
|
|
};
|
|
},
|
|
methods: {
|
|
goShop() {
|
|
NavgateTo("../vendor/index");
|
|
},
|
|
},
|
|
};
|
|
</script>
|
|
|
|
<style>
|
|
@import url("./index.css");
|
|
</style> |