movecar_wx/package-map/pages/map/index.wxml

<view class="container">
  <!-- 地图组件 -->
  <map 
    id="map"
    class="map"
    longitude="{{longitude}}"
    latitude="{{latitude}}"
    markers="{{markers}}"
    polyline="{{plannedRoute}}"
    include-points="{{trackPoints}}"
    bindcontroltap="controltap"
    show-location
    scale="16"
    enable-zoom="{{true}}"
    enable-scroll="{{true}}"
    enable-rotate="{{false}}"
  ></map>
  
  <!-- 信息提示 -->
  <view class="info toast" wx:if="{{infoText}}">
    {{infoText}}
  </view>
  
  <!-- 加载提示 -->
  <view wx:if="{{loading}}" class="loading-mask">
    <view class="loading-view">
      <loading size="large" color="#007aff">获取路线中...</loading>
    </view>
  </view>

  <!-- 错误提示 -->
  <view wx:if="{{error && !loading}}" class="error-message toast">
    {{error}}
  </view>
  
  <view class="detailsbox"></view>
</view>

<!-- 验证码弹窗组件 -->
<verification-popup 
  isShow="{{showVerification}}"
  phoneNumber="{{phoneNumber}}"
  countdownSeconds="60"
  bind:close="onPopupClose"
  bind:confirm="onCodeConfirm"
  bind:resend="onResendCode"
  bind:complete="onCodeComplete"
/>

<!-- 底部可拖动卡片 -->
<view class="taxi-card-container">
  <!-- 背景遮罩 -->
  <view 
    class="mask" 
    wx:if="{{cardHeight !== 'min'}}"
    style="opacity: {{maskOpacity}};"
    bindtap="closeCard"
  ></view>

  <!-- 可拖动卡片 -->
  <view 
    class="taxi-card"
    style="height: {{currentHeight}}px;bottom: 0;transition: height 0.3s ease;border-radius: {{cardHeight === 'max' ? '0' : '16px 16px 0 0'}};" bindtouchstart="handleTouchStart" bindtouchmove="handleTouchMove" bindtouchend="handleTouchEnd"
  >
    <!-- 拖动指示器 -->
    <view class="drag-handler" wx:if="{{cardHeight !== 'max'}}">
      <view class="drag-bar"></view>
    </view>
    
    <!-- 卡片内容 -->
    <view class="card-content" style="padding-top: {{cardHeight === 'max' ? '40rpx' : '20rpx'}};">
      <!-- 订单状态和基本信息 -->
      <view class="storagecartext_box">
      <view class="storagecartext">

        <view class="destination-title1" style="margin-top: 10rpx;">
          目的地：{{orderdata.poiName}}
          <!-- 显示预计到达时间 -->
        
        </view>
        
        <!-- 客户/司机信息 -->
        <view class="contact-info" wx:if="{{userdata.operationRole==5}}">
          <view class="driver-info" wx:if="{{orderdata.driverphone==''}}">
            司机：<text class="text-warning">分配中</text>
          </view>
          <view class="driver-info" wx:else>
            司机：{{orderdata.driverName}}·{{orderdata.carName}}
            <!-- 乘客视角显示预计到达时间 -->
            <!-- <text wx:if="{{estimatedArrivalTime}}" class="estimated-time">
              预计{{estimatedArrivalTime}}到达
            </text> -->
          </view>
        </view>
        
        <view class="contact-info" wx:if="{{userdata.operationRole==4}}">
          客户：{{orderdata.receiver}}  
          <t-icon 
            name="call-1-filled" 
            size="28rpx" 
            data-phone="{{orderdata.phone}}" 
            bind:tap="ontelephone" 
            class="icon-call"
          />
      
        </view>
        <view class="order-status">
          <text wx:if="{{orderdata.workorderType==0}}" class="section-title">分配中</text>
          <text wx:if="{{orderdata.workorderType==1}}" class="section-title">待出发</text>
          <text wx:if="{{orderdata.workorderType==2}}" class="section-title">行驶中</text>
          <text wx:if="{{orderdata.workorderType==3}}" class="section-title">到达地点</text>
          <text wx:if="{{orderdata.workorderType==4}}" class="section-title">工作中</text>
          <text wx:if="{{orderdata.workorderType==5}}" class="section-title">订单完成</text>
          <text wx:if="{{estimatedArrivalTime && orderdata.workorderType==2}}" class="estimated-time">预计{{estimatedArrivalTime}}到达</text>
        </view>
        
      </view>
      
      <!-- 操作图片 -->
      <view class="action-images">
        <image 
          wx:if="{{userdata.operationRole==5}}" 
          class="storagecar" 
          src="https://esos-iot.bjdexn.cn/myminio/project/c152026b9bc2485f83b39a6132df3ce7.png" 
          mode="heightFix"
        />
        <image 
          wx:if="{{userdata.operationRole==4}}" 
          class="storagecar1" 
          src="https://esos-iot.bjdexn.cn/myminio/project/d98e4fde125f40819f8bd8fe872e409c.png" 
          bind:tap="navigation" 
          mode="heightFix"
        />
      </view>
    </view>
      
      <!-- 更多操作按钮 -->
      <view class="card_more" wx:if="{{userdata.operationRole==5&&orderdata.workorderType!=0}}">
        <view class="card_morebox">联系客服</view>
        <view class="card_morebox" data-phone="{{orderdata.driverphone}}" bind:tap="ontelephone">联系司机</view>
        <view class="card_morebox" bind:tap="cancel">取消订单</view>
        <view wx:if="{{orderdata.workorderType==5}}" class="card_morebox">开发票</view>
        <view wx:if="{{orderdata.workorderType!=5}}" class="card_morebox" bind:tap="editorder">编辑订单</view>

      </view>
      
      <!-- 客户视角内容 -->
      <view class="card_box" wx:if="{{userdata.operationRole==5}}">
        <!-- 订单详情 -->
        <view class="detail-section" style="border-bottom: 1rpx solid #f5f5f5;">
          <view class="section-header" bind:tap="onmore">
            <view class="section-title">订单详情</view>
            <view class="section-action">
              <text>{{moretype ? '收起' : '展开详情'}}</text>
              <t-icon name="{{moretype ? 'chevron-up' : 'chevron-down'}}" size="22px"/>
            </view>
          </view>
          
          <view class="detail-list" wx:if="{{moretype}}">
            <view class="detail-item">
              <view class="item-label">订单号</view>
              <view class="item-value">{{orderdata.workorderId}}</view>
            </view>
            <view class="detail-item">
              <view class="item-label">创建时间</view>
              <view class="item-value">{{orderdata.workorderCreatetime}}</view>
            </view>
            <view class="detail-item">
              <view class="item-label">订单类型</view>
              <view class="item-value">{{orderdata.chargedischargeType==1 ? '充电' : '放电'}}</view>
            </view>
            <view class="detail-item">
              <view class="item-label">需求电量</view>
              <view class="item-value">{{orderdata.workorderElectricity}}</view>
            </view>
            <view class="detail-item">
              <view class="item-label">SOC</view>
              <view class="item-value">{{orderdata.soc}}</view>
            </view>
            <view class="detail-item">
              <view class="item-label">车型</view>
              <view class="item-value">{{orderdata.carMondel}}</view>
            </view>
            <view class="detail-item">
              <view class="item-label">里程</view>
              <view class="item-value">12.5km</view>
            </view>
            <view class="detail-item" wx:if="{{orderdata.workorderType<3}}">
              <view class="item-label">预计时长</view>
              <view class="item-value">{{estimatedDuration || '50分钟'}}</view>
            </view>
            <view class="detail-item" wx:if="{{orderdata.workorderType>=3}}">
              <view class="item-label">时长</view>
              <view class="item-value">{{estimatedDuration || '50分钟'}}</view>
            </view>
            <view class="detail-item" wx:if="{{orderdata.workorderType<3}}">
              <view class="item-label">预计到达时间</view>
              <view class="item-value">{{estimatedArrivalTime || '--'}}</view>
            </view>
            <view class="detail-item" wx:if="{{orderdata.workorderType==3}}">
              <view class="item-label">到达时间</view>
              <view class="item-value">{{orderdata.arrivaltime || '--'}}</view>
            </view>
            <view class="detail-item" wx:if="{{orderdata.workorderType==4}}">
              <view class="item-label">开始工作时间</view>
              <view class="item-value">{{orderdata.startworktime || '--'}}</view>
            </view>
            <view class="detail-item" wx:if="{{orderdata.workorderType==5}}">
              <view class="item-label">工作结束时间</view>
              <view class="item-value">{{orderdata.endworktime || '--'}}</view>
            </view>
          </view>
          
          <view style="height: 20rpx;" wx:if="{{moretype}}"></view>
        </view>
        
        <!-- 费用明细 -->
        <view class="detail-section">
          <view class="section-header" bind:tap="oncostdetails">
            <view class="section-title">预估金额</view>
            <view class="section-action">
              <view class="section-title1">100.1 <text class="section_yuan">元</text>
              </view>
              <t-icon name="{{costdetails ? 'chevron-up' : 'chevron-down'}}" size="22px"/>
            </view>
          </view>
          
          <view class="fee-list" wx:if="{{costdetails}}">
            <view class="fee-item">
              <view class="fee-label">电费</view>
              <view class="fee-value">¥5.00</view>
            </view>
            <view class="fee-item">
              <view class="fee-label">服务费</view>
              <view class="fee-value">¥5.00</view>
            </view>
            <!-- <view class="fee-item">
              <view class="fee-label">起步价</view>
              <view class="fee-value">¥13.00</view>
            </view> -->
            <!-- <view class="fee-item">
              <view class="fee-label">里程费</view>
              <view class="fee-value">¥32.00</view>
            </view> -->
            <!-- <view class="fee-item">
              <view class="fee-label">时长费</view>
              <view class="fee-value">¥8.50</view>
            </view> --> 
           
         
          </view>
          
          <view style="height: 1rpx;"></view>
        </view>
      </view>
      <!---->
      <!-- 司机视角内容 -->
      <view class="card_box" wx:if="{{userdata.operationRole==4}}">
        <!-- 订单详情 -->
        <view class="detail-section" style="border-bottom: 1rpx solid #f5f5f5;">
          <view class="section-header" bind:tap="onmore">
            <view class="section-title">订单详情</view>
            <view class="section-action">
              <text>{{moretype ? '收起' : '展开详情'}}</text>
              <t-icon name="{{moretype ? 'chevron-up' : 'chevron-down'}}" size="22px"/>
            </view>
          </view>
          
          <view class="detail-list" wx:if="{{moretype}}">
            <view class="detail-item">
              <view class="item-label">订单号</view>
              <view class="item-value">{{orderdata.workorderId}}</view>
            </view>
            <view class="detail-item">
              <view class="item-label">创建时间</view>
              <view class="item-value">{{orderdata.workorderCreatetime}}</view>
            </view>
            <view class="detail-item">
              <view class="item-label">订单类型</view>
              <view class="item-value">{{orderdata.chargedischargeType==1 ? '充电' : '放电'}}</view>
            </view>
            <view class="detail-item">
              <view class="item-label">需求电量</view>
              <view class="item-value">{{orderdata.workorderElectricity}}</view>
            </view>
            <view class="detail-item">
              <view class="item-label">SOC</view>
              <view class="item-value">{{orderdata.soc}}</view>
            </view>
            <view class="detail-item">
              <view class="item-label">车型</view>
              <view class="item-value">{{orderdata.carMondel}}</view>
            </view>
            <view class="detail-item">
              <view class="item-label">里程</view>
              <view class="item-value">{{distance}} km</view>
            </view>
            <view class="detail-item" wx:if="{{orderdata.workorderType<3}}">
              <view class="item-label">预计时长</view>
              <view class="item-value">{{estimatedDuration || '50分钟'}}</view>
            </view>
            <view class="detail-item" wx:if="{{orderdata.workorderType>=3}}">
              <view class="item-label">时长</view>
              <view class="item-value">{{estimatedDuration || '50分钟'}}</view>
            </view>
            <view class="detail-item" wx:if="{{orderdata.workorderType<3}}">
              <view class="item-label">预计到达时间</view>
              <view class="item-value">{{estimatedArrivalTime || '--'}}</view>
            </view>
            <view class="detail-item" wx:if="{{orderdata.workorderType==3}}">
              <view class="item-label">到达时间</view>
              <view class="item-value">{{orderdata.arrivaltime || '--'}}</view>
            </view>
            <view class="detail-item" wx:if="{{orderdata.workorderType==4}}">
              <view class="item-label">开始工作时间</view>
              <view class="item-value">{{orderdata.startworktime || '--'}}</view>
            </view>
            <view class="detail-item" wx:if="{{orderdata.workorderType==5}}">
              <view class="item-label">工作结束时间</view>
              <view class="item-value">{{orderdata.endworktime || '--'}}</view>
            </view>
          </view>
          
          <view style="height: 20rpx;" wx:if="{{moretype}}"></view>
        </view>
      </view>
      
      <view style="height: 140rpx;" wx:if="{{moretype}}"></view>
      
      <!-- 控制按钮区域 -->
      <view class="control-panel" wx:if="{{userdata.operationRole==4}}">
        <slide-confirm 
          wx:if="{{orderdata.workorderType==1}}"
          id="mySlideConfirm"
          data-type="{{orderdata.workorderType}}"
          bind:success="onrecognize" 
          width="300" 
          height="50"
          defaultText="开始出发"
          successText="验证中"
        />
        
        <slide-confirm 
          wx:if="{{orderdata.workorderType==2}}"
          id="mySlideConfirm"
          data-type="{{orderdata.workorderType}}"
          bind:success="onarrivalposition" 
          width="300" 
          height="50"
          defaultText="到达目的地"
          successText="验证中"
        />
        
        <slide-confirm 
          wx:if="{{orderdata.workorderType==3}}"
          id="mySlideConfirm"
          data-type="{{orderdata.workorderType}}"
          bind:success="showVerificationPopup" 
          width="300" 
          height="50"
          defaultText="开始工作"
          successText="验证中"
        />
        
        <slide-confirm 
          wx:if="{{orderdata.workorderType==4}}"
          id="mySlideConfirm"
          data-type="{{orderdata.workorderType}}"
          bind:success="onSlideSuccess" 
          width="300" 
          height="50"
          defaultText="完成工作"
          successText="验证中"
        />
        
      </view>
    </view>
  </view>
</view>