components/pc/wcarrier/comp/auth.vue

<template>
  <div class="p-spac p-b-0 defbb">
    <el-form ref="enterprise" :model="value" :rules="rules" size="mini">
      <div class="flex">
        <div class="mr-spacm4">
          <el-form-item prop="businessLicense">
            <div class="required ml-spac label-color">公司营业执照</div>
            <upload-img
              :fileList="lisenceFile"
              :big="true"
              @uploadOrgPic="uploadOrgPic"
            ></upload-img>
          </el-form-item>
          <el-form-item label="统一社会信用代码:" prop="taxpayer" label-width="140px">
            <el-input v-model="value.taxpayer" placeholder="上传营业执照照片，自动识别"></el-input>
          </el-form-item>
          <el-form-item label="公司名称:" prop="orgName" label-width="140px" class="m-b-0">
            <el-input v-model="value.orgName" placeholder="上传营业执照照片，自动识别"></el-input>
          </el-form-item>
        </div>
        <div>
          <div class="defbb pb-spac"><span class="label-color">法人证件类型：</span>身份证</div>
          <div class="flex">
            <div class="mr-spac">
              <el-form-item prop="idCardFront">
                <div class="required ml-spac label-color">法人身份证人像面</div>
                <upload-img
                  :fileList="idcard1"
                  @uploadOrgPic="uploadOrgPic"
                ></upload-img>
              </el-form-item>
            </div>
            <div>
              <el-form-item prop="idCardBack">
                <div class="required ml-spac label-color">法人身份证国徽面</div>
                <upload-img
                  :fileList="idcard2"
                  @uploadOrgPic="uploadOrgPic"
                ></upload-img>
              </el-form-item>
            </div>
          </div>
          <el-form-item label="法人证件号:" prop="idCardNo" label-width="100px">
            <el-input v-model="value.idCardNo" placeholder="上传法人证件照片，自动识别"></el-input>
          </el-form-item>
          <el-form-item label="法人姓名:" prop="legalperson" label-width="100px">
            <el-input v-model="value.legalperson" placeholder="上传法人证件照片，自动识别"></el-input>
          </el-form-item>
          <div class="text-right">
            <el-button type="primary" size="medium" class="auth-btn" @click="submitForm()" :loading="$reqState($interfaces.pay.carrier_open_account).ing">发起认证</el-button>
          </div>
        </div>
      </div>
    </el-form>

  </div>
</template>
<script>
import UploadImg from 'submodule/components/pc/upload/uploadImg.vue'

export default {
  name: 'auth',
  data() {
    return {
      lisenceFile: [
        {
          fileIndex: 0,
          path: this.value.businessLicense,
          defaultPath: require('@/assets/images/main/license@2x.png'),
          text: '上传营业执照'
        }
      ],
      idcard1: [
        {
          fileIndex: 1,
          path: this.value.idCardFront,
          defaultPath: require('@/assets/images/main/idcardfont-bg@2x.png'),
          text: '上传法人身份证人像面'
        }
      ],
      idcard2: [
        {
          fileIndex: 2,
          path: this.value.idCardBack,
          defaultPath: require('@/assets/images/main/idcardback-bg@2x.png'),
          text: '上传法人身份证国徽面'
        }
      ],
      rules: {
        businessLicense: { required: true, message: '请上传公司营业执照', trigger: 'blur' },
        idCardFront: { required: true, message: '请上传法人身份证人像面', trigger: 'blur' },
        idCardBack: { required: true, message: '请上传法人身份证国徽面', trigger: 'blur' },
        orgName: { required: true, message: '请输入公司名称', trigger: 'blur' },
        taxpayer: { required: true, message: '请输入统一社会信用代码', trigger: 'blur' },
        idCardNo: { required: true, message: '请输入法人证件号', trigger: 'blur' },
        legalperson: { required: true, message: '请输入法人姓名', trigger: 'blur' }
      }
    }
  },
  props: {
    value: {
      type: Object,
      default: () => ({})
    }
  },
  components: { UploadImg },
  methods: {
    uploadOrgPic(path, fileIndex) {
      if (fileIndex === 0) {
        this.value.businessLicense = path
      } else if (fileIndex === 1) {
        this.value.idCardFront = path
      } else if (fileIndex === 2) {
        this.value.idCardBack = path
      }
      if (fileIndex === 2) {
        return
      }
      this.$http(this.$interfaces.message.orc, { imgUrl: path, picType: fileIndex === 0 ? 1 : 2 }).then(res => {
        if (fileIndex === 0) {
          this.value.orgName = res.companyName
          this.value.taxpayer = res.creditCode
          // 保存时使用
          this.value.address = res.businessAddress
        } else if (fileIndex === 1) {
          this.value.idCardNo = res.idNumber
          this.value.legalperson = res.name
        }
      })
    },
    submitForm() {
      this.$refs.enterprise.validate((valid) => {
        if (valid) {
          const params = { ...this.value }
          delete params.channelAuthStatus
          this.$http(this.$interfaces.pay.carrier_open_account, params).then(res => {
            this.value.channelAuthStatus = 2
            this.$http(this.$interfaces.user.refresh_carrier_token).then(res => {
              this.$store.commit('updateIdentity', res)
              this.$emit('authSuccess')
            })
          }).catch(() => {
            // 即使认证失败也刷新一下token，身份信息可能有更新
            this.$http(this.$interfaces.user.refresh_carrier_token).then(res => {
              this.$store.commit('updateIdentity', res)
            })
          })
        } else {
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>

</style>