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> &nbsp;&nbsp;派单已被取消！原因：{{ dataGram.garReason }}</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 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.garOrderCarType }}（{{ dataGram.garOrderCarNumber }}辆）
          </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 v-if="dataGram.handleFlag" 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 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 == '管理负责人'" @click="handleOderCancelClick()"
            shape="circle" color="#a9e08f" text="取消派单"></u-button>
        </view>
        <view class="order-detail-bottom-right">
          <u-button v-if="dataGram.garOrderHandlerStatus === 0 && userType == '居民用户'" @click="handleOderCancelClick()"
            shape="circle" color="#a9e08f" text="取消派单"></u-button>
          <u-button @click="handleOrder(orderId)"
            v-if="dataGram.garOrderHandlerStatus === 0 && dataGram.handleFlag && dataGram.garCancelFlag === 0"
            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 === 0"
            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 === 0"
            shape="circle" color="#a9e08f" text="卸车照片"></u-button>
          <u-button @click="handleEvaluate(orderId, userType)"
            v-if="dataGram.garEvaluateFlag === 0 && userType === '居民用户'" shape="circle" color="#a9e08f"
            text="去评价"></u-button>
          <u-button @click="handleEvaluate(orderId, userType)"
            v-if="dataGram.garHandlerEvaluateFlag === 0 && userType === '管理负责人'" shape="circle" color="#a9e08f"
            text="去评价"></u-button>
          <u-button
            v-if="dataGram.garOrderHandlerStatus === 1 && dataGram.putOnImages.length != 0 && dataGram.putDownImages.length != 0 && dataGram.garCancelFlag === 0"
            @click="handleSubmitSuccess(orderId)" shape="circle" color="#a9e08f" 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>
</template>

<script setup>
import { queryOrderDetail, updateOrder } from "@/apis/order.js";
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 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 spaceStr = ref("")
const cancelShow = ref(false)
const currentCancelName = ref("")
const list = ref([
  {
    name: '长时间无人接单',
  },
  {
    name: '派单信息填写有误',
  },
  {
    name: '线下协商有问题',
  },
  {
    name: '不需要清运了',
  },
  {
    name: '其他',
  },
  {
    name: '提交',
  }
])
/**
 * 初始化信息
 */
onLoad((options) => {
  orderId.value = options.orderId
})
const handleClose = (e) => {
  cancelShow.value = false
}
const selectClick = (index) => {
  currentCancelName.value = index.name;
}
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 => { });
}

/**
 * 取消派单
 * @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 handleClick = (orderId) => {
  uni.$u.route({
    url: `pages/order/detail/index`,
    params: {
      orderId: 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, userType) => {
  uni.$u.route(`pages/order/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 {string} orderId
 * @param {string} putType
 */
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>