guzijian / garbage-removal · Files

<template>
  <view class="scan-detail-container">
    <view class="scan-detail-box">
      <view class="scan-time">
        <view class="scan-label">
          分发时间
        </view>
        <view class="scan-time">
          {{ details.garCreateTime }}
        </view>
        <view class="scan-icon">
          <up-icon name="calendar" color="#19a97c" size="40"></up-icon>
        </view>
      </view>
      <view class="scan-time">
        <view class="scan-label">
          司机姓名
        </view>
        <view class="scan-time">
          {{ details.garOrderHandlerName }}
        </view>
        <view class="scan-icon">
          <up-icon name="account" color="#19a97c" size="40"></up-icon>
        </view>
      </view>
      <view class="scan-time">
        <view class="scan-label">
          司机电话
        </view>
        <view class="scan-time" style="color: #a0cfff">
          {{ details.garOrderHandlerTel }}
        </view>
        <view class="scan-icon">
          <up-icon name="phone" color="#19a97c" size="40"></up-icon>
        </view>
      </view>
      <view class="scan-time">
        <view class="scan-label">
          所属公司
        </view>
        <view class="scan-time">
          {{ details.garOrderCompanyName }}
        </view>
        <view class="scan-icon">
          <up-icon name="map" color="#19a97c" size="40"></up-icon>
        </view>
      </view>
    </view>
    <view class="scan-submit-info">
      <view class="scan-submit-title-box">
        <up-badge :isDot="true" type="success"></up-badge><text>提交信息</text>
      </view>
      <view class="scan-car-num">
        <view class="scan-car-num-label">
          车牌号
        </view>
        <view class="scan-car-num-content">
          {{ details.garHandlerCarCode }}
        </view>
      </view>
      <view class="scan-upload-fill-image-box">
        <view class="scan-upload-fill-image-label">
          <view>
            全景照片
          </view>
          <view v-if="isDeletable">
            {{ fileList.length }}/3
          </view>
        </view>
        <view class="scan-upload-fill-image-btn">
          <u-upload :deletable="isDeletable" :fileList="fileList" @afterRead="afterRead" @delete="deletePic" name="3"
            multiple :maxCount="isDeletable ? 3 : fileList.length" :previewFullImage="true" width="200"
            height="150"></u-upload>
        </view>
      </view>
    </view>
    <view class="scan-submit-button-box" v-if="isNew">
      <view class="scan-submit-button-btn">
        <u-button type="primary" @tap="handlerSubmit" text="确认"></u-button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { uploadFilePromise } from '@/apis/common.js';
import { askTransport, scanDetail } from '@/apis/order.js';
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
const details = ref({})
const fileList = ref([])
const isDeletable = ref(false)
// 删除图片
const deletePic = (event) => {
  fileList.value.splice(event.index, 1);
};

const isNew = ref(false)
// 新增图片
const afterRead = async (event) => {
  // 当设置 mutiple 为 true 时, file 为数组格式，否则为对象格式
  let lists = [].concat(event.file);
  let fileListLen = fileList.value.length;
  lists.map((item) => {
    fileList.value.push({
      ...item,
      status: 'uploading',
      message: '上传中',
    });
  });
  for (let i = 0; i < lists.length; i++) {
    let requestPath = import.meta.env.VITE_BASE_URL + import.meta.env.VITE_BASE_FILE_UPLOAD_PREFIX;
    const result = await uploadFilePromise(requestPath, lists[i].url);
    let item = fileList.value[fileListLen];
    fileList.value.splice(fileListLen, 1, {
      ...item,
      status: 'success',
      message: '',
      url: result.data.fileName,
    });
    fileListLen++;
  }
};

const handlerSubmit = async () => {
  // 校验参数
  let params = {
    ...details.value,
    fillImageList: fileList.value.map((item) => item.url),
    garOrderHandlerCompanyName: details.value.garOrderCompanyName,
    garOrderHandlerCompanyId: details.value.garOrderCompanyId
  }
  if (validateParams(params)) {
    await askTransport(params).then((res) => {
      console.log(res);
      if (res.data.code == 200) {
        uni.$u.toast("当前趟次记录完毕！")
      }
    }).catch((err) => {
      uni.$u.toast("当前趟次记录失败")
    })
    // 返回上级
    // uni.navigateBack({
    //   delta: 1
    // })
  }
}

const validateParams = (params) => {
  if (!params.garOrderHandlerName) {
    uni.$u.toast("请输入处理人姓名");
    return false;
  }
  if (!params.garOrderHandlerTel) {
    uni.$u.toast("请输入处理人电话");
    return false;
  }
  if (!params.garOrderCompanyName) {
    uni.$u.toast("请输入处理人单位");
    return false;
  }
  if (!validateImage(params.fillImageList)) {
    return false;
  }
  return true;
}

const validateImage = (fillImageList) => {
  if (fillImageList instanceof Array && fillImageList.length > 0) {
    for (let index = 0; index < fillImageList.length; index++) {
      const str = fillImageList[index];
      if (!str.startsWith("/profile/upload")) {
        uni.$u.toast("请等待图片上传~")
        return false;
      }
    }
    return true;
  }
  uni.$u.toast("请上传图片~")
  return false;
}

onLoad((options) => {
  if (options.data) {
    details.value = JSON.parse(decodeURIComponent(options.data))
    isDeletable.value = true
    isNew.value = true
  }
  if (options.garAskId) {
    // TODO query
    scanDetail(options.garAskId).then((res) => {
      console.log(res);
      details.value = res.data.data;
      details.value.garOrderCompanyName = details.value.garOrderHandlerCompanyName;
      fileList.value = details.value.fillImageList.map((item) => {
        return { url: import.meta.env.VITE_BASE_URL + item }
      })
    })
  }
})
</script>

<style lang="scss" scoped>
$l-h-8: 80rpx;

.scan-detail-container {
  width: 100%;
  height: 100%;
  box-sizing: border-box;
  padding: 20rpx;

  .scan-detail-box {
    background-color: white;
    margin-bottom: 40rpx;
    color: $u-main-color;

    .scan-time {
      display: flex;
      width: 100%;
      // 底部阴影 向内发散
      border-bottom: 1rpx solid #f5f5f5;
      line-height: 100rpx;
      align-items: center;

      .scan-label {
        width: 30%;
        display: flex;
        align-items: center;
        justify-content: center;
      }

      .scan-time {
        width: 60%;
      }

      .scan-icon {
        width: 10%;
        display: flex;
      }
    }

  }

  .scan-submit-info {
    width: 100%;
    background-color: white;
    box-sizing: border-box;
    padding: 20rpx;
    color: $u-content-color;

    .scan-submit-title-box {
      display: flex;
      align-items: center;

      text {
        margin-left: 15rpx;
      }
    }

    .scan-car-num {
      display: flex;
      line-height: $l-h-8;
      align-items: center;

      .scan-car-num-label {
        width: 20%;
        // 文字不换行
        white-space: nowrap;
      }

      .scan-car-num-content {
        width: auto;
        display: flex;
        justify-content: center;
        align-items: center;
      }
    }

    .scan-upload-fill-image-box {
      line-height: $l-h-8;
      width: 100%;

      .scan-upload-fill-image-label {
        display: flex;
        justify-content: space-between;
      }

      .scan-upload-fill-image-btn {
        u-upload {}
      }
    }
  }

  .scan-submit-button-box {
    margin-top: 40rpx;
    background-color: white;
    padding: 20rpx;
  }
}
</style>