add 护照OCR识别

杨炀
Showing 4 changed files with 75 additions and 33 deletions
src/components/ImageUpload/index.vue
src/viewsPc/match/components/addWdsf.vue
src/viewsPc/register/personal.vue
vite.config.js
--- a/src/components/ImageUpload/index.vue
View file @6332eb7
+++ b/src/components/ImageUpload/index.vue
View file @6332eb7
@@ -36,12 +36,12 @@
        :on-error="handleUploadError"
        :on-exceed="handleExceed"
        :before-remove="handleDelete"
-        :show-file-list="true"
+        :show-file-list="showFileList"
        :headers="headers"
        :on-preview="handlePictureCardPreview"
        :file-list="fileListInUpload"
        :class="{ hide: fileList.length >= limit }"
-        name="image"
+        :name="paramName"
        :disabled="disabled"
        :accept="accept"
      >
@@ -108,9 +108,17 @@ const props = defineProps({
    type: Boolean,
    default: false
  },
+  showFileList: {
+    type: Boolean,
+    default: true
+  },
  action: {
    type: String,
    default: ''
+  },
+  paramName: {
+    type: String,
+    default: 'image'
  }
 })
@@ -133,9 +141,7 @@ const uploadList = ref([])
 const dialogImageUrl = ref('')
 const dialogVisible = ref(false)
 const baseUrl = import.meta.env.VITE_APP_BASE_API
-const uploadImgUrl = ref(
+const uploadImgUrl = ref(baseUrl + '/upload/uploadImgToLocalServer') // 上传的图片服务器地址
-    baseUrl + '/upload/uploadImgToLocalServer'
-) // 上传的图片服务器地址
 const headers = ref({ Authorization: 'Bearer ' + getToken() })
 const fileList = ref([])
 const fileListInUpload = ref([])
@@ -173,7 +179,6 @@ watch(
 // 上传前loading加载
 function handleBeforeUpload(file) {
-  console.log('handleBeforeUpload', props)
  let isImg = false
  if (props.fileType.length) {
    let fileExtension = ''
@@ -212,6 +217,7 @@ function handleExceed() {
 // 上传成功回调
 function handleUploadSuccess(res, file) {
+  console.log(props)
  if (!actionUrl.value) {
    if (res.code === 200) {
      uploadList.value.push({ name: file.name, url: res.data || res.msg })
--- a/src/viewsPc/match/components/addWdsf.vue
View file @6332eb7
+++ b/src/viewsPc/match/components/addWdsf.vue
View file @6332eb7
@@ -66,15 +66,11 @@
            :is-show-tip="false"
        />
      </el-form-item>
-      <el-form-item :label="language==0?'性别':'Gender'" required>
-        <el-radio-group v-model="form.sex">
-          <el-radio value="0">{{ language == 0 ? '女' : 'female' }}</el-radio>
-          <el-radio value="1">{{ language == 0 ? '男' : 'male' }}</el-radio>
-        </el-radio-group>
-      </el-form-item>
      <el-form-item :label="language==0?'有效证件':'Valid Passport'" required>
-        <image-upload action="/common/getPersonInfoFromCert/3" v-model="form.passportUrl" :limit="1" :is-show-tip="false"
+        <image-upload ref="uploadPassportRef" v-model="form.passportUrl" :limit="1" :is-show-tip="false"
+                      :action="'/common/getPersonInfoFromCert/3'"
+                      paramName="pic"
                      :button-text="language==0?'上传':'Upload'"
                      @response="ocrSuccess"/>
        <div class="tip">
@@ -85,6 +81,13 @@
        </div>
      </el-form-item>
+      <el-form-item :label="language==0?'性别':'Gender'" required>
+        <el-radio-group v-model="form.sex">
+          <el-radio value="0">{{ language == 0 ? '女' : 'female' }}</el-radio>
+          <el-radio value="1">{{ language == 0 ? '男' : 'male' }}</el-radio>
+        </el-radio-group>
+      </el-form-item>
      <el-form-item :label="language==0?'出生日期':'Date of Birth'" required>
        <el-date-picker
            v-model="form.birth"
@@ -117,6 +120,8 @@ import _ from 'lodash'
 import Vcode from "vue3-puzzle-vcode"
 import {checkWdsf, checkWdsfAthletes} from "@/apiPc/match";
 import {useStorage} from "@vueuse/core/index";
+import ImageUpload from '@/components/ImageUpload/index.vue'
+import ImageUpload2 from '@/components/ImageUpload/index2.vue'
 const language = useStorage('language', 0)
 const certificates = ref([
@@ -158,11 +163,11 @@ const data = reactive({
  cptId: '',
  failVcode: '验证失败，请重试',
  successVcode: '验证通过！',
-  sliderText: '拖动滑块完成拼图',
+  sliderText: '拖动滑块完成拼图'
 })
 const {
  form, show, showVcode, title, labels, uType, isMe, isCodeTrue, card, cptId,
-  failVcode, successVcode, sliderText
+  failVcode, successVcode, sliderText,uploadPassportRef
 } = toRefs(data)
 let editgay = false
@@ -227,8 +232,16 @@ watch(show, (value) => {
  })
 })
 const ocrSuccess = (res) => {
-  // todo 增加护照ocr识别 识别外国人护照姓名，出生年月
+  // form.value.passportUrl = res.data.url
-  console.log(res)
+  console.log(form.value.passportUrl)
+  if(res.code==200){
+    form.value.passportUrl = res.data.url
+    form.value.passportNumber = res.data.code
+    form.value.birth = res.data.birth?.slice(0, 10)
+    form.value.sex = res.data.sex
+  } else if(res.code==500){
+    ElMessage.warning(res.msg)
+  }
 }
 function submitForm() {
@@ -406,7 +419,7 @@ function disabledBirth(time) {
 .tip {
  font-size: 13px;
-  color: #999;
+  color: #999;    line-height: 1.6;
  margin: 10px 0;
  i {
--- a/src/viewsPc/register/personal.vue
View file @6332eb7
+++ b/src/viewsPc/register/personal.vue
View file @6332eb7
@@ -65,15 +65,12 @@
                  />
                </el-form-item>
-                <el-form-item :label="language==0?'性别':'Gender'" required>
-                  <el-radio-group v-model="wdsfData.sex">
-                    <el-radio value="0">{{ language == 0 ? '女' : 'female' }}</el-radio>
-                    <el-radio value="1">{{ language == 0 ? '男' : 'male' }}</el-radio>
-                  </el-radio-group>
-                </el-form-item>
                <el-form-item :label="language==0?'有效证件':'Valid Passport'" required>
                  <image-upload v-model="wdsfData.passportUrl" :limit="1" :is-show-tip="false"
-                               :button-text="language==0?'上传':'Upload'"/>
+                                :action="'/common/getPersonInfoFromCert/3'"
+                                paramName="pic"
+                                :button-text="language==0?'上传':'Upload'"
+                                @response="ocrSuccess"/>
                  <div class="tip">
                    <span v-if="language==0">请上传有效身份证件扫描件，用于核实身份信息、申请签证邀请函及购买保险等</span>
                    <span v-else>Please upload a scanned copy of your valid passport for verification of identity information,
@@ -83,7 +80,12 @@
                <el-form-item :label="language==0?'证件号':'Passport number'" required>
                  <el-input v-model="wdsfData.passportNumber"/>
                </el-form-item>
+                <el-form-item :label="language==0?'性别':'Gender'" required>
+                  <el-radio-group v-model="wdsfData.sex">
+                    <el-radio value="0">{{ language == 0 ? '女' : 'female' }}</el-radio>
+                    <el-radio value="1">{{ language == 0 ? '男' : 'male' }}</el-radio>
+                  </el-radio-group>
+                </el-form-item>
                <el-form-item :label="language==0?'出生日期':'Date of Birth'" required>
                  <el-date-picker
                      v-model="wdsfData.birthday"
@@ -365,6 +367,18 @@ function bigNext(){
 }
 function next() {
+  if(!form.value.code){
+    ElMessage.warning(language.value == 0 ?'请填写验证码':'Please fill in your verification code')
+    return
+  }
+  if(!form.value.password){
+    ElMessage.warning(language.value == 0 ?'请填写密码':'Please fill in your password')
+    return
+  }
+  if(!form.value.confirmPassword){
+    ElMessage.warning(language.value == 0 ?'请再次填写密码':'Please fill in Confirm Password')
+    return
+  }
  if (wdsfData.value.personFlag == '0') {
    let obj = {
      card: form.value.card,
@@ -445,6 +459,17 @@ function afterR() {
 function forgetPassword(account) {
  useUserStore().setReLogin({account: account, active: 2})
 }
+const ocrSuccess = (res) => {
+  wdsfData.value.passportUrl = res.data.url
+  if(res.code==200){
+    wdsfData.value.passportUrl = res.data.url
+    wdsfData.value.passportNumber = res.data.code
+    wdsfData.value.birthday = res.data.birth?.slice(0, 10)
+    wdsfData.value.sex = res.data.sex
+  } else if(res.code==500){
+    ElMessage.warning(res.msg)
+  }
+}
 </script>
 <style scoped lang="scss">
--- a/vite.config.js
View file @6332eb7
+++ b/vite.config.js
View file @6332eb7
@@ -70,27 +70,25 @@ export default defineConfig(({ mode, command }) => {
          rewrite: (p) => p.replace(/^\/dev-api\/ztx-train/, '')
        },
        '/dev-api/ztx-match': {
-          // target: 'http://192.168.1.118:8083',
+          target: 'http://192.168.1.253:8081',
-          target: 'https://wdsfwuxicenter.com/stage-api/',
+          // target: 'https://wdsfwuxicenter.com/stage-api/',
          changeOrigin: true,
          rewrite: (p) => p.replace(/^\/dev-api\/ztx-match/, '')
        },
        '/dev-api/ztx-webSite': {
-          target: 'https://wdsfwuxicenter.com/stage-api/',
+          target: 'http://192.168.1.253:8081',
          changeOrigin: true,
          rewrite: (p) => p.replace(/^\/dev-api\/ztx-webSite/, '')
        },
        '/dev-api': {
          // target: 'http://192.168.1.118:8081/',
-          // target: 'http://192.168.1.131:8081/',
+          target: 'http://192.168.1.253:8081',
-          target: 'https://jijin.wtwuxicenter.com/stage-api',
+          // target: 'https://jijin.wtwuxicenter.com/stage-api',
-          // target: 'http://124.70.181.90:1880/stage-api',
          // target: 'https://wdsfwuxicenter.com/stage-api/',
          changeOrigin: true,
          rewrite: (p) => p.replace(/^\/dev-api/, '')
        },
        '/ticket': {
-          // target: 'http://192.168.1.131:8098/',
          // target: 'http://192.168.1.131:8081/',
          target: 'https://jijin.wtwuxicenter.com/h5/',
          // target: 'https://ticketh5.wdsfwuxicenter.com/h5/',