crowd-test-service-frontend/src/components/authen/IndividualAuthenticationCreate.vue

<template>
  <div class="create-container" v-loading="loading">
    <div class="create-body">
      <div class="title">个人信息认证</div>
      <el-form :model="authentication" :rules="rules" ref="authentication" label-width="12%" class="demo-report">
        <el-form-item label="姓名" prop="realName">
          <el-input size="small" v-if="isModifyMode" v-model="authentication.realName"></el-input>
          <!--<span v-if="!isModifyMode">{{authentication.name}}</span>-->
        </el-form-item>
        <el-form-item prop="file" label="手持身份证照片">
          <el-upload
            class="avatar-uploader"
            action=""
            :show-file-list="false"
            :http-request="uploadFile"
            :before-upload="beforeFileUpload">
            <img v-if="authentication.IDCardPhoto" :src="authentication.IDCardPhoto" class="avatar">
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
          <!--<div v-if="!isModifyMode">-->
          <!--<span v-if="authentication.photo==null">暂无文件</span>-->
          <!--<a :href="authentication.photo" v-if="authentication.photo!=null"><i class="fa fa-file-text-o"></i>-->
          <!--{{authentication.photo}}</a>-->
          <!--</div>-->
        </el-form-item>
        <el-form-item label="身份证号" prop="name">
          <el-input size="small" v-if="isModifyMode" v-model="authentication.IDCard"></el-input>
          <!--<span v-if="!isModifyMode">{{authentication.name}}</span>-->
        </el-form-item>

        <el-form-item label="银行卡账户" prop="name">
          <el-input size="small" v-if="isModifyMode" v-model="authentication.bankAccount"></el-input>
          <!--<span v-if="!isModifyMode">{{authentication.bankAccount}}</span>-->
        </el-form-item>
        <el-form-item label="地址" prop="name">
          <el-input size="small" v-if="isModifyMode" v-model="authentication.address"></el-input>
          <!--<span v-if="!isModifyMode">{{authentication.address}}</span>-->
        </el-form-item>

        <!--<el-form-item v-if="!isModifyMode">-->
        <!--<div class="btn btn-medium btn-info" @click="modifyInfo()">修改</div>-->
        <!--<div class="btn btn-medium" @click="cancelModify()">返回</div>-->
        <!--</el-form-item>-->
        <el-form-item v-if="isModifyMode">
          <div class="btn btn-primary btn-info" @click="submitInfo()">提交</div>
          <!--<div class="btn btn-primary" @click="cancelModify()">取消</div>-->
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import Http from '@/js/http'
import Apis from '@/js/api'
import {notify} from '@/constants/index'
import {
  getAllAgencyResourceTypes,
  getAllServiceTypes,
  getProvinceCodeByProvinceName,
  getProvinceNameByProvinceCode,
  storageGet,
} from '@/js/index'

export default {
  name: 'IndividualAuthenticationCreate',
  data () {
    return {
      userId: 0,
      user: {},
      isModifyMode: true,
      loading: false,
      authentication: {
        IDCardPhoto: '',
        realName: '',
        IDCard: '',
        bankAccount: '',
        address: '',
      },
      rules: {
        // name: [
        //   {required: true, message: '请输入报告名称', trigger: 'blur'}
        //   // { min: 3, max: 5, message: "长度在 3 到 5 个字符", trigger: "blur" }
        // ],
        // abstract: [
        //   {
        //     required: true,
        //     message: '请输入摘要信息',
        //     trigger: 'change'
        //   }
        // ],
        // type: [
        //   {required: true, message: '请选择报告类型', trigger: 'change'}
        // ],
        // conclusion: [
        //   {required: true, message: '请输入报告结论', trigger: 'blur'}
        // ]
      }
    }
  },
  mounted () {
    this.$nextTick(() => {
      this.init()
    })
  },
  methods: {
    //初始化数据
    init () {
      this.setUserInfo()
    },
    //加载数据
    loadData: function () {
    },
    //表单进入可编辑状态，可修改表单，不再使用
    modifyInfo () {
      this.isModifyMode = true
    },
    //提交认证信息
    submitInfo () {
      //this.isModifyMode = false
      this.showLoading()
      const newAuthentication = {
        userId: this.user.userVO.id,
        realName: this.authentication.realName,
        IDCard: this.authentication.IDCard,
        IDCardPhoto: this.authentication.IDCardPhoto,
        bankAccount: this.authentication.bankAccount,
        address: this.authentication.address
      }
      Http.post(Apis.USER.SUBMIT_INDIVIDUAL_AUTHENTICATION_INFO.replace('{userId}', this.user.userVO.id), newAuthentication).then((res) => {
        this.hideLoading()
        console.log(res)
        notify('success', '认证信息上传成功')
      }).catch(error => {
        this.hideLoading()
        notify('error', error.data)
      })
    },
    //取消修改表单，表单进入不可编辑状态，不再使用
    cancelModify () {
      this.isModifyMode = false
    },
    //上传文件时移除文件的响应函数
    handleRemove (file, fileList) {
      console.log(file, fileList)
    },
    //添加文件时的响应函数
    handleExceed (files, fileList) {
      this.$message.warning(
        `当前限制选择 1 个文件，本次选择了 ${
          files.length
          } 个文件，共选择了 ${files.length + fileList.length} 个文件`
      )
    },
    //移除文件前的响应函数
    beforeRemove (file, fileList) {
      //return this.$confirm(`确定移除 ${file.name}？`)
    },
    //文件上传前的响应函数
    beforeFileUpload () {
    },
    //上传文件，此处为上传图片
    uploadFile (param) {
      this.showLoading()
      const formData = new FormData()
      let config = {
        //添加请求头
        headers: {'Content-Type': 'multipart/form-data'},
      }
      formData.append('file', param.file)
      Http.upload(Apis.FILE.UPLOAD_IMAGE.replace('{userId}', this.user.userVO.id), formData, config).then((res) => {
        this.hideLoading()
        console.log('上传成功')
        this.authentication.IDCardPhoto = res.data
        console.log(res.data)
        notify('success', '上传成功')
      }).catch(error => {
        this.hideLoading()
        notify('error', error.data.msg)
      })
    },
    //
    setUserInfo () {
      this.user = storageGet('user')
    },
    showLoading () {
      this.loading = true
    },
    hideLoading () {
      this.loading = false
    }
  },
  created: function () {
  }
}
</script>

<style scoped>
  .el-radio {
    margin: 10px 20px 10px 0;
  }

  .el-form-item /deep/ .el-tabs__content {
    max-height: 120px !important;
    overflow: auto;
  }

  .el-row {
    margin-bottom: 10px;
  }

  .el-input {
    width: 400px;
  }

  .avatar-uploader .el-upload {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    cursor: pointer;
    position: relative;
    overflow: hidden;
  }

  .avatar-uploader .el-upload:hover {
    border-color: #409EFF;
  }

  .avatar-uploader-icon {
    border: 1px dashed #d9d9d9;
    border-radius: 6px;
    font-size: 28px;
    color: #8c939d;
    width: 176px;
    height: 178px;
    line-height: 178px;
    text-align: center;
  }

  .avatar-uploader-icon:hover {
    border-color: #409EFF;
  }

  .avatar {
    width: 178px;
    height: 178px;
    display: block;
  }
</style>