ai_dianshang/miniprogram/pages/goods/details/index.wxml

<view class="goods-detail-page">
  <view class="goods-head">
    <t-swiper
      wx:if="{{details.images.length > 0}}"
      height="750rpx"
      current="{{current}}"
      autoplay="{{autoplay}}"
      duration="{{duration}}"
      interval="{{interval}}"
      navigation="{{navigation}}"
      list="{{details.images}}"
    ></t-swiper>
    <view class="goods-info">
      <view class="goods-title">
        <view class="goods-name">{{details.title}}</view>
      </view>
      <view class="goods-number">
        <view class="goods-price">
          <price
            wr-class="class-goods-price"
            symbol-class="class-goods-symbol"
            price="{{minSalePrice}}"
            type="lighter"
          />
          <view class="goods-price-up">起</view>
          <price wr-class="class-goods-del" price="{{maxLinePrice}}" type="delthrough" />
        </view>
        <view class="sales-share-row">
          <view class="sold-num">已售{{soldNum}}</view>
          <button class="share-btn-small" open-type="share">
            <t-icon name="share" size="32rpx" color="#666" />
            <view class="share-text-small">分享</view>
          </button>
        </view>
      </view>
      <view wx:if="{{activityList.length > 0}}" class="goods-activity" bindtap="showPromotionPopup">
        <view class="tags-container">
          <view wx:for="{{activityList}}" data-promotionId="{{item.promotionId}}" wx:key="index" wx:if="{{index<4}}">
            <view class="goods-activity-tag">{{item.tag}}</view>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 评论入口 -->
    <view class="comments-entry" bindtap="navToCommentsListPage">
      <view class="comments-entry-content">
        <view class="comments-entry-left">
          <view class="comments-title">
            <text class="comments-title-label">商品评价</text>
            <text class="comments-title-count">({{ commentsStatistics.commentCount || 0 }})</text>
          </view>
          <view class="comments-summary" wx:if="{{ commentsStatistics.commentCount > 0 }}">
            <text class="good-rate">{{commentsStatistics.goodRate}}% 好评</text>
            <text class="view-all">查看全部评价</text>
          </view>
          <view class="comments-summary" wx:else>
            <text class="no-comments">暂无评价，点击查看详情</text>
          </view>
        </view>
        <view class="comments-entry-right">
          <t-icon name="chevron-right" size="40rpx" color="#BBBBBB" />
        </view>
      </view>
    </view>
  </view>
  <!-- 商品详细介绍区域 -->
  <view class="desc-content" wx:if="{{(details.desc && details.desc.length > 0) || details.descriptionText || details.details}}">
    <!-- 详情介绍标题 -->
    <view class="desc-content__title">
      <t-image t-class="img" src="{{recLeftImg}}" />
      <text class="desc-content__title--text">详情介绍</text>
      <t-image t-class="img" src="{{recRightImg}}" />
    </view>
    
    <!-- 商品基本信息 -->
    <view class="desc-basic-info" wx:if="{{details.brand || details.category}}">
      <view class="desc-info-item" wx:if="{{details.brand}}">
        <text class="desc-info-label">品牌：</text>
        <text class="desc-info-value">{{details.brand}}</text>
      </view>
      <view class="desc-info-item" wx:if="{{details.category}}">
        <text class="desc-info-label">分类：</text>
        <text class="desc-info-value">{{details.category}}</text>
      </view>
    </view>

    <!-- 文本描述 -->
    <view class="desc-content__text" wx:if="{{details.descriptionText}}">
      <view class="desc-text-title">商品描述</view>
      <text class="desc-text-content">{{details.descriptionText}}</text>
    </view>

    <!-- 详细信息 -->
    <view class="desc-details" wx:if="{{details.details}}">
      <view class="desc-text-title">详细信息</view>
      <text class="desc-text-content">{{details.details}}</text>
    </view>
    
    <!-- 详情图片展示 -->
    <view class="desc-images" wx:if="{{details.desc && details.desc.length > 0}}">
      <view class="desc-text-title">图片详情</view>
      <view class="desc-image-container" wx:for="{{details.desc}}" wx:key="index">
        <t-image 
          t-class="desc-content__img" 
          src="{{item}}" 
          mode="widthFix" 
          bind:load="onDescImageLoad" 
          bind:error="onDescImageError" 
          bind:tap="previewDescImage"
          data-url="{{item}}" 
          data-index="{{index}}"
          lazy-load="{{true}}"
          loading="{{true}}"
        />
      </view>
    </view>

    <!-- 当没有任何内容时的占位 -->
    <view class="desc-empty" wx:if="{{!details.desc || details.desc.length === 0 && !details.descriptionText && !details.details}}">
      <t-icon name="image" size="48" color="#cccccc" />
      <text class="desc-empty-text">暂无详细介绍</text>
    </view>
  </view>
  <view class="goods-bottom-operation">
    <buy-bar
      jumpArray="{{jumpArray}}"
      soldout="{{soldout}}"
      isStock="{{isStock}}"
      shopCartNum="{{cartNum}}"
      buttonType="{{buttonType}}"
      isFavorite="{{isFavorite}}"
      bind:toAddCart="toAddCart"
      bind:toNav="toNav"
      bind:toBuyNow="buyItNow"
      bind:onToggleFavorite="onToggleFavorite"
      class="goods-details-card"
    />
  </view>
  <goods-specs-popup
    id="goodsSpecsPopup"
    show="{{isSpuSelectPopupShow}}"
    title="{{details.title || ''}}"
    src="{{specImg ? specImg : primaryImage}}"
    specList="{{details.specList || []}}"
    skuList="{{skuArray}}"
    limitBuyInfo="{{details.limitInfo && details.limitInfo[0] && details.limitInfo[0].text || ''}}"
    bind:closeSpecsPopup="handlePopupHide"
    bind:change="chooseSpecItem"
    bind:changeNum="changeNum"
    bind:addCart="addCart"
    bind:buyNow="gotoBuy"
    bind:specsConfirm="specsConfirm"
    isStock="{{isStock}}"
    outOperateStatus="{{outOperateStatus}}"
  >
    <view slot="goods-price">
      <view class="popup-sku__price">
        <price
          wx:if="{{!isAllSelectedSku || (!promotionSubCode && isAllSelectedSku)}}"
          price="{{totalPrice || (selectSkuSellsPrice ? selectSkuSellsPrice : minSalePrice)}}"
          wr-class="popup-sku__price-num"
          symbol-class="popup-sku__price-symbol"
        />
        <price
          wx:if="{{selectSkuSellsPrice === 0 && minSalePrice !== maxSalePrice && !isAllSelectedSku}}"
          price="{{maxSalePrice * (buyNum || 1)}}"
          wr-class="popup-sku__price-del"
          type="delthrough"
        />
      </view>
    </view>
  </goods-specs-popup>
  <promotion-popup
    list="{{list}}"
    bind:closePromotionPopup="closePromotionPopup"
    show="{{isShowPromotionPop}}"
    bind:promotionChange="promotionChange"
  />
</view>
<t-toast id="t-toast" />