Mini-Program/pages/freight-calculator/index.wxml

<!-- pages/freight-calculator/index.wxml -->
<view class="container">
  <view class="main-content">
    <!-- 出发地信息 -->
    <view class="section" wx:if="{{!isFromGoodsDetail}}">
      <text class="section-title">出发地</text>
      <view class="address-form">
        <view class="form-item address-row">
          <text class="label">省市区</text>
          <view class="address-inputs">
            <input class="input address-input" bindinput="bindOriginInput" data-key="province" value="{{origin.province}}" placeholder="省份" />
            <input class="input address-input" bindinput="bindOriginInput" data-key="city" value="{{origin.city}}" placeholder="城市" />
            <input class="input address-input" bindinput="bindOriginInput" data-key="district" value="{{origin.district}}" placeholder="区县" />
          </view>
        </view>
        <view class="form-item">
          <text class="label">详细地址</text>
          <input class="input" bindinput="bindOriginInput" data-key="detail" value="{{origin.detail}}" placeholder="请输入详细地址" />
        </view>

        <view style="display: flex; justify-content: space-between; gap: 12rpx;">
          <button class="location-btn" bindtap="useCurrentLocationForOrigin">
            <text>使用当前位置</text>
          </button>
          <button class="location-btn" bindtap="chooseOriginLocation" style="background-color: #1677ff;">
            <text>手动选择位置</text>
          </button>
        </view>
      </view>
    </view>

    <!-- 目的地信息 -->
    <view class="section">
      <text class="section-title">目的地</text>
      <view class="address-form">
        <view class="form-item address-row">
          <text class="label">省市区</text>
          <view class="address-inputs">
            <input class="input address-input" bindinput="bindDestinationInput" data-key="province" value="{{destination.province}}" placeholder="省份" />
            <input class="input address-input" bindinput="bindDestinationInput" data-key="city" value="{{destination.city}}" placeholder="城市" />
            <input class="input address-input" bindinput="bindDestinationInput" data-key="district" value="{{destination.district}}" placeholder="区县" />
          </view>
        </view>
        <view class="form-item">
          <text class="label">详细地址</text>
          <input class="input" bindinput="bindDestinationInput" data-key="detail" value="{{destination.detail}}" placeholder="请输入详细地址" />
        </view>

        <view style="display: flex; justify-content: space-between; gap: 12rpx;">
          <button class="location-btn" bindtap="useCurrentLocation">
            <text>使用当前位置</text>
          </button>
          <button class="location-btn" bindtap="chooseDestinationLocation" style="background-color: #1677ff;">
            <text>手动选择位置</text>
          </button>
        </view>
      </view>
    </view>



    <!-- 运输参数 -->
    <view class="section">
      <text class="section-title">运输参数</text>
      <view class="address-form">
        <!-- 运输模式 -->
        <view class="form-item">
          <text class="label">运输模式</text>
          <picker bindchange="bindTransportModeChange" value="{{transportModeIndex}}" range="{{transportModes}}">
            <view class="picker">
              {{transportModes[transportModeIndex]}}
            </view>
          </picker>
        </view>
        

        
        <!-- 鸡蛋重量 -->
        <view class="form-item">
          <text class="label">鸡蛋重量（公斤）</text>
          <input class="input" type="number" name="weight" placeholder="请输入鸡蛋重量" value="{{weight}}" bindinput="bindWeightInput" />
        </view>
        
        <!-- 货物体积 -->
        <view class="form-item">
          <text class="label">货物体积（立方米）</text>
          <input class="input" type="number" name="volume" placeholder="请输入货物体积" value="{{volume}}" bindinput="bindVolumeInput" />
        </view>
        
        <!-- 包装类型 -->
        <view class="form-item">
          <text class="label">包装类型</text>
          <picker bindchange="bindPackagingChange" value="{{packagingIndex}}" range="{{packagingTypes}}">
            <view class="picker">
              {{packagingTypes[packagingIndex]}}
            </view>
          </picker>
        </view>
        
        <!-- 车型 -->
        <view class="form-item">
          <text class="label">车型</text>
          <picker bindchange="bindVehicleTypeChange" value="{{vehicleTypeIndex}}" range="{{vehicleTypes}}">
            <view class="picker">
              {{vehicleTypes[vehicleTypeIndex]}}
            </view>
          </picker>
        </view>
        
        <!-- 车长 -->
        <view class="form-item">
          <text class="label">车长</text>
          <picker bindchange="bindTruckLengthChange" value="{{truckLengthIndex}}" range="{{truckLengths}}">
            <view class="picker">
              {{truckLengths[truckLengthIndex]}}
            </view>
          </picker>
        </view>
        
        <!-- 车型详情提示 -->
        <view class="form-item">
          <text class="label">车型载重/体积参考</text>
          <text class="vehicle-info">{{vehicleInfo}}</text>
        </view>
        


      </view>
    </view>



    <!-- 计算按钮 -->
    <view class="calculate-section">
      <button class="calculate-btn" bindtap="calculate" loading="{{loading}}">
        <text>计算运费</text>
      </button>
      <button class="clear-btn" bindtap="clearInput">
        <text>清空输入</text>
      </button>
    </view>

    <!-- 计算结果 -->
    <view class="result-section" wx:if="{{calculationResult || showResult}}">
      <text class="section-title">计算结果</text>
      <view class="result-card">
        <view class="result-item">
          <text class="result-label">预估运费</text>
          <text class="result-value freight">{{feeRange}}</text>
        </view>
        <view class="result-item">
          <text class="result-label">运输距离</text>
          <text class="result-value">{{calculationResult ? calculationResult.distance + ' km' : ''}}</text>
        </view>
        <view class="result-item">
          <text class="result-label">预计时效</text>
          <text class="result-value">{{calculationResult ? calculationResult.deliveryTime + ' 天' : ''}}</text>
        </view>
        <view class="result-item" wx:if="{{showResult}}">
          <text class="result-label">市场参考价</text>
          <text class="result-value">{{marketPrice}}</text>
        </view>
        <view class="result-item" wx:if="{{showResult}}">
          <text class="result-label">合规性检查</text>
          <text class="result-value" style="color: {{isCompliant ? '#07C160' : '#F56C6C'}}">{{complianceStatus}}</text>
        </view>
      </view>
      
      <!-- 运费提示信息 -->
      <view class="result-note" wx:if="{{showResult}}">
        <text class="note-text">注：预估运费可能与实际费用存在误差，仅供参考。如需准确报价，建议联系下方专业物流老师获取详细方案。</text>
      </view>
      
      <view class="detail-section" wx:if="{{showResult && detailText}}">
        <view style="display: flex; justify-content: space-between; align-items: center;">
          <text class="section-title">费用明细</text>
          <button class="toggle-btn" bindtap="toggleDetail">
            <text>{{showDetail ? '收起' : '展开'}}</text>
          </button>
        </view>
        <text class="detail-text" wx:if="{{showDetail}}">{{detailText}}</text>
      </view>
    </view>

    <!-- 历史记录 -->
    <view class="section" wx:if="{{historyRecords.length > 0}}">
      <text class="section-title">历史记录</text>
      <view class="history-list">
        <view class="history-item" wx:for="{{historyRecords}}" wx:key="item.id">
          <view class="history-content">
            <text class="history-origin">{{item.origin.province}}{{item.origin.city}}</text>
            <text class="history-arrow">→</text>
            <text class="history-destination">{{item.destination.province}}{{item.destination.city}}</text>
            <text class="history-freight">¥{{item.result.freight}}</text>
          </view>
          <view class="history-actions">
            <button class="history-use-btn" bindtap="useHistoryRecord" data-index="{{index}}">
              <text>使用</text>
            </button>
            <button class="history-delete-btn" bindtap="deleteHistoryRecord" data-index="{{index}}">
              <text>删除</text>
            </button>
          </view>
        </view>
        <button class="clear-history-btn" bindtap="clearHistory">
          <text>清空历史记录</text>
        </button>
      </view>
    </view>

    <!-- 空状态 -->
    <view class="section" wx:if="{{historyRecords.length === 0}}">
      <text class="section-title">历史记录</text>
      <view class="empty-state">
        <text>暂无历史记录</text>
      </view>
    </view>

    <!-- 物流人员信息 -->
    <view class="section">
      <text class="section-title">物流人员信息</text>
      <view class="logistics-intro">
        <text class="intro-text">我们拥有专业的物流团队，为您提供高效、安全的运输服务。以下是我们的物流专家，他们具有丰富的行业经验和专业知识，能够为您的货物运输提供专业的解决方案。</text>
      </view>
      <view class="logistics-personnel">
        <view class="personnel-card" wx:for="{{logisticsPersonnel}}" wx:key="item.id">
          <view class="personnel-header-section">
            <view class="personnel-avatar">
              <image wx:if="{{index === 0}}" src="https://my-supplier-photos.oss-cn-chengdu.aliyuncs.com/products/%E7%BB%BF%E5%A3%B3/image/855d000d7555af77bb2d46a86deb16d2.jpeg" class="avatar-image"></image>
              <image wx:elif="{{index === 1}}" src="https://my-supplier-photos.oss-cn-chengdu.aliyuncs.com/products/%E7%BB%BF%E5%A3%B3/image/855d000d7555af77bb2d46a86deb16d2.jpeg" class="avatar-image"></image>
              <text wx:else class="avatar-text">{{item.name.charAt(0)}}</text>
            </view>
            <view class="personnel-header-info">
              <view class="personnel-name">{{item.name}}</view>
              <view class="personnel-position">{{item.position}}</view>
              <view class="personnel-tags">
                <view class="personnel-tag">{{item.experience}}年物流经验</view>
                <view class="personnel-tag">认证物流师</view>
                <view class="personnel-tag">专业配送</view>
              </view>
            </view>
          </view>
          <view class="personnel-description">
            <view class="description-text">
              {{item.description || '拥有丰富的物流行业经验，熟悉各种货物的运输要求和流程，能够为客户提供专业的物流解决方案和优质的服务。'}}
            </view>
          </view>
          <view class="personnel-contact-section">
            <view class="personnel-contact-info">
              <view class="contact-label">联系电话：</view>
              <view class="contact-value">{{item.phone}}</view>
            </view>
            <button class="contact-btn" bindtap="makePhoneCall" data-phone="{{item.phone}}">
              <text>立即联系</text>
            </button>
          </view>
        </view>
        <view wx:if="{{logisticsPersonnel.length === 0}}" class="empty-state">
          <text>暂无物流人员信息</text>
        </view>
      </view>
    </view>
  </view>

  <!-- 地址选择器 -->
  <view class="picker-overlay" wx:if="{{showOriginPicker || showDestinationPicker}}" bindtap="closePicker">
    <view class="picker-popup-container" catchtap="">
      <view class="picker-header">
        <text class="picker-title">{{showOriginPicker ? '选择出发地' : '选择目的地'}}</text>
        <button class="picker-close" bindtap="closePicker">关闭</button>
      </view>
      <view class="picker-content">
        <!-- 这里可以集成地址选择器组件 -->
        <text>地址选择器功能待实现</text>
      </view>
    </view>
  </view>
</view>