VAVABUY/pagesBuyer/shop/components/shop_item.vue

<template>
  <view class="shop-item" @click="handleClick">
    <!-- 店铺头部信息 -->
    <view class="shop-header">
      <view class="shop-avatar">
        <image :src="item.logo" mode="aspectFill" />
      </view>
      <view class="shop-info">
        <view class="shop-name">{{ item.name }}</view>
        <view class="shop-visits">
          <image
            class="img"
            src="/static/seller/address.png"
            model="fixwidth"
          ></image>
          <text>{{ item.distance }}km</text>
        </view>
      </view>
      <view class="shop-arrow">
        <up-rate
          readonly
          :count="5"
          size="16"
          active-color="var(--red)"
          v-model="item.score"
        ></up-rate>
      </view>
    </view>

    <!-- 商品横向滚动列表 -->
    <view class="products-scroll">
      <up-scroll-list class="scroll-container" :indicator="false">
        <view class="products-list">
          <view
            v-for="product in item.goods"
            :key="product.id"
            class="product-item"
            @click.stop="handleProductClick(product)"
          >
            <view class="product-image">
              <image :src="product.picurl" mode="aspectFill" />
            </view>
            <view class="product-info">
              <view class="product-desc">{{ product.goodsName }}</view>
              <view class="product-price">¥{{ product.price }}</view>
            </view>
          </view>
        </view>
      </up-scroll-list>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits } from "vue";

const props = defineProps({
  item: {
    type: Object,
    required: true,
  },
});

const emit = defineEmits(["click", "productClick"]);

const handleClick = () => {
  emit("click", props.item);
};

const handleProductClick = (product) => {
  emit("productClick", product);
  // 跳转到商品详情页
  uni.navigateTo({
    url: `/pagesBuyer/shop/detail?id=${product.id}`,
  });
};
</script>

<style lang="less" scoped>
@import url("@/style.less");

.shop-item {
  width: 100%;
  background: var(--light);
  margin-bottom: 24rpx;
  padding: 14rpx 30rpx;
  box-sizing: border-box;

  .shop-header {
    display: flex;
    align-items: center;
    margin-bottom: 30rpx;

    .shop-avatar {
      width: 66rpx;
      height: 66rpx;
      border-radius: 50%;
      overflow: hidden;
      margin-right: 10rpx;

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

    .shop-info {
      flex: 1;

      .shop-name {
        font-size: 28rpx;
        font-weight: bold;
        color: var(--black);
        margin-bottom: 8rpx;
      }

      .shop-visits {
        display: flex;
        font-size: 24rpx;
        color: var(--text-01);
        line-height: 24rpx;
        .img {
          width: 18rpx;
          height: 24rpx;
          margin-right: 8rpx;
        }
      }
    }

    .shop-arrow {
      .icon-right {
        color: var(--text-01);
        font-size: 24rpx;
      }
    }
  }

  .products-scroll {
    width: 100%;
    overflow-x: auto;

    .scroll-container {
      display: flex;
      flex-direction: row;
    }

    .products-list {
      display: flex;
      gap: 20rpx;
    }

    .product-item {
      width: 200rpx;

      .product-image {
        width: 100%;
        height: 180rpx;
        position: relative;

        image {
          width: 100%;
          height: 100%;
          border-radius: 16rpx;
        }
      }

      .product-info {
        padding: 14rpx 0;

        .product-price {
          font-size: 24rpx;
          font-weight: bold;
          color: var(--red);
        }

        .product-desc {
          font-size: 20rpx;
          color: var(--text-01);
          line-height: 1.4;
          .ellipsis(1);
          margin-bottom: 8rpx;
        }
      }
    }
  }
}
</style>