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

<!-- pages/freight-calculator/index.wxml -->
<view class="container">
  <view class="main-content">
    <!-- 出发地信息 -->
    <view class="section">
      <text class="section-title">出发地</text>
      <view class="address-form">
        <view class="form-item">
          <text class="label">省份</text>
          <input class="input" bindinput="bindOriginInput" data-key="province" value="{{origin.province}}" placeholder="请输入省份" />
        </view>
        <view class="form-item">
          <text class="label">城市</text>
          <input class="input" bindinput="bindOriginInput" data-key="city" value="{{origin.city}}" placeholder="请输入城市" />
        </view>
        <view class="form-item">
          <text class="label">区县</text>
          <input class="input" bindinput="bindOriginInput" data-key="district" value="{{origin.district}}" placeholder="请输入区县" />
        </view>
        <view class="form-item">
          <text class="label">详细地址</text>
          <input class="input" bindinput="bindOriginInput" data-key="detail" value="{{origin.detail}}" placeholder="请输入详细地址" />
        </view>
        <view class="form-item">
          <text class="label">快速选择</text>
          <picker 
            mode="region" 
            bindchange="bindRegionChange" 
            data-type="origin"
            value="{{[origin.province, origin.city, origin.district]}}"
          >
            <view class="picker">
              {{origin.province && origin.city && origin.district ? origin.province + origin.city + origin.district : '请选择'}}
            </view>
          </picker>
        </view>
        <button class="location-btn" bindtap="chooseOriginLocation" style="background-color: #1677ff;">
          <text>手动选择位置</text>
        </button>
      </view>
    </view>

    <!-- 目的地信息 -->
    <view class="section">
      <text class="section-title">目的地</text>
      <view class="address-form">
        <view class="form-item">
          <text class="label">省份</text>
          <input class="input" bindinput="bindDestinationInput" data-key="province" value="{{destination.province}}" placeholder="请输入省份" />
        </view>
        <view class="form-item">
          <text class="label">城市</text>
          <input class="input" bindinput="bindDestinationInput" data-key="city" value="{{destination.city}}" placeholder="请输入城市" />
        </view>
        <view class="form-item">
          <text class="label">区县</text>
          <input class="input" bindinput="bindDestinationInput" data-key="district" value="{{destination.district}}" placeholder="请输入区县" />
        </view>
        <view class="form-item">
          <text class="label">详细地址</text>
          <input class="input" bindinput="bindDestinationInput" data-key="detail" value="{{destination.detail}}" placeholder="请输入详细地址" />
        </view>
        <view class="form-item">
          <text class="label">快速选择</text>
          <picker 
            mode="region" 
            bindchange="bindRegionChange" 
            data-type="destination"
            value="{{[destination.province, destination.city, destination.district]}}"
          >
            <view class="picker">
              {{destination.province && destination.city && destination.district ? destination.province + destination.city + destination.district : '请选择'}}
            </view>
          </picker>
        </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="vehicle-form">
        <view class="form-item">
          <text class="label">车辆类型</text>
          <picker bindchange="bindVehicleTypeChange" range="{{vehicleTypes}}" value="{{selectedVehicleTypeIndex}}">
            <view class="picker">
              {{vehicleTypes[selectedVehicleTypeIndex]}}
            </view>
          </picker>
        </view>
        <view class="form-item">
          <text class="label">载重能力 (吨)</text>
          <input class="input" bindinput="bindVehicleInfoInput" data-key="capacity" value="{{vehicleInfo.capacity}}" placeholder="请输入载重能力" type="number" />
        </view>
        <view class="form-item">
          <text class="label">车辆编号</text>
          <input class="input" bindinput="bindVehicleInfoInput" data-key="number" value="{{vehicleInfo.number}}" placeholder="请输入车辆编号" />
        </view>
        <view class="form-item">
          <text class="label">司机姓名</text>
          <input class="input" bindinput="bindVehicleInfoInput" data-key="driver" value="{{vehicleInfo.driver}}" placeholder="请输入司机姓名" />
        </view>
        <view class="form-item">
          <text class="label">联系电话</text>
          <input class="input" bindinput="bindVehicleInfoInput" data-key="phone" value="{{vehicleInfo.phone}}" placeholder="请输入联系电话" type="number" />
        </view>
      </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">
              <text 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 class="calculate-section">
      <button class="calculate-btn" bindtap="calculateFreight" loading="{{loading}}">
        <text>计算运费</text>
      </button>
      <button class="clear-btn" bindtap="clearInput">
        <text>清空输入</text>
      </button>
    </view>

    <!-- 计算结果 -->
    <view class="result-section" wx:if="{{calculationResult}}">
      <text class="section-title">计算结果</text>
      <view class="result-card">
        <view class="result-item">
          <text class="result-label">预估运费</text>
          <text class="result-value freight">{{calculationResult.freight}} 元</text>
        </view>
        <view class="result-item">
          <text class="result-label">运输距离</text>
          <text class="result-value">{{calculationResult.distance}} km</text>
        </view>
        <view class="result-item">
          <text class="result-label">预计时效</text>
          <text class="result-value">{{calculationResult.deliveryTime}} 天</text>
        </view>
      </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>

  <!-- 地址选择器 -->
  <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>