mrr.sj.front/pages/selfOperated/components/self-card-list.vue

<template>
  <!-- 商品列表容器：2列flex布局 -->
  <view class="goods-list">
    <!-- 遍历商品数组 -->
    <view class="goods-item" v-for="(item, index) in goodsList" :key="index" @click="onselfClick(item)">
      <!-- 自营标签（绝对定位） -->
      <view class="self-tag flex-row-center-center">自营</view>
      <!-- 商品图片 -->
	  <view class="goods-img">
		   <image class="goods-img" :src="item.photo[0]" mode="aspectFill"></image>
	  </view>
     
      <!-- 商品名称 -->
      <view class="goods-name">{{ item.title }}</view>
      <!-- 价格+销量区域 -->
      <view class="goods-footer">
        <!-- 价格区域：根据 hasCoupon 显示券后价或原价 -->
        <view v-if="item.hasCoupon" class="price-wrapper coupon-wrapper">
          <text class="coupon-label">券后</text>
          <text class="goods-price coupon-price">¥{{ item.coupon_price }}</text>
          <!-- 如需显示原价划线可取消下一行注释 -->
          <!-- <text class="line-price">¥{{ item.server_price }}</text> -->
        </view>
        <view v-else class="price-wrapper">
          <text class="goods-price">¥{{ item.server_price }}</text>
        </view>
        <text class="goods-sales">销量 {{ item.sales_num }}</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  // 接收父组件传入的商品数组
  props: {
    goodsList: {
      type: Array,
      required: true,
      default: () => []
    }
  },
  data() {
    return {};
  },
  methods:{
	  onselfClick(item) {
	  	this.$emit("self-click", item);
	  },
  }
}
</script>

<style scoped lang="less">
/* 列表容器：2列自动换行 */
.goods-list {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  padding: 20rpx;
 background: #fff; 
  gap: 18rpx;

  /* 单个商品项：占比约50%，相对定位（用于自营标签） */
  .goods-item {
    width: 346rpx;
    position: relative;
    background: #fff;
	border-radius: 20rpx;
	overflow: hidden;

    /* 自营标签：右上角红色背景 */
    .self-tag {
      position: absolute;
      top: 0rpx;
      left: 0rpx;
      width: 80rpx;
      height: 49rpx;
	  z-index: 1;
      background: linear-gradient( 124deg, #F52540 0%, #E8101E 100%);
      border-radius: 20rpx 2rpx 20rpx 2rpx;
	  font-weight: 400;
	  font-size: 26rpx;
	  color: #FFFFFF;
	  text-align: left;
	  font-style: normal;
    }

    /* 商品图片：宽度铺满，自适应高度 */
    .goods-img {
      width: 346rpx;
      height: 346rpx;
    }

    /* 商品名称：换行，限制行数 */
    .goods-name {
		padding: 20rpx 10rpx 8rpx 10rpx;
     font-weight: 500;
     font-size: 28rpx;
     color: #333333;
     line-height: 40rpx;
     text-align: left;
     font-style: normal;
      display: -webkit-box;
      -webkit-line-clamp: 1;
      -webkit-box-orient: vertical;
      overflow: hidden;
    }

    /* 价格+销量容器：两端对齐 */
    .goods-footer {
      display: flex;
      justify-content: space-between;
      padding: 0 10rpx 20rpx 10rpx;

      /* 券后价包装器 */
      .coupon-wrapper {
        display: flex;
        align-items: center;
        gap: 4rpx;
      }

      /* 券后标签 */
      .coupon-label {
        font-weight: 400;
        font-size: 24rpx;
        color: #e8101e;
        // background: #ffe9e9;
        // padding: 2rpx 8rpx;
        // border-radius: 20rpx;
        // margin-right: 4rpx;
        line-height: 33rpx;
      }

      /* 券后价格（如需调整字体可在此覆盖） */
      .coupon-price {
        /* 默认继承 .price-value 样式 */
      }

      /* 价格：红色 */
      .goods-price {
        font-family: DINPro, DINPro;
        font-weight: 500;
        font-size: 28rpx;
        color: #E8101E;
        line-height: 36rpx;
        text-align: left;
        font-style: normal;
        margin-top: -8rpx;
      }

      /* 销量：灰色 */
      .goods-sales {
        font-family: PingFangSC, PingFang SC;
        font-weight: 400;
        font-size: 20rpx;
        color: #999999;
        line-height: 28rpx;
        text-align: left;
        font-style: normal;
      }
    }
  }
}
</style>