applet/pages/nearbyShop/components/ShopItem.vue

<template>
  <view class="item" @click.stop="goDetails(v)">
    <view class="shop-img">
      <image class="u-skeleton-fillet" :src="v.image" mode="aspectFill"></image>
    </view>
    <view class="right">
      <view class="title u-skeleton-fillet">{{
        v.businessName || "加载中"
      }}</view>
      <view class="score-box u-skeleton-fillet">
        <view class="score">
          <rate :value="Math.round(v.average || 0)"></rate>
        </view>
        <text class="score-text"
          >{{ v.average ? Number(v.average).toFixed(2) : "" }}分</text
        >
        <text class="ju"
          >距离：{{ Math.round((v.distance / 1000) * 100) / 100 }}KM</text
        >
      </view>
      <view class="address-box u-skeleton-fillet">
        <view class="left">
          <uv-icon name="map" color="#999999" size="34rpx"></uv-icon>
          <view class="district">{{ v.address || "商户暂无地理位置" }}</view>
        </view>
        <view class="goShopping">
          <text class="iconfont">&#xe642;</text>
          <text class="text">去逛逛</text>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";

const props = defineProps({
  v: {
    type: Object,
    default: () => {},
  },
});

// const emit = defineEmits(["click"]);

const goDetails = (v) => {
  uni.navigateTo({
    url: "/pages/shop/index?businessId=" + v.businessId,
  });
  // emit("click", v);
};
</script>

<style scoped lang="scss">
.item {
  display: flex;
  align-items: center;
  padding: 25rpx 0;
  // border-bottom: 1rpx solid #e6e6e6;

  .shop-img {
    width: 162rpx;
    height: 158rpx;
    margin-right: 40rpx;
    border-radius: 10rpx;
    overflow: hidden;
    flex-shrink: 0;

    image {
      width: 100%;
      height: 100%;
    }
  }

  .right {
    flex: 1;
    width: 0;

    .score-box,
    .address-box,
    .location2-box {
      display: flex;
      align-items: center;
      font-size: 24rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      font-weight: 400;
    }

    .location1,
    .location2 {
      width: 20rpx;
      height: 27rpx;
      flex-shrink: 0;
      margin-right: 9rpx;
    }

    .light-start,
    .startt {
      width: 30rpx;
      height: 30rpx;
      margin-right: 12rpx;
    }

    .title {
      margin-bottom: 18rpx;
      font-size: 28rpx;
      font-family: PingFang SC, PingFang SC-Regular;
      color: #1a1a1a;
    }

    .score-box {
      display: flex;
      align-items: normal;
      margin-bottom: 10rpx;
      font-family: PingFang SC, PingFang SC-Semibold;
      color: #333333;

      .score {
        flex-shrink: 0;
      }

      .score-text {
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC-Medium;
        font-weight: 500;
        text-align: left;
        color: #333333;
        flex-shrink: 0;
      }

      .ju {
        margin-left: 23rpx;
        font-size: 24rpx;
        color: #808080;
        text-align: left;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .address-box {
      // margin-bottom: 10rpx;
      font-family: PingFang SC;
      color: #666666;
      justify-content: space-between;

      .left {
        flex: 1;
        width: 0;
        display: flex;
        align-items: center;
        font-size: 24rpx;
        font-family: PingFang SC, PingFang SC-Regular;
        font-weight: 400;
        text-align: left;
        color: #333333;
      }

      .goShopping {
        display: flex;
        align-items: center;
        font-size: 40rpx;
        color: #fa6138;
        flex-shrink: 0;

        .text {
          font-size: 24rpx;
          font-family: PingFang SC, PingFang SC-Medium;
          font-weight: 500;
          text-align: left;
          color: #666666;
        }
      }

      .district {
        color: #1a1a1a;
        margin-right: 40rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }

    .location2-box {
      color: #333333;

      view {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
  }
}
</style>