renli-pc/src/pages/discount-coupon/management/components/pay.vue

<template>
  <el-dialog title="打款" :visible.sync="dialogFormVisible" width="500px" @close="close" :close-on-click-modal="false" v-dialogDrag>
    <el-form ref="form" :model="form" :rules="rules" label-width="80px">
      <el-form-item label="保证金">
        <el-input v-model.trim="form.guaranteeMoney" readonly></el-input>
      </el-form-item>
      <el-form-item label="打款回执" prop="imageUrl">
        <el-upload class="avatar-uploader" :limit="10" ref="upload" action="#" :show-file-list="false" :auto-upload="false" :on-change="handleChange">
          <img v-if="form.imageUrl" :src="form.imageUrl" class="avatar">
          <i v-else class="el-icon-plus avatar-uploader-icon"></i>
        </el-upload>
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button @click="close">取 消</el-button>
      <el-button type="primary" @click="save">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { doPay } from "@/api/discount-coupon/management.js";
export default {
  name: 'pay',
  data() {
    return {
      form: {}, //需要提交的数据
      rules: {
        imageUrl: [
          { required: true, message: '请上传回执', trigger: ['blur', 'change'] },
        ],
      },//form校验规则
      dialogFormVisible: false//弹窗显示
    }
  },
  created() { },
  methods: {
    // ============================ 弹窗 ============================ //
    // 显示弹窗
    show(row) {
      row.state = 5
      this.form = Object.assign({}, row);
      this.dialogFormVisible = true
    },
    // 关闭弹窗
    close() {
      this.handleClear()
      this.form = Object.assign({}, {});
      this.dialogFormVisible = false
    },

    // ============================ 操作 ============================ //
    // 选择图片后形成图片访问路径和将文件流传给edit.vue
    handleChange(file, fileList) {
      let form = Object.assign({}, this.form);
      form.imageUrl = URL.createObjectURL(file.raw);//形成虚拟文件访问路径
      form.multipartFile = file.raw //要上传的图片流
      this.form = Object.assign({}, form);
      this.$refs.form.validateField(['imageUrl'])
    },
    // 发布后清除选择的文件
    handleClear() {
      this.$refs.upload.clearFiles();
    },
    // 保存
    save() {
      this.$refs.form.validate(async (valid) => {
        if (valid) {
          let form = Object.assign({}, this.form);
          for (let key in form) {
            // format写法会将null类型强行转化成字符串的‘null’，传到后台，后台会报错，所以需要删掉值为null的字段
            if (form[key] !== 0 && !form[key]) {
              delete form[key]
            }
            // 这三个数组无法用format传值，会自动被编译成字符串，例：[object object]，后台无法识别，所以需要删掉
            if (key == 'useStores' || key == 'useProjects' || key == 'fileLists') {
              delete form[key]
            }
          }
          let format = new FormData()
          Object.keys(form).map(key => {
            format.append(key, form[key])
          })
          let { code, message } = await doPay(format)
          if (code == '000000') {
            this.$message({
              message: message,
              type: 'success'
            });
            // 成功后刷新父页面的数据
            this.$emit('fetch-data');
            // 关闭弹窗
            this.close()
          }
          if (code == '010000') {
            this.$message({
              message: message,
              type: 'error'
            });
          }
        } else {
          return false
        }
      })
    },
  },
}
</script>
<style>
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
  background-color: #fff;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 150px;
  height: 150px;
  line-height: 150px;
  text-align: center;
}
.avatar {
  width: 150px;
  height: 150px;
  display: block;
}
</style>