wechatShopUni/pages/goods/list/index.wxml

<!--pages/goods/list/index.wxml-->
<view class="container">
  <!-- 自定义授权弹窗 -->
  <view class="custom-modal" wx:if="{{showAuthModal}}">
    <view class="modal-mask" bindtap="hideAuthModal"></view>
    <view class="modal-content" catchtap="preventTap">
      <!-- 未授权状态 -->
      <block wx:if="{{bindStatus === 0}}">
        <view class="modal-icons">
          <image class="icon-left" src="{{iconZhihu}}" mode="aspectFit" />
          <view class="icon-arrow">
            <text class="arrow-text">⟷</text>
          </view>
          <image class="icon-right" src="{{iconUser}}" mode="aspectFit" />
        </view>
        <view class="modal-title">您还未授权成为推客</view>
        <view class="modal-subtitle">购买/分享商品无收益</view>
        <view class="modal-btn-wrap">
          <button class="auth-btn" bindtap="onAuthClick">去授权拿收益</button>
        </view>
        <view class="no-commission-wrapper">
          <store-product 
            appid="{{currentShopAppid}}" 
            product-id="{{currentProductId}}" 
            product-promotion-link="{{productPromotionLink}}"
            custom-content="{{true}}"
            bind:entererror="onStoreProductEnterError"
            open-page="product-detail"
          >
            <view class="modal-cancel" data-appid="{{currentShopAppid}}" data-product-id="{{currentProductId}}">不要收益，去购买</view>
          </store-product>
        </view>
      </block>
      
      <!-- 已授权状态 -->
      <block wx:else>
        <view class="product-modal">
          <!-- 流程说明 -->
          <view class="process-flow">
            <view class="flow-steps">
              <view class="flow-step">
                <text class="step-number">01</text>
                <view class="step-text">
                  <text>购买/分享</text>
                  <text>商品</text>
                </view>
              </view>
              <view class="flow-arrow">→</view>
              <view class="flow-step">
                <text class="step-number">02</text>
                <view class="step-text">
                  <text>返回小程序</text>
                </view>
              </view>
              <view class="flow-arrow">→</view>
              <view class="flow-step">
                <text class="step-number">03</text>
                <view class="step-text">
                  <text>我的订单</text>
                  <text>查看收益</text>
                </view>
              </view>
            </view>
            <view class="flow-tip">提示：微信小店页点击右上角"..."可分享商品</view>
          </view>

          <!-- 商品信息 -->
          <view class="product-info-wrapper">
            <store-product 
              appid="{{currentShopAppid}}" 
              product-id="{{currentProductId}}" 
              product-promotion-link="{{productPromotionLink}}"
              custom-content="{{true}}"
              bind:entererror="onStoreProductEnterError"
              open-page="product-detail"
            >
              <view class="product-info">
                <image class="product-image" src="{{currentProduct.image}}" mode="aspectFill"></image>
                <view class="product-detail">
                  <view class="product-title">{{currentProduct.name}}</view>
                  <view class="price-info">
                    <view class="current-price">
                      <text class="price-symbol">¥</text>
                      <text class="price-value">{{currentProduct.price}}</text>
                    </view>
                  </view>
                </view>
              </view>
            </store-product>
          </view>

          <!-- 按钮区域 -->
          <view class="action-buttons">
            <view class="share-btn" bindtap="onShareProduct">
              <view class="btn-content">
                <text class="amount">¥{{currentProduct.estimatedReturn}}</text>
                <text class="label">分享得</text>
              </view>
            </view>
            
            <view class="buy-btn" bindtap="onBuyProduct">
              <view class="btn-content-wrapper">
                <store-product 
                  appid="{{currentShopAppid}}" 
                  product-id="{{currentProductId}}" 
                  product-promotion-link="{{productPromotionLink}}"
                  custom-content="{{true}}"
                  bind:entererror="onStoreProductEnterError"
                  open-page="product-detail"
                >
                  <view class="btn-content">
                    <text class="amount">¥{{currentProduct.estimatedReturn}}</text>
                    <text class="label">购买/送礼返</text>
                  </view>
                </store-product>
              </view>
            </view>
          </view>
        </view>
      </block>
    </view>
  </view>
  <!-- 商品列表 -->
  <scroll-view 
    scroll-y 
    class="goods-list"
    bindscrolltolower="onReachBottom"
    enable-back-to-top
  >
    <view class="goods-item" 
      wx:for="{{goodsList}}" 
      wx:key="id"
      bindtap="navigateToDetail"
      data-goods-id="{{item.goods_id}}"
    >
      <image class="goods-image" src="{{item.head_img_list[0]}}" mode="aspectFill" lazy-load></image>
      <view class="goods-content">
        <view class="goods-title">{{item.title}}</view>
        <view class="goods-subtitle" wx:if="{{item.sub_title}}">{{item.sub_title}}</view>
        <view class="goods-info">
          <view class="price-wrap">
            <text class="price-symbol">¥</text>
            <text class="price">{{item.sale_price}}</text>
          </view>
          <view class="commission-wrap">
            <text class="commission-label">预估返</text>
            <text class="commission-amount">¥{{item.total_commission_amount}}</text>
          </view>
        </view>
      </view>
    </view>

    <!-- 加载更多 -->
    <view class="loading-more" wx:if="{{loading}}">
      <view class="loading-icon"></view>
      <text>加载中...</text>
    </view>
    <view class="no-more" wx:if="{{!hasMore && goodsList.length > 0}}">
      <text>没有更多了</text>
    </view>
  </scroll-view>

  <!-- 空状态 -->
  <view class="empty-state" wx:if="{{goodsList.length === 0 && !loading}}">
    <icon type="info" size="64" color="#CCCCCC"/>
    <text>暂无相关商品</text>
  </view>

  <!-- 海报预览弹窗 -->
  <view class="poster-modal" wx:if="{{showPosterModal}}" bindtap="closePosterModal">
    <view class="poster-content">
      <image class="poster-image" src="{{posterUrl}}" mode="widthFix" bindload="onPosterImageLoad"></image>
    </view>
  </view>
  
  <!-- 海报画布（隐藏） -->
  <canvas canvas-id="posterCanvas" style="width: 750px; height: 1500px; position: fixed; left: -9999px;"></canvas>
</view>