邀请函调整

 <template>
 <template>
   <el-dialog
   <el-dialog
-      v-model="show" :title="title" width="600px" append-to-body close-icon="CircleClose" center
-      :close-on-click-modal="false" class="pcloginpop"
-      destroy-on-close
+    v-model="show" :close-on-click-modal="false" :title="title" append-to-body center
+    class="pcloginpop"
+    close-icon="CircleClose" destroy-on-close
+    width="600px"
   >
   >
-    <div class="boxInvitation pd20">
     
     
-      <div class="text-center pd20" v-if="showR">
-        <img class="mauto" src="@/assets/dance/ok.png"/>
-<!--        <h2 class="text-center">{{ language == 0 ? '申请已提交' : 'Submitted successfully' }}</h2>-->
-        <h4 class="text-center" v-if="language == 0">
+    <div class="boxInvitation pd20">
+      <div v-if="showR" class="text-center pd20">
+        <img class="mauto" src="@/assets/dance/ok.png">
+        <!--        <h2 class="text-center">{{ language == 0 ? '申请已提交' : 'Submitted successfully' }}</h2>-->
+        <h4 v-if="language == 0" class="text-center">
           我们已收到您的邀请函申请，并将尽快处理。请耐心等待。
           我们已收到您的邀请函申请，并将尽快处理。请耐心等待。
         </h4>
         </h4>
         <h4 v-else>
         <h4 v-else>
-          Your invitation letter application has been received,<br/>
+          Your invitation letter application has been received,<br>
           and we will process it as soon as possible.
           and we will process it as soon as possible.
-          <br/>
+          <br>
           Please be patient while waiting.
           Please be patient while waiting.
         </h4>
         </h4>
-        <el-button size="large" type="primary" @click="conti" round class="btn-lineG">
+        <el-button class="btn-lineG" round size="large" type="primary" @click="conti">
           {{ language == 0 ? '继续提交' : 'Continue To Submit' }}
           {{ language == 0 ? '继续提交' : 'Continue To Submit' }}
         </el-button>
         </el-button>
       </div>
       </div>
       
       
-      <el-form :model="form" :rules="rules" ref="iformRef" label-position="right" label-width="150px" v-else>
-        <el-form-item :label="language==0?'姓名':'Name'" required prop="name">
-          <el-input v-model="form.name" @input="handleInput"/>
+      <el-form
+        v-else ref="iformRef" :model="form" :rules="rules" label-position="right"
+        label-width="150px"
+      >
+        <!--        <el-form-item :label="language==0?'有效证件':'Passport Copy'" prop="passportCopy" required>-->
+        <!--          <image-upload-->
+        <!--            v-model="form.passportCopy" :button-text="language==0?'上传':'Upload'" :is-show-tip="false"-->
+        <!--            :limit="1"-->
+        <!--          />-->
+        <!--        </el-form-item>-->
+        
+        <el-form-item :label="language==0?'有效证件':'Valid Passport'" prop="passportCopy" required>
+          <image-upload
+            ref="uploadPassportRef"
+            v-model="form.passportCopy"
+            :action="'/common/getPersonInfoFromCert/6'"
+            :button-text="language==0?'上传':'Upload'"
+            :is-show-tip="false"
+            :limit="1"
+            param-name="pic"
+            @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,
+              application of visa invitation letter and purchasing insurance etc.</span>
+          </div>
+        
         </el-form-item>
         </el-form-item>
-        <el-form-item :label="language==0?'性别':'Gender'" required prop="gender">
+        <el-form-item :label="language==0?'姓名':'Name'" prop="name" required>
+          <el-input v-model="form.name" @input="handleInput" />
+        </el-form-item>
+        <el-form-item :label="language==0?'护照号':'Passport No.'" prop="passportNo" required>
+          <el-input v-model="form.passportNo" />
+        </el-form-item>
+        <el-form-item :label="language==0?'性别':'Gender'" prop="gender" required>
           <el-radio-group v-model="form.gender">
           <el-radio-group v-model="form.gender">
             <el-radio value="0">{{ language == 0 ? '女' : 'female' }}</el-radio>
             <el-radio value="0">{{ language == 0 ? '女' : 'female' }}</el-radio>
             <el-radio value="1">{{ language == 0 ? '男' : 'male' }}</el-radio>
             <el-radio value="1">{{ language == 0 ? '男' : 'male' }}</el-radio>
           </el-radio-group>
           </el-radio-group>
         </el-form-item>
         </el-form-item>
-        <el-form-item :label="language==0?'国籍':'Nationality'" required prop="nationality">
-          <el-select filterable v-model="form.nationality" style="width: 100%;">
-            <el-option v-for="item in countrys" :key="item.id" :label="language==0?item.name:item.enName"
-                       :value="item.id"/>
+        <el-form-item :label="language==0?'国籍':'Nationality'" prop="nationality" required>
+          <el-select v-model="form.nationality" filterable style="width: 100%;">
+            <el-option
+              v-for="item in countrys" :key="item.id" :label="language==0?item.name:item.enName"
+              :value="item.id"
+            />
           </el-select>
           </el-select>
         </el-form-item>
         </el-form-item>
-        <el-form-item :label="language==0?'出生日期':'Date of Birth'" required prop="birth">
+        <el-form-item :label="language==0?'出生日期':'Date of Birth'" prop="birth" required>
           <el-date-picker
           <el-date-picker
             v-model="form.birth"
             v-model="form.birth"
-              style="width: 100%;" placeholder="YYYY-MM-DD"
-              type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
+            format="YYYY-MM-DD" placeholder="YYYY-MM-DD"
+            style="width: 100%;" type="date" value-format="YYYY-MM-DD"
           />
           />
         </el-form-item>
         </el-form-item>
-        <el-form-item :label="language==0?'邮箱':'Email'" required prop="email">
-          <el-input v-model="form.email" type="email"/>
-          <div class="tip" v-if="language == 0">如以团队名义申请邀请函，建议统一填写领队邮箱。</div>
-          <div class="tip" v-else>
-            If a visa invitation letter is applied by the organization, it is recommended to fill in the email of the head of team.
+        <el-form-item :label="language==0?'邮箱':'Email'" prop="email" required>
+          <el-input v-model="form.email" type="email" />
+          <div v-if="language == 0" class="tip">如以团队名义申请邀请函，建议统一填写领队邮箱。</div>
+          <div v-else class="tip">
+            If a visa invitation letter is applied by the organization, it is recommended to fill in the email of the
+            head of team.
           </div>
           </div>
         </el-form-item>
         </el-form-item>
-        <el-form-item :label="language==0?'护照号':'Passport No.'" required prop="passportNo">
-          <el-input v-model="form.passportNo"/>
-        </el-form-item>
-        <el-form-item :label="language==0?'有效证件':'Passport Copy'" required prop="passportCopy">
-          <image-upload v-model="form.passportCopy" :limit="1" :is-show-tip="false"
-                       :button-text="language==0?'上传':'Upload'"/>
-        </el-form-item>
-        <el-form-item :label="language==0?'抵达日期':'Date of Arrival'" required prop="arrival">
+        
+        <el-form-item :label="language==0?'抵达日期':'Date of Arrival'" prop="arrival" required>
           <el-date-picker
           <el-date-picker
-              v-model="form.arrival" placeholder="YYYY-MM-DD"
-              style="width: 100%;"
-              type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
+            v-model="form.arrival" format="YYYY-MM-DD"
+            placeholder="YYYY-MM-DD"
+            style="width: 100%;" type="date" value-format="YYYY-MM-DD"
           />
           />
         </el-form-item>
         </el-form-item>
-        <el-form-item :label="language==0?'出发日期':'Date of Departure'" required prop="departure">
+        <el-form-item :label="language==0?'出发日期':'Date of Departure'" prop="departure" required>
           <el-date-picker
           <el-date-picker
             v-model="form.departure"
             v-model="form.departure"
-              style="width: 100%;" placeholder="YYYY-MM-DD"
-              type="date" format="YYYY-MM-DD" value-format="YYYY-MM-DD"
+            format="YYYY-MM-DD" placeholder="YYYY-MM-DD"
+            style="width: 100%;" type="date" value-format="YYYY-MM-DD"
           />
           />
         </el-form-item>
         </el-form-item>
         <el-form-item :label="language==0?'备注':'Remark '">
         <el-form-item :label="language==0?'备注':'Remark '">
-          <el-input type="textarea" v-model="form.remark" rows="3"/>
+          <el-input v-model="form.remark" rows="3" type="textarea" />
         </el-form-item>
         </el-form-item>
         
         
         <div class="text-center">
         <div class="text-center">
-          <el-button type="primary" size="large" @click="submit" round class="btn-lineG">
+          <el-button class="btn-lineG" round size="large" type="primary" @click="submit">
             {{ language == 0 ? '提交' : 'SUBMIT' }}
             {{ language == 0 ? '提交' : 'SUBMIT' }}
           </el-button>
           </el-button>
         </div>
         </div>
@@ -90,17 +120,17 @@
 </template>
 </template>
 
 
 <script setup>
 <script setup>
-import {useStorage} from "@vueuse/core/index";
-import {getCurrentInstance, watch} from "vue";
-import {nextTick} from "@vue/runtime-core";
-import {ElMessage, ElMessageBox} from "element-plus";
-import {addInvitation, countryList} from "@/apiPc/match";
-import ImageUpload from "@/components/ImageUpload";
-
-const {proxy} = getCurrentInstance()
+import { useStorage } from '@vueuse/core/index'
+import { getCurrentInstance, watch, ref } from 'vue'
+import { nextTick } from '@vue/runtime-core'
+import { ElMessage, ElMessageBox } from 'element-plus'
+import { addInvitation, countryList } from '@/apiPc/match'
+import ImageUpload from '@/components/ImageUpload'
+
+const { proxy } = getCurrentInstance()
 const language = useStorage('language', 0)
 const language = useStorage('language', 0)
 const form = ref({
 const form = ref({
-  gender:'0'
+  gender: '0'
 })
 })
 const show = ref(false)
 const show = ref(false)
 const showR = ref(false)
 const showR = ref(false)
@@ -109,14 +139,14 @@ const countrys = ref([])
 const cptId = ref('')
 const cptId = ref('')
 const rules = ref(
 const rules = ref(
   {
   {
-      nationality: [{required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose'},],
-      name: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter'},],
-      email: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter'},],
-      birth: [{required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose'},],
-      passportNo: [{required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter'},],
-      passportCopy: [{required: true, trigger: 'blur', message: language.value == 0 ? '请上传' : 'Please Upload'},],
-      arrival: [{required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose'},],
-      departure: [{required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose'},],
+    nationality: [{ required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose' }],
+    name: [{ required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter' }],
+    email: [{ required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter' }],
+    birth: [{ required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose' }],
+    passportNo: [{ required: true, trigger: 'blur', message: language.value == 0 ? '请输入' : 'Please enter' }],
+    passportCopy: [{ required: true, trigger: 'blur', message: language.value == 0 ? '请上传' : 'Please Upload' }],
+    arrival: [{ required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose' }],
+    departure: [{ required: true, trigger: 'change', message: language.value == 0 ? '请选择' : 'Please choose' }]
   })
   })
 const open = (params) => {
 const open = (params) => {
   console.log(params)
   console.log(params)
@@ -124,7 +154,8 @@ const open = (params) => {
   title.value = params.title
   title.value = params.title
   cptId.value = params.cptId
   cptId.value = params.cptId
 }
 }
-defineExpose({open})
+defineExpose({ open })
+
 watch(show, (value) => {
 watch(show, (value) => {
   if (!value) {
   if (!value) {
     form.value = {
     form.value = {
@@ -145,10 +176,11 @@ function getCountryList() {
     countrys.value = res.data
     countrys.value = res.data
   })
   })
 }
 }
+
 const handleInput = (value) => {
 const handleInput = (value) => {
-  const regex = /^[a-zA-Z]*$/;
-  const regexCh = /^[\u4e00-\u9fa5]+$/;
-  if(language.value==0){
+  const regex = /^[a-zA-Z]*$/
+  const regexCh = /^[\u4e00-\u9fa5]+$/
+  if (language.value == 0) {
     if (!regexCh.test(value)) {
     if (!regexCh.test(value)) {
       form.value.name = ''
       form.value.name = ''
       ElMessage.warning('请输入中文')
       ElMessage.warning('请输入中文')
@@ -182,14 +214,31 @@ const submit = () => {
         if (Array.isArray(form.value.passportCopy)) {
         if (Array.isArray(form.value.passportCopy)) {
           form.value.passportCopy = form.value.passportCopy[0].url
           form.value.passportCopy = form.value.passportCopy[0].url
         }
         }
+        form.value.ocrFlag = '1'
         addInvitation(form.value).then((res) => {
         addInvitation(form.value).then((res) => {
-          ElMessage.success(language.value == 0 ?'提交成功':'Successfully!')
+          ElMessage.success(language.value == 0 ? '提交成功' : 'Successfully!')
           showR.value = true
           showR.value = true
         })
         })
       })
       })
     }
     }
   })
   })
 }
 }
+
+const ocrSuccess = (res) => {
+  // form.value.passportUrl = res.data.url
+  console.log(form.value.passportUrl)
+  if (res.code == 200) {
+    form.value.passportCopy = res.data.url
+    form.value.passportNo = res.data.code
+    form.value.birth = res.data.birth?.slice(0, 10)
+    form.value.gender = res.data.sex
+    form.value.name = res.data.name
+  } else if (res.code == 500) {
+    ElMessage.warning(res.msg)
+    form.value.passportCopy = ''
+  }
+}
+
 const conti = () => {
 const conti = () => {
   showR.value = false
   showR.value = false
   form.value = {
   form.value = {
@@ -198,11 +247,18 @@ const conti = () => {
 }
 }
 </script>
 </script>
 
 
-<style scoped lang="scss">
-.tip{font-size: 12px;}
+<style lang="scss" scoped>
+.tip {
+  font-size: 12px;
+}
+
 .boxInvitation {
 .boxInvitation {
   width: 90%;
   width: 90%;
   margin: auto
   margin: auto
 }
 }
-h4{font-size: 15px;line-height: 1.6;}
+
+h4 {
+  font-size: 15px;
+  line-height: 1.6;
+}
 </style>
 </style>