pco/app-ui/pages/business-order/report.vue

<template>
  <view>
    <view class="box">
      <view class="top">
        <text class="title">证明上传</text>
      </view>
      <view class="item">
        <view class="l">核酸证明：</view>
        <view class="r">
          <view class="img">
            <uni-file-picker v-model="nucleicReport" fileMediatype="image" mode="grid" limit="1"
                             @select="nucleicSelect" @delete="form.nucleicReport=''" :image-styles="imageStyles"/>
          </view>
        </view>
      </view>
      <view class="item">
        <view class="l">消杀合格证明：</view>
        <view class="r">
          <view class="img">
            <uni-file-picker v-model="disinfectReport" fileMediatype="image" mode="grid" limit="1"
                             @select="disinfectSelect" @delete="form.disinfectReport=''" :image-styles="imageStyles"/>
          </view>
        </view>
      </view>
      <view class="item">
        <view class="l">检验检疫证：</view>
        <view class="r">
          <view class="img">
            <uni-file-picker ref="checkReport" v-model="checkReport" fileMediatype="image" mode="grid"
                             limit="1" @select="checkSelect" @delete="form.checkReport=''" :image-styles="imageStyles"/>
          </view>
        </view>
      </view>
      <view class="item">
        <view class="l">签发出库证明：</view>
        <view class="r">
          <view class="img">
            <uni-file-picker v-model="outReport" fileMediatype="image" mode="grid" limit="1"
                             @select="outSelect" @delete="form.outReport=''" :image-styles="imageStyles"/>
          </view>
        </view>
      </view>
    </view>
    <u-button type="primary" @click="confirmFn">保存</u-button>
  </view>
</template>

<script>
import request from '../../utils/request.js'

export default {
  data() {
    return {
      id: '',
      form: {
        partMoney: 0
      },
      imgList: [],
      outReport: [],
      checkReport: [],
      disinfectReport: [],
      nucleicReport: [],
      imageStyles: {
        width: 150,
        height: 100,
        border: {
          color: "#eee",
          width: 1,
          style: 'dashed',
          radius: '5px'
        }
      },
      uploadImageUrl: request.server + '/upload/image',
    }
  },
  onLoad(options) {
    this.id = options.id;
    this.getBusinessById();
  },

  methods: {
    toast() {
      let obj = {
        outReport: this.form.outReport,
        checkReport: this.form.checkReport,
        disinfectReport: this.form.disinfectReport,
        nucleicReport: this.form.nucleicReport,
      }
      this.$common.toast(JSON.stringify(obj))
    },
    outSelect(e) {
      let that = this;
      uni.uploadFile({
        url: that.uploadImageUrl,
        filePath: e.tempFilePaths[0],
        name: 'file',
        success: (resp => {
          that.form.outReport = JSON.parse(resp.data).data;
        })
      })
    },
    checkSelect(e) {
      let that = this;
      uni.uploadFile({
        url: that.uploadImageUrl,
        filePath: e.tempFilePaths[0],
        name: 'file',
        success: (resp => {
          that.form.checkReport = JSON.parse(resp.data).data;
        })
      })
    },
    disinfectSelect(e) {
      let that = this;
      uni.uploadFile({
        url: that.uploadImageUrl,
        filePath: e.tempFilePaths[0],
        name: 'file',
        success: (resp => {
          that.form.disinfectReport = JSON.parse(resp.data).data;
        })
      })
    },
    nucleicSelect(e) {
      let that = this;
      uni.uploadFile({
        url: that.uploadImageUrl,
        filePath: e.tempFilePaths[0],
        name: 'file',
        success: (resp => {
          that.form.nucleicReport = JSON.parse(resp.data).data;
        })
      })
    },
    getBusinessById() {
      this.$api.getBusinessById({
        id: this.id
      }).then(resp => {
        this.form = resp.data;
        if (this.form.nucleicReport) {
          this.nucleicReport = [{
            'name': 'payTicket.png',
            'extname': '.png',
            'url': this.form.nucleicReport
          }]
        }
        if (this.form.disinfectReport) {
          this.disinfectReport = [{
            'name': 'payTicket.png',
            'extname': '.png',
            'url': this.form.disinfectReport
          }]
        }
        if (this.form.checkReport) {
          this.checkReport = [{
            'name': 'payTicket.png',
            'extname': '.png',
            'url': this.form.checkReport
          }]
        }
        if (this.form.outReport) {
          this.outReport = [{
            'name': 'payTicket.png',
            'extname': '.png',
            'url': this.form.outReport
          }]
        }
      })
    },
    confirmFn() {
      console.log(this.form)
      if (!this.form.nucleicReport) {
        this.$common.toast('请上传核酸报告');
        return;
      }
      if (!this.form.disinfectReport) {
        this.$common.toast('请上传消杀合格证明');
        return;
      }
      if (!this.form.checkReport) {
        this.$common.toast('请上传入关检验检疫证');
        return;
      }
      if (!this.form.outReport) {
        this.$common.toast('请上传签发出库证明');
        return;
      }
      this.$api.uploadReport(this.form).then(Resp => {
        this.$common.toast('上传成功');
        setTimeout(() => {
          this.$common.back()
        }, 500)
      })
    }
  }
}
</script>

<style lang="scss">
page {
  background-color: #fff;
}

.item-line {
  color: #a2a2a2;
  padding: 5px 0 10px 29px;
  border-bottom: 1px solid #E5E5E5;
}

@import '@/common/common.scss'
</style>