wechatShopUni/pages/category/index.wxml

<view class="container">
  <!-- 排序栏 -->
  <view class="sort-bar">
    <block wx:for="{{sortTypes}}" wx:key="value">
      <view 
        class="sort-item {{currentSort === item.value ? 'active' : ''}}"
        data-sort="{{item.value}}"
        bindtap="changeSort"
      >
        {{item.label}}
      </view>
    </block>
  </view>

  <!-- 商品列表 -->
  <view class="goods-list">
    <view class="goods-item" 
      wx:for="{{goodsList}}" 
      wx:key="id" 
      bindtap="navigateToDetail" 
      data-id="{{item.id}}"
    >
      <view class="goods-img" style="background-color: #f8f8f8;">
        <image src="{{item.image}}" mode="aspectFill" lazy-load></image>
      </view>
      <view class="goods-info">
        <text class="goods-name">{{item.name}}</text>
        <view class="price-box">
          <view class="price-group">
            <text class="price-symbol">¥</text>
            <text class="price">{{item.price}}</text>
          </view>
          <view class="commission-group">
            <text class="iconfont icon-share"></text>
            <text class="commission">{{item.commission}}</text>
          </view>
        </view>
      </view>
    </view>
  </view>

  <!-- 加载状态 -->
  <view wx:if="{{loading}}" class="loading-state">
    <text>加载中...</text>
  </view>

  <!-- 无更多数据 -->
  <view wx:if="{{!loading && !hasMore && goodsList.length > 0}}" class="no-more">
    没有更多商品了
  </view>

  <!-- 空状态 -->
  <view wx:if="{{!loading && goodsList.length === 0}}" class="empty-state">
    <text>暂无商品</text>
  </view>
</view>