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

<view class="page-container">
  <!-- 头部导航栏 -->
  <view class="page-header">
    <text class="header-title">{{productName || '规格详情'}}</text>
  </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">{{specification}}</text>
      </view>
      <view class="info-row">
        <text class="info-label">单价</text>
        <text class="info-value price">¥{{price || 0}}</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>