VAVABUY/pagesBuyer/shop/components/shop_item.vue

<template>
  <view class="shop-item" @click="toShopDetail">
    <view class="shop-avatar">
      <image :src="item.avatar" class="avatar-img" />
      <view class="shop-status" :class="item.status">
        {{ item.status === "online" ? "营业中" : "休息中" }}
      </view>
    </view>

    <view class="shop-info">
      <view class="shop-name">{{ item.name }}</view>
      <view class="shop-desc">{{ item.description }}</view>
      <view class="shop-stats">
        <view class="stat-item">
          <text class="stat-label">评分:</text>
          <text class="stat-value">{{ item.rating }}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">销量:</text>
          <text class="stat-value">{{ item.sales }}</text>
        </view>
        <view class="stat-item">
          <text class="stat-label">距离:</text>
          <text class="stat-value">{{ item.distance }}</text>
        </view>
      </view>
      <view class="shop-tags">
        <text class="tag" v-for="tag in item.tags" :key="tag">
          {{ tag }}
        </text>
      </view>
    </view>

    <view class="shop-arrow">
      <i class="icon-font icon-arrow-right"></i>
    </view>
  </view>
</template>

<script setup>
const props = defineProps({
  item: {
    type: Object,
    default: () => ({}),
  },
});

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

const toShopDetail = () => {
  emit("click", props.item);
};
</script>

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

.shop-item {
  display: flex;
  align-items: center;
  background: var(--light);
  border-radius: 20rpx;
  padding: 24rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);

  .shop-avatar {
    position: relative;
    margin-right: 24rpx;

    .avatar-img {
      width: 120rpx;
      height: 120rpx;
      border-radius: 20rpx;
    }

    .shop-status {
      position: absolute;
      bottom: -8rpx;
      left: 50%;
      transform: translateX(-50%);
      font-size: 20rpx;
      padding: 4rpx 12rpx;
      border-radius: 20rpx;
      color: var(--light);

      &.online {
        background: var(--success);
      }

      &.offline {
        background: var(--text-01);
      }
    }
  }

  .shop-info {
    flex: 1;
    display: flex;
    flex-direction: column;

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

    .shop-desc {
      font-size: 24rpx;
      color: var(--text-01);
      margin-bottom: 16rpx;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    .shop-stats {
      display: flex;
      gap: 24rpx;
      margin-bottom: 12rpx;

      .stat-item {
        display: flex;
        align-items: center;

        .stat-label {
          font-size: 22rpx;
          color: var(--text-01);
          margin-right: 4rpx;
        }

        .stat-value {
          font-size: 22rpx;
          color: var(--black);
          font-weight: bold;
        }
      }
    }

    .shop-tags {
      display: flex;
      gap: 8rpx;
      flex-wrap: wrap;

      .tag {
        font-size: 20rpx;
        color: var(--primary);
        background: rgba(255, 107, 107, 0.1);
        padding: 4rpx 12rpx;
        border-radius: 12rpx;
      }
    }
  }

  .shop-arrow {
    margin-left: 16rpx;

    .icon-arrow-right {
      font-size: 24rpx;
      color: var(--text-01);
    }
  }
}
</style>