Mini-Program/pages/goods-detail/goods-detail.wxml

<!-- pages/goods-detail/goods-detail.wxml -->
<view class="goods-detail-page">
  <!-- 商品详情内容 -->
  <view class="goods-detail-content">
    <!-- 商品图片轮播 -->
    <view class="goods-image-slider">
      <swiper 
        indicator-dots="{{true}}" 
        autoplay="{{true}}" 
        interval="3000" 
        duration="500"
        indicator-color="rgba(255, 255, 255, 0.5)"
        indicator-active-color="#ffffff"
        circular="{{true}}"
      >
        <block wx:for="{{goodsDetail.imageUrls}}" wx:key="index">
          <swiper-item>
            <image 
              src="{{item}}" 
              mode="aspectFill" 
              class="slider-image"
              bindtap="previewImage"
              data-urls="{{goodsDetail.imageUrls}}"
              data-index="{{index}}"
              loading="lazy"
            />
          </swiper-item>
        </block>
      </swiper>
    </view>

    <!-- 商品基本信息 -->
    <view class="goods-info" style="margin-top: -40rpx;">
      <view style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 10rpx;">
        <view style="display: flex; align-items: center;">
          <view style="display: inline-block; margin-right: 10rpx; font-size: 18rpx; color: #fff; background: rgba(218, 165, 32, 0.8); padding: 4rpx 10rpx; border-radius: 15rpx; vertical-align: middle; backdrop-filter: blur(10rpx); border: 1rpx solid rgba(255, 255, 255, 0.3); box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15), inset 0 1rpx 0 rgba(255, 255, 255, 0.5); text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.2); font-weight: bold; margin-top: -20rpx;">{{goodsDetail.supplyStatus || '暂无状态'}}</view>
          <text class="goods-name">{{goodsDetail.name}}</text>
          <span style="vertical-align: middle; font-size: 20rpx; color: white; background: linear-gradient(135deg, #4a90e2 0%, #2b66f0 50%, #1a4bbd 100%); padding: 4rpx 8rpx; clip-path: polygon(50% 0%, 70% 10%, 100% 30%, 100% 70%, 70% 90%, 50% 100%, 30% 90%, 0% 70%, 0% 30%, 30% 10%); margin-left: 8rpx; box-shadow: 0 2rpx 4rpx rgba(0, 0, 0, 0.3), inset 0 1rpx 2rpx rgba(255, 255, 255, 0.5); text-shadow: 0 1rpx 2rpx rgba(0, 0, 0, 0.5); font-weight: bold; margin-top: -20rpx;">V</span>
        </view>
        <view class="source-type-badge">
          <text style="color: {{goodsDetail.sourceTypeColor}}; font-weight: bold;">{{goodsDetail.sourceType || '暂无'}}</text>
        </view>
      </view>
      <view class="goods-price" style="position: relative; display: flex; align-items: center;">
        <text class="price-symbol">价格:</text>
        <text class="price-value">{{goodsDetail.price}}</text>
      </view>
    </view>

    <!-- 商品详细信息网格 -->
    <view class="info-grid">
      <view class="info-row">
        <view class="info-item">
          <view class="info-label-container">
            <text class="info-label">地区</text>
          </view>
          <view class="info-value-container">
            <text class="info-value">{{goodsDetail.region || '暂无'}}</text>
          </view>
        </view>
        <view class="info-item">
          <view class="info-label-container">
            <text class="info-label">规格</text>
          </view>
          <view class="info-value-container">
            <text class="info-value">{{goodsDetail.spec || '暂无'}}</text>
          </view>
        </view>
      </view>
      <view class="info-row">
        <view class="info-item">
          <view class="info-label-container">
            <text class="info-label">蛋黄</text>
          </view>
          <view class="info-value-container">
            <text class="info-value">{{goodsDetail.yolk || '暂无'}}</text>
          </view>
        </view>
        <view class="info-item">
          <view class="info-label-container">
            <text class="info-label">斤重</text>
          </view>
          <view class="info-value-container">
            <text class="info-value">{{goodsDetail.displayGrossWeight || '暂无'}}</text>
          </view>
        </view>
      </view>
      <view class="info-row">
        <view class="info-item">
          <view class="info-label-container">
            <text class="info-label">件数</text>
          </view>
          <view class="info-value-container">
            <text class="info-value">{{goodsDetail.minOrder || '暂无'}}</text>
          </view>
        </view>
        <view class="info-item">
          <view class="info-label-container">
            <text class="info-label">关注人数</text>
          </view>
          <view class="info-value-container">
            <text class="info-value">{{goodsDetail.reservedCount || '0'}}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 联系信息 -->
    <view class="contact-info">
      <text class="contact-label">联系信息</text>
      <view class="contact-content">
        <view class="contact-item">
          <text class="contact-icon user-icon">👤</text>
          <text class="contact-label-text">联系人:</text>
          <text class="contact-text">{{goodsDetail.product_contact || '暂无'}}</text>
        </view>
        <view class="contact-item phone-item">
          <text class="contact-icon phone-icon">📞</text>
          <view class="phone-info">
            <text class="contact-label-text">联系电话:</text>
            <text class="contact-text">{{goodsDetail.contact_phone || '暂无'}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 操作按钮区域 -->
  <view class="action-buttons" wx:if="{{!fromSeller}}">
    <button 
      class="call-button bottom-button"
      bindtap="makePhoneCall"
      data-phone="{{goodsDetail.contact_phone}}"
    >
      拨打电话
    </button>
    <button 
      class="want-button bottom-button"
      bindtap="onClickWantInDetail"
      data-id="{{goodsDetail.id}}"
      disabled="{{goodsDetail.isReserved}}"
    >
      {{goodsDetail.isReserved ? '已预约' : '我想要'}}
    </button>
  </view>
  <!-- 返回按钮区域（仅在seller页面查看时显示） -->
  <view class="action-buttons" wx:if="{{fromSeller}}">
    <button 
      class="back-button bottom-button"
      bindtap="goBack"
    >
      返回
    </button>
  </view>

  <!-- 图片预览弹窗 -->
  <view class="image-preview-mask" wx:if="{{showImagePreview}}" style="position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0, 0, 0, 0.9); display: flex; justify-content: center; align-items: center; z-index: 10001;" catchtouchmove="true">
    <view style="width: 100%; height: 100%; display: flex; justify-content: center; align-items: center;">
      <swiper 
        style="width: 100%; height: 100%;" 
        current="{{previewImageIndex}}" 
        bindchange="onPreviewImageChange" 
        indicator-dots="true" 
        indicator-color="rgba(255,255,255,0.5)" 
        indicator-active-color="#fff">
        <block wx:for="{{previewImageUrls}}" wx:key="*this">
          <swiper-item>
            <image 
              src="{{item}}" 
              mode="aspectFit" 
              style="width: 100%; height: 100%; transform: scale({{scale}}) translate({{offsetX}}px, {{offsetY}}px); transition: {{isScaling ? 'none' : 'transform 0.3s'}};" 
              bindtap="handleImageTap" 
              bindtouchstart="handleTouchStart" 
              bindtouchmove="handleTouchMove" 
              bindtouchend="handleTouchEnd" 
              bindtouchcancel="handleTouchEnd"
            ></image>
          </swiper-item>
        </block>
      </swiper>
      <view style="position: absolute; top: 40rpx; right: 40rpx; color: white; font-size: 40rpx;">
        <text bindtap="closeImagePreview" style="background: rgba(0,0,0,0.5); padding: 10rpx 20rpx; border-radius: 50%;">×</text>
      </view>
    </view>
  </view>
</view>