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

<!-- pages/goods-detail/goods-detail.wxml -->
<view class="goods-detail-page">
  <!-- 页面头部 -->
  <view class="page-header">
    <view class="header-left"></view>
    <view class="header-center">
      <text class="header-title">商品详情</text>
    </view>
    <view class="header-right" bindtap="goBack">
      <text class="close-icon">×</text>
    </view>
  </view>

  <!-- 商品详情内容 -->
  <view class="goods-detail-content">
    <!-- 商品图片轮播 -->
    <view class="goods-image-slider">
      <swiper indicator-dots="{{true}}" autoplay="{{true}}" interval="3000" duration="500">
        <block wx:for="{{goodsDetail.imageUrls}}" wx:key="index">
          <swiper-item>
            <image 
              src="{{item}}" 
              mode="scaleToFill" 
              class="slider-image"
              bindtap="previewImage"
              data-urls="{{goodsDetail.imageUrls}}"
              data-index="{{index}}"
            />
          </swiper-item>
        </block>
      </swiper>
    </view>

    <!-- 商品基本信息 -->
    <view class="goods-info">
      <text class="goods-name">{{goodsDetail.name}}</text>
      <view class="goods-price">
        <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">
    <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>

  <!-- 图片预览弹窗 -->
  <view class="image-preview-container" wx:if="{{showImagePreview}}">
    <view class="preview-header">
      <view class="preview-close" bindtap="closeImagePreview">
        <text class="close-icon">×</text>
      </view>
      <view class="preview-indicator">
        <text>{{previewImageIndex + 1}} / {{previewImageUrls.length}}</text>
      </view>
    </view>
    <swiper 
      class="preview-swiper"
      current="{{previewImageIndex}}"
      bindchange="onPreviewImageChange"
    >
      <block wx:for="{{previewImageUrls}}" wx:key="index">
        <swiper-item>
          <view 
            class="preview-image-wrapper"
            bindtap="handleImageTap"
            bindtouchstart="handleTouchStart"
            bindtouchmove="handleTouchMove"
            bindtouchend="handleTouchEnd"
          >
            <image 
              src="{{item}}" 
              mode="aspectFit"
              class="preview-image"
              style="transform: scale({{scale}}) translate({{offsetX}}px, {{offsetY}}px); transform-origin: center center; transition: transform 0.1s ease-out;"
            />
          </view>
        </swiper-item>
      </block>
    </swiper>
  </view>
</view>