guzijian / garbage-removal · Files

<template>
  <clashDriverDispatch ref="clashDriverDispatchRef" :valueKey="'licensePlateNumber'"
    :onconfirm="handleDriverDispatchConfirm" :dataList="driverPersonnelList">
  </clashDriverDispatch>
  <clashDisposalDispatch ref="clashDisposalDispatchRef" :valueKey="'companyName'"
    :onconfirm="handleDisposalDispatchConfirm" :dataList="driverPersonnelList">
  </clashDisposalDispatch>
  <u-popup :zIndex="10074" closeOnClickOverlay :show="carPopupShowFlag" :round="10" @close="handlePopupClick(false)"
    @open="handlePopupClick(true)">
    <view class="company-clean-container-car-popup">
      <!-- 主要内容 -->
      <view class="company-clean-container-car-popup-content">
        <view class="company-clean-container-car-popup-content-title">
          <view style="text-align: center;">
            车辆类型
          </view>
        </view>
        <view class="company-clean-container-car-popup-content-box">
          <view class="company-clean-container-car-popup-content-box-item" v-for="(item, index) in garCarInfoList"
            :key="index">
            <view class="company-clean-container-car-popup-content-box-item-text">
              {{ item.garOrderCarType }}
            </view>
            <view class="company-clean-container-car-popup-content-box-item-number" hover-class="hoverClickStyle">
              <u-number-box :min="0" :max="9999" integer buttonSize="46" :inputWidth="100"
                v-model="garCarInfoList[item.garOrderCarType].garOrderCarNumber" :disabledInput="true"></u-number-box>
            </view>
          </view>
        </view>
      </view>
      <!-- 占位盒子 -->
      <view class="company-clean-container-car-popup-button-safe">
        <view class="company-clean-container-car-popup-button-safe-btn">
          <u-button type="primary" color="#19a97c" @click="submitUpdateCarInfo">确定</u-button>
        </view>
      </view>
    </view>
  </u-popup>
  <view class="order-detail-container" v-if="dataGram != null || dataGram != undefined">
    <view class="order-detail-container-box">
      <view class="order-detail-top">
        <view class="order-detail-top-box">
          <view class="order-detail-top-box-step">
            <u-steps :current="currentStep(dataGram.garOrderHandlerStatus)" dot>
              <u-steps-item title="待清运"></u-steps-item>
              <u-steps-item title="清运中"></u-steps-item>
              <u-steps-item title="已完成"></u-steps-item>
            </u-steps>
          </view>
        </view>
      </view>
      <!-- 信息提示 -->
      <view class="order-detail-container-box-card">
        <text v-if="dataGram.garCancelFlag == 0" style="color: red;">请于交易完成后线下支付！！</text>
        <view v-else style="display: flex; color:red;">
          <u-icon name="close-circle" color="red"></u-icon>
          <text> &nbsp;&nbsp;订单已被取消！原因：{{ dataGram.garReason }}</text>
        </view>
      </view>
      <!-- 订单信息 -->
      <view class="order-detail-container-box-card">
        <view class="order-detail-container-header-card-title">
          <view class="order-detail-container-header-card-uicon"></view>
          订单信息
        </view>
        <view class="order-detail-container-header-item"
          @click.stop="handlerJumpOtherApp(dataGram.garLatitude, dataGram.garLongitude, dataGram.garCoordinate)">
          <text class="order-detail-container-header-title">清运地点：</text>
          <view class="order-detail-container-header-content" style="text-decoration: underline">
            <text selectable='true'>{{ dataGram.garOrderAddress + dataGram.garOrderAddressDetails }}</text>
          </view>
        </view>
        <view class="order-detail-container-header-item">
          <text class="order-detail-container-header-title">现场图片：</text>
          <view class="order-detail-container-header-content">
            <u-upload width="180" height="130" :fileList="currentImages" name="3" multiple :maxCount="10"
              :previewFullImage="true" :isReadOnly="true"></u-upload>
          </view>
        </view>
        <view class="order-detail-container-header-item">
          <text class="order-detail-container-header-title">负责单位：</text>
          <view class="order-detail-container-header-content">
            {{ dataGram.garOrderCompanyName }}
          </view>
        </view>
        <view class="order-detail-container-header-item">
          <text class="order-detail-container-header-title">垃圾类型：</text>
          <view class="order-detail-container-header-content">
            {{ dataGram.garOrderTrashType }}
          </view>
        </view>      

       <view class="order-detail-container-header-item" v-for="(disposal,index) in dataGram.disposalSites">
        <view>
            <text class="order-detail-container-header-title" v-if="index == 0" >处置场地：</text>
            <text class="order-detail-container-header-title" v-else >&emsp;&emsp;&emsp;&emsp;&emsp;</text>
        </view>
        <view class="order-detail-container-header-content" style="text-decoration: underline"  @click.stop="handlerJumpOtherApp(disposal.latitude, disposal.longitude, dataGram.garCoordinate)">
          <text>{{ disposal.addrStr }}</text> 
        </view>
      </view>

        <view class="order-detail-container-header-item">
          <text class="order-detail-container-header-title">订单号：</text>
          <view class="order-detail-container-header-content">
            <text selectable="true">{{ orderId }}</text>
          </view>
          <!-- 生成二维码 -->
          <view class="order-detail-container-header-qrCode" style="display: flex; align-items: center;">
            <view @click="handleQrCodeClick(orderId)" class="iconfont icon-erweima-xian"></view>
          </view>
        </view>
      </view>
      <!-- 车辆信息 -->
      <view class="order-detail-container-box-card">
        <view class="order-detail-container-header-card-title">
          <view class="order-detail-container-header-card-uicon"></view>
          车辆信息
        </view>
        <view class="order-detail-container-header-item" style="justify-content: space-between;"
          v-for="(item) in dataGram.garCarInfoList" :key="item.garId">
          <text class="order-detail-container-header-title" style="color: #303133;">{{ item.garOrderCarType }}
          </text>
          <view class="order-detail-container-header-content">
            <text class="order-detail-container-header-title">
              {{ cleanStatus(dataGram.garOrderHandlerStatus) }}
            </text>
          </view>
        </view>
      </view>
      <!-- 订单记录 -->
      <view class="order-detail-container-box-card">
        <view class="order-detail-container-header-card-title">
          <view class="order-detail-container-header-card-uicon"></view>
          订单人员
        </view>
        <!-- <view class="order-detail-container-header-item">
          <text class="order-detail-container-header-title">订单时间：</text>
          <view class="order-detail-container-header-content">
            {{ dataGram.garCreateTime }}
          </view>
        </view> -->
        <view class="order-detail-container-header-item">
          <text class="order-detail-container-header-title">预约时间：</text>
          <view class="order-detail-container-header-content">
            {{ dataGram.garOrderAgreementTime }}
          </view>
        </view>
        <view class="order-detail-container-header-item">
          <text class="order-detail-container-header-title">联系电话：</text>
          <view class="order-detail-container-header-content">
            <text selectable="true">{{ dataGram.garOrderContactTel }}</text>
            <view class="icon-box" style="display: flex; align-items: center; justify-content: center;">
              <u-icon v-if="dataGram.handleFlag" name="phone" size="28"
                @click="handleContactClick(dataGram.garOrderContactTel)"></u-icon>
            </view>
          </view>
        </view>
        <view class="order-detail-container-header-item">
          <text class="order-detail-container-header-title">订单人：</text>
          <view class="order-detail-container-header-content">
            {{ dataGram.garOrderContactName }}
          </view>
        </view>
        <view class="order-detail-container-header-item">
          <text class="order-detail-container-header-title">备注：</text>
          <view class="order-detail-container-header-content">
            {{ dataGram.garRemark }}
          </view>
        </view>
      </view>
      <!-- 处理信息 -->
      <view class="order-detail-container-box-card">
        <view class="order-detail-container-header-card-title">
          <view class="order-detail-container-header-card-uicon"></view>
          处理信息
        </view>
        <view v-if="putDownImages.length || putOnImages.length" style="width: 100%;">
          <view class="order-detail-container-header-item">
            <text class=" order-detail-container-header-title">装车照片：</text>
            <view class="order-detail-container-header-content">
              <u-upload width="180" height="130" :fileList="putOnImages" name="3" multiple :maxCount="20"
                :previewFullImage="true" :isReadOnly="true"></u-upload>
            </view>
          </view>
          <view class="order-detail-container-header-item">
            <text class=" order-detail-container-header-title">卸车照片：</text>
            <view class="order-detail-container-header-content">
              <u-upload width="180" height="130" :fileList="putDownImages" name="3" multiple :maxCount="20"
                :previewFullImage="true" :isReadOnly="true"></u-upload>
            </view>
          </view>
        </view>
        <view v-else class="empty-image"
          style="width: 100%; display: flex; justify-content: center; align-items: center;">
          <image class="image-style" style="width: 200rpx; height: 200rpx;" :src="emptyBase64Image"></image>
        </view>
      </view>
      <view class="space-box">{{ spaceStr }}</view>
    </view>
    <!-- 占位符 -->
    <view class="order-detail-bottom">
      <view class="order-detail-bottom-box">
        <view class=" order-detail-bottom-left">
          <u-button v-if="dataGram.garOrderHandlerStatus === 0 && userType == '运输企业负责人' && dataGram.garCancelFlag === 0"
            @click="handleOderCancelClick()" shape="square" color="#19a97c" text="取消订单"></u-button>
          <u-button
            v-if="dataGram.garOrderScanHandlerFlag === 0 && userType == '用户' && dataGram.garOrderHandlerStatus != 3"
            @click="handlerUpdateOrderClick()" shape="square" color="#19a97c" text="修改车辆信息"></u-button>
          <u-button v-if="dataGram.garOrderHandlerStatus === 1 && userType == '运输企业负责人'"
            @click="handleOrderDispatchClick(orderId)" shape="square" color="#19a97c" text="分配驾驶员"></u-button>
        </view>
        <view class="order-detail-bottom-right">
          <u-button v-if="dataGram.garOrderHandlerStatus === 0 && userType == '用户' && dataGram.garCancelFlag === 0"
            @click="handleOderCancelClick()" shape="square" color="#19a97c" text="取消订单"></u-button>
          <u-button @click="handleOrder(orderId)"
            v-if="dataGram.garOrderHandlerStatus === 0 && dataGram.handleFlag && dataGram.garCancelFlag === 0 && userType === '运输企业负责人'"
            shape="square" color="#19a97c" text="处理订单"></u-button>
          <u-button @click="handleEvaluate(orderId, userType)"
            v-if="dataGram.garEvaluateFlag === 0 && userType === '用户'" shape="square" color="#19a97c"
            text="去评价"></u-button>
          <u-button @click="handleEvaluate(orderId, userType)"
            v-if="dataGram.garHandlerEvaluateFlag === 0 && userType === '运输企业负责人'  && dataGram.haveEvaluateOfClient==1" shape="square" color="#19a97c"
            text="查看评价"></u-button>
          <u-button @click="handleEvaluateDetail(orderId, userType)"
            v-if="dataGram.garHandlerEvaluateFlag === 1 && userType === '运输企业负责人'  && dataGram.haveEvaluateOfClient==1" shape="square" color="#19a97c"
            text="查看评价"></u-button>
          <u-button @click="handleEvaluateDetail(orderId, userType)"
            v-if="dataGram.garEvaluateFlag === 1 && userType === '用户'" shape="square" color="#19a97c"
            text="查看评价"></u-button>
          <u-button v-if="dataGram.garOrderHandlerStatus === 1 && userType == '运输企业负责人'"
            @click="handleDisposalDispatchClick(orderId)" shape="square" color="#19a97c" text="分配处置场所"></u-button>
        </view>
      </view>
    </view>
    <u-action-sheet :closeOnClickOverlay="true" :closeOnClickAction="false" @actionSheetClose="handleClose"
      @submitFunction="submitFunction" @select="selectClick" :actions="list" round="15" title="取消订单" :show="cancelShow">
    </u-action-sheet>
  </view>
  <view v-if="showUQRcode" class="mask-container" @click="showUQRcode = false">
    <uqrcode :h5SaveIsDownload="true" ref="qrCodeRef" canvas-id="qrcode" :value="qrCodeText"
      :options="{ margin: 10, boxSizing: borderBox }"></uqrcode>
  </view>
</template>

<script setup>
import { queryCarList } from '@/apis/carinfo.js';
import { dispatchDisposalOrders, dispatchOrders, queryDisposalDispatch, queryOrderDetail, queryOrderDispatch, updateOrder } from "@/apis/order.js";
import { createQrCode } from '@/apis/qrcode.js';
import uqrcode from '@/components/Sansnn-uQRCode_4.0.6/components/uqrcode/uqrcode.vue';
import clashDisposalDispatch from '@/components/clash-disposal-dispatch/index.vue';
import clashDriverDispatch from '@/components/clash-driver-dispatch/index.vue';
import zStatic from '@/components/z-paging/js/z-paging-static';
import { useMainStore } from '@/stores/index.js';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { computed, ref } from 'vue';
const paramFrom = ref({
  carNumber: 0,
  carType: ""
})
const garCarInfoList = ref({})
const carPopupShowFlag = ref(false)
const isOnloadIn = ref(false)
const clashDriverDispatchRef = ref()
const clashDisposalDispatchRef = ref()
const driverPersonnelList = ref([])
const disposalPersonnelList = ref([])
const store = useMainStore();
const userType = computed(() => store.userType)
const dataGram = ref();
const orderId = ref(null)
const currentImages = ref([])
const putOnImages = ref([])
const putDownImages = ref([])
const emptyBase64Image = ref(zStatic.base64Empty)
const showUQRcode = ref(false)
const spaceStr = ref("")
const cancelShow = ref(false)
const currentCancelName = ref("")
const qrCodeRef = ref()
const qrCodeText = ref()
const candidates = ref([])
const garCarLabelInfoList = ref({})
const garCarLabelInfoNow = ref()
const list = computed(() => {
  let reason = [
    {
      name: '订单信息填写有误',
    },
    {
      name: '线下协商有问题',
    },
    {
      name: '不需要清运了',
    },
    {
      name: '其他',
    },
    {
      name: '提交',
    }
  ]
  if (userType.value === '用户') {
    reason.unshift({
      name: '长时间无人接单',
    })
  }
  return reason
})

const handlePopupClick = (val) => {
  carPopupShowFlag.value = val
}
// 创建二维码
const createQrCodeLocal = (orderId) => {
  // 获取本地地址拼接订单id
  showUQRcode.value = true;
  const hostname = window.location.hostname;
  const port = window.location.port;
  const protocol = window.location.protocol;
  const localAddress = `${protocol}//${hostname}:${port}`;
  // const localAddress = `http://localhost:5173`;
  qrCodeText.value = localAddress + "/pages/order-info/order-other/guest/index?orderId=" + orderId;
  console.log(qrCodeRef.value);
}
// 获取二维码
const handleQrCodeClick = (orderId) => {
  // 微信小程序可用
  // #ifdef MP-WEIXIN
  createQrCode(orderId).then((res) => {
    if (res.data.success) {
      uni.previewImage({
        urls: [res.data.data],
        longPressActions: {
          itemList: ['发送给朋友', '保存图片', '收藏'],
          success: function (res) {
            console.log('选中了第' + (res.tapIndex + 1) + '个按钮');
          },
          fail: function (res) {
            console.log(res);
          }
        }
      })
    }
  })
  // #endif
  // H5
  // #ifdef H5
  createQrCodeLocal(orderId)
  // #endif
}

const handleOrderDispatchClick = (orderId) => {
  // 获取驾驶员人员
  queryOrderDispatch(orderId).then(res => {
    if (res.data.success) {
      // 过滤车辆  非用户选择的车辆无法选中

      driverPersonnelList.value = res.data.data
      clashDriverDispatchRef.value.open(res.data.data)
    } else {
      uni.$u.toast("驾驶员分配成功！")
    }
  })
}
const handleDisposalDispatchClick = (orderId) => {
  // 获取处置场所人员
  queryDisposalDispatch(orderId).then(res => {
    if (res.data.success) {
      disposalPersonnelList.value = res.data.data
      clashDisposalDispatchRef.value.open(res.data.data)
    } else {
      uni.$u.toast("处理场所分配成功！")
    }
  })
}



const handleClose = (e) => {
  cancelShow.value = false
}
const handleEvaluateDetail = (orderId, userType) => {
  uni.$u.route(`pages/order-info/order-other/evaluate-info/index`,
    { orderId: orderId, userType: userType })
}
const selectClick = (index) => {
  currentCancelName.value = index.name;
}
const handleOrderDetail = (orderId) => {
  queryOrderDetail(orderId).then(res => {
    dataGram.value = res.data.data;
    console.log(res.data.data);
    currentImages.value = res.data.data.currentImages.map(item => {
      return { url: import.meta.env.VITE_BASE_URL + item };
    });
    putOnImages.value = res.data.data.putOnImages.map(item => {
      return { url: import.meta.env.VITE_BASE_URL + item };
    });
    putDownImages.value = res.data.data.putDownImages.map(item => {
      return { url: import.meta.env.VITE_BASE_URL + item };
    });
  })
}
/**
 * 拨打电话回调
 */
const handleContactClick = (val) => {
  uni.makePhoneCall({ phoneNumber: val }).then(res => {
  }).catch(err => { });
}

const handlerJumpOtherApp = (latitude, longitude, garCoordinate) => {
  console.log(latitude+"=================>"+longitude);
  // 给出提示确定要跳转吗
  uni.showModal({
    title: '提示',
    content: '是否跳转到app定位进行导航？',
    success: function (res) {
      if (res.confirm) {
        uni.openLocation({
          latitude: latitude,
          longitude: longitude,
          success: function () {
            console.log('success');
          }
        });
      }
    }
  })
}

/**
 * 取消订单
 * @param {*} orderId
 */
const handleOderCancelClick = () => {
  cancelShow.value = true;
}

/**
 * 提交取消订单
 */
const submitFunction = (otherReason) => {
  let reason = otherReason
  if (currentCancelName.value != "其他") {
    reason = currentCancelName.value
  }
  if (!reason) {
    uni.$u.toast("请提供取消订单的原因")
    return
  }
  let params = {
    garOrderId: orderId.value,
    garCancelFlag: 1,
    garReason: reason
  }
  updateOrder(params).then(res => {
    if (res.data.success) {
      cancelShow.value = false
      uni.$u.toast(res.data.data)
      uni.$u.route({
        type: "reLaunch",
        url: `pages/order/index`,
      })
    }
  })
}
// 提交完成
const handleSubmitSuccess = (orderId) => {
  uni.showModal({
    title: '提示',
    content: '订单已经清运完成了吗？',
    success: function (res) {
      if (res.confirm) {
        updateOrder({ garOrderId: orderId, handleType: 3 }).then(res => {
          if (res.data.success) {
            uni.$u.toast("已完成")
            handleOrderDetail(orderId)
          }
        })
      } else if (res.cancel) {
      }
    }
  });

}
const handleEvaluate = (orderId, userType) => {
  uni.$u.route(`pages/order-info/order-other/evaluate/index?orderId=${orderId}&userType=${userType}`)
}

// 接收订单
const handleOrder = (orderId) => {
  updateOrder({ garOrderId: orderId, handleType: 0 }).then(res => {
    if (res.data.success) {
      if (res.data.data === "订单已经被别人接受啦") {
        uni.$u.toast(res.data.data)
        uni.$u.route({
          type: "reLaunch",
          url: `pages/order/index`,
        })
      } else {
        uni.$u.toast(res.data.data)
        handleOrderDetail(orderId)
      }
    }
  })
}

const currentStep = (step) => {
  if (step > 2) {
    return step - 1;
  }
  return step;
}

/**
 * 清运状态
 * @param {*} status
 */
const cleanStatus = (status) => {
  if (dataGram.garCancelFlag === 1) {
    return '取消清运';
  }
  switch (status) {
    case 0:
      return '准备清运';
    case 1:
      return '正在清运';
    case 3:
      return '清运完成';
  }
}

const handleDisposalDispatchConfirm = (val) => {
  console.log(val);
  if (!val) {
    return
  }
  let data = {
    garOrderId: orderId.value,
    dispatchList: []
  }
  for (const key in val) {
    data.dispatchList.push({
      ...val[key]
    });
  }
  console.log(data);
  dispatchDisposalOrders(data).then(res => {
    if (res.data.success) {
      uni.$u.toast(res.data.msg)
    } else {
      uni.$u.toast("指定人员失败，请重试")
    }
    clashDriverDispatchRef.value.close()
  })
}

const handlerUpdateOrderClick = () => {
  carPopupShowFlag.value = true;
  // TODO  照搬一键清运得弹窗
  console.log("点击了修改订单按钮");
  // TODO
  queryCarList({
    companyId: dataGram.value.garOrderCompanyId
  }).then(res => {
    // 设置车辆类型
    candidates.value = [[...new Set(res.data.rows
      .filter(item => item.containerVolume)
      .map(item => {
        garCarLabelInfoList.value[item.containerVolume + "方车"] = item
        return item.containerVolume + "方车"
      }))
    ]];
    // 设置初始车辆数量
    candidates.value[0].forEach((item, index) => {
      garCarInfoList.value[item] = {
        garOrderCarNumber: 0,
        garOrderCarType: item
      }
    })
    // 设置默认车辆
    paramFrom.value.carType = candidates.value[0][0];
    garCarLabelInfoNow.value = garCarLabelInfoList.value[paramFrom.value.carType]
    console.log(garCarLabelInfoList.value, garCarInfoList.value, paramFrom.value.carType);
  })
}
// 指定人员
const handleDriverDispatchConfirm = (val) => {
  console.log(val);
  if (!val) {
    return
  }
  let data = {
    garOrderId: orderId.value,
    dispatchList: []
  }
  for (const key in val) {
    data.dispatchList.push({
      ...val[key]
    });
  }
  console.log(data);
  dispatchOrders(data).then(res => {
    if (res.data.success) {
      uni.$u.toast(res.data.msg)
    } else {
      uni.$u.toast("指定人员失败，请重试")
    }
    clashDriverDispatchRef.value.close()
  })
}

const submitUpdateCarInfo = () => {
  let garCarInfos = [];
  for (const key in garCarInfoList.value) {
    garCarInfos.push(garCarInfoList.value[key])
  }

  let data = {
    garOrderId: orderId.value,
    garCarInfoList: garCarInfos,
    updated: true
  }
  updateOrder(data).then(res => {
    if (res.data.code == 200) {
      uni.$u.toast("车辆信息修改成功")
      // 更新数据
      handleOrderDetail(orderId.value)
      // 关闭弹窗
      carPopupShowFlag.value = false
    }
  }).catch(err => {
    uni.$u.toast("修改失败，请重试")
  })
}

/**
 * 初始化信息
 */
onLoad((options) => {
  orderId.value = options.orderId
  handleOrderDetail(orderId.value)
})

onShow(() => {
  try {
    if (isOnloadIn.value) {
      handleOrderDetail(orderId.value)
    } else {
      isOnloadIn.value = true
    }
  } catch (error) {
    console.log(error);
  }
})
</script>

<style lang="scss" scoped>
$custom-marin-bottom: 20rpx;
$custom-page-padding: 20rpx;
$custom-border-radio: 20rpx;
$custom-bottom-height: 200rpx;

@mixin card {
  padding: $custom-page-padding;
  box-sizing: border-box;
  background-color: #ffffff;
  border-radius: $custom-border-radio;
  margin-bottom: $custom-marin-bottom;
}

.order-detail-container {
  height: 100%;
  width: 100%;
  background-color: $u-info-light;
  box-sizing: border-box;
  overflow-y: scroll;
  background: linear-gradient(to bottom, #19a97c, $u-info-light, $u-info-light, $u-info-light);


  .order-detail-container-box {
    height: 100%;
    width: 100%;
    padding: $custom-page-padding;
    box-sizing: border-box;

    .order-detail-top {
      @include card();

      .order-detail-top-box {
        .order-detail-top-box-step {
          u-steps {
            u-steps-item {}
          }
        }
      }
    }

    .order-detail-container-box-card {
      @include card();

      .order-detail-container-header-card-title {
        font-weight: bold;
        line-height: 80rpx;
        border-bottom: 3rpx solid $u-info-light;
        margin-bottom: $custom-marin-bottom;
        color: $u-primary;
        display: flex;
        align-items: center;

        .order-detail-container-header-card-uicon {
          background-color: $u-primary;
          margin-right: 10rpx;
          height: 35rpx;
          width: 15rpx;
        }
      }

      .order-detail-container-header-item {
        display: flex;
        margin-bottom: $custom-marin-bottom;

        // font-size: 30rpx;
        // font-weight: bold;
        // color: $u-main-color;
        .order-detail-container-header-title {
          color: $u-main-color;
          white-space: nowrap; //溢出不换行
          color: $u-info;
        }

        .order-detail-container-header-content {
          display: flex;
        }
      }
    }
  }


  .space-box {
    padding-bottom: $custom-bottom-height;
    margin-bottom: 40rpx;
  }


  .order-detail-bottom {
    position: absolute;
    width: 100%;
    // height: 100%;
    bottom: 0;
    left: 0;

    .movableAreaDetail {
      pointer-events: none;
      position: fixed;
      left: 0;
      top: 0;
      width: 100%;
      height: calc(100% - $custom-bottom-height);
      z-index: 999;

      .movableView {
        pointer-events: auto;
        min-height: 60rpx;
        min-width: 60rpx;

        .order-detail-call-box-container {
          min-height: 60rpx;
          min-width: 60rpx;
          display: flex;
          align-items: center;
          justify-content: center;
          background-color: #19a97c;
          border-radius: 100%;
        }
      }
    }

    .order-detail-bottom-box {
      height: $custom-bottom-height;
      padding: 50rpx;
      box-sizing: border-box;
      display: flex;
      justify-content: space-between;
      align-items: center;

      .order-detail-bottom-left {
        min-width: 200rpx;
      }

      .order-detail-bottom-right {
        min-width: 200rpx;
      }
    }
  }
}

.mask-container {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  background-color: rgba(0, 0, 0, 0.5);
  display: flex;
  align-items: center;
  justify-content: center;
}

// 弹出框
.company-clean-container-car-popup {
  min-height: 450rpx;
  padding: $custom-page-padding;
  box-sizing: border-box;

  .company-clean-container-car-popup-content {
    font-size: 28rpx;

    .company-clean-container-car-popup-content-box {
      box-sizing: border-box;
      padding: $custom-page-padding;
      border: 2rpx solid #19a97c;
      border-radius: 10rpx;

      .company-clean-container-car-popup-content-box-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 20rpx 0;
        box-sizing: border-box;

        .company-clean-container-car-popup-content-box-item-text {}

        .company-clean-container-car-popup-content-box-item-number {}
      }
    }

    .company-clean-container-car-popup-content-title {
      color: $u-main-color;
      box-sizing: border-box;
      margin-bottom: 20rpx;
      font-size: 30rpx;
      font-weight: bold;
    }
  }

  .company-clean-container-car-popup-button-safe {
    width: 100%;
    height: $custom-bottom-height;
    box-sizing: border-box;
    padding: 20rpx;

    .company-clean-container-car-popup-button-safe-btn {
      width: 100%;
      height: 100%;
      border-radius: 10rpx;
      font-size: 30rpx;
      line-height: 100rpx;
      text-align: center;
    }
  }
}
</style>