登录和注册（六）实名认证——姓名、证件号码、上传证件正反面、只能绑定一个账号 & 证件号码校验之护照格式、身份证号格式

登录和注册（六）实名认证——姓名、证件号码、上传证件正反面、只能绑定一个账号 & 证件号码校验之护照格式、身份证号格式

效果

代码

src\views\myCenter\accountManagement\basicInfo\unverified.vue

<template> <div id="unverified"> <centerHead title="实名认证"></centerHead> <div class="unverified-content"> <div class="unverifiedBox"> <b class="must">真实姓名：</b> <el-input type="text" v-model="realName" @input="nameLimit()"></el-input> <p class="unverifiedHit">{ 
  { realNameHit }}</p> </div> <div class="unverifiedBox"> <b class="must">证件类型：</b> <el-select v-model="identityType" @change="selects(identityType)"> <el-option value="0" label="身份证"></el-option> <el-option value="1" label="护照"></el-option> </el-select> <p class="unverifiedHit">{ 
  { identityTypeHit }}</p> </div> <div class="unverifiedBox"> <b class="must">证件号码：</b> <el-input type="text" v-model="identityNumber" @change="cards" placeholder="一个居民身份证号只能绑定一个账号"></el-input> <p class="unverifiedHit">{ 
  { identityNumberHit }}</p> </div> <div class="unverifiedBox"> <b class="must">证件正面照：</b> <ImageUpload v-model="licenseFront" :fileType=0 :encrypt=false serviceType="unverified" :canvasWidth="90" :canvasHeight="90" valid="png,jpg,jpeg" :max="2048" :objectType="constant.objectType.typeSCHD"> </ImageUpload> <p class="tips">图片大小不超过2M，支持png,jpg</p> <p class="unverifiedHit">{ 
  { licenseFrontHit }}</p> </div> <div class="unverifiedBox"> <b class="must">证件反面照：</b> <ImageUpload v-model="licenseBack" :fileType=0 :encrypt=false serviceType="unverified" :canvasWidth="90" :canvasHeight="90" valid="png,jpg,jpeg" :max="2048" :objectType="constant.objectType.typeSCHD"> </ImageUpload> <p class="tips">图片大小不超过2M，支持png,jpg</p> <p class="unverifiedHit">{ 
  { licenseBackHit }}</p> </div> </div> <div class="unverifiedFooter"> <el-button type="primary" link @click="dell">取消</el-button> <el-button type="primary" @click="indents" v-if="hraf == 0">修改</el-button> <el-button type="primary" @click="indents" v-else>提交申请</el-button> </div> </div> </template> <script setup> import { ref, inject, onMounted } from "vue"; import { post } from "@/utils/path"; import { useRoute, useRouter } from "vue-router"; import { ElLoading } from 'element-plus' const route = useRoute() const router = useRouter() const message = inject('message'); const constant = inject('constant') const hraf = route.query.t const realName = ref('') const identityType = ref('') const identityNumber = ref('') const licenseFront = ref('') const licenseBack = ref('') const stau = ref({}) const realNameHit = ref(''); const identityTypeHit = ref('') const identityNumberHit = ref('') const licenseFrontHit = ref('') const licenseBackHit = ref('') onMounted(() => { if (hraf == '0') { getDetails() } }) // 取消 const dell = () => { router.back(); } // 提交申请 const indents = () => { var reg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{1,}[(·•)|(\u4E00-\u9FA5\uf900-\ufa2d·s)]*[\u4E00-\u9FA5\uf900-\ufa2d·s]{1,}$/; if (realName.value == "") { realNameHit.value = "请输入真实姓名"; return } if (!reg.test(realName.value)) { realNameHit.value = "不能输入特殊字符、空格、英文且字符在2-20范围"; return; } if (realName.value.length < 2 || realName.value.length > 20) { realNameHit.value = "不能输入特殊字符、空格、英文且字符在2-20范围"; return } if (identityType.value.length == 0 && realName.value != "") { identityTypeHit.value = "证件类型不能为空!" return } if (identityType.value == 0) { if (identityNumber.value == '') { identityNumberHit.value = '证件号码不能为空！' return } var reg = /(^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/; if (reg.test(identityNumber.value) == false) { identityNumberHit.value = "证件号码格式不正确"; return } } if (identityType.value == 1) { var reg1 = /^((1[45]\d{7})|(G\d{8})|(E\d{8})|(P\d{7})|(S\d{7,8}))?$/ if (reg1.test(identityNumber.value) == false) { identityNumberHit.value = "证件号码格式不正确"; return } } if (!licenseFront.value) { licenseFrontHit.value = '请上传证件正面照！' return; } if (!licenseBack.value) { licenseBackHit.value = '请上传证件反面照！' return; } var items = { 'realName': realName.value, 'identityNumber': identityNumber.value, 'identityType': identityType.value, 'licenseFront': licenseFront.value, 'licenseBack': licenseBack.value, }; //执行加载动画 var loading = ElLoading.service({ lock: true, text: '提交中...', spinner: 'el-icon-loading', background: 'rgba(255, 255, 255, 0.7)' }); let url if (hraf == '0') { items.id = stau.value.id, url = '/users/person/auth/edit' } else { url = '/users/person/auth' } post(constant.publicCoop + url, items).then((res) => { loading.close(); if (res.data.code == "200") { message.success(res.data.message); router.push({ path: "/myCenter/identityAudit" }) } else { message.error(res.data.message) } }) } // 详情回显 const getDetails = () => { post(constant.publicCoop + '/users/person/searchrealautho').then(function (res) { if (res.data.result == 0) { stau.value = res.data.data; realName.value = stau.value.realName; identityNumber.value = stau.value.identityNumber; identityType.value = stau.value.identityType; licenseFront.value = stau.value.licenseFront; licenseBack.value = stau.value.licenseBack; } }) } const nameLimit = () => { if (realName.value) { var reg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{1,}[(·•)|(\u4E00-\u9FA5\uf900-\ufa2d·s)]*[\u4E00-\u9FA5\uf900-\ufa2d·s]{1,}$/; if (reg.test(realName.value) == false || realName.value.indexOf(" ") != -1) { realNameHit.value = '真实姓名不能输入特殊字符、空格、英文且字符在2-20范围！'; return true; } else if (realName.value.length > 50) { realNameHit.value = '真实姓名不能输入特殊字符、空格、英文且字符在2-20范围！'; return true; } else { realNameHit.value = ""; return false } } else { realNameHit.value = '真实姓名不能为空！'; return true; } } const selects = (identityType) => { if (identityType.value == '') { identityTypeHit.value = "请选择证件类型"; return true } else { identityTypeHit.value = '' return false } } const cards = () => { post(constant.publicCoop + '/users/person/onlyidcard', { query: identityNumber.value }).then((res) => { if (res.data.data == "0") { if (identityType.value == 0) { var reg = /(^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/; if (reg.test(identityNumber.value) == false) { identityNumberHit.value = "身份证格式不正确"; return false } else { message.success("身份证可用"); return true } } if (identityType.value == 1) { var reg1 = /^((1[45]\d{7})|(G\d{8})|(E\d{8})|(P\d{7})|(S\d{7,8}))?$/ if (reg1.test(identityNumber.value) == false) { identityNumberHit.value = "护照格式不正确"; return false } else { message.success("护照格式可用"); return true } } if (identityNumber.value == "") { identityNumberHit.value = ''; } } else { if (identityType.value == 0) { message.error("此身份证已被注册"); } if (identityType.value == 1) { message.error("此护照已被注册"); } } }) } const inLicenseFront = () => { if (licenseFront.value) { licenseFrontHit.value = ''; return false; } else { licenseFrontHit.value = '请上传证件反面照！'; return true; } } const inLicenseBack = () => { if (licenseBack.value) { licenseBackHit.value = ''; return false; } else { licenseBackHit.value = '请上传证件反面照！'; return true; } } // export default { // data() { // return { // serviceType: 'userAuthentication', // imageUrl: '', // isshows: false, // title3: '', // title: '', // title1: '', // title2: '', // imgshow1: false, // imgshow2: false, // imgshow: false, // iderss: false, // stau: '', // hraf: '', // iscards: '', // iscard: false, // dialogImageUrl: '', // dialogVisible: false, // realName: '', // showSin: "不能输入特殊字符、空格、英文且字符在2-20范围", // identityNumber: '', // query: "", // identityType: '', // //licenseHandle: {imageUrl: "/img/peopleHeader.jpg",fileId: "",imgType:'hand',oldVal:''}, // licenseFront: { imageUrl: "/img/peopleHeader.jpg", fileId: "", imgType: 'face', oldVal: '' }, // licenseBack: { imageUrl: "/img/peopleHeader.jpg", fileId: "", imgType: 'back', oldVal: '' }, // status: "", // id: '', // image2: '', // leixing: "", // options: [{ // value: '0', // label: '身份证' // }, // { // value: '1', // label: '护照' // } // ], // value: '' // } // }, // methods: { // getImgServiceId(obj) { // if (obj) { // switch (obj.imgType) { // case 'hand': // //this.licenseHandle = obj; // break; // case 'face': // this.licenseFront = obj; // break; // case 'back': // this.licenseBack = obj; // break; // default: // } // } // }, // handleChange() { // if (this.licenseBacks == "") { // this.imgshow2 = true // } else { // this.imgshow2 = false // } // if (this.licenseFront == "") { // this.imgshow1 = true // } else { // this.imgshow1 = false // } // /*if(this.licenseHandle == ""){ // this.imgshow = true // }else{ // this.imgshow = false // }*/ // }, // modify() { // var reg = /^[\u4E00-\u9FA5\uf900-\ufa2d·s]{1,}[(·•)|(\u4E00-\u9FA5\uf900-\ufa2d·s)]*[\u4E00-\u9FA5\uf900-\ufa2d·s]{1,}$/; // if (!this.realName) { // this.iderss = true; // this.showSin = "请输入您的昵称"; // this.$message.error('请输入您的昵称') // return; // } // if (!reg.test(this.realName)) { // this.showSin = "不能输入特殊字符、空格、英文且字符在2-20范围"; // this.$message.error('不能输入特殊字符、空格、英文且字符在2-20范围'); // return; // } // if (this.identityType.length == 0 && this.realName != "") { // this.isshows = true; // this.title3 = "类型不能为空" // this.$message.error('类型不能为空') // return; // } // if (this.leixing == 0) { // var reg = /(^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$)|(^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$)/; // //var a = (/^[1-9]\d{5}(18|19|([23]\d))\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/)|(/^[1-9]\d{5}\d{2}((0[1-9])|(10|11|12))(([0-2][1-9])|10|20|30|31)\d{2}[0-9Xx]$/) // //var reg = /^[1-9]\d{5}(18|19|20)\d{2}((0[1-9])|(1[0-2]))(([0-2][1-9])|10|20|30|31)\d{3}[0-9Xx]$/; // if (reg.test(this.identityNumber) == false) { // this.iscard = true; // this.iscards = "身份证格式不正确"; // this.$message.error('身份证格式不正确') // return false // } else { // this.iscard = false // } // } // if (this.leixing == 1) { // var reg1 = /^((1[45]\d{7})|(G\d{8})|(E\d{8})|(P\d{7})|(S\d{7,8}))?$/ // if (reg1.test(this.identityNumber) == false) { // this.iscard = true; // this.iscards = "护照格式不正确"; // this.$message.error('护照格式不正确') // return; // return false // } else { // this.iscard = false // } // } // if (this.iscard == false && this.isshows == false && this.iderss == false && this.licenseFront.fileId && this.licenseBack.fileId) { // var that = this; // var params = { // id: this.stau.id, // 'realName': this.encrypt.dataEncrypt(this.realName), // 'identityNumber': this.encrypt.dataEncrypt(this.identityNumber), // 'identityType': this.identityType, // 'licenseFront': this.licenseFront.fileId, // 'licenseBack': this.licenseBack.fileId, // }; // /*if(this.licenseHandle.oldVal!=''){ // params.oldLicenseHandle = this.licenseHandle.oldVal; // }*/ // if (this.licenseFront.oldVal != '') { // params.oldLicenseFront = this.licenseFront.oldVal; // } // if (this.licenseBack.oldVal != '') { // params.oldLicenseBack = this.licenseBack.oldVal; // } // //执行加载动画 // let loading = this.$loading({ // lock: true, // text: '上传中...', // spinner: 'el-icon-loading', // background: 'rgba(255, 255, 255, 0.7)' // }); // this.$http.post(process.env.VUE_APP_API_HOST + '/user/person/auth/edit', params).then(function (res) { // loading.close(); // if (res.data.result == "0") { // that.$router.push({ path: "/myCenter/identityAudit" }) // } else { // that.$message.error(res.data.hint) // } // }) // } else { // that.$message.error('请完善所有信息') // } // }, // }, // created() { // this.hraf = this.$route.query.t; // if (this.hraf) { // var that = this; // this.$http.post(process.env.VUE_APP_API_HOST + '/user/person/searchrealautho').then(function (res) { // if (res.data.result == 0) { // that.stau = res.data.data; // that.realName = that.encrypt.dataDecrypt(that.stau.realName); // that.identityNumber = that.encrypt.dataDecrypt(that.stau.identityNumber); // that.identityType = that.stau.identityType; // //调用子组件函数返回图片路径 // /*that.$refs.fileCardHand.changeFilePath(that.stau.licenseHandle,function(path){ // that.licenseHandle.imageUrl = path; // that.licenseHandle.fileId = that.stau.licenseHandle; // })*/ // that.$refs.fileCardFace.changeFilePath(that.stau.licenseFront, function (path) { // that.licenseFront.imageUrl = path; // that.licenseFront.fileId = that.stau.licenseFront; // }) // that.$refs.fileCardBack.changeFilePath(that.stau.licenseBack, function (path) { // that.licenseBack.imageUrl = path; // that.licenseBack.fileId = that.stau.licenseBack; // }) // } else { // that.$message.error(res.data.hint); // } // }) // } // } // } </script> <style lang="scss"> #unverified { width: 100%; .unverified-content { width: 50%; margin: auto; .unverifiedBox { width: 100%; position: relative; margin-top: 20px; b { width: 100px; display: inline-block; font-size: 14px; font-weight: 400; text-align: center; } .must::before { content: '*'; color: red; } .el-input, .el-select { width: 80%; } .el-select { .el-input { width: 100%; } } .unverifiedHit { position: absolute; left: 100px; font-size: 14px; color: red; } .tips { position: absolute; top: 38px; left: 220px; font-size: 14px; color: #9e9e9e; } .imageUpload { vertical-align: top; } } } .unverifiedFooter { width: 100%; text-align: center; margin-top: 30px; } } </style> 

src\utils\path.js

import request from "./request"; import { 
    getApiUrl } from "@/utils/tool"; const baseUrl = getApiUrl(); // 通用请求 export function post(url, params = { 
    }){ 
    const data = request.post(baseUrl + url, params); // const data = request.post(url, params); return data } export function get(url, params = { 
    }){ 
    const data = request.get(baseUrl + url); return data } 

src\main.ts

import { 
    createApp, ref } from 'vue' import App from './App.vue' const app = createApp(App) /*上传图片*/ app.component('ImageUpload', ImageUpload); import ImageUpload from './components/file/imageUpload.vue'; 

src\components\file\imageUpload.vue

<template>
  <form class="imageUpload" method="post" enctype="multipart/form-data" :style="canvasStyle">
    <input class="FileUpload" type="file" :disabled="disabledShow" accept="image" name="file" @change="imageChange($event.target.files,$event)"/>
    <!-- <img v-if="realPath" :src="realPath" id="preview" :style="canvasStyle">
    <i v-else class="el-icon-plus"></i> -->
    <img :src="realPath ? realPath : '/img/u60.png'" id="preview" :style="canvasStyle">
  </form>
</template>

<script>
  import $file from "../../http/moudules/file";
  import $fileUtil from "../../utils/fileUtil";
  import {inject} from 'vue'
  export default {
    props: {
      modelValue: {
        type: String
      },
      // 图片后缀名格式
      valid: {
        type: String,
        default: "jpg,png,gif,jpeg,bmp"
      },
      // 图片上传最小体积
      min: {
        type: Number,
        default: 1
      },
      // 图片上传最大体积
      max: {
        type: Number,
        default: 10240
      },
      // 图片宽度
      imageWidth: {
        type: Number,
        default: 400
      },
      // 图片高度
      imageHeight: {
        type: Number,
        default: 400
      },
      canvasWidth: {
        type: Number,
        default: 88
      },
      canvasHeight: {
        type: Number,
        default: 88
      },
      // 后端创建文件夹名称
      serviceType:{
        type: String,
        default: "common"
      },
      encrypt:{
        type: Boolean,
        default:false
      },
      // 上传文件类型
      fileType:{
        type: Number,
        default: 0
      },
      // 禁用
      disabledShow:{
         type:Boolean,
        default:false,
      },
      //业务标记
      code:{
        type:String,
        default:'1'
      },
      //remark
      remark:{
        type:String,
        default:''
      },
      objectType: {
        type: String
      },
    },
    data() {
      return {
        realPath: "",
        constant:inject('constant')
      }
    },
    computed: {
      canvasStyle: function () {
        return {
          width: this.canvasWidth + "px",
          height: this.canvasHeight + "px"
        }
      }
    },
    created() {
      if (this.modelValue) {
        this.realPath = process.env.VUE_APP_API_HOST + this.constant.fileUpload + '/previewImage?id=' + this.modelValue;
        this.changeImagePath(this.modelValue);
      }
    },
    watch: {
      modelValue:{
          handler(path){
            if (path) {
              this.realPath = process.env.VUE_APP_API_HOST + this.constant.fileUpload + '/previewImage?id=' + path;
            } else {
              this.realPath = "";
            }
          }
      }
    },
    methods: {
      init() {
        this.realPath = '';
      },
      //点击上传图片
      imageChange(files,event) {
        var that = this;
        let file = files[0];
        if(file) {
          // 检验上传文件格式
          let veritySuffix = $fileUtil.getVeritySuffix(file,this.valid,this.$message);
          if (!veritySuffix) {
            event.srcElement.value="";
            file.value ="";
            return;
          }
          //校验上传文件大小
          let veritySize = $fileUtil.getFileSize(file,this.min,this.max,this.$message);
          if (!veritySize) {
            event.srcElement.value=""
            file.value ="";
            return;
          }
          let reader = new FileReader()
          reader.readAsDataURL(file);
          reader.onload = function(e){
            that.realPath = this.result;
            that.$emit('getImageBase',this.result)  //传递图片的base64码
            if(that.encrypt) {
              that.uploadImgBase64(file, this.result,event);
            }else{
              that.uploadImgBlob(file,event);
            }
          }
        }
      },
      uploadImgBlob(file,event){
        // console.log(file);
        var that = this;
        let formData = new FormData();
        formData.append('file', file);
        formData.append('fileName',file.name)
        formData.append('fileType',this.fileType)
        formData.append('encrypt',this.encrypt)
        formData.append('domain',this.serviceType)
        formData.append('code',this.code);               // 业务标记
        formData.append('remark',this.remark);           // 备注
        formData.append('objectType', '{"object_type":"'+this.objectType+'"}');
        $file.imageUplaodBlob({data:formData,success:function(res){

          event.srcElement.value=""
          file.value ="";
          if (res.data.success) {
             // res.data.data  {id:'',imageUrl:''} 返回的是 图片id 以及 路径
            that.$emit('getImgServiceId',res.data.data.map(item=>item.id)); //传递图片的id 
            that.$emit('update:modelValue',res.data.data[0].id);
            that.$message.success(res.data.message);
          } else {
            that.$message.error(res.data.message);
          }
        }})
      },

      uploadImgBase64(file,base64,event){
        var that = this;
        let param = {fileName:file.name,fileBase:base64,encrypt:this.encrypt,serviceType:this.serviceType,fileType:this.fileType,fileSize:file.size}
        $file.fileUplaodBase64({data:param,success:function(res){
          event.srcElement.value=""
          file.value ="";
          if (res.data.success) {
            that.$emit('getImgServiceId',res.data.data.map(item=>item.id));
            that.$emit('update:modelValue',res.data.data[0].id);
            that.$message.success("图片上传成功");
          } else {
            that.$message.error(res.data.message);
          }
        }})
      },

      changeImagePath(path){
          //当加密图片时需要解码
          if(this.encrypt){
            let param = {path:path,encrypt:this.encrypt}
            $file.getImgPath({data:param,success:function(res){
              if (res.data.result === 0) {
                  this.realPath = $fileUtil.getFileBase64Prefix(res.data.fileName)+res.data.fileBase;
              } else {
                that.$message.error(res.data.hint);
              }
            }})
          }
      }
    }
  }
</script>

<style lang="scss" scoped>
  .imageUpload {
    display: inline-block;
    position: relative;
    padding: 3px 5px;
    overflow: hidden;
    color: #fff;
    border: 1px dashed #d9d9d9;
    cursor: pointer;
    border-radius: 5px;
    img {
      width: 100%;
      height: 100%;
    }
    /*.el-icon-plus {
      font-size: 26px;
      color: #d9d9d9;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -13px;
      margin-top: -13px;
    }
    .uploadIMG {
      font-size: 26px;
      color: #d9d9d9;
      font-style: normal;
      position: absolute;
      top: 50%;
      left: 50%;
      margin-left: -13px;
      margin-top: -20px;
    }*/
    .FileUpload {
      position: absolute;
      width: 100%;
      height: 100%;
      top: 0;
      left: 0;
      outline: none;
      background-color: transparent;
      filter: alpha(opacity=0);
      -moz-opacity: 0;
      -khtml-opacity: 0;
      opacity: 0;
      cursor: pointer;
    }

  }
</style>

src\http\moudules\file.js

/ * 文件帮助类 */ import $axios from '@/utils/request' import * as $tool from '../../utils/tool' import constant from '@/components/constant.js' let fileService = { 
    fileUplaodBlob(params){ 
   //普通上传调用 params.data = params.data == null?{ 
   }:params.data; $axios({ 
    method: 'post', // url: process.env.VUE_APP_API_HOST+"/resources/upload/common/file", url: process.env.VUE_APP_API_HOST+ constant.fileUpload + '/uploadFile', data: params.data, headers: { 
    'Content-Type': 'multipart/form-data;charset=UTF-8' // 'Content-Type': 'application/x-www-form-urlencoded' }, onUploadProgress:params.onUploadProgress }).then((res)=>{ 
    if($tool.isFunction(params.success)){ 
    params.success(res) } }).catch((err)=>{ 
    if($tool.isFunction(params.error)){ 
    params.error(err) } }) }, imageUplaodBlob(params){ 
   //图片普通上传调用 console.log(params) params.data = params.data == null?{ 
   }:params.data; $axios({ 
    method: 'post', // url: process.env.VUE_APP_API_HOST+"/resources/upload/common/file", url: process.env.VUE_APP_API_HOST+ constant.fileUpload + '/uploadImage', data: params.data, headers: { 
    'Content-Type': 'multipart/form-data;charset=UTF-8' // 'Content-Type': 'application/x-www-form-urlencoded' }, onUploadProgress:params.onUploadProgress }).then((res)=>{ 
    if($tool.isFunction(params.success)){ 
    params.success(res) } }).catch((err)=>{ 
    if($tool.isFunction(params.error)){ 
    params.error(err) } }) }, fileUplaodBase64(params){ 
   //base64上传调用 params.data = params.data == null?{ 
   }:params.data; $axios.post(process.env.VUE_APP_API_HOST+"/resources/upload/common/jsonfile",params.data).then((res)=>{ 
    if($tool.isFunction(params.success)){ 
    params.success(res) } }).catch((err)=>{ 
    console.log(err) if($tool.isFunction(params.error)){ 
    params.error(err) } }) }, fileDownloadBase64(params){ 
   //base64文件下载 // $axios.post(process.env.VUE_APP_API_HOST+ constant.fileUpload +"/download",{id:params.data}).then((res)=>{ 
    $axios.get(process.env.VUE_APP_API_HOST+ constant.fileUpload +"/download?id="+params.data, { 
   id: params.data}).then((res)=>{ 
    console.log('------fileDownloadBase64------',res) if($tool.isFunction(params.success)){ 
    params.success(res) } }).catch((err)=>{ 
    console.log('------fileDownloadBase64------',res) if($tool.isFunction(params.error)){ 
    params.error(err) } }) }, getImgPath(params){ 
   //获取图片base64，用于展示图片 $axios.post(process.env.VUE_APP_API_HOST+"/resources/download/common/image",params.data).then((res)=>{ 
    // $axios.post(process.env.VUE_APP_API_HOST+ constant.fileUpload +"/uploadImage",params.data).then((res)=>{ 
    if($tool.isFunction(params.success)){ 
    params.success(res) } }).catch((err)=>{ 
    console.log(err) if($tool.isFunction(params.error)){ 
    params.error(err) } }) }, fileUploadExt(params){ 
   //普通上传调用 params.data = params.data == null?{ 
   }:params.data; $axios({ 
    method: 'post', url: process.env.VUE_APP_API_HOST+"/resources/decompression/zip", data: params.data, headers: { 
    'Content-Type': 'multipart/form-data;charset=UTF-8' // 'Content-Type': 'application/x-www-form-urlencoded' } }).then((res)=>{ 
    if($tool.isFunction(params.success)){ 
    params.success(res) } }).catch((err)=>{ 
    console.log(err) if($tool.isFunction(params.error)){ 
    params.error(err) } }) }, getFileInfo(params){ 
    $axios.get(process.env.VUE_APP_API_HOST+ "/resources/object/"+params.fileId,{ 
   }).then(function(res){ 
    if($tool.isFunction(params.success)){ 
    params.success(res) } },function(err){ 
    console.log(err) if($tool.isFunction(params.error)){ 
    params.error(err) } }) } }; export default fileService; 

src\utils\tool.js

export function isFunction(v) { 
    return toStr.call(v) === '[object Function]'; } 

mponents/constant.js

export default { 
    fileUpload: '/yundu-file-wjm', //上传文件网关 } 

实名认证审核

src\views\myCenter\accountManagement\userAudit\userAudit.vue

<!-- @Description 用户管理 - 用户审核 @author jmd @date 2024/02/23 --> <template> <div id="userAudit"> <centerHead title="实名认证审核"></centerHead> <div class="content"> <div class="box"> <div class="ser-box"> <el-form :model="formInfo" :inline="true" label-width="90px"> <el-form-item label="账号"> <el-input v-model.trim="formInfo.accountName"></el-input> </el-form-item> <el-form-item label="真实姓名"> <el-input v-model.trim="formInfo.realName"></el-input> </el-form-item> <el-form-item label="审批状态："> <el-select v-model="formInfo.status"> <el-option label="全部" value=""></el-option> <el-option label="待审核" value="0"></el-option> <el-option label="已审核" value="1"></el-option> <el-option label="已拒绝" value="2"></el-option> </el-select> </el-form-item> </el-form> <div class="btn"> <el-button type="primary" @click="onSearch">查询</el-button> <el-button type="primary" @click="onReset">重置</el-button> </div> </div> <div class="set-box"> <el-table ref="cerTable" :data="projectTableData" :header-cell-style="{ background: '#eef1f6' }" stripe show-header highlight-current-row @selection-change="handleSelectionChange"> <template #empty> <noneData :noneShow="projectTableData && projectTableData.length == 0"></noneData> </template> <el-table-column type="selection" width="55"></el-table-column> <el-table-column label="账号" align="center" show-overflow-tooltip #default="scope"> <span>{ 
  { idCard(scope.row.accountName) }}</span> </el-table-column> <el-table-column label="真实姓名" align="center" show-overflow-tooltip #default="scope"> <p>{ 
  { scope.row.realName }}</p> </el-table-column> <el-table-column label="身份" align="center" show-overflow-tooltip #default="scope"> 个人用户 </el-table-column> <el-table-column label="证件类型" align="center" show-overflow-tooltip #default="scope"> <span v-if="scope.row.identityType == 0">身份证</span> <span v-else-if="scope.row.identityType == 1">护照</span> </el-table-column> <el-table-column label="证件号码" align="center" show-overflow-tooltip #default="scope"> { 
  { idCard(scope.row.identityNumber) }} </el-table-column> <el-table-column label="证件正面照" align="center" show-overflow-tooltip #default="scope"> <el-popover placement="top" trigger="click" width="200"> <img :src="imgUrl" style="width: 173px; height: 178px;"> <template #reference> <el-button type="primary" @click="getImgUrl(scope.row.licenseFront)">附件</el-button> </template> </el-popover> </el-table-column> <el-table-column label="证件反面照" align="center" show-overflow-tooltip #default="scope"> <el-popover placement="top" trigger="click" width="200"> <img :src="imgUrl" style="width: 173px; height: 178px;"> <template #reference> <el-button type="primary" @click="getImgUrl(scope.row.licenseBack)">附件</el-button> </template> </el-popover> </el-table-column> <el-table-column label="状态" align="center" show-overflow-tooltip #default="scope"> <span v-if="scope.row.status == 0">待审核</span> <span v-else-if="scope.row.status == 1">已审核</span> <span v-else-if="scope.row.status == 2">已拒绝</span> </el-table-column> <el-table-column label="操作" align="center" show-overflow-tooltip #default="scope"> <el-button v-if="scope.row.status == 0" link type="primary" @click="onAgree(scope.row)">同意</el-button> <el-button v-if="scope.row.status == 0" link type="primary" @click="onRefuse(scope.row)">拒绝</el-button> </el-table-column> </el-table> <div style="margin-top:20px;" v-if="projectTableData && projectTableData.length > 0"> <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page.sync="formInfo.pageNo" :page-sizes="[10, 20, 30, 40, 50]" :page-size="formInfo.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="total"> </el-pagination> </div> </div> </div> </div> <el-dialog title="拒绝" v-model="isRefuse" :close-on-click-modal="false" :close-on-press-escape="false" :show-close="false" width="35%"> <div class="modelCont"> <p class="resultClass"><span style="color: red;">*</span><label>拒绝原因：</label></p> <el-input type="textarea" rows="6" cols="37" v-model="refuseReason" resize="none" show-word-limit maxlength="200"></el-input> </div> <template #footer> <span class="dialog-footer"> <el-button @click="cancelRefuse">取 消</el-button> <el-button type="primary" @click="sureRefuse">确 定</el-button> </span> </template> </el-dialog> </div> </template> <script setup> import { ref, inject, onMounted } from 'vue'; import { ElMessageBox } from 'element-plus' import { post } from "@/utils/path"; import { useRoute, useRouter } from "vue-router"; import { getApiUrl } from "@/utils/tool"; const baseUrl = getApiUrl(); const route = useRoute() const router = useRouter() const message = inject('message'); const verification = inject('verification'); const constant = inject('constant') const date = inject('date') const idCard = inject('idCard') const formInfo = ref({ pageNo: 1, pageSize: 10 }) const total = ref(0); const projectTableData = ref([]) const isRefuse = ref(false) const refuseId = ref('') const refuseReason = ref('') const projectTypeList = ref([]) const cerSelection = ref([]) const imgUrl = ref('') onMounted(() => { getQuery() }) const getImgUrl = (val) => { imgUrl.value = baseUrl + constant.fileUpload + '/previewImage?id=' + val } // 重置 const onReset = () => { formInfo.value = { pageNo: formInfo.value.pageNo, pageSize: formInfo.value.pageSize } } // 列表 const getQuery = () => { post(constant.publicCoop + '/users/person/auth/', formInfo.value).then((res) => { if (res.data.code == '200') { projectTableData.value = res.data.data.records; total.value = res.data.data.total * 1; } }) } // 查询 const onSearch = () => { var msg = verification.checkParam('账号', formInfo.value.accountName, false, 50); if (msg != null) { message.error(msg); return } var msg1 = verification.checkParam('真实姓名', formInfo.value.realName, false, 50); if (msg1 != null) { message.error(msg1); return } formInfo.value.pageNo = 1; getQuery(); } // 分页 const handleSizeChange = (val) => { formInfo.value.pageSize = val; getQuery(); window.scrollTo(0, 0) } const handleCurrentChange = (val) => { formInfo.value.pageNo = val; getQuery(); window.scrollTo(0, 0) } // 同意 const onAgree = (val) => { ElMessageBox.confirm('此操作将同意该认证通过审核, 是否继续?', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' }).then(() => { post(constant.publicCoop + '/users/person/auth/approve', { ids: [val.id] }).then((res) => { if (res.data.code == '200') { message.success('操作成功！'); getQuery(); } else { message.error(res.data.message); } }) }).catch(() => { }) } // 拒绝 const onRefuse = (val) => { refuseId.value = val.id refuseReason.value = ''; isRefuse.value = true } // 拒绝取消 const cancelRefuse = () => { isRefuse.value = false } // 拒绝确定 const sureRefuse = () => { var msg = verification.checkParam('拒绝原因', refuseReason.value, true, 200); if (msg != null) { message.error(msg) } else { post(constant.publicCoop + '/users/person/auth/reject', { ids: [refuseId.value], reason: refuseReason.value }).then((res) => { if (res.data.code == '200') { message.success('操作成功！'); isRefuse.value = false; getQuery(); } else { message.error(res.data.message); } }) } } // 多选 const handleSelectionChange = (val) => { cerSelection.value = val } </script> <style lang="scss" scoped> #userAudit { width: 100%; .content { width: 100%; .box { .ser-box { margin-top: 20px; .btn { width: 100%; text-align: right; } } .set-box { margin: 0 0 20px 0; width: 100%; } .el-table { margin: 20px 0; } } } } </style> 

src\main.ts

import { 
    createApp, ref } from 'vue' import App from './App.vue' const app = createApp(App) app.provide('idCard', function (val:any) { 
    if (val != null) { 
    if (val.length == 1) { 
    return `${ 
     val.substring(0, 0)}${ 
     val.substring(val.length - 0)}` } else if (val.length == 2) { 
    return `${ 
     val.substring(0, 1)}${ 
     val.substring(val.length - 0)}` } else if (val.length == 3 || val.length == 4 || val.length == 5) { 
    return `${ 
     val.substring(0, 1)}${ 
     val.substring(val.length - 1)}` } else if (val.length == 6) { 
    return `${ 
     val.substring(0, 2)}${ 
     val.substring(val.length - 2)}` } else { 
    return `${ 
     val.substring(0, 3)}${ 
     val.substring(val.length - 3)}` } } else { 
    return val } }); 

版权声明：

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若内容造成侵权、违法违规、事实不符，请将相关资料发送至xkadmin@xkablog.com进行投诉反馈，一经查实，立即处理！

转载请注明出处，原文链接：https://www.xkablog.com/haskellbc/10678.html