Mini-Program/pages/evaluate2/product-list.wxml

<view class="container">
  <!-- 头部导航栏 -->
  <view class="header">
    <view class="header-content" style="display: flex; align-items: center; justify-content: space-between; box-sizing: border-box; padding: 0 20rpx; width: 740rpx">
      <button class="title" bindtap="goBackToCategories">返回分类</button>
      <text class="title">商品选择</text>
      <view style="width: 120rpx;"></view> <!-- 占位，保持标题居中 -->
    </view>
  </view>
  
  <view class="content">
    <!-- 加载中状态 -->
    <view wx:if="{{loading}}" class="loading">
      <view class="loading-spinner"></view>
      <text class="loading-text">正在加载商品数据...</text>
    </view>
    
    <!-- 非加载状态 -->
    <view wx:else>
      <!-- 错误提示 -->
      <view wx:if="{{error}}" class="error-card">
        <view class="error-icon">⚠️</view>
        <text class="error-text">{{error}}</text>
        <button bindtap="loadProductNames" class="btn-primary">重新加载</button>
      </view>
      
      <!-- 商品名称列表 -->
      <view wx:else class="product-section">
      <!-- 当前选择的分类 -->
      <view wx:if="{{category}}" class="current-category">
        <view class="current-category-content">
          <text class="current-category-label">当前分类：</text>
          <text class="current-category-name">{{category}}</text>
        </view>
        <!-- 价格范围 -->
        <view wx:if="{{priceRange.hasPrice}}" class="price-range">
          <text class="price-range-label">价格范围：</text>
          <text class="price-range-value">¥{{priceRange.min}} - ¥{{priceRange.max}}</text>
        </view>
      </view>
      <view class="section-header">
        <text class="section-title">商品列表</text>
        <text class="section-count">{{productNames.length}}个商品</text>
      </view>
      
      <!-- 有商品时显示网格 -->
      <view wx:if="{{productNames.length > 0}}" class="product-grid">
        <view 
          wx:for="{{productNames}}" 
          wx:key="*this" 
          class="product-card"
          data-product="{{item}}"
          bindtap="selectProduct"
        >
          <text class="product-name">{{item}}</text>
        </view>
      </view>
      
      <!-- 无商品时显示空状态 -->
      <view wx:if="{{productNames.length === 0}}" class="empty-state">
        <view class="empty-icon">📦</view>
        <text class="empty-text">
          {{category ? '该分类下暂无商品' : '暂无商品'}}
        </text>
        <button bindtap="loadProductNames" class="btn-secondary">重新加载</button>
      </view>
      
      <!-- 暂无更多商品提示 -->
      <view wx:if="{{productNames.length > 0}}" class="no-more">
        <text class="no-more-text">暂无更多商品选择</text>
      </view>
    </view>
    </view>
  </view>
</view>