Mini-Program/pages/goods/index.wxml

<view class="container">
  <!-- 页面标题 -->
  <view class="page-title">
    <text>内部货源管理</text>
  </view>

  <!-- 搜索框 -->
  <view class="search-container">
    <view class="search-box">
      <input 
        class="search-input"
        placeholder="搜索货源名称或创建人" 
        bindinput="onSearchInput" 
        bindconfirm="searchGoods"
        value="{{searchKeyword}}"
      />
      <view wx:if="{{searchKeyword}}" class="clear-icon" bindtap="clearSearch">✘</view>
    </view>
  </view>

  <!-- 筛选按钮 -->
  <view class="filter-container">
    <view class="filter-buttons">
      <view 
        class="filter-btn {{activeFilter === 'all' ? 'active' : ''}}" 
        bindtap="onFilterChange" 
        data-filter="all"
      >
        全部
      </view>
      <view 
        class="filter-btn {{activeFilter === 'small' ? 'active' : ''}}" 
        bindtap="onFilterChange" 
        data-filter="small"
      >
        小品种
      </view>
      <view 
        class="filter-btn {{activeFilter === 'large' ? 'active' : ''}}" 
        bindtap="onFilterChange" 
        data-filter="large"
      >
        大贸易
      </view>
    </view>
  </view>

  <!-- 骨架屏加载 -->
  <view wx:if="{{isLoading && goodsList.length === 0}}" class="skeleton-container">
    <view class="skeleton-grid">
      <view class="skeleton-grid-item" wx:for="{{[1,2,3,4,5,6,7,8]}}" wx:key="index">
        <view class="skeleton-image"></view>
        <view class="skeleton-title"></view>
        <view class="skeleton-title short"></view>
        <view class="skeleton-footer">
          <view class="skeleton-price"></view>
        </view>
      </view>
    </view>
  </view>

  <!-- 商品列表区域 -->
  <view class="goods-section">
    <scroll-view 
      class="goods-list"
      bindscrolltolower="onReachBottom"
      scroll-y="true"
      refresher-enabled="{{true}}"
      refresher-triggered="{{isRefreshing}}"
      refresher-default-style="black"
      refresher-background="transparent"
      bindrefresherrefresh="onRefresherRefresh"
    >
      <view class="goods-list-container">
        <!-- 网格布局 -->
        <view class="grid-container">
          <view 
            class="grid-item" 
            wx:for="{{goodsList}}" 
            wx:key="id" 
            data-item="{{item}}"
            bindtap="onGoodsItemClick"
          >
            <view class="product-card">
              <view class="product-image-wrapper">
                <image 
                  class="product-image" 
                  src="{{item.imageUrls && item.imageUrls.length > 0 ? item.imageUrls[0] : '/images/default-avatar.png'}}" 
                  mode="aspectFill"
                  lazy-load="true"
                ></image>
                <view wx:if="{{item.status === 'sold_out'}}" class="promo-tag sold-out">售空</view>
                <view wx:elif="{{item.supplyStatus === '预售'}}" class="promo-tag presale">预售</view>
                <view wx:elif="{{item.supplyStatus === '现货'}}" class="promo-tag in-stock">现货</view>
              </view>
              <view class="product-info">
                <view class="product-title-row">
                  <view class="product-title">{{item.productName}}</view>
                  <view class="stock-count">库存：{{item.quantity || item.minOrder || '充足'}}</view>
                </view>
                <view class="product-spec">{{item.specification || item.spec || '无'}}<text wx:if="{{item.yolk}}"> | {{item.yolk}}</text></view>
                <view class="product-meta">
                  <text class="product-price">{{item.costprice ? '¥' + item.costprice : '无采购价'}}</text>
                  <text class="product-location">{{item.region || ''}}</text>
                </view>
                <view class="product-description">{{item.description || ''}}</view>
                <view class="creator-info">
                  <text class="creator-name">{{item.creatorName || '未知'}}</text>
                  <text class="create-time">{{item.formattedCreatedAt || item.created_at || '未知'}}</text>
                </view>
              </view>
            </view>
          </view>
        </view>
        
        <!-- 加载更多 -->
        <view wx:if="{{isLoading && goodsList.length > 0}}" class="loading-more">
          <view class="loading-spinner"></view>
          <text class="loading-text">加载中...</text>
        </view>
        
        <!-- 无更多数据 -->
        <view wx:if="{{!hasMore && goodsList.length > 0}}" class="no-more-data">
          <text>货源正在快马加鞭的赶来</text>
        </view>
        
        <!-- 空状态 -->
        <view wx:if="{{goodsList.length === 0 && !isLoading}}" class="empty-container">
          <text class="empty-text">暂无货源数据</text>
          <text class="empty-hint">下拉刷新试试</text>
        </view>
      </view>
    </scroll-view>
  </view>
</view>