VAVABUY/pagesBuyer/home/components/product_item.vue

<template>
  <view class="product-item" @click="handleClick">
    <view class="product-image">
      <image :src="item.picurl" mode="aspectFill" />
      <!-- 视频播放图标 -->
      <view v-if="item.isVideo" class="play-icon">
        <i class="icon-font icon-play"></i>
      </view>
      <!-- 收藏图标 -->
      <view class="favorite-icon" @click.stop="toggleFavorite">
        <i class="icon-font icon-star" :class="{ active: item.iscollect }"></i>
      </view>
    </view>
    <view class="product-info">
      <view class="product-title">{{ item.goodsName }}</view>
      <view class="product-tag" v-if="item.tag">{{ item.tag }}</view>
      <view class="product-price">
        <text class="current-price">{{ symbol }}{{ item.price }}</text>
        <text class="original-price" v-if="item.originalprice"
          >{{ symbol }}{{ item.originalprice }}</text
        >
      </view>
    </view>
  </view>
</template>

<script setup>
import { defineProps, defineEmits, computed } from "vue";
import { useSystemStore } from "@/store";

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

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

const useSystem = useSystemStore();
const symbol = computed(() => useSystem.getSymbol.symbol);

const handleClick = () => {
  emit("click", props.item);
  // 跳转到商品详情页
  uni.navigateTo({
    url: `/pagesBuyer/shop/detail?id=${props.item.id}`,
  });
};

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

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

.product-item {
  background: var(--light);
  border-radius: 16rpx;
  overflow: hidden;

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

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

    .play-icon {
      position: absolute;
      top: 20rpx;
      left: 20rpx;
      width: 60rpx;
      height: 60rpx;
      background: rgba(0, 0, 0, 0.6);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      .icon-play {
        color: white;
        font-size: 32rpx;
      }
    }

    .favorite-icon {
      position: absolute;
      bottom: 20rpx;
      right: 20rpx;
      width: 60rpx;
      height: 60rpx;
      background: rgba(255, 255, 255, 0.9);
      border-radius: 50%;
      display: flex;
      align-items: center;
      justify-content: center;

      .icon-star {
        color: var(--text-01);
        font-size: 32rpx;

        &.active {
          color: var(--primary);
        }
      }
    }
  }

  .product-info {
    padding: 24rpx;

    .product-title {
      font-size: 28rpx;
      color: var(--black);
      line-height: 1.4;
      margin-bottom: 12rpx;
      .ellipsis(2);
    }

    .product-tag {
      font-size: 24rpx;
      color: var(--primary);
      margin-bottom: 12rpx;
      background: rgba(255, 107, 53, 0.1);
      padding: 4rpx 12rpx;
      border-radius: 8rpx;
      display: inline-block;
    }

    .product-price {
      display: flex;
      align-items: baseline;
      gap: 12rpx;
      .current-price {
        font-size: 32rpx;
        font-weight: bold;
        color: var(--red);
      }

      .original-price {
        font-size: 24rpx;
        color: var(--text-01);
        text-decoration: line-through;
      }
    }
  }
}
</style>