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">
          <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.orderDisposalCompanyReports">
          <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">
            <text>{{ disposal.disposalCompanyName }}</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.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 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 v-if="dataGram.needFollowCar" class="follow-car-notice">
          <text style="color: red;">该订单需要搬运上车</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 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" style="flex-direction: column;">
              <view v-for="group in putOnImagesGrouped" :key="group.index" class="image-group">
                <view class="image-group-header">
                  <view class="image-group-title">{{ group.carName}}第 {{ group.index }} 趟</view>
                  <!-- 根据group.index与真实发车数比较显示状态 -->
                  <view class="car-status" :class="{
									'in-transit': isInTransit(group.index),
									'completed': isCompleted(group.index)
								}">
                    {{ getStatusText(group.index) }}
                  </view>
                </view>
                <u-upload width="180" height="130" :fileList="group.images" name="3" multiple :maxCount="20"
                          :previewFullImage="true" :isReadOnly="true"></u-upload>
              </view>
            </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 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>
  </view>
</template>

<script setup>import { queryGuestOrderDetail, queryByCarCode } 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 {onLoad, onShow} from '@dcloudio/uni-app';
import {nextTick, ref} from 'vue';

const dataGram = ref();
const orderId = ref(null)
const currentImages = ref([])
const putOnImages = ref([])
const putOnImagesGrouped = ref([])
const putDownImages = ref([])
const emptyBase64Image = ref(zStatic.base64Empty)
const showUQRcode = ref(false)
const spaceStr = ref("")
const qrCodeRef = ref()
const qrCodeText = ref()

const isInTransit = (index) => {
  // 如果订单已完成，所有趟次都不是"清运中"
  if (dataGram.value.garOrderHandlerStatus === 3) {
    return false;
  }

  // 当前正在清运的趟次索引（从1开始）
  const currentTransitIndex = putOnImagesGrouped.value.length;

  // 只有当前趟次是"清运中"
  return index === currentTransitIndex;
};

const isCompleted = (index) => {
  // 如果订单已完成，所有趟次都是"已运完"
  if (dataGram.value.garOrderHandlerStatus === 3) {
    return true;
  }

  // 已完成的趟次索引小于当前正在清运的趟次索引
  const currentTransitIndex = putOnImagesGrouped.value.length;

  return index < currentTransitIndex;
};

const getStatusText = (index) => {
  // 如果订单已完成，显示"已运完"
  if (dataGram.value.garOrderHandlerStatus === 3) {
    return '已运完';
  }

  // 当前正在清运的趟次索引（从1开始）
  const currentTransitIndex = putOnImagesGrouped.value.length;

  if (index === currentTransitIndex) {
    return '正在清运';
  } else if (index < currentTransitIndex) {
    return '已运完';
  } else {
    return '正在清运';
  }
};

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}`;
  qrCodeText.value = localAddress + "/pages/order-info/order-driver/detail/guest/index?orderId=" + orderId;

  // 强制刷新二维码显示
  nextTick(() => {
    if (qrCodeRef.value && typeof qrCodeRef.value.makeQRCode === 'function') {
      qrCodeRef.value.makeQRCode();
    }
  });
}

// 关闭二维码
const closeQrCode = () => {
  showUQRcode.value = false;
  qrCodeText.value = '';
}

// 获取二维码
const handleQrCodeClick = (orderId) => {
  // 每次点击都重新生成二维码，确保是最新的
  showUQRcode.value = true;

  // 微信小程序可用
  // #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 handleOrderDetail = (orderId) => {
  queryGuestOrderDetail(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 => {
      let processedItem = item;
      let carName = '';

      // 提取name后面的字符串作为carName并从item中移除
      if (item.includes('name')) {
        const nameIndex = item.indexOf('name');
        carName = item.substring(nameIndex + 4);
        processedItem = item.substring(0, nameIndex);
      }

      // 保持原有逻辑不变，但添加carName到返回对象
      const newItem = processedItem.substring(0, processedItem.length - 6);
      const newIndex = processedItem.substring(processedItem.length - 6);
      return { url: import.meta.env.VITE_BASE_URL + newItem, newIndex, carName };
    });

    // 按照newIndex升序排序
    putOnImages.value.sort((a, b) => {
      return parseInt(a.newIndex) - parseInt(b.newIndex);
    });

    // 重新组织数据，将相同newIndex的图片放在一起
    const groupedImages = {};
    putOnImages.value.forEach(item => {
      if (!groupedImages[item.newIndex]) {
        groupedImages[item.newIndex] = [];
      }
      groupedImages[item.newIndex].push(item);
    });

    // 转换newIndex为1,2,3的连续数字
    const sortedKeys = Object.keys(groupedImages).sort((a, b) => parseInt(a) - parseInt(b));
    const newGroupedImages = {};
    sortedKeys.forEach((key, index) => {
      newGroupedImages[index + 1] = groupedImages[key];
    });

    // 转换为数组形式，方便在模板中遍历
    putOnImagesGrouped.value = Object.keys(newGroupedImages).map(key => ({
      index: key,
      images: newGroupedImages[key],
      carName: newGroupedImages[key] && newGroupedImages[key].length > 0 ? newGroupedImages[key][0].carName : ''
    }));

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

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

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

/**
 * 初始化信息
 */
onLoad((options) => {
  if (options.carCode) {
    // 通过车牌号直接查询订单详情
    queryByCarCode(options.carCode).then(res => {
      if (res.data.success) {
        // 直接设置订单数据，不再需要二次查询
        dataGram.value = res.data.data;
        // 从garCarInfoList中提取订单ID
        if (res.data.data.garCarInfoList && res.data.data.garCarInfoList.length > 0) {
          orderId.value = res.data.data.garCarInfoList[0].garOrderId;
        }

        // 处理图片数据
        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 => {
          let processedItem = item;
          let carName = '';

          // 提取name后面的字符串作为carName并从item中移除
          if (item.includes('name')) {
            const nameIndex = item.indexOf('name');
            carName = item.substring(nameIndex + 4);
            processedItem = item.substring(0, nameIndex);
          }

          // 保持原有逻辑不变，但添加carName到返回对象
          const newItem = processedItem.substring(0, processedItem.length - 6);
          const newIndex = processedItem.substring(processedItem.length - 6);
          return { url: import.meta.env.VITE_BASE_URL + newItem, newIndex, carName };
        });

        // 按照newIndex升序排序
        putOnImages.value.sort((a, b) => {
          return parseInt(a.newIndex) - parseInt(b.newIndex);
        });

        // 重新组织数据，将相同newIndex的图片放在一起
        const groupedImages = {};
        putOnImages.value.forEach(item => {
          if (!groupedImages[item.newIndex]) {
            groupedImages[item.newIndex] = [];
          }
          groupedImages[item.newIndex].push(item);
        });

        // 转换newIndex为1,2,3的连续数字
        const sortedKeys = Object.keys(groupedImages).sort((a, b) => parseInt(a) - parseInt(b));
        const newGroupedImages = {};
        sortedKeys.forEach((key, index) => {
          newGroupedImages[index + 1] = groupedImages[key];
        });

        // 转换为数组形式，方便在模板中遍历
        putOnImagesGrouped.value = Object.keys(newGroupedImages).map(key => ({
          index: key,
          images: newGroupedImages[key],
          carName: newGroupedImages[key] && newGroupedImages[key].length > 0 ? newGroupedImages[key][0].carName : ''
        }));

        putDownImages.value = res.data.data.putDownImages.map(item => {
          return { url: import.meta.env.VITE_BASE_URL + item };
        });
      } else {
        uni.$u.toast('未找到该车牌号对应的订单');
      }
    }).catch(err => {
      console.error('查询订单失败:', err);
      uni.$u.toast('查询订单失败');
    });
  } else if (options.orderId) {
    // 保持原有的orderId逻辑
    orderId.value = options.orderId;
    handleOrderDetail(orderId.value);
  }
});
onShow(() => {
  if (orderId.value) {
    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, #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;

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

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

.image-group {
  margin-bottom: 20px;
  padding: 10px;
  background-color: #f5f5f5;
  border-radius: 5px;
}

.image-group-title {
  margin-bottom: 10px;
  font-weight: bold;
  color: #333;
}

/* 确保u-upload组件内的图片水平排列 */
.image-group .u-upload {
  display: flex;
  flex-wrap: wrap;
}

.image-group-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 10rpx;
}

.car-status {
  padding: 4rpx 12rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
  font-weight: bold;

  &.in-transit {
    background-color: #fff7e6;
    color: #ff9900;
  }

  &.completed {
    background-color: #e6f7ff;
    color: #19a97c;
  }
}
</style>