H5-Merchant/pages/supplychainon/ProductCard.vue

<!-- components/ProductCard.vue -->
<template>
  <view class="product-card">
    <!-- 图片容器增加背景和阴影 -->
    <view class="image-container">
      <image
        class="product-image"
        :src="data.image"
        :webp="true"
        v-if="data.image && !isError"
        :style="{ background: '#f5f5f5' }"
        @error="handleError"
      />
      <image
      v-else
        class="product-image"
        src="/static/images/new_ui/kongtu.png"
        :webp="true"
     
      />
      <view v-if="data.activity" class="activity-badge">
        {{ data.activity }}
      </view>
    </view>

    <!-- 信息内容区域 -->
    <view class="content">
      <!-- 标题与状态开关 -->
      <view class="header">
        <text class="title">{{ data.store_name }}</text>
        <switch
          :checked="data.is_show==1?true:false"
          @change="$emit('status-change', data)"
          class="status-switch"
        />
      </view>

      <!-- 核心数据展示 -->
      <view class="data-grid">
        <view class="data-item">
          <text class="label">售价</text>
          <text class="value highlight">¥{{data.price ||"0.00"}}</text>
        </view>
        <view class="data-item">
          <text class="label">利润</text>
          <text class="value profit">¥{{data.plate_mer_profit  ||"0.00"}}</text>
        </view>
      </view>

      <!-- 辅助信息 -->
      <view class="meta-info">
        <view class="meta-item">
          <uni-icons type="shop-filled" size="30" color="#666" />

          <text class="kucun">销量 {{data.sales}}</text>
        </view>
        <view class="meta-item">
          <uni-icons type="shop" size="30" color="#666" />
          <text :class="{ warn: data.stock < 100 }" class="kucun"
            >库存 {{data.stock}}</text
          >
        </view>
      </view>
     <view class="meta-info">
        <view class="meta-item">
          <view  style="padding-right:10rpx;font-size:26rpx">活动：</view>
          <text  :style="{color:data.seckill == 1?'#FF3C29':'#666666','font-size':'26rpx'}">{{data.seckill == 1?'秒杀':'无'}}</text>
        </view>
      </view>
      <!-- 操作按钮 -->
      <view class="action-bar">
        <button class="action-btn edit-price" @click="$emit('edit-price',data)">
          改价
        </button>
        <button class="action-btn set-activity" @click="$emit('edit-activity',data)" v-if="!data.spec_type">
          活动
        </button>
      </view>
    </view>
  </view>
</template>
<script>
export default {
  props: {
    data: {
      type: Object,
      default: () => {
        return {
          image: "",
          store_name: "",
          price: 0,//商品售价
          sales: 0,//销量
          stock: 0,//库存
          status: "",//商品状态
          is_show: true,//商品状态
          plate_mer_profit: 0,//利润
          activity: "",//活动
        };
      },
    },
  },
  data(){
    return {
      isError:false
    }
  },
  methods:{
    getFormData(image){
      // console.log(image,"imageimage")
      if(image){
        return this.data.image
      }else{
        return "/static/images/new_ui/kongtu.png"
      }
    },
    handleError(e){
      this.isError = e.type=="error"?true:false
      // console.log(e,"e")
    }
  }
};
</script>

<style lang="scss" scoped>
.product-card {
  background: #fff;
  border-radius: 24rpx;
  // margin: 24rpx 32rpx;
  width: 100%;
  box-shadow: 0 8rpx 24rpx rgba(0, 0, 0, 0.06);
  overflow: hidden;
  display: flex;
  flex-direction: column; // 改为纵向布局

  .image-container {
    position: relative;
    height: 320rpx; // 固定图片容器高度
    background: #f8f8f8;

    .product-image {
      width: 100%;
      height: 100%;
      object-fit: cover;
    }

    .activity-badge {
      position: absolute;
      top: 16rpx;
      right: 16rpx;
      background: rgba(255, 77, 79, 0.9);
      color: white;
      padding: 8rpx 16rpx;
      border-radius: 8rpx;
      font-size: 24rpx;
    }
  }

  .content {
    padding: 24rpx;

    .header {
      display: flex;
      justify-content: space-between;
      margin-bottom: 24rpx;

      .title {
        font-size: 32rpx;
        color: #333;
        font-weight: 500;
        flex: 1;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 3;
        -webkit-box-orient: vertical;
        line-height: 1.4;
      }

      .status-switch {
        transform: scale(0.9);
        margin-left: 16rpx;
      }
    }

    .data-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 24rpx;
      margin-bottom: 24rpx;

      .data-item {
        .label {
          font-size: 28rpx;
          color: #999;
          margin-bottom: 8rpx;
          padding-right: 10rpx;
        }

        .value {
          font-size: 32rpx;
          font-weight: 500;

          &.highlight {
            color: #ff4d4f;
          }

          &.profit {
            color: #07c160;
          }
        }
      }
    }

    .meta-info {
      display: flex;
      gap: 32rpx;
      margin-bottom: 24rpx;

      .meta-item {
        display: flex;
        align-items: center;
        font-size: 24rpx;
        color: #666;
        flex: 1;
        flex-shrink: 0;

        text-align: left;
        text {
          margin-right: 8rpx;

          &.kucun {
            font-size: 26rpx;
            color: #333;
          }
          &.warn {
            color: #faad14;
          }
        }
      }
    }

    .action-bar {
      display: flex;
      gap: 16rpx;
      border-top: 1rpx solid #eee;
      padding-top: 24rpx;

      .action-btn {
        flex: 1;
        height: 72rpx;
        line-height: 72rpx;
        border-radius: 12rpx;
        font-size: 28rpx;
        transition: all 0.2s;

        &.edit-price {
          background: #fff;
          color: #007aff;
          border: 1rpx solid #007aff;
        }

        &.set-activity {
          background: #007aff;
          color: white;
        }

        &:active {
          opacity: 0.8;
          transform: scale(0.98);
        }
      }
    }
  }
}
</style>