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"
/> -->
<!-- 验证码弹窗（如果有） -->
<verification-popup 
  class="code-popup"
  isShow="{{showCodePopup}}"
  type="code"
  bind:close="onCodePopupClose"
  bind:inputComplete="onCodeInputComplete"
  bind:resend="onResendCode"
/>
<!-- 底部可拖动卡片 -->
<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}}  <t-icon 
            name="file-copy" 
            size="28rpx" 
            class="icon-call"
            bindtap="copyDestination"
          />
          <!-- 显示预计到达时间 -->
        </view>
        
        <!-- 客户/司机信息 -->
        <view class="contact-info" wx:if="{{userdata.operationRole==5||userdata.operationRole==6}}">
          <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="{{orderdata.workorderType==6}}" class="section-title">取消工单</text>
          <text wx:if="{{estimatedArrivalTime && orderdata.workorderType==2}}" class="estimated-time">预计{{estimatedArrivalTime}}到达</text>
          <text wx:if="{{orderdata.workorderType==5&&orderdata.settlementType==0}}" class="section-title">待结算</text>
          <text wx:if="{{orderdata.workorderType==5&&orderdata.settlementType==1}}" class="section-title">结算完成</text>
          <text wx:if="{{orderdata.workorderType==5&&orderdata.settlementType==2}}" class="section-title">结算失败</text>
        </view>
        
      </view>
      
      <!-- 操作图片 -->
      <!--  -->
      <view class="action-images">
        <image 
          wx:if="{{userdata.operationRole==5||userdata.operationRole==6}}" 
          class="storagecar" 
          src="https://esos-iot.com/myminio/project/c152026b9bc2485f83b39a6132df3ce7.png" 
          mode="heightFix"
        />
        <image 
          wx:if="{{userdata.operationRole==4}}" 
          class="storagecar1" 
          src="https://esos-iot.com/myminio/project/d98e4fde125f40819f8bd8fe872e409c.png" 
          bind:tap="navigation" 
          mode="heightFix"
        />
      </view>
    </view>
      
      <!-- 更多操作按钮 -->
      <view class="card_more" wx:if="{{userdata.operationRole==5||userdata.operationRole==6}}">
        <!-- <view class="card_morebox">联系客服</view> -->
        <button class="card_morebox" open-type="contact" plain>
          联系客服
</button>
        <view class="card_morebox card_moreboxleft" data-phone="{{orderdata.driverphone}}" bind:tap="ontelephone" wx:if="{{orderdata.workorderType!=0&&orderdata.workorderType!=5}}">联系司机</view>
        <view class="card_morebox card_moreboxleft" bind:tap="cancel" wx:if="{{orderdata.workorderType<3}}">取消工单</view>
        <!-- <view wx:if="{{orderdata.workorderType==5}}" class="card_morebox card_moreboxleft">开发票</view> -->
        <!-- <view wx:if="{{orderdata.workorderType!=5}}" class="card_morebox card_moreboxleft" bind:tap="editorder">编辑工单</view> -->
           
      </view>
      
      <!-- 客户视角内容 -->
      <view class="card_box" wx:if="{{userdata.operationRole==5||userdata.operationRole==6}}">
        <!-- 工单详情 -->
        <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" style="color:#40a9ff;">{{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" wx:if="{{orderdata.workorderType>4&&orderdata.settlementType==0}}">实付金额</view>
            <view class="section-title" wx:if="{{orderdata.workorderType>4&&orderdata.settlementType==1}}">实付金额</view>
            <view class="section-title" wx:if="{{orderdata.workorderType<4&&orderdata.settlementType==0}}">预估金额</view>
            <view class="section-action">
              <view class="section-title1">{{orderdata.price}} <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="detail-item" wx:if="{{orderdata.chargedischargeType==1}}">
              <view class="item-label">充电量</view>
              <view class="item-value">{{orderdata.chargingcapacity}}</view>
            </view>
            <view class="detail-item" wx:if="{{orderdata.chargedischargeType==2}}">
              <view class="item-label">放电量</view>
              <view class="item-value">{{orderdata.dischargecapacity}}</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;"></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 class="payment" wx:if="{{orderdata.workorderType==5&&orderdata.settlementType==0}}">
    <view class="payccc">
    用户待结算
    </view>
    </view>
      </view>
    </view>
    <view class="payment" wx:if="{{(userdata.operationRole==5||userdata.operationRole==6)&&orderdata.workorderType==5&&orderdata.settlementType==0}}">
    <view class="pay" bind:tap="onpay">
    工单结算
    </view>
    </view>
    <view class="payment" wx:if="{{(userdata.operationRole==5||userdata.operationRole==6)&&orderdata.workorderType<5&&orderdata.settlementType==0}}">
      <view class="payccc">
        工单服务中...
    </view>
    </view>
    <!-- 结算弹窗组件 -->
<!-- 结算弹窗 -->
<verification-popup 
  class="payment-popup" 
  isShow="{{showpayment}}"
  type="结算"
  bind:close="onpaymentPopupClose"
  bind:inputComplete="onpaymentInputComplete"
/>
  </view>
</view>  
<!---->