guzijian / garbage-removal · Files

<template>
  <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">
        <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">
              {{ dataGram.garOrderCompanyTel }}
            </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="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 === 1 && dataGram.garCancelFlag === 0 && userType === '清运车辆驾驶员'"
            @click="createQrCodeValid(orderId)" shape="square" color="#a9e08f" text="出示二维码"></u-button>

        </view>
        <view class="order-detail-bottom-right">

          <u-button @click="driverHandleOrder(orderId)"
            v-if="dataGram.garOrderHandlerStatus === 0 && dataGram.handleFlag && dataGram.garCancelFlag === 0 && userType === '清运车辆驾驶员'"
            shape="square" color="#a9e08f" text="处理订单"></u-button>
          <u-button @click="handleOrder(orderId)"
            v-if="dataGram.garOrderHandlerStatus === 0 && dataGram.handleFlag && dataGram.garCancelFlag === 0 && userType === '运输企业负责人'"
            shape="square" color="#a9e08f" text="处理订单"></u-button>
          <u-button @click="handleUploadImage(orderId, 'putOnImages')"
            v-if="dataGram.garOrderHandlerStatus === 1 && dataGram.garCancelFlag === 0 && userType === '清运车辆驾驶员'"
            shape="square" color="#a9e08f" text="上传图片"></u-button>
          <u-button @click="handleEvaluate(orderId, userType)"
            v-if="dataGram.garEvaluateFlag === 0 && userType === '用户'" shape="square" color="#a9e08f"
            text="去评价"></u-button>
          <u-button @click="handleEvaluateDetail(orderId, userType)"
            v-if="dataGram.garHandlerEvaluateFlag === 0 && userType === '运输企业负责人' && dataGram.haveEvaluateOfClient==1" shape="square" color="#a9e08f"
            text="查看评价" ></u-button>
          <u-button @click="handleEvaluateDetail(orderId, userType)"
            v-if="dataGram.garHandlerEvaluateFlag === 1 && userType === '运输企业负责人' && dataGram.haveEvaluateOfClient==1" shape="square" color="#a9e08f"
            text="查看评价"></u-button>
          <u-button @click="handleEvaluateDetail(orderId, userType)"
            v-if="dataGram.garEvaluateFlag === 1 && userType === '用户'" shape="square" color="#a9e08f"
            text="查看评价"></u-button>
        </view>
      </view>
    </view>
  </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 { createHandlerQrCode, queryOrderDetail, 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 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 isOnloadIn = ref(false)
const clashDriverDispatchRef = 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 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 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: item };
    });
    putOnImages.value = res.data.data.putOnImages.map(item => {
      return { url: item };
    });
    putDownImages.value = res.data.data.putDownImages.map(item => {
      return { url: item };
    });
  })
}
/**
 * 拨打电话回调
 */
const handleContactClick = (val) => {
  uni.makePhoneCall({ phoneNumber: val }).then(res => {
  }).catch(err => { });
}

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

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) {
      uni.$u.toast(res.data.data)
      handleOrderDetail(orderId)
    }
  })
}

// 接收订单
const driverHandleOrder = (orderId) => {
  updateOrder({ garOrderId: orderId, handleType: 0 }).then(res => {
    if (res.data.success) {
      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 createQrCodeValid = (val) => {
  createHandlerQrCode(val).then(res => {
    // 获取本地地址拼接订单id
    showUQRcode.value = true;
    // const localAddress = `http://localhost:5173`;
    qrCodeText.value = res.data.data;
  })
}
/**
 * 上传图片
 * @param {string} orderId
 * @param {string} putType
 */
const handleUploadImage = (orderId, putType) => {
	const data = dataGram.value;
	uni.$u.route(`pages/order-info/order-driver/upload/index?orderId=${orderId}&carPlate=${data.garHandlerCarCode}&driver=${store.userInfo.userName}`)
}

/**
 * 初始化信息
 */
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: #a9e08f;
          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;
}
</style>