WXProgram/miniprogram/pages/index/index.wxml

<navigation-bar title="货运人员管理系统" back="{{false}}" color="black" background="#FFF"></navigation-bar>

  <!-- 主地图组件 -->
  <map 
    id="myMap"
    class="map"
    longitude="{{longitude}}"
    latitude="{{latitude}}"
    scale="{{scale}}"
    markers="{{markers}}"
    show-location
    bindmarkertap="onMarkerTap"
    bindtap="onMapTap"
    polyline="{{polyline}}"
  ></map>

  <!-- 右侧控制按钮组 -->
  <view class="right-controls-container">
    <!-- 签到、注册、授权登录按钮 -->
    <view class="auth-buttons">
      <!-- 签到按钮 - 已授权用户 -->
      <button 
        wx:if="{{showSignInButton}}" 
        class="control-btn signin-btn" 
        bindtap="handleSignIn" 
        type="primary" 
        size="mini"
      >
        签到
      </button>
      
      <!-- 注册按钮 - 游客用户 -->
      <button 
        wx:if="{{showRegisterButton}}" 
        class="control-btn register-btn" 
        bindtap="showApplyForm" 
        type="default" 
        size="mini"
      >
        注册
      </button>
      
      <!-- 授权登录按钮 - 未授权用户 -->
      <button 
        wx:if="{{showAuthButton}}" 
        class="control-btn auth-btn" 
        bindtap="handleAuthLogin" 
        type="warn" 
        size="mini"
      >
        登录
      </button>
      
      <!-- 签退按钮 - 已签到用户 -->
      <button 
        wx:if="{{showSignOutButton}}" 
        class="control-btn sign-out-btn" 
        bindtap="handleSignOut" 
        type="warn" 
        size="mini"
      >
        签退
      </button>
    </view>
    
    <!-- 地图控制按钮 -->
    <view class="map-controls">
      <view class="control-btn location-btn" bindtap="startLocation">
        <image src="/images/ma.png" mode="aspectFit"></image>
      </view>
    </view>
    
    <!-- 用户头像 -->
    <view wx:if="{{authStatus.hasWxCode}}" 
          class="control-btn reset-btn"
          bindtap="showUserPanel">
      <image 
        src="/images/trucks.png"
        mode="aspectFit"
      ></image>
      <view wx:if="{{userInfo.role === 'ADMIN'}}" class="admin-badge">管理</view>
    </view>
  </view>
  
<!-- 用户信息面板 -->
  <view class="user-panel" wx:if="{{showUserPanel}}">
    <view class="user-panel-header" bindtap="stopPropagation">
      <text class="user-panel-title">个人信息</text>
      <view class="close-btn" bindtap="hideUserPanel">×</view>
    </view>
    
    <view class="user-panel-content" bindtap="stopPropagation">
      <view class="user-avatar">
        <image 
          src="/images/user-avatar.png"
          mode="aspectFill"
          class="avatar-image"
        ></image>
      </view>
      
      <view class="user-info">
        <text class="user-name">{{userInfo.name || '未设置姓名'}}</text>
        <text class="user-id">ID: {{userInfo.id || '未获取'}}</text>
        <text class="user-phone">电话：{{userInfo.phone || '未设置'}}</text>
        <text class="user-role">角色：{{userInfo.role === 'ADMIN' ? '管理员' : '货运员'}}</text>
        <!-- 退出后台代码 -->
        <button class="btn-logout" bindtap="handleLogout" size="mini">退出登录</button>
      </view>
    </view>
  </view>
  

  <!-- 订单详情面板 -->
  <view 
    class="order-panel"
    wx:if="{{showOrderPanel}}"
    style="left: {{currentPanelPosition.x}}px; top: {{currentPanelPosition.y}}px;"
    catchtap="stopPropagation"
  >
    <view class="panel-header">
      <text class="panel-title">订单详情</text>
      <view class="close-btn" bindtap="hideOrderPanel">×</view>
    </view>
    
    <view class="panel-content">
      <view class="order-details">
        <view class="order-basic-details">
          <text class="order-detail-id">订单号：{{currentOrder.id}}</text>
          <text class="order-detail-status">状态：{{currentOrder.status}}</text>
        </view>
        
        <!-- 路线点信息 -->
        <view class="route-point-info">
          <text class="route-point-label" style="margin-left: 24rpx;">起点</text>
          <view class="route-point-details">
            <text class="route-point-name">{{currentOrder.startPoint.name}}</text>
            <text class="route-point-address">{{currentOrder.startPoint.address}}</text>
            <text class="route-point-coordinate">{{formatCoordinatePair(currentOrder.startPoint.longitude, currentOrder.startPoint.latitude)}}</text>
          </view>
        </view>
        
        <!-- 终点信息 -->
        <view class="route-point-info">
          <text class="route-point-label" style="margin-left: 24rpx;">终点</text>
          <view class="route-point-details">
            <text class="route-point-name">{{currentOrder.endPoint.name}}</text>
            <text class="route-point-address">{{currentOrder.endPoint.address}}</text>
            <text class="route-point-coordinate">{{formatCoordinatePair(currentOrder.endPoint.longitude, currentOrder.endPoint.latitude)}}</text>
          </view>
        </view>
        
        <!-- 货物信息 -->
        <view class="cargo-info">
          <text class="cargo-info-label">货物信息</text>
          <text class="cargo-info-detail">货物名称：{{currentOrder.cargo.name}}</text>
          <text class="cargo-info-detail">货物重量：{{currentOrder.cargo.weight}}吨</text>
          <text class="cargo-info-detail">货物数量：{{currentOrder.cargo.quantity}}件</text>
        </view>
      </view>
    </view>
  </view>
  

  

  
  <!-- 仓库底部弹窗 -->
  <bottom-modal 
    visible="{{showWarehouseModal}}" 
    bind:stateChange="onWarehouseModalStateChange"
    bind:close="onWarehouseModalClose"
    modal-content-class="warehouse-modal-content"
  >
    <!-- 弹窗内容 - 叠加式设计 -->
    <view class="modal-content">
      <!-- 头部信息 - 始终可见 -->
      <view class="modal-header">
        <view class="modal-title">{{currentWarehouse.name}}</view>
        <view class="modal-subtitle">地址：{{currentWarehouse.address}}</view>
      </view>
      
      <!-- 基础信息区 - 始终可见 -->
      <view class="modal-basic-info">
        <view class="detail-item">
          <text class="detail-label">仓库地址</text>
          <text class="detail-value">{{currentWarehouse.address}}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">联系电话</text>
          <text class="detail-value">{{currentWarehouse.phone}}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">库存量</text>
          <text class="detail-value">{{currentWarehouse.capacity}} 件</text>
        </view>
      </view>
      
      <!-- 详情信息区 - 随着弹窗高度增加而逐步显示 -->
      <view class="modal-detail-info" style="display: {{warehouseModalState === 'full' ? 'block' : 'none'}};">
        <view class="detail-item">
          <text class="detail-label">负责人</text>
          <text class="detail-value">{{currentWarehouse.manager}}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">描述</text>
          <text class="detail-value">{{currentWarehouse.description}}</text>
        </view>
        
        <!-- 从该仓库出发的订单 -->
        <view class="orders-section">
          <view class="section-divider" wx:if="{{pendingOrders.length > 0}}"></view>
          <text class="section-title">从该仓库出发的订单</text>
          <scroll-view scroll-y class="orders-scroll-view">
            <view class="orders-list">
              <view wx:for="{{pendingOrders}}" wx:key="id" class="order-item">
                <view class="order-route-info">
                  <text class="route-text">{{item.startPoint.name}} → {{item.endPoint.name}}</text>
                </view>
                <view class="order-cargo-info">
                  <text class="cargo-text">{{item.cargo.name}} {{item.cargo.quantity}}件</text>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
      
      <!-- 向上滑动提示 - 仅在1/4高度时显示 -->
      <view class="slide-hint" style="display: {{warehouseModalState === 'bottom' || !warehouseModalState ? 'block' : 'none'}};">
        <text>向上滑动查看更多详情</text>
      </view>
    </view>
  </bottom-modal>
  
  <!-- 货运人员底部弹窗 -->
  <bottom-modal 
    visible="{{showDeliveryPersonModal}}" 
    bind:stateChange="onDeliveryPersonModalStateChange"
    bind:close="onDeliveryPersonModalClose"
    modal-content-class="delivery-modal-content"
  >
    <!-- 弹窗内容 - 叠加式设计 -->
    <view class="modal-content">
      <!-- 头部信息 - 始终可见 -->
      <view class="modal-header">
        <view class="delivery-person-header">
          <view class="delivery-person-avatar">
            <image src="{{currentDeliveryPerson.avatarUrl || '/images/trucks.png'}}" mode="aspectFill"></image>
          </view>
          <view class="person-info-header">
            <view class="modal-title">{{currentDeliveryPerson.name}}</view>
            <view class="modal-subtitle">电话：{{currentDeliveryPerson.phone}}</view>
          </view>
        </view>
      </view>
      
      <!-- 基础信息区 - 始终可见 -->
      <view class="modal-basic-info">
        <view class="detail-item">
          <text class="detail-label">电话</text>
          <text class="detail-value">{{currentDeliveryPerson.phone}}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">状态</text>
          <text class="detail-value status-badge status-{{currentDeliveryPerson.status === 'idle' ? 'idle' : currentDeliveryPerson.status === 'busy' ? 'busy' : currentDeliveryPerson.status === 'delivering' ? 'delivering' : 'offline'}}">{{deliveryService.getDeliveryPersonStatusText(currentDeliveryPerson.status)}}</text>
        </view>
        <view class="detail-item">
          <text class="detail-label">当前位置</text>
          <text class="detail-value">{{currentDeliveryPerson.currentLocation.address}}</text>
        </view>
      </view>
      
      <!-- 详情信息区 - 随着弹窗高度增加而逐步显示 -->
      <view class="modal-detail-info" style="display: {{deliveryPersonModalState === 'full' ? 'block' : 'none'}};">
        <!-- 当前订单列表 -->
        <view class="orders-section">
          <view class="section-divider" wx:if="{{currentDeliveryPerson.currentOrders.length > 0}}"></view>
          <text class="section-title">当前订单</text>
          <scroll-view scroll-y class="orders-scroll-view">
            <view class="orders-list">
              <view wx:for="{{currentDeliveryPerson.currentOrders}}" wx:key="id" class="order-item">
                <view class="order-route-info">
                  <text class="route-text">{{item.startPoint.name}} → {{item.endPoint.name}}</text>
                </view>
                <view class="order-cargo-info">
                  <text class="cargo-text">{{item.cargo.name}} {{item.cargo.quantity}}件</text>
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
        
        <!-- 派单功能（仅管理员可见） -->
        <view class="assign-section" wx:if="{{authStatus.hasWxCode && userInfo.role === 'ADMIN' && pendingOrders.length > 0}}">
          <view class="section-divider"></view>
          <text class="section-title">待指派订单</text>
          <scroll-view scroll-y class="pending-orders-scroll-view">
            <view class="pending-orders-list">
              <view wx:for="{{pendingOrders}}" wx:key="id" class="pending-order-item">
                <view class="pending-order-info">
                  <text class="pending-order-route">{{item.startPoint.name}} → {{item.endPoint.name}}</text>
    
                </view>
              </view>
            </view>
          </scroll-view>
        </view>
      </view>
      
      <!-- 向上滑动提示 - 仅在1/4高度时显示 -->
      <view class="slide-hint" style="display: {{deliveryPersonModalState === 'bottom' || !deliveryPersonModalState ? 'block' : 'none'}};">
        <text>向上滑动查看更多详情</text>
      </view>
    </view>
  </bottom-modal>