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">
        <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 style="color: red;">&nbsp;&nbsp;订单已被取消！</text>
        </view>
      </view>
      <!-- 派单信息 -->
      <view class="order-detail-container-box-card">
        <view class="order-detail-container-header-card-title">
          派单信息
        </view>
        <view class="order-detail-container-header-item">
          <text class="order-detail-container-header-title">派单地点：</text>
          <view class="order-detail-container-header-content">
            {{ dataGram.garOrderAddress + dataGram.garOrderAddressDetails }}
          </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 :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.garOrderCarType }}
          </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">
          <text class="order-detail-container-header-title">派单号：</text>
          <view class="order-detail-container-header-content">
            {{ orderId }}
          </view>
        </view>
      </view>
      <!-- 派单记录 -->
      <view class="order-detail-container-box-card">
        <view class="order-detail-container-header-card-title">
          派单人员
        </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">
            {{ dataGram.garOrderContactTel }}
            <u-icon name="phone" size="28" @click="handleContactClick(dataGram.garOrderContactTel)"></u-icon>
          </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>
        <view v-if="dataGram.garOrderHandlerId" 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.garOrderHandleName }}
            </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.garOrderHandleTel }}
            </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 :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 :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 @click="handleOderCancelClick(orderId)" shape="circle" color="#a9e08f" text="取消订单"></u-button> -->
        </view>
        <view class="order-detail-bottom-right">
          <u-button @click="handleOrder(orderId)"
            v-if="dataGram.garOrderHandlerStatus == 0 && dataGram.handleFlag && dataGram.garCancelFlag" shape="circle"
            color="#a9e08f" text="处理派单"></u-button>
          <u-button @click="handleUploadImage(orderId, 'putOnImages')"
            v-if="dataGram.garOrderHandlerStatus === 1 && dataGram.putOnImages.length === 0 && dataGram.handleFlag && dataGram.garCancelFlag"
            shape="circle" color="#a9e08f" text="装车照片"></u-button>
          <u-button @click="handleUploadImage(orderId, 'putDownImages')"
            v-else-if="dataGram.garOrderHandlerStatus === 1 && dataGram.putDownImages.length === 0 && dataGram.handleFlag && dataGram.garCancelFlag"
            shape="circle" color="#a9e08f" text="卸车照片"></u-button>
          <u-button @click="handleEvaluate(orderId)" v-if="dataGram.garEvaluateFlag == 0" shape="circle" color="#a9e08f"
            text="去评价"></u-button>
          <u-button
            v-if="dataGram.garOrderHandlerStatus == 1 && dataGram.putOnImages.length != 0 && dataGram.putDownImages.length != 0 && dataGram.garCancelFlag"
            @click="handleSubmitSuccess(orderId)" shape="circle" color="#a9e08f" text="完成派单"></u-button>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { queryOrderDetail, updateOrder } from "@/apis/order.js";
import zStatic from '@/components/z-paging/js/z-paging-static';
import { onLoad, onShow } from '@dcloudio/uni-app';
import { ref } from 'vue';
const dataGram = ref();
const orderId = ref(null)
const currentImages = ref([])
const putOnImages = ref([])
const putDownImages = ref([])
const emptyBase64Image = ref(zStatic.base64Empty)
const spaceStr = ref("")
/**
 * 初始化信息
 */
onLoad((options) => {
  orderId.value = options.orderId
})
const handleOrderDetail = (orderId) => {
  queryOrderDetail(orderId).then(res => {
    dataGram.value = 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 handleOderCancelClick = (orderId) => {

}
// 提交完成
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) => [
  uni.$u.route(`pages/order/evaluate/index?orderId=${orderId}`)
]

// 接收订单
const handleOrder = (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;
}

const handleUploadImage = (orderId, putType) => {
  uni.$u.route(`pages/order/upload/index?orderId=${orderId}&putType=${putType}`)
}

onShow(() => {
  if (orderId.value != null) {
    handleOrderDetail(orderId.value)
  }
})

</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, $u-success-dark, $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;
      }

      .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;
      }
    }

  }


}
</style>