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

<!-- pages/goods-detail/goods-detail.wxml -->
<view class="goods-detail-page {{showCompareModal ? 'no-scroll' : ''}}">
  <!-- 在页面最顶部添加以下代码 -->
  <!-- 隐藏的video组件，用于视频封面截图 -->
  <video 
    id="videoSnapshotHelper" 
    src="{{videoSrcForSnapshot}}"
    style="position: absolute; top: -9999px; width: 300px; height: 300px;" 
    autoplay="{{false}}" 
    muted="{{true}}" 
    show-center-play-btn="{{false}}" 
    show-play-btn="{{false}}" 
    object-fit="contain" 
  ></video>
  
  <!-- 隐藏的canvas组件，用于绘制视频帧 -->
  <canvas 
    id="videoCanvas"
    canvas-id="videoCanvas"
    style="position: absolute; top: -9999px; width: 300px; height: 300px;" 
  ></canvas>
  
  <!-- 商品详情内容 -->
  <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.mediaItems}}" wx:key="index">
          <swiper-item>
            <!-- 视频处理：根据类型字段判断 -->
            <video 
              wx:if="{{item.type === 'video'}}" 
              src="{{item.url}}" 
              class="slider-media"
              mode="aspectFit"
              show-center-play-btn="{{true}}"
              show-play-btn="{{false}}"
              controls="{{true}}"
              autoplay="{{true}}"
              loop="{{true}}"
              muted="{{true}}"
              initial-time="0"
              show-mute-btn="{{true}}"
              enable-progress-gesture="{{true}}"
              enable-play-gesture="{{true}}"
              object-fit="contain"
              poster="" >
            </video>
            <!-- 图片处理 -->
            <image 
              wx:else
              src="{{item.url}}" 
              mode="aspectFill" 
              class="slider-media"
              bindtap="previewImage"
              data-urls="{{goodsDetail.imageUrls}}"
              data-index="{{index}}"
              loading="lazy"
            />
          </swiper-item>
        </block>
      </swiper>
    </view>

    <!-- 商品基本信息 -->
    <view class="goods-info">
      <view style="display: flex; flex-direction: column; margin-bottom: 10rpx;">
        <view style="display: flex; align-items: center; justify-content: space-between; margin-bottom: 0rpx;">
          <view style="display: flex; align-items: center; flex: 1;">
            <view wx:if="{{goodsDetail.status === 'sold_out'}}" style="display: inline-block; margin-right: 10rpx; font-size: 18rpx; color: #fff; background: linear-gradient(135deg, #8c8c8c 0%, #a6a6a6 100%); 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;">售空</view>
            <view wx:elif="{{goodsDetail.supplyStatus}}" 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 style="display: flex; align-items: flex-start;">
            <view class="source-type-badge" style="display: flex; align-items: center; justify-content: center; margin-right: 10rpx;">
              <text style="color: {{goodsDetail.sourceTypeColor}}; font-weight: bold;">{{goodsDetail.sourceType || '暂无'}}</text>
            </view>
          </view>
        </view>
        <view class="source-description" style="background: #f5f5f5; font-size: 28rpx; color: #333; padding: 12rpx 16rpx; display: block; box-sizing: border-box; word-wrap: break-word; white-space: normal; min-height: 60rpx;">
          {{goodsDetail.description || '暂无描述'}}
        </view>
      </view>
      <view class="goods-price" style="position: relative; display: flex; align-items: center; justify-content: space-between;">
        <view style="display: flex; align-items: center;">
          <text class="price-symbol">价格:</text>
          <text class="price-value">{{goodsDetail.displayPrice}}</text>
          <text wx:if="{{goodsDetail.weightQuantityData && goodsDetail.weightQuantityData[0] && goodsDetail.weightQuantityData[0].priceChangeDirection === 'up'}}" class="price-change-arrow up">↑</text>
          <text wx:elif="{{goodsDetail.weightQuantityData && goodsDetail.weightQuantityData[0] && goodsDetail.weightQuantityData[0].priceChangeDirection === 'down'}}" class="price-change-arrow down">↓</text>
        </view>

        <view 
          class="favorite-button"
          bindtap="onFavoriteClick"
          style="display: flex; align-items: center;"
        >
          <text style="font-size: 32rpx; color: {{isFavorite ? '#ff4d4f' : '#999'}}; margin-right: 8rpx;">收藏</text>
          <text style="font-size: 44rpx; {{isFavorite ? 'color: #ff4d4f;' : 'color: #999;'}} ">{{isFavorite ? '❤️' : '🤍'}}</text>
        </view>
      </view>
    </view>


    <!-- 净重件数对应信息 -->
    <view class="weight-quantity-info" wx:if="{{goodsDetail.weightQuantityData && goodsDetail.weightQuantityData.length > 0}}">
      <view class="wq-title">规格信息</view>
      <view class="wq-list">
        <block wx:for="{{goodsDetail.weightQuantityData}}" wx:key="index">
          <view class="spec-card">
            <!-- 顶部：规格名称 + 价格 -->
            <view class="spec-header">
              <text class="spec-name">{{item.weightSpec}}</text>
              <text class="spec-price">¥{{item.price}}</text>
            </view>
            <!-- 底部：降价/库存/下架状态 -->
            <view class="spec-footer">
              <!-- 降价标识（仅当 priceChangeDirection === 'down' 时显示） -->
              <view wx:if="{{item.priceChangeDirection === 'down'}}" class="price-down-tag">
                <text class="arrow">↓</text>
                <text class="label">降价</text>
              </view>
              <!-- 已下架标识 -->
              <text wx:if="{{item.isOffShelf}}" class="off-shelf-tag">已下架</text>
              <!-- 库存信息（未下架且有件数且未售空时显示） -->
              <text wx:elif="{{!item.isSoldOut && item.quantity && item.quantity !== '售空' && !item.weightSpec.includes('售空') && !item.display.includes('售空') && !item.weightSpec.includes('已售售空件') && !item.display.includes('已售售空件')}}" class="stock-info">剩余{{item.quantity}}件</text>
              <!-- 售空标识（未下架且售空时显示） -->
              <text wx:else class="stock-info">已售{{item.quantity || 0}}件</text>
            </view>
          </view>
        </block>
      </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">{{displayRegion}}</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.freshness || '暂无'}}</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.producting || '暂无'}}</text>
          </view>
        </view>
      </view>
    </view>



    <!-- 联系信息 -->
    <view class="contact-info">
      <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 class="internal-info" wx:if="{{isInternalUser && viewerInfo && viewerInfo.length > 0}}">
      <view class="internal-header">
        <text class="internal-title">内部信息</text>
      </view>
      <view class="internal-content">
        <block wx:for="{{viewerInfo}}" wx:key="userId">
          <!-- 浏览人信息 -->
          <view class="viewer-item">
            <view class="viewer-header">
              <text class="viewer-name">{{item.nickName || '未知用户'}}</text>
              <text class="viewer-phone" bindlongpress="copyPhone" data-phone="{{item.phoneNumber}}">{{item.phoneNumber || '暂无电话'}}</text>
            </view>
            
            <!-- 跟进记录 -->
            <view class="follow-up-records">
              <block wx:if="{{item.followupRecords && item.followupRecords.length > 0}}">
                <view wx:for="{{item.followupRecords}}" wx:key="index" class="follow-up-item">
                  <view class="follow-up-time">{{item.createdAt || '未知时间'}}</view>
                  <view class="follow-up-content">{{item.content || '无内容'}}</view>
                </view>
              </block>
              <view wx:else class="no-records">暂无跟进记录</view>
            </view>
          </view>
        </block>
      </view>
    </view>
    <!-- 内部人员查看 - 无浏览记录 -->
    <view class="internal-info" wx:if="{{isInternalUser && (!viewerInfo || viewerInfo.length === 0)}}">
      <view class="internal-header">
        <text class="internal-title">内部信息</text>
      </view>
      <view class="internal-content">
        <view class="no-records">暂无浏览记录</view>
      </view>
    </view>
    

  </view>
  <!-- 评论区 -->
  <view class="comments-section">
    <view class="comments-header">
      <view class="comments-title">
        <text class="comments-label">商品评价</text>
        <text class="comments-count">({{comments.length}}条)</text>
      </view>
      <view class="comment-action">
        <button class="comment-button" bindtap="showCommentModal">
          发表评论
        </button>
      </view>
    </view>
    <view class="comments-list">
      <block wx:if="{{comments.length > 0}}">
        <view wx:for="{{comments}}" wx:key="id" class="comment-item">
          <view class="comment-user">
            <image class="user-avatar" src="{{item.avatar || 'https://via.placeholder.com/40'}}"></image>
            <view class="user-info">
              <text class="user-nickname">{{item.nickname || '匿名用户'}}</text>
              <text wx:if="{{!item.isDefault}}" class="comment-time">{{item.time || '刚刚'}}</text>
            </view>
            <view wx:if="{{item.phoneNumber && item.phoneNumber === currentUserPhone}}" class="comment-actions">
              <text class="delete-btn" bindtap="showDeleteConfirmModal" data-comment="{{item}}">删除</text>
            </view>
          </view>
          <view class="comment-content">
            <text class="content-text">{{item.comments}}</text>
          </view>
        </view>
      </block>
      <block wx:else>
        <view class="comments-empty">
          <text class="empty-text">暂无评论，快来抢沙发吧~</text>
        </view>
      </block>
    </view>
  </view>
    <!-- 空白页 -->
    <view class="blank-space"></view>
  <!-- 登录弹窗 -->
  <view wx:if="{{showOneKeyLoginModal}}" class="auth-modal-overlay">
    <view class="auth-modal-container">
      <view class="auth-modal-title">授权登录</view>
      <view class="auth-modal-content">授权您的手机号后才能使用完整功能</view>
      <view class="auth-modal-buttons">
        <button 
          class="auth-primary-button" 
          open-type="getPhoneNumber" 
          bindgetphonenumber="onGetPhoneNumber"
        >
          授权手机号
        </button>
        <button 
          class="auth-cancel-button" 
          bindtap="closeOneKeyLoginModal"
        >
          取消
        </button>
      </view>
    </view>
  </view>

  <!-- 底部弹出层 - 对比价格 -->
  <view wx:if="{{showCompareModal}}" class="compare-modal-overlay" bindtap="closeCompareModal">
    <view class="compare-modal-container" catchtap="stopPropagation">
      <!-- 步骤指示器 -->
      <view class="compare-step-container">
        <view class="compare-step-wrapper">
          <view class="compare-step {{compareStep === 1 ? 'active' : ''}}">
            <view class="compare-step-circle">{{compareStep === 1 ? '✓' : '1'}}</view>
            <view class="compare-step-line {{compareStep >= 2 ? 'active' : ''}}"></view>
          </view>
          <view class="compare-step {{compareStep === 2 ? 'active' : ''}}">
            <view class="compare-step-circle">{{compareStep === 2 ? '✓' : '2'}}</view>
          </view>
        </view>
      </view>
      
      <!-- 标题和引导文字 -->
      <view class="compare-modal-header">
        <text class="compare-modal-subtitle">{{compareStep === 1 ? '请选择您想对比的鸡蛋品种' : '请选择您想对比的鸡蛋规格'}}</text>
      </view>
      
      <!-- 已选品种提示区 -->
      <view wx:if="{{compareStep === 2 && selectedCategory}}" class="compare-selected-category">
        <text class="compare-selected-icon">✓</text>
        <text class="compare-selected-text">已选品种：{{selectedCategory}}</text>
      </view>
      
      <!-- 内容区域 -->
      <view class="compare-content">
        <!-- 品种选择列表 -->
        <block wx:if="{{compareStep === 1}}">
          <view wx:for="{{categoryOptions}}" wx:key="index" class="compare-option {{selectedCategoryIndex === index ? 'selected' : ''}}" bindtap="selectCategory" data-index="{{index}}">
            <view class="compare-option-icon">{{categoryIcons[index]}}</view>
            <view class="compare-option-info">
              <text class="compare-option-name">{{item}}</text>
              <text class="compare-option-desc">{{categoryDescriptions[index]}}</text>
            </view>
            <view class="compare-option-radio {{selectedCategoryIndex === index ? 'selected' : ''}}">
              <view wx:if="{{selectedCategoryIndex === index}}" class="compare-option-radio-inner"></view>
            </view>
          </view>
        </block>
        
        <!-- 规格选择列表 -->
        <block wx:elif="{{compareStep === 2}}">
          <view wx:for="{{currentSpecifications}}" wx:key="index" class="compare-option {{selectedSpecIndex === index ? 'selected' : ''}}" bindtap="selectSpec" data-index="{{index}}">
            <view class="compare-option-info spec-info">
              <text class="compare-option-name">{{item.display || item.weightSpec}}</text>
           
            </view>
            <view class="compare-option-radio {{selectedSpecIndex === index ? 'selected' : ''}}">
              <view wx:if="{{selectedSpecIndex === index}}" class="compare-option-radio-inner"></view>
            </view>
          </view>
        </block>
      </view>
      
      <!-- 底部按钮区域 -->
      <view class="compare-modal-footer">
        <block wx:if="{{compareStep === 1}}">
          <button class="compare-next-button" bindtap="nextStep">
            下一步
          </button>
        </block>
        <block wx:elif="{{compareStep === 2}}">
          <view class="compare-footer-buttons">
            <button class="compare-back-button" bindtap="prevStep">
              上一步
            </button>
            <button class="compare-confirm-button" bindtap="confirmCompare">
              确认
            </button>
          </view>
        </block>
      </view>
    </view>
  </view>

  <!-- 操作按钮区域（替换原有底部按钮） -->
  <view class="action-buttons" wx:if="{{!fromSeller}}">
    <!-- 物流 -->
    <button class="bottom-button logistics-btn" bindtap="onLogisticsClick">
      <text class="icon">🚚</text>
      <text class="text">物流</text>
    </button>
    <!-- 对比 -->
    <button class="bottom-button compare-btn" bindtap="onCompareClick">
      <text class="icon">⚖️</text>
      <text class="text">比价</text>
    </button>
    <!-- 联系 -->
    <button class="bottom-button chat-btn" bindtap="onChat" data-id="{{goodsDetail.id}}">
      <text class="icon">💬</text>
      <text class="text">联系</text>
    </button>
    <!-- 还价（保留原有显示条件） -->
    <button class="bottom-button bargain-btn"
      wx:if="{{goodsDetail.bargaining === 0 && goodsDetail.status !== 'sold_out' && goodsDetail.status !== 'sold' && goodsDetail.status !== 'out_of_stock' && !goodsDetail.supplyStatus.includes('售空')}}"
      bindtap="showBargainModal">
      <text class="icon">💰</text>
      <text class="text">还价</text>
    </button>
    <!-- 电话 -->
    <button class="bottom-button phone-btn" bindtap="makePhoneCall" data-phone="{{goodsDetail.contact_phone}}">
      <text class="icon">📞</text>
      <text class="text">电话</text>
    </button>
  </view>

  <!-- 返回按钮区域（fromSeller 时保留） -->
  <view class="action-buttons" wx:if="{{fromSeller}}">
    <button class="back-button bottom-button" bindtap="goBack">返回</button>
  </view>

  <!-- 讲价弹窗 -->
  <view class="bargain-modal-overlay" wx:if="{{showBargainModal}}" bindtap="hideBargainModal">
    <view class="bargain-modal-container" catchtap="stopPropagation">
      <view class="bargain-modal-title">
        讲价
      </view>
      
      <view class="bargain-modal-content">
        <view class="bargain-spec-section">
          <text class="bargain-spec-title">请选着你想要讲价的规格</text>
          <scroll-view class="bargain-spec-scroll" scroll-y="{{true}}">
            <view class="bargain-spec-list">
              <block wx:for="{{goodsDetail.weightQuantityData}}" wx:key="index">
                <view 
                  class="bargain-spec-item {{selectedSpecIndex === index ? 'selected' : ''}}"
                  bindtap="selectSpec"
                  data-index="{{index}}"
                >
                  <text class="spec-text">{{item.display}}</text>
                  <text wx:if="{{item.priceChangeDirection === 'up'}}" class="price-change-arrow up">↑</text>
                  <text wx:elif="{{item.priceChangeDirection === 'down'}}" class="price-change-arrow down">↓</text>
                  <text wx:if="{{item.isOffShelf}}" class="spec-off-shelf">已下架</text>
                </view>
              </block>
            </view>
          </scroll-view>
        </view>
        
        <view class="bargain-price-section">
          <!-- 价格调整区域 -->
          <view class="price-adjustment-container">
            <view class="price-controls">
              <button class="price-btn minus-btn" bindtap="decreasePrice" disabled="{{bargainPrice <= minPrice}}">
                -
              </button>
              <view class="price-display">
                <text class="price-label" style="width: 150rpx; display: block; box-sizing: border-box; left: 0rpx; top: 0rpx; height: 40rpx">可接受价格</text>
                <text class="price-value">{{bargainPrice}}</text>
                <button class="edit-btn" bindtap="showPriceInput" style="width: 204rpx; height: 54rpx; display: block; box-sizing: border-box; left: -54rpx; top: 3rpx; position: relative">✏️</button>
              </view>
              <button class="price-btn plus-btn" bindtap="increasePrice" disabled="{{bargainPrice >= maxPrice}}" style="position: relative; left: -97rpx; top: 5rpx">
                +
              </button>
            </view>
            
            
            <!-- 价格滑块 -->
            <view class="price-slider-container">
              <text class="slider-min-price">¥{{minPrice}}</text>
              <view class="slider-track" bindtouchstart="onSliderStart" bindtouchmove="onSliderMove" bindtouchend="onSliderEnd">
                <view class="slider-progress" style="width: {{sliderProgress}}%"></view>
                <view class="slider-thumb" style="left: {{sliderProgress}}%"></view>
              </view>
              <text class="slider-max-price">¥{{maxPrice}}</text>
            </view>
            
            <!-- 立即成交提示 -->
            <view wx:if="{{bargainPrice > (basePrice + priceThreshold)}}" class="price-reasonable-tip" style="display: flex; align-items: center; justify-content: center; margin-top: 20rpx; padding: 16rpx; background: linear-gradient(135deg, #fefce8 0%, #fef9c3 100%); border-radius: 12rpx; border: 1rpx solid #fde68a;">
              <text style="font-size: 36rpx; margin-right: 12rpx;">🎊</text>
              <text style="font-size: 28rpx; color: #d97706; font-weight: 500;">当前出价高于商家报价，可立即成交</text>
            </view>
            
            <!-- 价格建议提示 -->
            <view wx:elif="{{bargainPrice < (basePrice - priceThreshold)}}" class="price-reasonable-tip" style="display: flex; align-items: center; justify-content: center; margin-top: 20rpx; padding: 16rpx; background: linear-gradient(135deg, #f0f9ff 0%, #e0f2fe 100%); border-radius: 12rpx; border: 1rpx solid #bae6fd;">
              <text style="font-size: 36rpx; margin-right: 12rpx;">😅</text>
              <text style="font-size: 28rpx; color: #0ea5e9; font-weight: 500;">基于商品的市场价值，成交率低</text>
            </view>
            
            <!-- 价格合理性提示 -->
            <view wx:else class="price-reasonable-tip" style="display: flex; align-items: center; justify-content: center; margin-top: 20rpx; padding: 16rpx; background: linear-gradient(135deg, #fffbe6 0%, #f7f3d7 100%); border-radius: 12rpx; border: 1rpx solid #ffe7ba;">
              <text style="font-size: 36rpx; margin-right: 12rpx;">🤲</text>
              <text style="font-size: 28rpx; color: #d48806; font-weight: 500;">该价格区间合理，预估24h内可成交</text>
            </view>
          
          </view>
          
          <!-- 价格输入弹窗 -->
          <view wx:if="{{showPriceInputModal}}" class="price-input-modal">
            <view class="price-input-content">
              <text class="price-input-title">输入价格</text>
              <input 
                class="price-input" 
                type="digit"
                placeholder="请输入价格"
                value="{{tempPrice}}"
                bindinput="onTempPriceInput"
              />
              <view class="price-input-buttons">
                <button class="price-input-cancel" bindtap="cancelPriceInput">取消</button>
                <button class="price-input-confirm" bindtap="confirmPriceInput">确认</button>
              </view>
            </view>
          </view>
        </view>
      </view>
      
      <view class="bargain-modal-buttons">
        <button 
          class="bargain-modal-cancel" 
          bindtap="hideBargainModal"
        >
          取消
        </button>
        <button 
          class="bargain-modal-submit" 
          bindtap="submitBargain"
          disabled="{{!bargainPrice}}"
        >
          确认
        </button>
      </view>
    </view>
  </view>

  <!-- 评论弹窗 -->
  <view class="comment-modal-overlay" wx:if="{{showCommentModal}}">
    <view class="comment-modal-container">
      <!-- 弹窗标题 -->
      <view class="comment-modal-title">
        发表评论
      </view>
      
      <!-- 评论输入框 -->
      <textarea 
        class="comment-modal-textarea" 
        placeholder="写下您的评价..." 
        value="{{newCommentContent}}"
        bindinput="onCommentInput"
      ></textarea>
      
      <!-- 按钮区域 -->
      <view class="comment-modal-buttons">
        <button 
          class="comment-modal-cancel" 
          bindtap="hideCommentModal"
        >
          取消
        </button>
        <button 
          class="comment-modal-submit" 
          bindtap="submitComment"
          disabled="{{!newCommentContent}}"
        >
          发送
        </button>
      </view>
    </view>
  </view>

  <!-- 删除评论确认弹窗 -->
  <view class="delete-modal-overlay" wx:if="{{showDeleteConfirmModal}}">
    <view class="delete-modal-container">
      <!-- 弹窗标题 -->
      <view class="delete-modal-title">确认删除</view>
      
      <!-- 提示信息 -->
      <view class="delete-modal-content">
        您确定要删除这条评论吗？
      </view>
      
      <!-- 按钮区域 -->
      <view class="delete-modal-buttons">
        <button 
          class="delete-modal-cancel" 
          bindtap="hideDeleteConfirmModal"
        >
          取消
        </button>
        <button 
          class="delete-modal-confirm" 
          bindtap="confirmDeleteComment"
        >
          删除
        </button>
      </view>
    </view>
  </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>