Mini-Program/pages/evaluate2/spec-detail.wxml

<view class="page-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 active"></view>
    <view class="step-item active">
      <view class="step-number">4</view>
      <text class="step-text">查看估价</text>
    </view>
  </view>
  
  <!-- 主要内容区域 -->
  <view class="main-content">
    <!-- 规格信息卡片 -->
    <view class="info-card">
      <text class="card-subtitle">规格信息</text>
      <view class="info-row">
        <text class="info-label">分类</text>
        <text class="info-value">{{category}}</text>
      </view>
      <view class="info-row">
        <text class="info-label">名称</text>
        <text class="info-value">{{productName}}</text>
      </view>
      <view class="info-row">
        <text class="info-label">规格</text>
        <text class="info-value">{{specification}}</text>
      </view>

      <text class="info-hint">您已选择此规格进行估价</text>
    </view>
    
    <!-- 数量设置卡片 -->
    <view class="control-card">
      <text class="card-subtitle">件数设置</text>
      <view class="quantity-box">
        <button bindtap="decreaseQuantity" class="quantity-btn minus" style="width: 180rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx">-</button>
        <input style="width: 420rpx; display: block; box-sizing: border-box" 
          class="quantity-input" 
          type="number" 
          value="{{quantity}}" 
          bindinput="onQuantityChange" 
          min="1"
        />
        <button bindtap="increaseQuantity" class="quantity-btn plus" style="width: 180rpx; display: flex; box-sizing: border-box; left: 0rpx; top: 0rpx">+</button>
      </view>
    </view>
    
    <!-- 计算按钮 -->
    <view class="button-section">
      <button bindtap="calculatePrice" class="primary-btn" style="height: 120rpx; display: block; box-sizing: border-box; left: 0rpx; top: 0rpx">计算预估价格</button>
    </view>
    
    <!-- 结果展示卡片 -->
    <view class="result-card" wx:if="{{totalPrice > 0}}">
      <text class="card-subtitle">预估结果</text>
      <view class="result-row">
        <text class="result-label">预估总价</text>
        <text class="result-value">¥{{totalPrice}}</text>
      </view>
      <text class="result-hint">此价格为预估价格，仅供参考，解释权归又鸟蛋平台，实际价格可能会有所变动</text>
    </view>
    
    <!-- 返回按钮 -->
    <view class="button-section bottom">
      <button bindtap="goBack" class="secondary-btn" style="height: 120rpx; display: block; box-sizing: border-box; left: 0rpx; top: 0rpx">返回规格列表</button>
    </view>
  </view>
</view>