316 lines
12 KiB
Plaintext
316 lines
12 KiB
Plaintext
<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>
|