世锦赛关于签证服务的修改

杨炀
Showing 3 changed files with 147 additions and 40 deletions
src/apiPc/match.js
src/components/FileUpload/index.vue
src/viewsPc/match/components/affix-invitation.vue
--- a/src/apiPc/match.js
View file @45b4252
+++ b/src/apiPc/match.js
View file @45b4252
@@ -775,6 +775,13 @@ export function addInvitation(data) {
    data: data
  })
 }
+export function sendVisaCode(data) {
+  return request({
+    url: `/league/visa/sendCode`,
+    method: 'post',
+    data: data
+  })
+}
 export function getVisaInfo(query) {
  return request({
    url: `/league/visa/getVisa`,
--- a/src/components/FileUpload/index.vue
View file @45b4252
+++ b/src/components/FileUpload/index.vue
View file @45b4252
@@ -183,10 +183,9 @@ function handleBeforeUpload(file) {
  number.value++
  return true
 }
 // 文件个数超出
 function handleExceed() {
-  proxy.$modal.msgError(`上传文件数量不能超过 ${props.limit} 个!`)
+  proxy.$modal.msgError(language=='0'?`上传文件数量不能超过 ${props.limit} 个!`:`Maximum file count: ${props.limit}`)
 }
 // 上传失败
--- a/src/viewsPc/match/components/affix-invitation.vue
View file @45b4252
+++ b/src/viewsPc/match/components/affix-invitation.vue
View file @45b4252
@@ -17,7 +17,7 @@
          Your invitation letter application has been received,<br/>
          and we will process it as soon as possible.
          <br/>
-          Please be patient while waiting.
+          Thank you so much for your kind patience.
        </h4>
      </div>
@@ -30,15 +30,15 @@
            <el-option label="Supplier" value="4"/>
            <el-option label="Other" value="5"/>
          </el-select>
-          <el-input v-if="form.applicatType==5" placeholder="Please specify" v-model="form.remarks"/>
+          <el-input class="mt10" v-if="form.applicatType==5" placeholder="Please specify" v-model="form.remarks"/>
        </el-form-item>
-        <el-form-item :label="language==0?'邀请函类别':'Application Type'" required prop="invitationType">
+        <el-form-item :label="language==0?'邀请函类别':'Invitation Type'" required prop="invitationType">
          <el-select v-model="form.invitationType">
            <el-option :label="language==0?'一般邀请函':'General Invitation'" value="1"/>
-            <el-option :label="language==0?'TE/PU(外办)邀请函':'TE/PU(Foreign) Invitation'" value="2"/>
+            <el-option :label="language==0?'TE/PU(外办)邀请函':'TE/PU Invitation'" value="2"/>
          </el-select>
        </el-form-item>
-        <el-form-item :label="language==0?'是否需要中文邀请函':'Chinese Invitation'" required prop="chinese">
+        <el-form-item :label="language==0?'是否需要中文邀请函':'Do you need a Chinese invitation？'" required prop="chinese">
          <el-radio-group v-model="form.chinese">
            <el-radio :value="1">{{ language == 0 ? '是' : 'Yes' }}</el-radio>
            <el-radio :value="0">{{ language == 0 ? '否' : 'No' }}</el-radio>
@@ -46,20 +46,29 @@
        </el-form-item>
        <!--        一般信息-->
-        <el-form-item :label="language==0?'国家/地区协会名':'MNA/Team Name'" :required="form.applicatType!=2"
+        <el-form-item :label="language==0?'国家/地区协会名':'MNA Name'" :required="form.applicatType!=2"
                      prop="associationCode">
          <el-select v-model="form.associationCode" filterable>
            <el-option v-for="item in mnaList" :key="item.code" :label="language==0?item.nameCn:item.nameEn"
                       :value="item.code"/>
          </el-select>
        </el-form-item>
-        <el-form-item :label="language==0?'国家/地区协会地址':'MNA/Team Address'" :required="form.applicatType!=2"
+        <el-form-item :label="language==0?'国家/地区协会地址':'MNA Address'" :required="form.applicatType!=2"
                      prop="associationAddress">
          <el-input v-model="form.associationAddress"/>
        </el-form-item>
-        <el-form-item :label="language==0?'邮箱':'Email'" required prop="email">
+        <el-form-item :label="language==0?'邮箱':'Contact Email'" required prop="email">
-          <el-input v-model="form.email" type="email"/>
+          <el-input v-model="form.email" type="email">
-          <div class="tip"></div>
+            <template #append>
+              <el-button @click="sendEmail" v-loading="codeloading">
+                {{ language == 0 ? '发送验证码' : 'Send Code' }}
+              </el-button>
+            </template>
+          </el-input>
+<!--          <div class="tip"></div>-->
+        </el-form-item>
+        <el-form-item prop="code" required>
+          <el-input placeholder="Email verification code" v-model="form.code"/>
        </el-form-item>
        <el-form-item :label="language==0?'姓名':'Full Name'" required prop="fullName">
          <el-input v-model="form.fullName"/>
@@ -71,6 +80,7 @@
            <el-option label="Coach" value="2"/>
            <el-option label="Other" value="3"/>
          </el-select>
+          <el-input v-if="form.position==3" class="mt10" placeholder="Please specify" v-model="form.remarks1"/>
        </el-form-item>
        <el-form-item :label="language==0?'联系电话':'Phone'" required prop="phone">
          <el-input v-model="form.phone"/>
@@ -85,7 +95,7 @@
        <!--上传护照，多张-->
        <div class="cptVisaInfoBosTable">
          <el-form-item :label="language==0?'有效证件':'Passport Copy'" required>
-            <ImageUpload v-model="form.passportCopy" :is-show-tip="false"
+            <ImageUpload v-model="form.passportCopy" :is-show-tip="false" :limit="100"
                         :action="'/league/visa/getPersonInfoFromCert/3'"
                         paramName="pic" list-type="text" :show-file-list="false"
                         :button-text="language==0?'上传':'Upload'" @response="getPassportInfo"
@@ -95,35 +105,65 @@
          <div v-if="form.cptVisaInfoBos?.length>0" class="border">
            <el-table :data="form.cptVisaInfoBos" border size="small">
              <el-table-column prop="passportCopy" :label="language==0?'护照':'Passport Copy'" min-width="100">
+                <template #header>
+                  <div class="esp">
+                    <span class="red">*</span>Passport Copy
+                  </div>
+                </template>
                <template #default="scope">
-                  <el-image style="width: 60px"
+                  <el-image style="width: 60px;z-index: 999;" :src="fillImgUrl(scope.row.passportCopy)"
-                            :src="fillImgUrl(scope.row.passportCopy)"/>
+                            :preview-src-list="[fillImgUrl(scope.row.passportCopy)]" preview-teleported/>
                </template>
              </el-table-column>
              <el-table-column prop="position" :label="'position'" min-width="100">
+                <template #header>
+                  <div class="esp">
+                    <span class="red">*</span>Position
+                  </div>
+                </template>
                <template #default="scope">
                  <el-input v-model="scope.row.position" size="small"/>
                </template>
              </el-table-column>
              <el-table-column prop="lastName" :label="'lastName'" min-width="100">
+                <template #header>
+                  <div class="esp">
+                    <span class="red">*</span>LastName
+                  </div>
+                </template>
                <template #default="scope">
                  <el-input v-model="scope.row.lastName" size="small"/>
                </template>
              </el-table-column>
              <el-table-column prop="fristName" :label="'firstName'" min-width="100">
+                <template #header>
+                  <div class="esp">
+                    <span class="red">*</span>firstName
+                  </div>
+                </template>
                <template #default="scope">
                  <el-input v-model="scope.row.fristName" size="small"/>
                </template>
              </el-table-column>
-              <el-table-column prop="sex" :label="language==0?'性别':'Gender'" width="100">
+              <el-table-column prop="sex" :label="language==0?'性别':'Gender'" width="70">
+                <template #header>
+                  <div class="esp">
+                    <span class="red">*</span>Gender
+                  </div>
+                </template>
                <template #default="scope">
                  <el-select v-model="scope.row.sex" size="small">
-                    <el-option label="male" value="0"/>
+                    <el-option label="M" value="0"/>
-                    <el-option label="female" value="1"/>
+                    <el-option label="F" value="1"/>
                  </el-select>
                </template>
              </el-table-column>
              <el-table-column prop="nationality" :label="language==0?'国籍':'Nationality'" width="110px">
+                <template #header>
+                  <div class="esp">
+                    <span class="red">*</span>Nationality
+                  </div>
+                </template>
                <template #default="scope">
                  <el-select v-model="scope.row.nationality" size="small" filterable>
                    <el-option v-for="item in countrys" :key="item.id" :label="language==0?item.name:item.enName"
@@ -132,6 +172,11 @@
                </template>
              </el-table-column>
              <el-table-column prop="birth" :label="language==0?'出生日期':'Birth'" width="130px">
+                <template #header>
+                  <div class="esp">
+                    <span class="red">*</span>Birth
+                  </div>
+                </template>
                <template #default="scope">
                  <el-date-picker size="small"
                                  v-model="scope.row.birthday"
@@ -141,11 +186,21 @@
                </template>
              </el-table-column>
              <el-table-column prop="passportNo" :label="language==0?'护照号':'Passport No.'" width="110px">
+                <template #header>
+                  <div class="esp">
+                    <span class="red">*</span>Passport No.
+                  </div>
+                </template>
                <template #default="scope">
                  <el-input v-model="scope.row.passportNo" size="small"/>
                </template>
              </el-table-column>
-              <el-table-column prop="expiryDate" :label="language==0?'护照签发日':'Expiry Date'" width="130px">
+              <el-table-column prop="expiryDate" :label="language==0?'护照签发日':'DATE OF ISSUE'" width="130px">
+                <template #header>
+                  <div class="esp">
+                    <span class="red">*</span>DATE OF ISSUE
+                  </div>
+                </template>
                <template #default="scope">
                  <el-date-picker
                      v-model="scope.row.issueDate" size="small"
@@ -154,7 +209,12 @@
                  />
                </template>
              </el-table-column>
-              <el-table-column prop="arrival" :label="language==0?'护照过期日':'Expiration date'" width="130px">
+              <el-table-column prop="arrival" :label="language==0?'护照过期日':'DATE OF EXPIRY'" width="130px">
+                <template #header>
+                  <div class="esp">
+                    <span class="red">*</span>DATE OF EXPIRY
+                  </div>
+                </template>
                <template #default="scope">
                  <el-date-picker
                      v-model="scope.row.expiryDate" size="small"
@@ -163,11 +223,9 @@
                  />
                </template>
              </el-table-column>
-              <el-table-column label="Actions">
+              <el-table-column label="Actions" fixed="right">
                <template #default="scope">
-                  <el-button type="danger" size="small" @click="delPassportInfo(scope.row)">
+                  <el-button type="danger" size="small" @click="delPassportInfo(scope.row)" icon="delete"/>
-                    {{ language == 0 ? '删除' : 'Delete' }}
-                  </el-button>
                </template>
              </el-table-column>
            </el-table>
@@ -197,7 +255,7 @@ 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, associationList, countryList, getVisaInfo} from "@/apiPc/match";
+import {addInvitation, associationList, countryList, getVisaInfo, sendVisaCode} from "@/apiPc/match";
 import ImageUpload from '@/components/ImageUpload/index.vue'
 import useUserStore from "@/store/modules/user";
 import _ from 'lodash'
@@ -211,6 +269,7 @@ const form = ref({
  cptVisaInfoBos: []
 })
 const show = ref(false)
+const codeloading = ref(false)
 const showR = ref(false)
 const title = ref('')
 const countrys = ref([])
@@ -268,13 +327,24 @@ function getMNAList() {
 const submit = () => {
  console.log(form.value)
  if (form.value.email?.indexOf('@') == -1) {
-    if (language.value == 0) {
+    ElMessage.warning(language.value == 0?'请填写正确的邮箱':'Invalid Emaill Address！')
-      ElMessage.warning('请填写正确的邮箱')
+    return
-    } else {
+  }
-      ElMessage.warning('Please fill in the correct email')
+  if(form.value.applicatType==5 && !form.value.remarks){
-    }
+    ElMessage.warning('Please specify Applicant Type')
    return
  }
+  if(form.value.position==3 && !form.value.remarks1){
+    ElMessage.warning('Please specify position')
+    return
+  }
+  for (let row of form.value.cptVisaInfoBos){
+   if(!row.position){
+     ElMessage.warning(`Please specify ${row.fristName}'s position`)
+     return
+   }
+  }
  if (form.value.files && Array.isArray(form.value.files)) {
    form.value.files = form.value.files[0]?.url
  }
@@ -289,8 +359,12 @@ const submit = () => {
          }).then(() => {
        form.value.cptId = cptId.value
        addInvitation(form.value).then((res) => {
-          ElMessage.success(language.value == 0 ? '提交成功' : 'Successfully!')
+          if(res.data==-200){
-          showR.value = true
+            ElMessage.error(language.value == 0 ? '邮箱验证码不正确':'Invalid email verification code')
+          } else {
+            ElMessage.success(language.value == 0 ? '提交成功' : 'Successfully!')
+            showR.value = true
+          }
        })
      })
    }
@@ -301,14 +375,14 @@ const getPassportInfo = (res) => {
  if (res.data) {
    var obj = {
      position: '',
-      lastName: '',
+      lastName: res.data.surname,
-      fristName: res.data.name,
+      fristName: res.data.givenName,
      sex: res.data.sex,
      birthday: res.data.birth?.slice(0, 10),
-      nationality: '',
+      nationality: res.data.nationality,
      passportNo: res.data.code,
-      issueDate: '',
+      issueDate: res.data.issueDate?.slice(0, 10),
-      expiryDate: '',
+      expiryDate: res.data.validToDate?.slice(0, 10),
      passportCopy: res.data.pic
    }
    form.value.cptVisaInfoBos.push(obj)
@@ -319,12 +393,39 @@ const getPassportInfo = (res) => {
 function delPassportInfo(row) {
  console.log(row,form.value.cptVisaInfoBos)
-  form.value.cptVisaInfoBos = _.remove(form.value.cptVisaInfoBos, row)
+  if(form.value.cptVisaInfoBos.length==1){
+    form.value.cptVisaInfoBos = []
+  }else {
+    for(let n of form.value.cptVisaInfoBos){
+      if(n.passportNo==row.passportNo){
+        form.value.cptVisaInfoBos.splice(form.value.cptVisaInfoBos.indexOf(n),1)
+      }
+    }
+  }
+}
+function sendEmail() {
+  if(!form.value.email){
+    ElMessage.error(language.value == 0 ? '请输入邮箱' : 'Please enter contact Email')
+    return
+  }
+  if (!/^[a-zA-Z0-9_-]+@[a-zA-Z0-9_-]+(\.[a-zA-Z0-9_-]+)+$/.test(form.value.email)) {
+    ElMessage.error(language.value == 0 ? '请输入正确的邮箱' : 'Please enter the correct contact email')
+    return
+  }
+  codeloading.value = true
+  sendVisaCode({email:form.value.email}).then(res=>{
+    codeloading.value = false
+    if(res.code == 200){
+      ElMessage.success(language.value == 0 ? '发送成功,请前往邮箱查看' : 'Send success, please check your email')
+    }else{
+      ElMessage.error(res.msg)
+    }
+  })
 }
 </script>
 <style scoped lang="scss">
+.red{color: red!important;}
 :deep(.el-upload--picture-card) {
  --el-upload-picture-card-size: 60px;
 }
@@ -344,7 +445,7 @@ h4 {
 }
 .cptVisaInfoBosTable {
-  padding: 15px;
+  padding: 10px;
  margin-bottom: 20px;
  border: 1px dashed #ebeef5;