Mini-Program/components/goods-card/goods-card.wxml

<view class="goods-card {{isSoldOut ? 'sold-out' : ''}}" bindtap="onTap">
  <view class="goods-image-area">
    <!-- 视频显示 -->
    <video 
      wx:if="{{imageUrl && isVideo}}"
      class="goods-image" 
      src="{{imageUrl}}" 
      mode="aspectFill"
      controls="true"
      show-center-play-btn="true"
      show-play-btn="true"
      show-fullscreen-btn="true"
    ></video>
    <!-- 图片显示 -->
    <image 
      wx:elif="{{imageUrl}}"
      class="goods-image" 
      src="{{imageUrl}}" 
      mode="aspectFill"
      lazy-load="true"
    ></image>
    <!-- 占位符 -->
    <view wx:else class="goods-image-placeholder">
      <text>暂无图片</text>
    </view>
    <view wx:if="{{supplyStatus === '预售'}}" class="promo-tag presale">预售</view>
    <view wx:elif="{{supplyStatus === '现货'}}" class="promo-tag in-stock">现货</view>
    <view wx:if="{{status === 'sold_out'}}" class="promo-tag sold-out">售空</view>
  </view>
  <view class="goods-info">
    <view class="goods-title">{{name || '商品名称'}}</view>
    <view class="goods-spec">{{displaySpecification}}{{displayYolk ? ' | ' + displayYolk : ''}}</view>
    <view class="goods-tags">
      <view class="tag source-{{sourceType === '三方认证' ? 'third' : (sourceType === '平台货源' ? 'platform' : 'unverified')}}">{{sourceType || ''}}</view>
      <view class="tag stock">库存：{{totalStock && totalStock !== '充足' ? totalStock + '件' : (totalStock || '充足')}}</view>
    </view>
    <view class="goods-bottom">
      <view class="goods-price">
        <text class="price-unit">¥</text>
        <text class="price-value">{{price || '0'}}</text>
        <text class="price-unit">{{priceUnit || '/件'}}</text>
      </view>
      <view class="goods-region">{{region || ''}}</view>
    </view>
  </view>
</view>