Mini-Program/pages/evaluate2/index.wxml

<view class="container">
  <!-- 步骤指示器 -->
  <view class="step-indicator">
    <view class="step-item active">
      <view class="step-number">1</view>
      <text class="step-text">选择品种</text>
    </view>
    <view class="step-line active"></view>
    <view class="step-item active">
      <view class="step-number">2</view>
      <text class="step-text">选择产品</text>
    </view>
    <view class="step-line active"></view>
    <view class="step-item active">
      <view class="step-number">3</view>
      <text class="step-text">选择规格</text>
    </view>
    <view class="step-line"></view>
    <view class="step-item">
      <view class="step-number">4</view>
      <text class="step-text">查看估价</text>
    </view>
  </view>
  
  <!-- 头部导航栏 -->
  <view class="header">
    <view class="header-content">
      <button class="back-button" bindtap="goBackToProductList">
        <text class="back-icon">←</text>
      </button>
      <text class="title">规格选择</text>
      <view class="header-right"></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:if="{{error}}" class="error-card">
      <view class="error-icon">⚠️</view>
      <text class="error-text">{{error}}</text>
      <view class="button-group">
        <button bindtap="loadSpecifications" data-product="{{productName}}" class="btn-primary">重新加载</button>
        <button bindtap="goBackToProductList" class="btn-secondary">返回商品列表</button>
      </view>
    </view>
    
    <!-- 商品信息 -->
    <view wx:else class="product-card">
      <view class="product-info-container">
        <view class="product-info-row">
          <view class="product-image-container">
            <image 
              src="../../images/OIP-C.png" 
              mode="aspectFill"
              class="product-image"
            />
          </view>
          <view class="product-details">
            <text class="product-name">{{productName}}</text>
            <text class="product-hint">请选择重量规格</text>
          </view>
        </view>
      </view>
    </view>
    
    <!-- 规格列表 -->
      <view wx:if="{{!loading && !error && specifications.length > 0}}" class="spec-section">
        <view class="section-header">
          <text class="section-title">可用规格</text>
          <text class="section-count">({{specifications.length}})</text>
        </view>
        <view class="spec-list">
          <view 
            wx:for="{{specifications}}" 
            wx:key="item.name" 
            class="spec-item"
            data-spec="{{item}}"
            bindtap="selectSpec"
          >
            <view class="spec-info">
              <text class="spec-name">{{item.name}}</text>
            </view>
            <view class="spec-radio {{selectedSpec === item.name ? 'selected' : ''}}">
              <view wx:if="selectedSpec === item.name" class="radio-inner"></view>
            </view>
          </view>
        </view>
        
        <!-- 暂无更多规格提示 -->
        <view wx:if="{{specifications.length > 0}}" class="no-more">
          <text class="no-more-text">已经到底啦</text>
        </view>
      </view>
    
    <!-- 无规格提示 -->
    <view wx:if="{{!loading && !error && specifications.length === 0}}" class="empty-state">
      <view class="empty-icon">📋</view>
      <text class="empty-text">该商品暂无可用规格</text>
      <text class="empty-subtext">试试其他商品吧</text>
      <button bindtap="goBackToProductList" class="btn-secondary">返回商品列表</button>
    </view>
  </view>
</view>