uniapp-ZHSQ/packages/homeServer/searchShop/index.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://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
          title: "专业到家服务",
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120,
        },
        {
          id: 2,
          image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
          title: "专业到家服务",
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120,
        },
        {
          id: 3,
          image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
          title: "专业到家服务",
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120,
        },
        {
          id: 4,
          image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
          title: "专业到家服务",
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120,
        },
        {
          id: 5,
          image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
          title: "专业到家服务",
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120,
        },
        {
          id: 6,
          image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
          title: "专业到家服务",
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120,
        },
        {
          id: 7,
          image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
          title: "专业到家服务",
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120,
        },
        {
          id: 7,
          image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
          title: "专业到家服务",
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120,
        },
        {
          id: 7,
          image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
          title: "专业到家服务",
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120,
        },
        {
          id: 7,
          image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
          title: "专业到家服务",
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120,
        },
        {
          id: 7,
          image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
          title: "专业到家服务",
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120,
        },
        {
          id: 7,
          image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
          title: "专业到家服务",
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120,
        },
        {
          id: 7,
          image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
          title: "专业到家服务",
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120,
        },
        {
          id: 7,
          image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
          title: "专业到家服务",
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120,
        },
        {
          id: 7,
          image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
          title: "专业到家服务",
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120,
        },
        {
          id: 7,
          image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
          title: "专业到家服务",
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120,
        },
        {
          id: 7,
          image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.com/test.png",
          title: "专业到家服务",
          ratingCount: 5,
          rating: 4.8,
          distance: 3.0,
          fans: 120,
        },
        {
          id: 7,
          image: "https://wechat-img-file.oss-cn-beijing.aliyuncs.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>