wechatShopUni/pages/goods/detail.wxml

<view class="container">
  <!-- 加载中 -->
  <view class="loading" wx:if="{{loading}}">
    <image class="loading-icon" src="/static/icons/loading.gif"></image>
  </view>
  
  <block wx:else>
    <!-- 轮播图模块 -->
    <swiper class="swiper-box" indicator-dots="true" autoplay="true" interval="3000" duration="500" circular="true">
      <swiper-item wx:for="{{goods.images}}" wx:key="index">
        <image src="{{item}}" mode="aspectFill" class="slide-image" />
      </swiper-item>
    </swiper>

    <!-- 商品信息模块 -->
    <view class="goods-info">
      <view class="price-section">
        <view class="price-wrapper">
          <text class="current-price">¥{{goods.price}}</text>
          <text class="original-price">¥{{goods.marketPrice}}</text>
        </view>
        <view class="commission-wrapper">
          <image src="/static/icons/commission.png" class="commission-icon" />
          <text class="commission-text">{{goods.commission}}元</text>
        </view>
      </view>
      
      <view class="title-section">
        <view class="title-wrap">
          <text class="goods-title">{{goods.title}}</text>
          <view class="sales-badge">{{goods.sales}}+人已购</view>
        </view>
        <view class="goods-tags">
          <view class="tag-item" wx:for="{{goods.tags}}" wx:key="index">
            <text>{{item}}</text>
          </view>
        </view>
      </view>
    </view>
    <!-- 热门推荐 -->
    <view class="hot-recommendations">
      <view class="section-title">
        <text class="title-text">热门推荐</text>
      </view>
      <swiper class="recommendations-swiper" 
              circular="true"
              autoplay="true"
              interval="3000"
              duration="500"
              previous-margin="30rpx"
              next-margin="30rpx"
              display-multiple-items="2.2">
        <swiper-item wx:for="{{hotRecommendations}}" wx:key="id" class="recommendation-item">
          <view class="recommendation-card" bindtap="navigateToGoods" data-id="{{item.id}}">
            <view class="recommendation-image-wrap">
              <image class="recommendation-image" src="{{item.image}}" mode="aspectFill"/>
              <view class="recommendation-tag" wx:if="{{item.tag}}">{{item.tag}}</view>
            </view>
            <view class="recommendation-info">
              <view class="recommendation-title-wrap">
                <text class="recommendation-title">{{item.title}}</text>
              </view>
              <view class="recommendation-price-row">
                <view class="price-wrap">
                  <text class="currency">¥</text>
                  <text class="price">{{item.price}}</text>
                </view>
                <view class="sales-wrap">
                  <text class="sales">{{item.sales}}+人已购</text>
                </view>
              </view>
            </view>
          </view>
        </swiper-item>
      </swiper>
    </view>
    <!-- 商品详情模块 -->
    <view class="goods-detail">
      <view class="detail-title">
        <text class="title-text">商品详情</text>
      </view>
      <view class="detail-content">
        <image wx:for="{{goods.detailImages}}" wx:key="index" 
               src="{{item}}" mode="widthFix" class="detail-image" />
      </view>
    </view>
  </block>

  <!-- 底部按钮 -->
  <view class="bottom-bar">
    <view class="collect-btn {{isFavorite ? 'collected' : ''}}" bindtap="toggleFavorite">
      <image src="{{isFavorite ? '/static/icons/collected.png' : '/static/icons/collect.png'}}" />
      <text>{{isFavorite ? '已收藏' : '收藏'}}</text>
    </view>
    <button class="share-poster-btn" bindtap="generatePoster">
      <view class="btn-content">
        <image src="/static/icons/poster.png" class="btn-icon"/>
        <text class="btn-text">生成海报</text>
      </view>
    </button>
    <button class="share-btn" open-type="share">
      <view class="share-content">
        <text class="share-text">分  享</text>
        <text class="commission-text">赚{{goods.commission}}元</text>
      </view>
    </button>
  </view>

  <!-- 返回顶部按钮 -->
  <view class="back-to-top" bindtap="scrollToTop" wx:if="{{showBackToTop}}">
    <image src="/static/icons/top.png" class="top-icon"/>
  </view>

  <!-- 分享选项弹窗 -->
  <view class="share-popup" wx:if="{{showShare}}">
    <view class="share-mask" bindtap="hideSharePanel"></view>
    <view class="share-panel">
      <view class="share-options">
        <view class="share-option" bindtap="generatePoster">
          <image src="/static/icons/poster.png" />
          <text>生成海报</text>
        </view>
        <button class="share-option" open-type="share">
          <image src="/static/icons/wechat.png" />
          <text>分享给好友</text>
        </button>
      </view>
      <view class="cancel-btn" bindtap="hideSharePanel">取消</view>
    </view>
  </view>

  <!-- 海报模态框 -->
  <view class="poster-modal" wx:if="{{showPosterModal}}">
    <view class="modal-mask" bindtap="closePosterModal"></view>
    <view class="modal-content">
      <view class="modal-header">
        <text class="modal-title">选择模板</text>
        <view class="close-btn" bindtap="closePosterModal">
          <image src="/static/icons/close.png" mode="aspectFit" class="close-icon"/>
        </view>
      </view>
      <scroll-view scroll-y class="template-scroll">
        <view class="template-list">
          <view class="template-item {{currentTemplate === item.id ? 'active' : ''}}" 
                wx:for="{{posterTemplates}}" 
                wx:key="id"
                bindtap="switchTemplate"
                data-template-id="{{item.id}}">
            <view class="template-preview-wrap">
              <image class="template-preview" src="{{item.preview}}" mode="aspectFill"/>
              <view class="template-selected" wx:if="{{currentTemplate === item.id}}">
                <image src="/static/icons/selected.png" mode="aspectFit" class="selected-icon"/>
              </view>
            </view>
            <view class="template-info">
              <text class="template-name">{{item.name}}</text>
              <text class="template-desc">{{item.desc}}</text>
            </view>
          </view>
        </view>
      </scroll-view>
      <view class="modal-footer">
        <button class="confirm-btn" bindtap="confirmGeneratePoster">
          <text>生成海报</text>
        </button>
      </view>
    </view>
  </view>

  <!-- 海报预览 -->
  <view class="poster-preview" wx:if="{{showPoster}}">
    <view class="preview-mask" bindtap="closePosterPreview"></view>
    <view class="preview-content">
      <view class="preview-header">
        <view class="close-preview-btn" bindtap="closePosterPreview">×</view>
      </view>
      <image class="poster-image" src="{{posterUrl}}" mode="widthFix"/>
      <view class="preview-footer">
        <button class="save-btn" bindtap="savePoster">保存到相册</button>
      </view>
    </view>
  </view>
</view>