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

本文链接：https://blog.csdn.net/weixin_44867717/article/details/138872851

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

效果

在这里插入图片描述

代码

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
  }
});