proginn-frontend/pages/otherpage/money/uploadInvoice.vue

<template>
  <div class="uploadInvoice">
    <div class="ruleIntro">
      <div class="stitle">规则说明：</div>
      <div class="sdesc">1.领薪宝当前只接受专票</div>
      <div class="sdesc">2.发票票面额度必须和提现额度一致</div>
      <div class="sdesc">3.发票图片审核中，不能重新发起提现，审核失败/审核通过后才能重新发起提现</div>
      <div class="sdesc">4.发票图片审核通过后，请按照系统消息、邮件消息、短信通知，按相应提示，邮寄纸质发票</div>
    </div>

    <div class="imageUpload">
      <div class="stitle">发票图片(不超过5MB)</div>
      <div class="uploadInfo">
        <el-upload
          v-loading="uploading"
          class="avatar-uploader"
          action="#"
          :show-file-list="false"
          :multiple="false"
          :limit="1"
          accept="image/png, image/jpeg"
          :before-upload="handleFileChange"
        >
          <i v-if="invoiceImg" class="el-icon-delete avatar-uploader-icon"
            @click.stop="() => handleDeleteFile('invoiceImg') "></i>
          <img v-if="invoiceImg" :src="invoiceImg" class="avatar"/>
          <div v-else class="noneImage">
            <div class="desc">
             添加电子发票
            </div>
          </div>
        </el-upload>
      </div>
    </div>

    <div class="button" @click="onSubmit">
      <p>提交审核</p>
    </div>

  </div>
</template>

<script>
  export default {
    name: "uploadInvoice",
    showCommonFooter: false,
    head() {
      let obj = {
        title: "领薪宝",
        meta: [{
          name: 'viewport',
          content: 'width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no, viewport-fit=cover'
        }]
      }
      return obj
    },
    async asyncData({ app }) {
      return {
        mobile: app.$deviceType.isMobile()
      }
    },
    data() {
      return {
        invoiceImg: '',
        uploading: false
      }
    },
    created() {
      const {vCoins=1} = this.$route.query || {}
      this.vCoins = Number(vCoins) || 0
    },
    methods: {
      /** 图片文件上传 **/
      handleFileChange(file) {
        const isJPG = file.type === 'image/jpeg';
        const isPNG = file.type === 'image/png';
        const isLt2M = file.size / 1024 / 1024 < 5;
        if (!isJPG && !isPNG) {
          this._toast('上传头像图片只能是 JPG/PNG 格式!', 'error');
          return
        }
        if (!isLt2M) {
          this._toast('上传头像图片大小不能超过 5MB!', 'error');
          return
        }
        const formData = new FormData();
        formData.append("file", file);
        formData.append("original_filename", file.name);

        console.log("pre upload", formData)
        this.uploading = true;
        this.$axios
          .$post(`/upload_image`, formData, {
            headers: { "Content-Type": "multipart/form-data" }
          })
          .then(res => {
            this.invoiceImg = res.filename
          })
          .finally(() => {
            this.uploading = false;
            console.log('upload end')
          });
        return false
      },
      /** 删除问及爱你 **/
      handleDeleteFile() {
        this.invoiceImg = ""
      },
      onSubmit() {
        if (!this.invoiceImg) {
          this._toast('请上传发票', 'error')
          return
        }
        location.href = `/otherpage/money/withdraw?vCoins=${this.vCoins || ''
        }&fpUrl=${encodeURIComponent(this.invoiceImg)
        || ''}`
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "../../../assets/css/otherpage/money/uploadInvoice";
</style>