wanyu_frontend/pages/order/arrived-on-site.vue

<template>
  <view class="ctr" v-if="data !== null">
    <view class="form-group">
      <view class="group-name flex-l line-after">
        <me-icon class="icon" type="icon-info" color="#E18F00" size="40rpx"></me-icon>
        <text class="text">上门后请提交信息</text>
      </view>
      <view class="item upload">
        <view class="info flex-l">
          <view class="title flex-l">拍照打卡</view>
          <view class="desc flex-l">请上传上门的打卡照片（最多 10 张）</view>
        </view>
        <view class="imgs-ctr">
          <view v-for="(imgUrl, index) in images" :key="index" @click="delImg(index)" class="img-ctr" :style="{marginRight: (index+1) % 5 === 0 ? '0' : '36rpx'}">
            <image class="img" mode="aspectFill" :src="imgUrl"></image>
          </view>
          <view @click="upload()" class="up-ctr flex-direction-column" hover-class="auto-mask-layer-radius4"
                hover-start-time="0" hover-stay-time="50">
            <me-icon class="icon" type="icon-upload-cloud-fill" color="var(--summaryColor)" size="36rpx"></me-icon>
            <view class="up flex-c">点击上传</view>
          </view>
        </view>
      </view>
    </view>
    <me-empty-space height="376"></me-empty-space>
    <view class="bottom">
      <me-button @click="submit()" text="完成上门" width="686rpx" icon-type="icon-checkbox-circle" margin-top="32rpx"></me-button>
    </view>
  </view>
</template>

<script setup>

import MeIcon from "../../components/me-icon/me-icon.vue";
import MeEmptySpace from "../../components/me-empty-space/me-empty-space.vue";
import MeButton from "../../components/me-button/me-button.vue";
import helpers from "../../utils/helpers";
import {ref} from 'vue'
import {onLoad} from '@dcloudio/uni-app'
import api from "../../api/api";
import {throttle} from "../../utils/throttle";
import enums from "../../utils/enums";

const images = ref([])

const upload = () => {
  if (images.value.length >= 10) {
    return helpers.showToast('最多上传 10 张图片')
  }

  uni.chooseImage({
    count: 1,
    sizeType: ['original'],
    sourceType: ['camera'],
    success: (chooseImageRes) => {
      if (chooseImageRes.tempFiles[0].size / 1024 / 1024 > 10) {
        return helpers.showToast('照片不能超过10M')
      }

      uni.showLoading({
        title: '上传中'
      });

      let tempFilePath = chooseImageRes.tempFilePaths[0]
      api.getOssParams({name: tempFilePath}).then(res => {
        uni.uploadFile({
          url: res.cdnurl,
          filePath: tempFilePath,
          name: 'file',
          timeout: 30 * 1000,
          formData: {
            'signature': res.signature,
            'ossAccessKeyId': res.OSSAccessKeyId,
            'policy': res.policy,
            'key': res.key,
          },
          success(r) {
            if (r.statusCode === undefined || r.statusCode !== 204) {
              helpers.showToast('上传文件失败')
              return
            }

            let fullUrl = res.cdnurl + '/' + res.key
            images.value.push(fullUrl)
            helpers.showToast('上传成功')
          },
          fail(e) {
            helpers.showToast('上传文件失败')
            console.log(e)
          },
          complete() {
            uni.hideLoading();
          }
        });
      }).catch(() => {})
    }
  });
}

const delImg = (idx) => {
  images.value.splice(idx, 1)
  helpers.showToast('图片已删除')
}

//提交上门信息
const submit = throttle(() => {
  if (images.value.length === 0) {
    return helpers.showToast('请上传上门的打卡照片')
  }

  uni.showModal({
    title: '提示信息',
    confirmText: '确认',
    content: '确认已到达客户地址？',
    success: function (res) {
      if (res.confirm) {
        uni.showLoading({
          title: '提交中'
        });

        let imagesStr = (images.value).join(',')
        api.arrivedOnSite({order_dispatch_id: id.value, images: imagesStr}).then(() => {
          uni.hideLoading();
          uni.showToast({
            title: '已上门',
            icon: "success"
          })
          setTimeout(() => {
            uni.navigateBack();
          }, 1000)
        }).catch(() => {})
      }
    }
  });
})

const id = ref(null)
onLoad((params) => {
  id.value = params.id
  init()
})

const data = ref(null)
const init = () => {
  api.orderInfo({order_dispatch_id: id.value}).then(res => {
    if (res.status !== enums.ORDER_DISPATCH_STATUS.STATUS_PLANIT) {
      return helpers.showToast('该订单不可上门')
    }

    data.value = res
  }).catch(() => {})
}

</script>

<style lang="scss" scoped>
.ctr {
  padding: 0 32rpx;
  box-sizing: border-box;
  height: 100vh;
  .bottom {
    width: 100%;
    padding-top: 20rpx;
    padding-bottom: 68rpx;
    background: var(--pageBgColor);
    box-sizing: border-box;
    position: fixed;
    bottom: 0;
  }
}
</style>