代理商信息认证，身份证文件上传

1 month ago · 2311bb8df8
3 changed files with 94 additions and 5 deletions
--- a/src/views/business/agentVerification/index.vue
+++ b/src/views/business/agentVerification/index.vue
@ -110,6 +110,45 @@
        <el-form-item :label="$t('business.agent.agentVerification.legalPersonIdCard')" prop="legalPersonIdCard">
          <el-input v-model="form.legalPersonIdCard" :placeholder="$t('business.agent.agentVerification.legalPersonIdCardPlaceholder')"/>
        </el-form-item>
+        <el-form-item :label="$t('business.userManager.userVerification.idCardFront')" prop="idCardFrontImagePath">
+          <el-upload
+            class="upload-demo"
+            :action="uploadUrl"
+            :on-success="handleSuccess_idCardFrontImagePath"
+            :limit="1"
+            :accept="'image/jpg,image/png'"
+            :file-list="fileList"
+            list-type="picture">
+            <el-button size="small" type="primary">点击上传</el-button>
+            <div slot="tip" class="el-upload__tip">只能上传JPG/PNG文件，且不超过5M</div>
+          </el-upload>
+        </el-form-item>
+        <el-form-item :label="$t('business.userManager.userVerification.idCardBack')" prop="idCardBackImagePath">
+          <el-upload
+            class="upload-demo"
+            :action="uploadUrl"
+            :on-success="handleSuccess_idCardBackImagePath"
+            :limit="1"
+            :accept="'image/jpg,image/png'"
+            :file-list="fileList"
+            list-type="picture">
+            <el-button size="small" type="primary">点击上传</el-button>
+            <div slot="tip" class="el-upload__tip">只能上传JPG/PNG文件，且不超过5M</div>
+          </el-upload>
+        </el-form-item>
+        <el-form-item :label="$t('business.userManager.userVerification.idCardHolding')" prop="userWithIdCardImagePath">
+          <el-upload
+            class="upload-demo"
+            :action="uploadUrl"
+            :on-success="handleSuccess_userWithIdCardImagePath"
+            :limit="1"
+            :accept="'image/jpg,image/png'"
+            :file-list="fileList"
+            list-type="picture">
+            <el-button size="small" type="primary">点击上传</el-button>
+            <div slot="tip" class="el-upload__tip">只能上传JPG/PNG文件，且不超过5M</div>
+          </el-upload>
+        </el-form-item>
        <el-form-item :label="$t('business.agent.agentVerification.electronicContract')" prop="electronicContract">
          <el-input v-model="form.electronicContract" :placeholder="$t('business.agent.agentVerification.electronicContractPlaceholder')"/>
        </el-form-item>
@ -141,6 +180,15 @@
        <el-form-item :label="$t('business.agent.agentVerification.legalPersonIdCardNumber') + '：'">
          {{auditForm.legalPersonIdCardShow}}
        </el-form-item>
+        <el-form-item :label="$t('business.userManager.userVerification.idCardFront') + '：'">
+          {{auditForm.idCardFrontImagePath}}
+        </el-form-item>
+        <el-form-item :label="$t('business.userManager.userVerification.idCardBack') + '：'">
+          {{auditForm.idCardBackImagePath}}
+        </el-form-item>
+        <el-form-item :label="$t('business.userManager.userVerification.idCardHolding') + '：'">
+          {{auditForm.userWithIdCardImagePath}}
+        </el-form-item>
        <el-form-item :label="$t('business.agent.agentVerification.businessLicense') + '：'">
          {{auditForm.businessLicenseNumber}}
        </el-form-item>
@ -248,6 +296,8 @@ export default {
      form: {},
      //审核参数
      auditForm: {},
+      // 上传文件列表
+      fileList: [],
      // 表单校验
      rules: {
        agentName: [
@ -256,6 +306,15 @@ export default {
        legalPersonName: [
          { required: true, message: this.$t('business.agent.agentVerification.legalPersonNameRequired'), trigger: "blur" }
        ],
+        idCardFrontImagePath: [
+          { required: true, message: this.$t('business.userManager.userVerification.idCardFrontRequired'), trigger: "blur" }
+        ],
+        idCardBackImagePath: [
+          { required: true, message: this.$t('business.userManager.userVerification.idCardBackRequired'), trigger: "blur" }
+        ],
+        userWithIdCardImagePath: [
+          { required: true, message: this.$t('business.userManager.userVerification.idCardHoldingRequired'), trigger: "blur" }
+        ],
        electronicContract: [
          { required: true, message: this.$t('business.agent.agentVerification.electronicContractRequired'), trigger: "blur" }
        ],
@ -274,6 +333,12 @@ export default {
  created() {
    this.getList();
  },
+  computed: {
+    // 计算属性：动态生成上传URL
+    uploadUrl() {
+      return `${process.env.VUE_APP_BASE_API}/file/upload`;
+    }
+  },
  methods: {
    /** 查询商户认证信息列表 */
    getList() {
@ -452,6 +517,24 @@ export default {
            this.buttonLoading = false;
          });
      })
+    },
+    //身份证正面上传成功
+    handleSuccess_idCardFrontImagePath(response) {
+      if (response.code === 200) {
+        this.form.idCardFrontImagePath = response.data;  // 保存 URL 到表单
+      }
+    },
+    //身份证反面上传成功
+    handleSuccess_idCardBackImagePath(response) {
+      if (response.code === 200) {
+        this.form.idCardBackImagePath = response.data;  // 保存 URL 到表单
+      }
+    },
+    //身份证手持上传成功
+    handleSuccess_userWithIdCardImagePath(response) {
+      if (response.code === 200) {
+        this.form.userWithIdCardImagePath = response.data;  // 保存 URL 到表单
+      }
    }
  }
 };
--- a/src/views/business/merchantVerification/index.vue
+++ b/src/views/business/merchantVerification/index.vue
@ -284,6 +284,7 @@ export default {
      form: {},
      //审核参数
      auditForm: {},
+      // 上传文件列表
      fileList: [],
      // 表单校验
      rules: {
@ -349,7 +350,9 @@ export default {
        contactPersonPhone: undefined,
        contactPersonEmail: undefined,
        businessLicenseImage: undefined,
-        legalPersonIdCardImage: undefined,
+        idCardFrontImagePath: undefined,
+        idCardBackImagePath: undefined,
+        userWithIdCardImagePath: undefined,
        bankAccountNumber: undefined,
        bankName: undefined,
        status: undefined,
@ -499,16 +502,19 @@ export default {
          });
      })
    },
+    //身份证正面上传成功
    handleSuccess_idCardFrontImagePath(response) {
      if (response.code === 200) {
        this.form.idCardFrontImagePath = response.data;  // 保存 URL 到表单
      }
    },
+    //身份证反面上传成功
    handleSuccess_idCardBackImagePath(response) {
      if (response.code === 200) {
        this.form.idCardBackImagePath = response.data;  // 保存 URL 到表单
      }
    },
+    //身份证手持上传成功
    handleSuccess_userWithIdCardImagePath(response) {
      if (response.code === 200) {
        this.form.userWithIdCardImagePath = response.data;  // 保存 URL 到表单
--- a/src/views/business/userVerification/index.vue
+++ b/src/views/business/userVerification/index.vue
@ -124,8 +124,6 @@
          <el-upload
            class="upload-demo"
            :action="uploadUrl"
-            :on-preview="handlePreview"
-            :on-remove="handleRemove"
            :on-success="handleSuccess_idCardFrontImagePath"
            :limit="1"
            :accept="'image/jpg,image/png'"
@ -152,8 +150,6 @@
          <el-upload
            class="upload-demo"
            :action="uploadUrl"
-            :on-preview="handlePreview"
-            :on-remove="handleRemove"
            :on-success="handleSuccess_userWithIdCardImagePath"
            :limit="1"
            :accept="'image/jpg,image/png'"
@ -307,6 +303,7 @@ export default {
      form: {},
      //审核参数
      auditForm: {},
+      // 文件上传列表
      fileList: [],
      // 表单校验
      rules: {
@ -524,16 +521,19 @@ export default {
        });
      })
    },
+    //身份证正面上传成功
    handleSuccess_idCardFrontImagePath(response) {
      if (response.code === 200) {
        this.form.idCardFrontImagePath = response.data;  // 保存 URL 到表单
      }
    },
+    //身份证反面上传成功
    handleSuccess_idCardBackImagePath(response) {
      if (response.code === 200) {
        this.form.idCardBackImagePath = response.data;  // 保存 URL 到表单
      }
    },
+    //身份证手持上传成功
    handleSuccess_userWithIdCardImagePath(response) {
      if (response.code === 200) {
        this.form.userWithIdCardImagePath = response.data;  // 保存 URL 到表单