components/pc/wcarrier/comp/auth.vue

<template>
  <div class="p-spac">
    <el-form class="defbb" ref="enterprise" :model="enterprise" :rules="rules" size="mini">
      <div class="flex">
        <div class="flex1 mr-spac">
          <el-form-item prop="card">
            <div class="required ml-spac">公司营业执照</div>
            <upload-img
              :fileList="lisenceArray"
              :big="true"
              @uploadOrgPic="uploadOrgPic"
            ></upload-img>
          </el-form-item>
          <el-form-item label="统一社会信用代码:" prop="no" label-width="160px">
            <el-input v-model="enterprise.no"></el-input>
          </el-form-item>
          <el-form-item label="公司名称:" prop="name" label-width="160px" class="m-b-0">
            <el-input v-model="enterprise.no"></el-input>
          </el-form-item>
        </div>
        <div class="flex1 relative">
          <div>法人证件类型：身份证</div>
          <div class="flex">
            <div>
              <el-form-item prop="card">
                <div class="required ml-spac">法人身份证人像面</div>
                <upload-img
                  :fileList="idcard1"
                  @uploadOrgPic="uploadOrgPic"
                ></upload-img>
              </el-form-item>
            </div>
            <div>
              <el-form-item prop="card">
                <div class="required ml-spac">法人身份证人像面</div>
                <upload-img
                  :fileList="idcard2"
                  @uploadOrgPic="uploadOrgPic"
                ></upload-img>
              </el-form-item>
            </div>
          </div>
          <el-form-item label="统一社会信用代码:" prop="no" label-width="160px">
            <el-input v-model="enterprise.no"></el-input>
          </el-form-item>
          <el-form-item label="公司名称:" prop="name" label-width="160px">
            <el-input v-model="enterprise.no"></el-input>
          </el-form-item>
          <el-button type="primary" size="medium" class="auth-btn" @click="submitForm()">发起认证</el-button>
        </div>
      </div>
      <el-form-item> </el-form-item>
    </el-form>

  </div>
</template>
<script>
import UploadImg from '@/components/uploadImg'

export default {
  name: 'auth',
  data() {
    return {
      lisenceArray: [
        {
          path: '',
          defaultPath: require('@/assets/images/main/license@2x.png'),
          text: '上传营业执照'
        }
      ],
      idcard1: [
        {
          path: '',
          defaultPath: require('@/assets/images/main/idcardfont-bg@2x.png'),
          text: '上传法人身份证人像面'
        }
      ],
      idcard2: [
        {
          path: '',
          defaultPath: require('@/assets/images/main/idcardback-bg@2x.png'),
          text: '上传法人身份证国徽面'
        }
      ],
      enterprise: {
        card: '',
        no: ''
      },
      rules: {
        card: { required: true, message: '请输入活动名称', trigger: 'blur' },
        name: { required: true, message: '请输入活动名称', trigger: 'blur' },
        no: [
          { required: true, message: '请输入活动名称', trigger: 'blur' },
          { min: 3, max: 5, message: '长度在 3 到 5 个字符', trigger: 'blur' }
        ]
      }
    }
  },
  components: { UploadImg },
  methods: {
    uploadOrgPic() {
      console.log('上传成功', arguments)
    },
    submitForm() {
      this.$refs.enterprise.validate((valid) => {
        if (valid) {
          alert('submit!')
        } else {
          console.log('error submit!!')
          return false
        }
      })
    }
  }
}
</script>
<style lang="scss" scoped>
.auth-btn {
  position: absolute;
  right: 0;
  bottom: 0;
}

</style>