1696 lines
100 KiB
HTML
1696 lines
100 KiB
HTML
{include file="public/head"}
|
||
<link rel="stylesheet" href="/static/css/visa.css">
|
||
<link rel="stylesheet" href="/static/new_date/css/calendar.min.css"/>
|
||
<script src="/static/new_date/js/calendar.min.js"></script>
|
||
<script type="text/javascript" src="/static/js/xm-select.js"></script>
|
||
<script type="text/javascript" src="/static/js/ec.js"></script>
|
||
<script type="text/javascript" src="/static/js/analytics.js"></script>
|
||
<style>
|
||
#confirm .item {
|
||
display: flex;
|
||
align-items: center;
|
||
padding: 5px;
|
||
font-size: 16px;
|
||
}
|
||
|
||
#confirm .item div {
|
||
margin: 0px 10px;
|
||
overflow-wrap: break-word;
|
||
word-break: break-word;
|
||
word-wrap: break-word;
|
||
}
|
||
.confirm-table td {
|
||
padding: 8px 12px !important;
|
||
vertical-align: middle;
|
||
word-break: break-word;
|
||
font-size: 16px;
|
||
}
|
||
|
||
.confirm-table tr:nth-child(even) {
|
||
background-color: #fafafa;
|
||
}
|
||
|
||
.confirm-table td:first-child {
|
||
font-weight: 600;
|
||
color: #333;
|
||
background-color: #f8f8f8;
|
||
width: 40%;
|
||
}
|
||
|
||
.confirm-note {
|
||
color: #e53e3e;
|
||
font-size: 14px;
|
||
margin-top: 12px;
|
||
text-align: center;
|
||
}
|
||
.layui-form-checkbox[lay-skin=primary]>div {
|
||
white-space: normal;
|
||
word-break: break-word;
|
||
word-wrap: break-word;
|
||
}
|
||
|
||
.gender-field {
|
||
clear: both;
|
||
}
|
||
</style>
|
||
<body>
|
||
<div class="zh_content">
|
||
{include file="public/newnav"}
|
||
</div>
|
||
<div class="layui-container contact-page">
|
||
<ol class="m-steps__classic m-steps__classic--progress">
|
||
<li class="current">
|
||
<div class="m-steps-textcontainer">1. {:lang('visa.step1_title')}</div>
|
||
<span></span>
|
||
</li>
|
||
<li>
|
||
<div class="m-steps-textcontainer">2. {:lang('visa.step2_title')}</div>
|
||
<span></span>
|
||
</li>
|
||
<li>
|
||
<div class="m-steps-textcontainer">3. {:lang('visa.step3_title')}</div>
|
||
<span></span>
|
||
</li>
|
||
</ol>
|
||
<div class="u-bg-greylight" style="background: #ffffff">
|
||
<!-- 第一步 -->
|
||
<form class="layui-form" lay-filter="Form1" id="Form1" autocomplete="off">
|
||
<div class="m-form-application-title">
|
||
<h2>{:lang('visa.personal_details_title')}</h2>
|
||
</div>
|
||
<div class="layui-row">
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label" for="passport_number">{:lang('visa.passport_number')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="passport_number" lay-verify="required|chinaPassport"
|
||
placeholder="{:lang('visa.passport_number_placeholder')}"
|
||
class="layui-input">
|
||
<input type="hidden" name="passport_img" value="">
|
||
<!-- 关键：给 file 一个 id，并隐藏 -->
|
||
<input id="passport_file" class="passport-file" type="file" accept="image/*"
|
||
onchange="upload(this,'passport')">
|
||
|
||
<!-- 关键：label 的 for 指向 file 的 id -->
|
||
<label class="passport-upload" for="passport_file" title="拍照/上传有效护照照片">
|
||
<i class="layui-icon layui-icon-camera"></i>
|
||
</label>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label" for="nation">{:lang('visa.nationality')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<select name="nation" lay-verify="required" lay-search>
|
||
<option value="">{:lang('visa.select_nationality_placeholder')}</option>
|
||
{volist name="nation" id="vo"}
|
||
<option value="{$vo['iso3']}" {$vo['iso3']=='CHN' ?'selected' : ''}>{:cookie('think_var')=='zh-cn' ? $vo['name_zh']: $vo['name_en'] }</option>
|
||
{/volist}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.last_name_en')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="last_name" lay-verify="required|english"
|
||
placeholder="{:lang('visa.last_name_placeholder')}"
|
||
class="layui-input">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.first_name_en')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="first_name" lay-verify="required|english"
|
||
placeholder="{:lang('visa.first_name_placeholder')}"
|
||
class="layui-input">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.middle_name')}<span>({:lang('visa.optional')})</span></label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="middle_name"
|
||
placeholder="{:lang('visa.middle_name_placeholder')}"
|
||
class="layui-input" lay-verify="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label" for="birth_date">{:lang('visa.birth_date')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<div class="layui-input-wrap">
|
||
<div class="layui-input-prefix">
|
||
<i class="layui-icon layui-icon-date"></i>
|
||
</div>
|
||
<input type="text" name="birth_date" id="birth_date" lay-verify="required"
|
||
placeholder="{:lang('visa.birth_date_placeholder')}"
|
||
class="layui-input layui-qian" readonly>
|
||
<div class="layui-input-suffix">
|
||
<i class="layui-icon layui-icon-down"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.occupation')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="job"
|
||
placeholder="{:lang('visa.occupation_placeholder')}"
|
||
class="layui-input" lay-verify="required">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label" for="email">{:lang('visa.email_address')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="email"
|
||
placeholder="{:lang('visa.email_placeholder')}"
|
||
class="layui-input" lay-verify="required|email">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label" for="phone">{:lang('visa.phone_number')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<div class="layui-input-group">
|
||
<!-- 前缀 select -->
|
||
<div class="layui-input-group-prepend">
|
||
<select name="phone_prefix" lay-search lay-verify="required">
|
||
<option value="">请选择国家代码</option>
|
||
<option value="1">( 1 ) CANADA</option>
|
||
<option value="1">( 1 ) UNITED STATES</option>
|
||
<option value="1242">( 1242 ) BAHAMAS</option>
|
||
<option value="1246">( 1246 ) BARBADOS</option>
|
||
<option value="1264">( 1264 ) ANGUILLA</option>
|
||
<option value="1268">( 1268 ) ANTIGUA AND BARBUDA</option>
|
||
<option value="1284">( 1284 ) BRITISH VIRGIN ISLANDS</option>
|
||
<option value="1340">( 1340 ) U.S. VIRGIN ISLANDS</option>
|
||
<option value="1345">( 1345 ) CAYMAN ISLANDS</option>
|
||
<option value="1441">( 1441 ) BERMUDA</option>
|
||
<option value="1473">( 1473 ) GRENADA</option>
|
||
<option value="1649">( 1649 ) TURKS AND CAICOS ISLANDS</option>
|
||
<option value="1664">( 1664 ) MONTSERRAT</option>
|
||
<option value="1670">( 1670 ) NORTHERN MARIANA ISLANDS</option>
|
||
<option value="1671">( 1671 ) GUAM</option>
|
||
<option value="1684">( 1684 ) AMERICAN SAMOA</option>
|
||
<option value="1721">( 1721 ) SINT MAARTEN</option>
|
||
<option value="1758">( 1758 ) SAINT LUCIA</option>
|
||
<option value="1767">( 1767 ) DOMINICA</option>
|
||
<option value="1784">( 1784 ) SAINT VINCENT AND THE GRENADINES</option>
|
||
<option value="1787">( 1787 ) PUERTO RICO</option>
|
||
<option value="1809">( 1809 ) DOMINICAN REPUBLIC</option>
|
||
<option value="1829">( 1829 ) DOMINICAN REPUBLIC</option>
|
||
<option value="1849">( 1849 ) DOMINICAN REPUBLIC</option>
|
||
<option value="1868">( 1868 ) TRINIDAD AND TOBAGO</option>
|
||
<option value="1869">( 1869 ) SAINT KITTS AND NEVIS</option>
|
||
<option value="1876">( 1876 ) JAMAICA</option>
|
||
<option value="1939">( 1939 ) PUERTO RICO</option>
|
||
<option value="20">( 20 ) EGYPT</option>
|
||
<option value="211">( 211 ) SOUTH SUDAN</option>
|
||
<option value="212">( 212 ) WESTERN SAHARA</option>
|
||
<option value="212">( 212 ) MOROCCO</option>
|
||
<option value="213">( 213 ) ALGERIA</option>
|
||
<option value="216">( 216 ) TUNISIA</option>
|
||
<option value="218">( 218 ) LIBYA</option>
|
||
<option value="220">( 220 ) GAMBIA</option>
|
||
<option value="221">( 221 ) SENEGAL</option>
|
||
<option value="222">( 222 ) MAURITANIA</option>
|
||
<option value="223">( 223 ) MALI</option>
|
||
<option value="224">( 224 ) GUINEA</option>
|
||
<option value="225">( 225 ) IVORY COAST</option>
|
||
<option value="226">( 226 ) BURKINA FASO</option>
|
||
<option value="227">( 227 ) NIGER</option>
|
||
<option value="228">( 228 ) TOGO</option>
|
||
<option value="229">( 229 ) BENIN</option>
|
||
<option value="230">( 230 ) MAURITIUS</option>
|
||
<option value="231">( 231 ) LIBERIA</option>
|
||
<option value="232">( 232 ) SIERRA LEONE</option>
|
||
<option value="233">( 233 ) GHANA</option>
|
||
<option value="234">( 234 ) NIGERIA</option>
|
||
<option value="235">( 235 ) CHAD</option>
|
||
<option value="236">( 236 ) CENTRAL AFRICAN REPUBLIC</option>
|
||
<option value="237">( 237 ) CAMEROON</option>
|
||
<option value="238">( 238 ) CAPE VERDE</option>
|
||
<option value="239">( 239 ) SAO TOME AND PRINCIPE</option>
|
||
<option value="240">( 240 ) EQUATORIAL GUINEA</option>
|
||
<option value="241">( 241 ) GABON</option>
|
||
<option value="242">( 242 ) REPUBLIC OF THE CONGO</option>
|
||
<option value="243">( 243 ) DEMOCRATIC REPUBLIC OF THE CONGO</option>
|
||
<option value="244">( 244 ) ANGOLA</option>
|
||
<option value="245">( 245 ) GUINEABISSAU</option>
|
||
<option value="246">( 246 ) BRITISH INDIAN OCEAN TERRITORY</option>
|
||
<option value="248">( 248 ) SEYCHELLES</option>
|
||
<option value="249">( 249 ) SUDAN</option>
|
||
<option value="250">( 250 ) RWANDA</option>
|
||
<option value="251">( 251 ) ETHIOPIA</option>
|
||
<option value="252">( 252 ) SOMALIA</option>
|
||
<option value="253">( 253 ) DJIBOUTI</option>
|
||
<option value="254">( 254 ) KENYA</option>
|
||
<option value="255">( 255 ) TANZANIA</option>
|
||
<option value="256">( 256 ) UGANDA</option>
|
||
<option value="257">( 257 ) BURUNDI</option>
|
||
<option value="258">( 258 ) MOZAMBIQUE</option>
|
||
<option value="260">( 260 ) ZAMBIA</option>
|
||
<option value="261">( 261 ) MADAGASCAR</option>
|
||
<option value="262">( 262 ) MAYOTTE</option>
|
||
<option value="262">( 262 ) REUNION</option>
|
||
<option value="263">( 263 ) ZIMBABWE</option>
|
||
<option value="264">( 264 ) NAMIBIA</option>
|
||
<option value="265">( 265 ) MALAWI</option>
|
||
<option value="266">( 266 ) LESOTHO</option>
|
||
<option value="267">( 267 ) BOTSWANA</option>
|
||
<option value="268">( 268 ) SWAZILAND</option>
|
||
<option value="269">( 269 ) COMOROS</option>
|
||
<option value="27">( 27 ) SOUTH AFRICA</option>
|
||
<option value="290">( 290 ) SAINT HELENA</option>
|
||
<option value="291">( 291 ) ERITREA</option>
|
||
<option value="297">( 297 ) ARUBA</option>
|
||
<option value="298">( 298 ) FAROE ISLANDS</option>
|
||
<option value="299">( 299 ) GREENLAND</option>
|
||
<option value="30">( 30 ) GREECE</option>
|
||
<option value="31">( 31 ) NETHERLANDS</option>
|
||
<option value="32">( 32 ) BELGIUM</option>
|
||
<option value="33">( 33 ) FRANCE</option>
|
||
<option value="34">( 34 ) SPAIN</option>
|
||
<option value="350">( 350 ) GIBRALTAR</option>
|
||
<option value="351">( 351 ) PORTUGAL</option>
|
||
<option value="352">( 352 ) LUXEMBOURG</option>
|
||
<option value="353">( 353 ) IRELAND</option>
|
||
<option value="354">( 354 ) ICELAND</option>
|
||
<option value="355">( 355 ) ALBANIA</option>
|
||
<option value="356">( 356 ) MALTA</option>
|
||
<option value="357">( 357 ) CYPRUS</option>
|
||
<option value="358">( 358 ) FINLAND</option>
|
||
<option value="359">( 359 ) BULGARIA</option>
|
||
<option value="36">( 36 ) HUNGARY</option>
|
||
<option value="370">( 370 ) LITHUANIA</option>
|
||
<option value="371">( 371 ) LATVIA</option>
|
||
<option value="372">( 372 ) ESTONIA</option>
|
||
<option value="373">( 373 ) MOLDOVA</option>
|
||
<option value="374">( 374 ) ARMENIA</option>
|
||
<option value="375">( 375 ) BELARUS</option>
|
||
<option value="376">( 376 ) ANDORRA</option>
|
||
<option value="377">( 377 ) MONACO</option>
|
||
<option value="378">( 378 ) SAN MARINO</option>
|
||
<option value="379">( 379 ) VATICAN</option>
|
||
<option value="380">( 380 ) UKRAINE</option>
|
||
<option value="381">( 381 ) SERBIA</option>
|
||
<option value="382">( 382 ) MONTENEGRO</option>
|
||
<option value="383">( 383 ) KOSOVO</option>
|
||
<option value="385">( 385 ) CROATIA</option>
|
||
<option value="386">( 386 ) SLOVENIA</option>
|
||
<option value="387">( 387 ) BOSNIA AND HERZEGOVINA</option>
|
||
<option value="389">( 389 ) MACEDONIA</option>
|
||
<option value="39">( 39 ) ITALY</option>
|
||
<option value="40">( 40 ) ROMANIA</option>
|
||
<option value="41">( 41 ) SWITZERLAND</option>
|
||
<option value="420">( 420 ) CZECH REPUBLIC</option>
|
||
<option value="421">( 421 ) SLOVAKIA</option>
|
||
<option value="423">( 423 ) LIECHTENSTEIN</option>
|
||
<option value="43">( 43 ) AUSTRIA</option>
|
||
<option value="44">( 44 ) UNITED KINGDOM</option>
|
||
<option value="441481">( 441481 ) GUERNSEY</option>
|
||
<option value="441534">( 441534 ) JERSEY</option>
|
||
<option value="441624">( 441624 ) ISLE OF MAN</option>
|
||
<option value="45">( 45 ) DENMARK</option>
|
||
<option value="46">( 46 ) SWEDEN</option>
|
||
<option value="47">( 47 ) NORWAY</option>
|
||
<option value="47">( 47 ) SVALBARD AND JAN MAYEN</option>
|
||
<option value="48">( 48 ) POLAND</option>
|
||
<option value="49">( 49 ) GERMANY</option>
|
||
<option value="500">( 500 ) FALKLAND ISLANDS</option>
|
||
<option value="501">( 501 ) BELIZE</option>
|
||
<option value="502">( 502 ) GUATEMALA</option>
|
||
<option value="503">( 503 ) EL SALVADOR</option>
|
||
<option value="504">( 504 ) HONDURAS</option>
|
||
<option value="505">( 505 ) NICARAGUA</option>
|
||
<option value="506">( 506 ) COSTA RICA</option>
|
||
<option value="507">( 507 ) PANAMA</option>
|
||
<option value="508">( 508 ) SAINT PIERRE AND MIQUELON</option>
|
||
<option value="509">( 509 ) HAITI</option>
|
||
<option value="51">( 51 ) PERU</option>
|
||
<option value="52">( 52 ) MEXICO</option>
|
||
<option value="53">( 53 ) CUBA</option>
|
||
<option value="54">( 54 ) ARGENTINA</option>
|
||
<option value="55">( 55 ) BRAZIL</option>
|
||
<option value="56">( 56 ) CHILE</option>
|
||
<option value="57">( 57 ) COLOMBIA</option>
|
||
<option value="58">( 58 ) VENEZUELA</option>
|
||
<option value="590">( 590 ) SAINT BARTHELEMY</option>
|
||
<option value="590">( 590 ) SAINT MARTIN</option>
|
||
<option value="591">( 591 ) BOLIVIA</option>
|
||
<option value="592">( 592 ) GUYANA</option>
|
||
<option value="593">( 593 ) ECUADOR</option>
|
||
<option value="595">( 595 ) PARAGUAY</option>
|
||
<option value="597">( 597 ) SURINAME</option>
|
||
<option value="598">( 598 ) URUGUAY</option>
|
||
<option value="599">( 599 ) NETHERLANDS ANTILLES</option>
|
||
<option value="599">( 599 ) CURACAO</option>
|
||
<option value="60">( 60 ) MALAYSIA</option>
|
||
<option value="61">( 61 ) AUSTRALIA</option>
|
||
<option value="61">( 61 ) COCOS ISLANDS</option>
|
||
<option value="61">( 61 ) CHRISTMAS ISLAND</option>
|
||
<option value="62">( 62 ) INDONESIA</option>
|
||
<option value="63">( 63 ) PHILIPPINES</option>
|
||
<option value="64">( 64 ) NEW ZEALAND</option>
|
||
<option value="64">( 64 ) PITCAIRN</option>
|
||
<option value="65">( 65 ) SINGAPORE</option>
|
||
<option value="66">( 66 ) THAILAND</option>
|
||
<option value="670">( 670 ) EAST TIMOR</option>
|
||
<option value="672">( 672 ) ANTARCTICA</option>
|
||
<option value="673">( 673 ) BRUNEI</option>
|
||
<option value="674">( 674 ) NAURU</option>
|
||
<option value="675">( 675 ) PAPUA NEW GUINEA</option>
|
||
<option value="676">( 676 ) TONGA</option>
|
||
<option value="677">( 677 ) SOLOMON ISLANDS</option>
|
||
<option value="678">( 678 ) VANUATU</option>
|
||
<option value="679">( 679 ) FIJI</option>
|
||
<option value="680">( 680 ) PALAU</option>
|
||
<option value="681">( 681 ) WALLIS AND FUTUNA</option>
|
||
<option value="682">( 682 ) COOK ISLANDS</option>
|
||
<option value="683">( 683 ) NIUE</option>
|
||
<option value="685">( 685 ) SAMOA</option>
|
||
<option value="686">( 686 ) KIRIBATI</option>
|
||
<option value="687">( 687 ) NEW CALEDONIA</option>
|
||
<option value="688">( 688 ) TUVALU</option>
|
||
<option value="689">( 689 ) FRENCH POLYNESIA</option>
|
||
<option value="690">( 690 ) TOKELAU</option>
|
||
<option value="691">( 691 ) MICRONESIA</option>
|
||
<option value="692">( 692 ) MARSHALL ISLANDS</option>
|
||
<option value="7">( 7 ) KAZAKHSTAN</option>
|
||
<option value="7">( 7 ) RUSSIA</option>
|
||
<option value="81">( 81 ) JAPAN</option>
|
||
<option value="82">( 82 ) SOUTH KOREA</option>
|
||
<option value="84">( 84 ) VIETNAM</option>
|
||
<option value="850">( 850 ) NORTH KOREA</option>
|
||
<option value="852">( 852 ) HONG KONG</option>
|
||
<option value="853">( 853 ) MACAU</option>
|
||
<option value="855">( 855 ) CAMBODIA</option>
|
||
<option value="856">( 856 ) LAOS</option>
|
||
<option value="86" selected>( 86 ) CHINA</option>
|
||
<option value="880">( 880 ) BANGLADESH</option>
|
||
<option value="886">( 886 ) TAIWAN</option>
|
||
<option value="90">( 90 ) TURKEY</option>
|
||
<option value="91">( 91 ) INDIA</option>
|
||
<option value="92">( 92 ) PAKISTAN</option>
|
||
<option value="93">( 93 ) AFGHANISTAN</option>
|
||
<option value="94">( 94 ) SRI LANKA</option>
|
||
<option value="95">( 95 ) MYANMAR</option>
|
||
<option value="960">( 960 ) MALDIVES</option>
|
||
<option value="961">( 961 ) LEBANON</option>
|
||
<option value="962">( 962 ) JORDAN</option>
|
||
<option value="963">( 963 ) SYRIA</option>
|
||
<option value="964">( 964 ) IRAQ</option>
|
||
<option value="965">( 965 ) KUWAIT</option>
|
||
<option value="966">( 966 ) SAUDI ARABIA</option>
|
||
<option value="967">( 967 ) YEMEN</option>
|
||
<option value="968">( 968 ) OMAN</option>
|
||
<option value="970">( 970 ) PALESTINE</option>
|
||
<option value="971">( 971 ) UNITED ARAB EMIRATES</option>
|
||
<option value="972">( 972 ) ISRAEL</option>
|
||
<option value="973">( 973 ) BAHRAIN</option>
|
||
<option value="974">( 974 ) QATAR</option>
|
||
<option value="975">( 975 ) BHUTAN</option>
|
||
<option value="976">( 976 ) MONGOLIA</option>
|
||
<option value="977">( 977 ) NEPAL</option>
|
||
<option value="98">( 98 ) IRAN</option>
|
||
<option value="992">( 992 ) TAJIKISTAN</option>
|
||
<option value="993">( 993 ) TURKMENISTAN</option>
|
||
<option value="994">( 994 ) AZERBAIJAN</option>
|
||
<option value="995">( 995 ) GEORGIA</option>
|
||
<option value="996">( 996 ) KYRGYZSTAN</option>
|
||
<option value="998">( 998 ) UZBEKISTAN</option>
|
||
</select>
|
||
</div>
|
||
<input type="text" name="phone"
|
||
placeholder="{:lang('visa.phone_number_placeholder')}"
|
||
class="layui-input" lay-verify="required|number">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.residence_country')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<select name="live_country" lay-verify="required" lay-search>
|
||
<option value="">{:lang('visa.select_residence_country_placeholder')}</option>
|
||
{volist name="travel_country" id="vo"}
|
||
<option value="{$vo['value']}">{$vo['name']}</option>
|
||
{/volist}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.residence_city')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<input type="text" id="live_city" name="live_city" placeholder="{:lang('visa.residence_city_placeholder')}"
|
||
class="layui-input" lay-verify="required|english"/>
|
||
<ul id="suggestions" class="sug_class"></ul>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.visa_number')}<span>({:lang('visa.optional')})</span></label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="visa_number"
|
||
placeholder="{:lang('visa.visa_number_placeholder')}"
|
||
class="layui-input">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6 gender-field">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label" for="gender">{:lang('visa.gender')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<input type="radio" name="gender" value="1" title="{:lang('visa.male')}" lay-verify="otherReq"/>
|
||
<input type="radio" name="gender" value="2" title="{:lang('visa.female')}" lay-verify="otherReq"/>
|
||
<input type="radio" name="gender" value="3" title="{:lang('visa.unknown')}" lay-verify="otherReq"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-row text-center">
|
||
<div class="layui-col-xs12">
|
||
<div class="layui-form-item">
|
||
<button class="layui-btn btn-next" lay-submit>{:lang('visa.next_step')}</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
<!-- 第二步 -->
|
||
<form class="layui-form" lay-filter="Form2" id="Form2" autocomplete="off">
|
||
<div class="m-form-application-title">
|
||
<h2>{:lang('visa.travel_information_title')}</h2>
|
||
</div>
|
||
<div class="layui-row">
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.arrival_date')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<div class="layui-input-wrap">
|
||
<div class="layui-input-prefix">
|
||
<i class="layui-icon layui-icon-date"></i>
|
||
</div>
|
||
<input type="text" name="arrive_date" id="arrive_date" lay-verify="required"
|
||
placeholder="{:lang('visa.arrival_date_placeholder')}"
|
||
class="layui-input layui-arrive" readonly>
|
||
<div class="layui-input-suffix">
|
||
<i class="layui-icon layui-icon-down"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.departure_date')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<div class="layui-input-wrap">
|
||
<div class="layui-input-prefix">
|
||
<i class="layui-icon layui-icon-date"></i>
|
||
</div>
|
||
<input type="text" name="leave_date" id="leave_date" lay-verify="required"
|
||
placeholder="{:lang('visa.departure_date_placeholder')}"
|
||
class="layui-input layui-leave" readonly>
|
||
<div class="layui-input-suffix">
|
||
<i class="layui-icon layui-icon-down"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.departure_country')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<select name="travel_country" lay-verify="required" lay-search>
|
||
<option value="">{:lang('visa.select_departure_country_placeholder')}</option>
|
||
{volist name="travel_country" id="vo"}
|
||
<option value="{$vo['value']}">{$vo['name']}</option>
|
||
{/volist}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.travel_purpose')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<select name="travel_purpose" lay-verify="required" lay-filter="travel_purpose_filter">
|
||
<option value="">{:lang('visa.select_travel_purpose_placeholder')}</option>
|
||
<option value="HOLIDAY">{:lang('visa.holiday')}</option>
|
||
<option value="MEETING">{:lang('visa.meeting')}</option>
|
||
<option value="SPORTS">{:lang('visa.sports')}</option>
|
||
<option value="BUSINESS">{:lang('visa.business')}</option>
|
||
<option value="INCENTIVE">{:lang('visa.incentive')}</option>
|
||
<option value="MEDICAL">{:lang('visa.medical')}</option>
|
||
<option value="EDUCATION">{:lang('visa.education')}</option>
|
||
<option value="CONVENTION">{:lang('visa.convention')}</option>
|
||
<option value="EMPLOYMENT">{:lang('visa.employment')}</option>
|
||
<option value="EXHIBITION">{:lang('visa.exhibition')}</option>
|
||
<option value="OTHERS">{:lang('visa.other_purpose')}</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6" style="display: none" id="others_purpose">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.other_purpose_specify')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="others_purpose"
|
||
placeholder="{:lang('visa.other_purpose_placeholder')}"
|
||
class="layui-input layui-required">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.entry_transport')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<input type="radio" name="travel_type" alt="travel_type_1" lay-verify="otherReq"
|
||
value="1" title="{:lang('visa.air')}">
|
||
<input type="radio" name="travel_type" alt="travel_type_2" lay-verify="otherReq"
|
||
value="2" title="{:lang('visa.land')}">
|
||
<input type="radio" name="travel_type" alt="travel_type_3" lay-verify="otherReq"
|
||
value="3" title="{:lang('visa.sea')}">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.transport_number')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="travel_number" lay-verify="required|engnum"
|
||
placeholder="{:lang('visa.transport_number_placeholder')}"
|
||
class="layui-input">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6 data-name-travel_type data-travel_type_1">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.transport_mode')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<select name="fly_travel_way" class="layui-required" lay-filter="travel_way_filter">
|
||
<option value="">{:lang('visa.select_transport_mode')}</option>
|
||
<option value="COMMERCIAL">{:lang('visa.commercial_flight')}</option>
|
||
<option value="PRIVATE/CARGO">{:lang('visa.private_flight')}</option>
|
||
<option value="OTHERS">{:lang('visa.other_transport')}</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6 data-name-travel_type data-travel_type_2">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.transport_mode')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<select name="land_travel_way" class="layui-required" lay-filter="travel_way_filter">
|
||
<option value="">{:lang('visa.select_transport_mode')}</option>
|
||
<option value="CAR">{:lang('visa.car')}</option>
|
||
<option value="TRAIN">{:lang('visa.train')}</option>
|
||
<option value="OTHERS">{:lang('visa.other_transport')}</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6 data-name-travel_type data-travel_type_3">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.transport_mode')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<select name="sea_travel_way" class="layui-required" lay-filter="travel_way_filter">
|
||
<option value="">{:lang('visa.select_transport_mode')}</option>
|
||
<option value="CRUISE">{:lang('visa.cruise')}</option>
|
||
<option value="VESSEL">{:lang('visa.commercial_vessel')}</option>
|
||
<option value="OTHERS">{:lang('visa.other_transport')}</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6" style="display:none;" id="travel_way_others">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.other_transport_specify')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="travel_way_others"
|
||
placeholder="{:lang('visa.other_transport_placeholder')}"
|
||
class="layui-input layui-required">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-row">
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.departure_transport')}</label>
|
||
<div class="layui-input-block">
|
||
<input type="radio" name="out_travel_type" alt="out_travel_type_1"
|
||
value="1" title="{:lang('visa.air')}">
|
||
<input type="radio" name="out_travel_type" alt="out_travel_type_2"
|
||
value="2" title="{:lang('visa.land')}">
|
||
<input type="radio" name="out_travel_type" alt="out_travel_type_3"
|
||
value="3" title="{:lang('visa.sea')}">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.departure_transport_number')}</label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="out_travel_number" lay-verify=""
|
||
placeholder="{:lang('visa.departure_transport_placeholder')}"
|
||
class="layui-input">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6 data-name-out_travel_type data-out_travel_type_1">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.out_transport_mode')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<select name="out_fly_travel_way" class="layui-required"
|
||
lay-filter="out_travel_way_filter">
|
||
<option value="">{:lang('visa.select_transport_mode')}</option>
|
||
<option value="COMMERCIAL">{:lang('visa.commercial_flight')}</option>
|
||
<option value="PRIVATE/CARGO">{:lang('visa.private_flight')}</option>
|
||
<option value="OTHERS">{:lang('visa.other_transport')}</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6 data-name-out_travel_type data-out_travel_type_2">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.out_transport_mode')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<select name="out_land_travel_way" class="layui-required"
|
||
lay-filter="out_travel_way_filter">
|
||
<option value="">{:lang('visa.select_transport_mode')}</option>
|
||
<option value="CAR">{:lang('visa.car')}</option>
|
||
<option value="TRAIN">{:lang('visa.train')}</option>
|
||
<option value="OTHERS">{:lang('visa.other_transport')}</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6 data-name-out_travel_type data-out_travel_type_3">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.out_transport_mode')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<select name="out_sea_travel_way" class="layui-required"
|
||
lay-filter="out_travel_way_filter">
|
||
<option value="">{:lang('visa.select_transport_mode')}</option>
|
||
<option value="CRUISE">{:lang('visa.cruise')}</option>
|
||
<option value="VESSEL">{:lang('visa.commercial_vessel')}</option>
|
||
<option value="OTHERS">{:lang('visa.other_transport')}</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6" style="display: none" id="out_travel_way_others">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.other_transport_specify')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="out_travel_way_others"
|
||
placeholder="{:lang('visa.other_transport_placeholder')}"
|
||
class="layui-input layui-required">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md12" id="is_transit">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.is_transit_passenger')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<input type="radio" name="is_transit" alt="is_transit_1" lay-verify="otherReq" value="1"
|
||
title="{:lang('visa.yes')}">
|
||
<input type="radio" name="is_transit" alt="is_transit_2" lay-verify="otherReq" value="0"
|
||
title="{:lang('visa.no')}">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-row data-name-is_transit data-is_transit_2">
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.accommodation_type')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<select name="accommodation_type" class="layui-required"
|
||
lay-filter="accommodation_type_filter">
|
||
<option value="">{:lang('visa.select_accommodation_type')}</option>
|
||
<option value="HOTEL">{:lang('visa.hotel')}</option>
|
||
<option value="YOUTH">{:lang('visa.youth_hostel')}</option>
|
||
<option value="GUEST">{:lang('visa.guest_house')}</option>
|
||
<option value="FRIEND">{:lang('visa.friends_place')}</option>
|
||
<option value="APARTMENT">{:lang('visa.apartment')}</option>
|
||
<option value="OTHERS">{:lang('visa.other_accommodation')}</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6" style="display: none" id="out_accommodation_type">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.other_accommodation_specify')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="out_accommodation_type"
|
||
placeholder="{:lang('visa.other_accommodation_placeholder')}"
|
||
class="layui-input layui-required layui-except">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.province')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<select name="hotel_state" lay-search lay-filter="hotel_state_select"
|
||
class="layui-required">
|
||
<option value="">{:lang('visa.select_province')}</option>
|
||
{volist name="th_province" id="vo"}
|
||
<option value="{$vo['provinceNameEn']}" data-key="{$vo['provinceCode']}">
|
||
{$vo['provinceNameEn']}
|
||
</option>
|
||
{/volist}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.city')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<select name="hotel_city" lay-search id="hotel_city" class="layui-required"
|
||
lay-filter="hotel_city_select">
|
||
<option value="">{:lang('visa.select_city')}</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.district')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<select name="hotel_district" lay-search id="hotel_district" class="layui-required">
|
||
<option value="">{:lang('visa.select_district')}</option>
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.address')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="hotel_address"
|
||
placeholder="{:lang('visa.address_placeholder')}"
|
||
class="layui-input layui-required">
|
||
<input type="hidden" name="hotel_zip_code" id="hotel_zip_code" value="">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-row">
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.visited_countries')}</label>
|
||
<div class="layui-input-block">
|
||
<div id="visit_country" class="xm-select-visit_country"></div>
|
||
<input type="hidden" name="visit_info" />
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.yellow_fever')}</label>
|
||
<div class="layui-input-block">
|
||
<input type="radio" name="yellow_fever" alt="yellow_fever_1" value="1"
|
||
title="{:lang('visa.yes')}">
|
||
<input type="radio" name="yellow_fever" alt="yellow_fever_2" value="0"
|
||
title="{:lang('visa.no')}" checked>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6 data-name-yellow_fever data-yellow_fever_1">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.yellow_fever_time')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<div class="layui-input-wrap">
|
||
<div class="layui-input-prefix">
|
||
<i class="layui-icon layui-icon-date"></i>
|
||
</div>
|
||
<input type="text" name="yellow_fever_time"
|
||
placeholder="{:lang('visa.yellow_fever_time')}"
|
||
class="layui-input layui-qian layui-required" readonly>
|
||
<div class="layui-input-suffix">
|
||
<i class="layui-icon layui-icon-down"></i>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-row text-center">
|
||
<div class="layui-col-xs12">
|
||
<div class="layui-form-item">
|
||
<button class="layui-btn btn-next flag" lay-submit>{:lang('visa.next_step')}</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
<!-- 提交表单 -->
|
||
<form class="layui-form" lay-filter="Form3" id="Form3" action="" autocomplete="off">
|
||
<div class="m-form-application-title">
|
||
<h2>{:lang('visa.applicant_declaration_title')}</h2>
|
||
</div>
|
||
<div class="layui-row">
|
||
<div class="layui-col-xs12 layui-col-md12">
|
||
<div class="layui-form-item">
|
||
<div class="layui-input-block">
|
||
<input type="checkbox" name="check1" checked lay-verify="required|checkboxRequired"
|
||
title="{:lang('visa.declaration_statement')}" value="1">
|
||
<input type="checkbox" lay-filter="termsCheckbox" name="check2"
|
||
title="{:lang('visa.terms_acceptance')}" value="1" checked
|
||
lay-verify="required|checkboxRequired">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="m-form-application-title" style="background: none;color: #000;">
|
||
<h2 style="font-size: 16px">{:lang('visa.select_package_title')}</h2>
|
||
</div>
|
||
<div class="layui-row">
|
||
<div class="layui-col-xs12 layui-col-md12">
|
||
<div class="layui-form-item">
|
||
{volist name="goods" id="vo" key="k"}
|
||
<div class="layui-input-block">
|
||
<input type="radio" name="total_price" value="{$vo.value}" title="{$vo.desc}"
|
||
{if condition="$vo.is_checked eq 1" }
|
||
checked="checked" {/if} />
|
||
</div>
|
||
{/volist}
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<!-- <div class="m-form-application-title" style="background: none;color: #000;">-->
|
||
<!-- <h2 style="font-size: 16px">{:lang('visa.select_payment_method')}</h2>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="layui-row">-->
|
||
<!-- <div class="layui-col-xs12 layui-col-md12">-->
|
||
<!-- <div class="layui-form-item">-->
|
||
<!-- <div class="layui-input-block">-->
|
||
<!-- <input type="radio" name="pay_type" value="1"-->
|
||
<!-- title="{:lang('visa.wechat_pay')}" checked>-->
|
||
<!-- <input type="radio" name="pay_type" value="3" title="{:lang('visa.card')}">-->
|
||
<!--<!– <input type="radio" name="pay_type" value="2" title="{:lang('visa.alipay')}">–>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<div class="layui-row text-center">
|
||
<div class="layui-col-xs12">
|
||
<div class="layui-form-item">
|
||
<button class="layui-btn" lay-submit lay-filter="formSubmit" id="submit">{:lang('visa.submit_application_button')}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</form>
|
||
</div>
|
||
</div>
|
||
|
||
<div id="confirm" style="display: none">
|
||
<table class="layui-table confirm-table">
|
||
<colgroup>
|
||
<col width="40%">
|
||
<col width="60%">
|
||
</colgroup>
|
||
<tbody>
|
||
<tr>
|
||
<td>{:lang('visa.confirm_name')}:</td>
|
||
<td id="last_name_con"></td>
|
||
</tr>
|
||
<tr>
|
||
<td>{:lang('visa.birth_date')}:</td>
|
||
<td id="birth_date_con"></td>
|
||
</tr>
|
||
<tr>
|
||
<td>{:lang('visa.passport_number')}:</td>
|
||
<td id="passport_number_con"></td>
|
||
</tr>
|
||
<tr>
|
||
<td>{:lang('visa.arrival_date')}:</td>
|
||
<td id="arrive_date_con"></td>
|
||
</tr>
|
||
<tr>
|
||
<td>{:lang('visa.departure_date')}:</td>
|
||
<td id="leave_date_con"></td>
|
||
</tr>
|
||
<tr>
|
||
<td>{:lang('visa.email_address')}:</td>
|
||
<td id="email_con"></td>
|
||
</tr>
|
||
</tbody>
|
||
</table>
|
||
<div class="confirm-note">{:lang('visa.verify')}</div>
|
||
</div>
|
||
{include file="public/newfooter"}
|
||
<script>
|
||
var layer = layui.layer, form = layui.form, upload = layui.upload, laydate = layui.laydate
|
||
var ocrConfigRaw = '{$ocr_config|default = ''}'.replace(/"/g, '"');
|
||
var ocrConfig = {};
|
||
var sdk = null;
|
||
try {
|
||
ocrConfig = ocrConfigRaw ? JSON.parse(ocrConfigRaw) : {};
|
||
} catch (e) {
|
||
console.error('Failed to parse OCR config', e);
|
||
}
|
||
if (window.PassportOCRSDK && ocrConfig.base_url && ocrConfig.app_id && ocrConfig.signature && ocrConfig.timestamp) {
|
||
try {
|
||
sdk = PassportOCRSDK.create({
|
||
apiBase: ocrConfig.base_url,
|
||
appId: ocrConfig.app_id,
|
||
sign: ocrConfig
|
||
});
|
||
} catch (e) {
|
||
console.error('Failed to init OCR sdk', e);
|
||
}
|
||
}
|
||
initFormFields()
|
||
function initFormFields() {
|
||
$('.layui-form-item').each(function() {
|
||
const labelText = $(this).find('.layui-form-label').text().replace('*', '').trim();
|
||
|
||
// 查找所有需要必填提示的表单元素
|
||
$(this).find('.layui-input-block input, ' +
|
||
'.layui-input-block select, ' +
|
||
'.layui-input-block textarea')
|
||
.each(function() {
|
||
var $field = $(this);
|
||
// 如果已有提示则跳过（保留自定义提示）
|
||
if (!$field.attr('lay-reqtext')) {
|
||
if($field.attr('type') !== 'hidden'){
|
||
$field.attr('lay-verType', 'tips');
|
||
}
|
||
// 设置统一的必填提示
|
||
$field.attr('lay-reqtext', labelText + '{:lang("js.field_required")}');
|
||
}
|
||
});
|
||
});
|
||
// 重新渲染表单
|
||
form.render();
|
||
}
|
||
//遍历日期选择
|
||
$(".layui-form-item").find(".layui-time").each(function () {
|
||
xvDate({
|
||
target: this,
|
||
});
|
||
});
|
||
$(".layui-form-item").find(".layui-qian").each(function () {
|
||
xvDate({
|
||
target: this,
|
||
max: new Date().toISOString().split('T')[0]
|
||
});
|
||
});
|
||
$(".layui-form-item").find(".layui-year").each(function () {
|
||
laydate.render({
|
||
elem: this, type: 'year'
|
||
});
|
||
});
|
||
$(".layui-form-item").find(".layui-arrive").each(function () {
|
||
xvDate({
|
||
target: this,
|
||
min: new Date().toISOString().split('T')[0],
|
||
done: function(value, date, endDate){
|
||
const isdate = isWithinThreeDays(value)
|
||
if (!isdate){
|
||
layer.alert('{:lang("js.alert_message")}', {
|
||
icon: 0,
|
||
shadeClose: true,
|
||
title: '{:lang("js.notice")}'
|
||
});
|
||
}
|
||
validateDates();
|
||
}
|
||
});
|
||
});
|
||
$(".layui-form-item").find(".layui-leave").each(function () {
|
||
xvDate({
|
||
target: this,
|
||
min: new Date().toISOString().split('T')[0],
|
||
done: function (value, date, endDate) {
|
||
validateDates();
|
||
}
|
||
});
|
||
});
|
||
|
||
// 验证函数
|
||
function validateDates() {
|
||
var date1 = $('#arrive_date').val();
|
||
var date2 = $('#leave_date').val();
|
||
|
||
if (date1 && date2) {
|
||
var d1 = new Date(date1);
|
||
var d2 = new Date(date2);
|
||
|
||
if (d1 > d2) {
|
||
layer.tips('{:lang("js.departure_date_error")}', '#leave_date');
|
||
$('#leave_date').val('')
|
||
return false;
|
||
}
|
||
var timeDiff = Math.abs(d2 - d1); // 使用 Math.abs() 确保正数
|
||
var daysDiff = Math.floor(timeDiff / (1000 * 60 * 60 * 24));
|
||
$('input[name="is_transit"]').prop('disabled', false);
|
||
setTimeout(function() {
|
||
if (daysDiff === 0) {
|
||
$('input[name="is_transit"][value="1"]').next().click();
|
||
$('input[name="is_transit"]').prop('disabled', true);
|
||
} else if(daysDiff === 1){
|
||
$('input[name="is_transit"][value="1"]').next().click();
|
||
$('input[name="is_transit"]').prop('disabled', false);
|
||
} else {
|
||
$('input[name="is_transit"][value="0"]').next().click();
|
||
$('input[name="is_transit"]').prop('disabled', true);
|
||
}
|
||
form.render('radio'); // 单独渲染radio
|
||
}, 100);
|
||
form.render('radio'); // 单独渲染radio
|
||
return true;
|
||
}
|
||
}
|
||
|
||
function isWithinThreeDays(dateString) {
|
||
const targetDate = new Date(dateString);
|
||
const currentDate = new Date();
|
||
const threeDaysInMillis = 3 * 24 * 60 * 60 * 1000;
|
||
|
||
// 将时间部分设置为0，以便只比较日期部分
|
||
targetDate.setHours(0, 0, 0, 0);
|
||
currentDate.setHours(0, 0, 0, 0);
|
||
|
||
return targetDate - currentDate <= threeDaysInMillis;
|
||
}
|
||
|
||
//是否选择 默认显示或隐藏
|
||
$("input[type='radio']").each(function () {
|
||
var name = $(this).attr("name");
|
||
var alt = $(this).attr("alt");
|
||
if ($(this).is(":checked")) {
|
||
$(".data-" + alt).show();
|
||
} else {
|
||
$(".data-" + alt).hide();
|
||
}
|
||
})
|
||
//是否radio 必填判断
|
||
form.on("radio", function (data) {
|
||
var name = data.elem.name;
|
||
var type = data.elem.alt;
|
||
$(".data-name-" + name).hide();
|
||
$(".data-" + type).show();
|
||
$(".data-name-" + name).each(function () {
|
||
var that = $(this).find(".layui-required");
|
||
var verify = that.attr("lay-verify");
|
||
if (verify === undefined || verify === null) {
|
||
verify = "";
|
||
}
|
||
var disAble = that.attr("disabled");
|
||
if ($(this).hasClass("data-" + type)) {
|
||
if (disAble === "disabled") {
|
||
|
||
} else if (verify.indexOf("required") >= 0) {
|
||
|
||
} else {
|
||
if (!$(this).attr('class').includes('layui-expect')) {
|
||
verify = verify + "|required";
|
||
that.attr("lay-verify", verify);
|
||
}
|
||
}
|
||
} else {
|
||
if (disAble === "disabled") {
|
||
|
||
} else {
|
||
if (verify.includes("required")) {
|
||
verify = verify.slice(0, verify.length - 9);
|
||
}
|
||
that.val('')
|
||
that.attr("lay-verify", verify);
|
||
}
|
||
}
|
||
})
|
||
});
|
||
//下一步
|
||
form.on('submit', function (data) {
|
||
var className = data.elem.className;
|
||
if (className.includes("btn-next")) {
|
||
if (className.includes("flag")) {
|
||
// if ($('input[name="visit_info"]').val() == '') {
|
||
// layer.msg('前两周内入住的国家/地区不可为空', {icon: 5});
|
||
// return false
|
||
// }
|
||
}
|
||
$(this).hide()
|
||
$(this).parents(".layui-form").next(".layui-form").show();
|
||
var h = $(this).parents(".layui-form").next(".layui-form").offset().top - 100;
|
||
$("html,body").animate({
|
||
scrollTop: h
|
||
}, 500);
|
||
}
|
||
return false;
|
||
});
|
||
// 监听复选框点击
|
||
form.on('checkbox(termsCheckbox)', function (data) {
|
||
var area = [];
|
||
if (window.innerWidth <= 768) {
|
||
area = ['90%', '90%']
|
||
} else {
|
||
area = ['50%', '60%']
|
||
}
|
||
if (data.elem.checked) {
|
||
// 弹出条款内容的弹窗
|
||
layer.open({
|
||
type: 1, // 弹窗类型：页面层
|
||
title: '{:lang(\'js.terms_privacy_title\')}', content: `
|
||
<div style="padding: 20px;">
|
||
<h3>{:lang(\'js.terms_conditions\')}</h3>
|
||
<p></p><p><span style="font-size: 12px;">{:str_replace(\'%country%\', $country ?? \'\', lang(\'js.terms_intro\'))}</span></p>
|
||
<p><span style="font-size: 12px;">{:str_replace(\'%country%\', $country ?? \'\', lang(\'js.our_services\'))}</span></p>
|
||
<p><span style="font-size: 12px;">{:str_replace(\'%country%\', $country ?? \'\', lang(\'js.application_process\'))}</span></p>
|
||
<p><span style="font-size: 12px;">{:lang(\'js.read_confirmation\')}</span></p>
|
||
<p><br></p><p></p>
|
||
|
||
<h3>{:lang(\'js.privacy_policy\')}</h3>
|
||
<p></p><p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0px; padding: 0px; border: 0px; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); white-space: normal; background-color: rgb(255, 255, 255);">{:lang(\'js.privacy_intro\')}</p>
|
||
|
||
<h3 style="box-sizing: border-box; margin: 2px 0px; padding: 10px 0px 0px; border: 0px; font-weight: 400; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 18px; line-height: 1.1; color: rgb(0, 48, 73); white-space: normal; background-color: rgb(255, 255, 255);">1. {:lang(\'js.scope\')}</h3>
|
||
<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0px; padding: 0px; border: 0px; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); white-space: normal; background-color: rgb(255, 255, 255);">{:lang(\'js.scope_content\')}</p>
|
||
|
||
<h3 style="box-sizing: border-box; margin: 2px 0px; padding: 10px 0px 0px; border: 0px; font-weight: 400; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 18px; line-height: 1.1; color: rgb(0, 48, 73); white-space: normal; background-color: rgb(255, 255, 255);">2. {:lang(\'js.information_use\')}</h3>
|
||
<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0px; padding: 0px; border: 0px; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); white-space: normal; background-color: rgb(255, 255, 255);">{:lang(\'js.information_use_content\')}</p>
|
||
|
||
<h3 style="box-sizing: border-box; margin: 2px 0px; padding: 10px 0px 0px; border: 0px; font-weight: 400; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 18px; line-height: 1.1; color: rgb(0, 48, 73); white-space: normal; background-color: rgb(255, 255, 255);">3. {:lang(\'js.information_disclosure\')}</h3>
|
||
<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0px; padding: 0px; border: 0px; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); white-space: normal; background-color: rgb(255, 255, 255);">{:lang(\'js.information_disclosure_content\')}</p>
|
||
|
||
<h3 style="box-sizing: border-box; margin: 2px 0px; padding: 10px 0px 0px; border: 0px; font-weight: 400; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 18px; line-height: 1.1; color: rgb(0, 48, 73); white-space: normal; background-color: rgb(255, 255, 255);">4. {:lang(\'js.information_storage\')}</h3>
|
||
<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0px; padding: 0px; border: 0px; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); white-space: normal; background-color: rgb(255, 255, 255);">{:lang(\'js.information_storage_content\')}</p>
|
||
|
||
<h3 style="box-sizing: border-box; margin: 2px 0px; padding: 10px 0px 0px; border: 0px; font-weight: 400; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 18px; line-height: 1.1; color: rgb(0, 48, 73); white-space: normal; background-color: rgb(255, 255, 255);">5. {:lang(\'js.cookie_use\')}</h3>
|
||
<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0px; padding: 0px; border: 0px; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); white-space: normal; background-color: rgb(255, 255, 255);">{:lang(\'js.cookie_use_content\')}</p>
|
||
|
||
<h3 style="box-sizing: border-box; margin: 2px 0px; padding: 10px 0px 0px; border: 0px; font-weight: 400; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 18px; line-height: 1.1; color: rgb(0, 48, 73); white-space: normal; background-color: rgb(255, 255, 255);">6. {:lang(\'js.information_security\')}</h3>
|
||
<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0px; padding: 0px; border: 0px; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); white-space: normal; background-color: rgb(255, 255, 255);">{:lang(\'js.information_security_content\')}</p>
|
||
|
||
<h3 style="box-sizing: border-box; margin: 2px 0px; padding: 10px 0px 0px; border: 0px; font-weight: 400; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 18px; line-height: 1.1; color: rgb(0, 48, 73); white-space: normal; background-color: rgb(255, 255, 255);">7. {:lang(\'js.policy_changes\')}</h3>
|
||
<p style="box-sizing: border-box; margin-top: 0px; margin-bottom: 0px; padding: 0px; border: 0px; font-family: "Microsoft YaHei", Arial, Helvetica, sans-serif; font-size: 12px; color: rgb(51, 51, 51); white-space: normal; background-color: rgb(255, 255, 255);">{:lang(\'js.policy_changes_content\')}</p>
|
||
<p><br></p><p></p>
|
||
</div>
|
||
`, area: area, // 弹窗大小
|
||
btn: ['关闭'], // 按钮
|
||
yes: function (index) {
|
||
layer.close(index); // 关闭弹窗
|
||
}
|
||
});
|
||
}
|
||
});
|
||
function normalizePassportNo(value) {
|
||
return (value || '').toUpperCase().replace(/\s+/g, '');
|
||
}
|
||
|
||
function isChineseNationality(value) {
|
||
return (value || '').trim().toUpperCase() === 'CHN';
|
||
}
|
||
|
||
function isValidChinesePassportNo(value) {
|
||
value = String(value).trim().toUpperCase();
|
||
return /^(?:G\d{8}|E\d{8}|E[A-HJ-NP-Z]\d{7}|[SP]E\d{7})$/.test(value);
|
||
}
|
||
form.verify({
|
||
// 验证至少选中一个 checkbox
|
||
checkboxRequired: function (value, item) {
|
||
var name = item.getAttribute('name');
|
||
var checkboxes = document.querySelectorAll(`input[name="${name}"]:checked`);
|
||
var checkboxes_length = document.querySelectorAll(`input[name="${name}"]`).length;
|
||
if (checkboxes.length !== checkboxes_length) {
|
||
return '{:lang("js.check_declaration")}';
|
||
}
|
||
}, // 验证必须选中一个 radio
|
||
radioRequired: function (value, item) {
|
||
var name = item.getAttribute('name');
|
||
var radios = document.querySelectorAll(`input[name="${name}"]:checked`);
|
||
if (radios.length === 0) {
|
||
return '{:lang("js.select_package")}';
|
||
}
|
||
}, radioChecked: function (value, item) { //value：表单的值、item：表单的DOM对象
|
||
var radio = $(item).parent('div').find('input[type=radio]:checked').length;
|
||
if (!radio) {
|
||
return '{:lang("js.select_option_required")}';
|
||
}
|
||
}, checkboxChecked: function (value, item) { //value：表单的值、item：表单的DOM对象
|
||
var name = item.getAttribute('name');
|
||
var checkboxes = document.querySelectorAll(`input[name="${name}"]:checked`);
|
||
if (checkboxes.length === 0) {
|
||
return '{:lang("js.field_required")}';
|
||
}
|
||
}, otherReq: function (value, item) {
|
||
var $ = layui.$;
|
||
var verifyName = $(item).attr('name'), verifyType = $(item).attr('type'),
|
||
formElem = $(item).parents('.layui-form')//获取当前所在的form元素，如果存在的话
|
||
, verifyElem = formElem.find('input[name=' + verifyName + ']')//获取需要校验的元素
|
||
, isTrue = verifyElem.is(':checked')//是否命中校验
|
||
, focusElem = verifyElem.next().find('i.layui-icon');//焦点元素
|
||
if (!isTrue || !value) {
|
||
//定位焦点
|
||
focusElem.css(verifyType == 'radio' ? {"color": "#FF5722"} : {"border-color": "#FF5722"});
|
||
//对非输入框设置焦点
|
||
focusElem.first().attr("tabIndex", "1").css("outline", "0").blur(function () {
|
||
focusElem.css(verifyType == 'radio' ? {"color": ""} : {"border-color": ""});
|
||
}).focus();
|
||
return '{:lang("js.field_required")}';
|
||
}
|
||
}, english: function (value, item) {
|
||
const v = (value ?? '').replace(/\s+/g, ''); // 去掉所有空白字符
|
||
if (!/^[A-Za-z]+$/.test(v)) {
|
||
return '{:lang("js.english_only")}';
|
||
}
|
||
},
|
||
chinaPassport: function (value, item) {
|
||
const nationality = $('select[name="nation"]').val();
|
||
if (!isChineseNationality(nationality)) {
|
||
return;
|
||
}
|
||
const normalized = normalizePassportNo(value);
|
||
if (!isValidChinesePassportNo(normalized)) {
|
||
return '{:lang("controller.china_passport_invalid")}';
|
||
}
|
||
$(item).val(normalized);
|
||
},
|
||
engnum: [/^[A-Za-z0-9]+$/, '{:lang("js.alpha_numeric_only")}'],
|
||
});
|
||
/* 获取 多选国家 value*/
|
||
var xm = xmSelect.render({
|
||
el: '#visit_country', // 绑定的元素
|
||
name: 'visit_info1', // 表单提交的字段名
|
||
tips: '{:lang("js.select_country")}',
|
||
filterable: true, // 支持搜索
|
||
on: function(data){
|
||
// 每次选项变化时更新隐藏字段
|
||
let values = data.arr.map(item => item.value).join('@');
|
||
$('input[name="visit_info"]').val(values)
|
||
}
|
||
});
|
||
|
||
function loadVisitCountryData() {
|
||
var loadIndex = layer.load(0)
|
||
$.ajax({
|
||
url: '/home/visa/getCountry', // 后台接口地址
|
||
method: 'POST', dataType: 'json', success: function (res) {
|
||
layer.close(loadIndex);
|
||
if (res.code === 1) { // 假设返回数据格式为 {code: 200, data: []}
|
||
xm.update({
|
||
data: res.data.map(function (item) {
|
||
return {
|
||
name: item.name, // 显示的文字
|
||
value: item.value // 提交的值
|
||
};
|
||
})
|
||
});
|
||
} else {
|
||
layer.msg('{:lang("js.data_load_failed")}' + res.message, {icon: 5});
|
||
}
|
||
}, error: function () {
|
||
layer.msg('{:lang("js.request_error")}', {icon: 5});
|
||
}
|
||
});
|
||
}
|
||
|
||
// 加载数据
|
||
loadVisitCountryData();
|
||
|
||
form.on('select(travel_purpose_filter)', function (data) {
|
||
if (data.value === 'OTHERS') {
|
||
$('#others_purpose').show();
|
||
$('#others_purpose').find('.layui-required').attr('lay-verify', 'required');
|
||
} else {
|
||
$('#others_purpose').hide();
|
||
$('#others_purpose').find('.layui-required').removeAttr('lay-verify');
|
||
}
|
||
})
|
||
form.on('select(travel_way_filter)', function (data) {
|
||
if (data.value === 'OTHERS') {
|
||
$('#travel_way_others').show();
|
||
$('#travel_way_others').find('.layui-required').attr('lay-verify', 'required');
|
||
} else {
|
||
$('#travel_way_others').hide();
|
||
$('#travel_way_others').find('.layui-required').removeAttr('lay-verify');
|
||
}
|
||
})
|
||
form.on('select(out_travel_way_filter)', function (data) {
|
||
if (data.value === 'OTHERS') {
|
||
$('#out_travel_way_others').show();
|
||
$('#out_travel_way_others').find('.layui-required').attr('lay-verify', 'required');
|
||
} else {
|
||
$('#out_travel_way_others').hide();
|
||
$('#out_travel_way_others').find('.layui-required').removeAttr('lay-verify');
|
||
}
|
||
})
|
||
form.on('select(accommodation_type_filter)', function (data) {
|
||
if (data.value === 'OTHERS') {
|
||
$('#out_accommodation_type').show();
|
||
$('#out_accommodation_type').find('.layui-required').attr('lay-verify', 'required');
|
||
} else {
|
||
$('#out_accommodation_type').hide();
|
||
$('#out_accommodation_type').find('.layui-required').removeAttr('lay-verify');
|
||
}
|
||
})
|
||
form.on('select(hotel_state_select)', function (data) {
|
||
var sub_select = document.getElementById('hotel_city');
|
||
sub_select.innerHTML = '<option value="">{:lang("js.select_city_placeholder")}</option>';
|
||
if ($(data.elem).find("option:selected").data('key')) {
|
||
layer.load(0)
|
||
$.ajax({
|
||
url: "/home/visa/get_sub_city", type: "POST", data: {'id': $(data.elem).find("option:selected").data('key')}, success: function (data) {
|
||
if (data.data.length !== 0) {
|
||
for (var i = 0; i < data.data.length; i++) {
|
||
var option = document.createElement('option');
|
||
option.value = data.data[i].districtNameEn;
|
||
option.text = data.data[i].districtNameEn;
|
||
option.dataset.key = data.data[i].districtCode; // 正确设置 data-key 属性
|
||
sub_select.appendChild(option);
|
||
}
|
||
form.render('select'); // 重新渲染下拉框
|
||
layer.closeAll()
|
||
} else {
|
||
layer.closeAll()
|
||
layer.msg('获取失败', {icon: 5});
|
||
form.render('select'); // 重新渲染下拉框
|
||
return false;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
})
|
||
form.on('select(hotel_city_select)', function (data) {
|
||
var sub_select = document.getElementById('hotel_district');
|
||
sub_select.innerHTML = '<option value="">{:lang("js.select_district_placeholder")}</option>';
|
||
if ($(data.elem).find("option:selected").data('key')) {
|
||
layer.load(0)
|
||
$.ajax({
|
||
url: "/home/visa/get_sub_istrict", type: "POST", data: {'id': $(data.elem).find("option:selected").data('key')}, success: function (data) {
|
||
if (data.data.length !== 0) {
|
||
for (var i = 0; i < data.data.length; i++) {
|
||
var option = document.createElement('option');
|
||
option.value = data.data[i].subdistrictNameEn;
|
||
option.text = data.data[i].subdistrictNameEn;
|
||
sub_select.appendChild(option);
|
||
$('#hotel_zip_code').val(data.data[i].postalCode)
|
||
}
|
||
form.render('select'); // 重新渲染下拉框
|
||
layer.closeAll()
|
||
} else {
|
||
layer.closeAll()
|
||
layer.msg('获取失败', {icon: 5});
|
||
form.render('select'); // 重新渲染下拉框
|
||
return false;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
})
|
||
//监听提交
|
||
form.on('submit(formSubmit)', function (data) {
|
||
var submitVal = "";
|
||
for (var i = 1; i < 4; i++) {
|
||
submitVal = $.extend(submitVal, form.val('Form' + i));
|
||
if (!form.validate('#Form' + i)) {
|
||
return false;
|
||
}
|
||
}
|
||
$("#last_name_con").html($('input[name="last_name"]').val() + " " + $('input[name="first_name"]').val())
|
||
$("#first_name_con").html($('input[name="first_name"]').val())
|
||
$("#birth_date_con").html($('input[name="birth_date"]').val())
|
||
$("#passport_number_con").html($('input[name="passport_number"]').val())
|
||
$("#arrive_date_con").html($('input[name="arrive_date"]').val())
|
||
$("#leave_date_con").html($('input[name="leave_date"]').val())
|
||
$("#email_con").html($('input[name="email"]').val())
|
||
if (window.innerWidth <= 768) {
|
||
area = ['90%', 'auto']
|
||
} else {
|
||
area = ['30%', 'auto']
|
||
}
|
||
layer.open({
|
||
content: $('#confirm'),
|
||
type: 1,
|
||
title: '{:lang("js.verify")}',
|
||
btn: ['{:lang("js.confirm")}', '{:lang("js.edit")}'],
|
||
btnAlign: 'c',
|
||
closeBtn: 0,
|
||
area: area,
|
||
yes: function () {
|
||
var load = layer.load(2, {shade: 0.3})
|
||
setTimeout(function () {
|
||
$.ajax({
|
||
url: "/home/visa/do_apply", type: "POST", data: submitVal, success: function (data) {
|
||
if (data.code === 1) {
|
||
window.location.href = data.url
|
||
} else {
|
||
layer.msg(data.msg, {icon: 5});
|
||
return false
|
||
}
|
||
}
|
||
});
|
||
}, 1500)
|
||
},
|
||
end: function () {
|
||
$('#confirm').hide()
|
||
}
|
||
});
|
||
return false;
|
||
});
|
||
</script>
|
||
<script>
|
||
// 预定义选项
|
||
var live_citys = [
|
||
{"name": "安徽", "value": "ANHUI"},
|
||
{"name": "北京", "value": "BEIJING"},
|
||
{"name": "重庆", "value": "CHONGQING"},
|
||
{"name": "福建", "value": "FUJIAN"},
|
||
{"name": "甘肃", "value": "GANSU"},
|
||
{"name": "广东", "value": "GUANGDONG"},
|
||
{"name": "广西壮族自治区", "value": "GUANGXI ZHUANG"},
|
||
{"name": "贵州", "value": "GUIZHOU"},
|
||
{"name": "海南", "value": "HAINAN"},
|
||
{"name": "河北", "value": "HEBEI"},
|
||
{"name": "黑龙江", "value": "HEILONGJIANG"},
|
||
{"name": "河南", "value": "HENAN"},
|
||
{"name": "香港特别行政区", "value": "HONG KONG SAR"},
|
||
{"name": "湖北", "value": "HUBEI"},
|
||
{"name": "湖南", "value": "HUNAN"},
|
||
{"name": "内蒙古自治区", "value": "INNER MONGOLIA"},
|
||
{"name": "江苏", "value": "JIANGSU"},
|
||
{"name": "江西", "value": "JIANGXI"},
|
||
{"name": "吉林", "value": "JILIN"},
|
||
{"name": "辽宁", "value": "LIAONING"},
|
||
{"name": "澳门特别行政区", "value": "MACAU SAR"},
|
||
{"name": "宁夏回族自治区", "value": "NINGXIA HUI"},
|
||
{"name": "青海", "value": "QINGHAI"},
|
||
{"name": "陕西", "value": "SHAANXI"},
|
||
{"name": "山东", "value": "SHANDONG"},
|
||
{"name": "上海", "value": "SHANGHAI"},
|
||
{"name": "山西", "value": "SHANXI"},
|
||
{"name": "四川", "value": "SICHUAN"},
|
||
{"name": "台湾", "value": "TAIWAN"},
|
||
{"name": "天津", "value": "TIANJIN"},
|
||
{"name": "新疆维吾尔自治区", "value": "XINJIANG"},
|
||
{"name": "西藏自治区", "value": "XIZANG"},
|
||
{"name": "云南", "value": "YUNNAN"},
|
||
{"name": "浙江", "value": "ZHEJIANG"}
|
||
];
|
||
|
||
// 监听 input 事件
|
||
$('#live_city').on('input', function () {
|
||
var inputValue = $(this).val().trim();
|
||
// 如果输入框为空，隐藏建议列表
|
||
if (inputValue === "") {
|
||
$('#suggestions').hide();
|
||
return;
|
||
}
|
||
// 筛选匹配的选项
|
||
var filteredOptions = live_citys.filter(function (option) {
|
||
return option['name'].indexOf(inputValue) > -1; // 模糊匹配
|
||
});
|
||
// 如果有匹配的选项，显示下拉建议
|
||
if (filteredOptions.length > 0) {
|
||
var suggestionList = filteredOptions.map(function (option) {
|
||
return '<li for="' + option['value'] + '">' + option['name'] + '</li>';
|
||
}).join('');
|
||
$('#suggestions').html(suggestionList).show();
|
||
} else {
|
||
// 如果没有匹配的选项，隐藏下拉框
|
||
$('#suggestions').hide();
|
||
}
|
||
// 点击建议时填充到输入框
|
||
$('#suggestions li').on('click', function () {
|
||
$('#live_city').val($(this).text());
|
||
$('#suggestions').hide();
|
||
});
|
||
});
|
||
// 点击输入框外的区域时隐藏建议列表
|
||
$(document).on('click', function (e) {
|
||
if (!$(e.target).closest('#live_city').length) {
|
||
$('#suggestions').hide();
|
||
}
|
||
});
|
||
function upload(_this) {
|
||
var file = _this.files && _this.files[0];
|
||
var loadingIndex = null;
|
||
|
||
var resetFileInput = function () {
|
||
$(_this).val('');
|
||
};
|
||
var closeLoading = function () {
|
||
if (loadingIndex !== null) {
|
||
layer.close(loadingIndex);
|
||
loadingIndex = null;
|
||
}
|
||
};
|
||
var showError = function (msg) {
|
||
closeLoading();
|
||
layer.msg(msg || '{:lang("js.manual_entry_required")}', {icon: 5});
|
||
};
|
||
|
||
if (!file) {
|
||
layer.msg('{:lang("controller.upload_missing")}', {icon: 5});
|
||
return false;
|
||
}
|
||
if (!/image\/\w+/.test(file.type || '')) {
|
||
layer.msg("{:lang('js.upload_image_only')}", {icon: 5});
|
||
return false;
|
||
}
|
||
if (!FileReader) {
|
||
layer.msg("{:lang('js.browser_not_supported')}", {icon: 5});
|
||
return false;
|
||
}
|
||
var url = "/home/upload/upload_passport";
|
||
loadingIndex = layer.load(3, {shade: [0.1]});
|
||
compressImage(file, 0.2, async function (compressedFile) {
|
||
try {
|
||
if (!compressedFile) {
|
||
resetFileInput();
|
||
showError('{:lang("js.upload_retry")}');
|
||
return false;
|
||
}
|
||
var ocrWarningMsg = '';
|
||
if (sdk) {
|
||
try {
|
||
var ocr_data = await sdk.recognizePassport(compressedFile, {
|
||
auto_rotate: true,
|
||
return_debug: false
|
||
});
|
||
if (ocr_data && ocr_data.code === 1 && ocr_data.data) {
|
||
var ocr = ocr_data.data || {};
|
||
var pad2 = function (n) {
|
||
return String(n || '').padStart(2, '0');
|
||
};
|
||
var buildDate = function (y, m, d) {
|
||
if (!y || !m || !d) return '';
|
||
return y + '-' + pad2(m) + '-' + pad2(d);
|
||
};
|
||
|
||
$('input[name="last_name"]').val(ocr.last_name || '');
|
||
$('input[name="first_name"]').val(ocr.first_name || '');
|
||
$('input[name="passport_number"]').val(ocr.passport_number || '');
|
||
$('select[name="nation"]').val(ocr.nationality || '');
|
||
|
||
if (ocr.gender === 'male' || ocr.gender === 'female') {
|
||
var gender = ocr.gender === 'male' ? '1' : '2';
|
||
$('input[name="gender"][value="' + gender + '"]').prop('checked', true);
|
||
}
|
||
|
||
var expeditionDate = buildDate(ocr.passport_expedition_date_year, ocr.passport_expedition_date_month, ocr.passport_expedition_date_day);
|
||
var expirationDate = buildDate(ocr.passport_expiration_date_year, ocr.passport_expiration_date_month, ocr.passport_expiration_date_day);
|
||
var birthDate = buildDate(ocr.birth_date_year, ocr.birth_date_month, ocr.birth_date_day);
|
||
|
||
if (expeditionDate) $('input[name="passport_expedition_date"]').val(expeditionDate);
|
||
if (expirationDate) $('input[name="passport_expiration_date"]').val(expirationDate);
|
||
if (birthDate) $('input[name="birth_date"]').val(birthDate);
|
||
layui.form.render('radio');
|
||
layui.form.render('select');
|
||
} else {
|
||
ocrWarningMsg = '{:lang("js.manual_entry_required")}';
|
||
}
|
||
} catch (ocrErr) {
|
||
ocrWarningMsg = '{:lang("js.manual_entry_required")}';
|
||
}
|
||
} else {
|
||
ocrWarningMsg = '{:lang("js.manual_entry_required")}';
|
||
}
|
||
closeLoading();
|
||
|
||
var formData = new FormData();
|
||
formData.append('file', compressedFile);
|
||
formData.append('path', 'thailand');
|
||
$.ajax({
|
||
url: url,
|
||
type: "post",
|
||
data: formData,
|
||
dataType: "json",
|
||
contentType: false,
|
||
processData: false,
|
||
mimeType: "multipart/form-data",
|
||
success: function (res) {
|
||
resetFileInput();
|
||
if (res.code == 1) {
|
||
$('input[name="passport_img"]').val(res.path);
|
||
} else {
|
||
//ocrWarningMsg = '{:lang("js.upload_retry")}';
|
||
}
|
||
},
|
||
error: function () {
|
||
resetFileInput();
|
||
//ocrWarningMsg = '{:lang("js.upload_retry")}';
|
||
}
|
||
});
|
||
if (ocrWarningMsg) {
|
||
showError(ocrWarningMsg);
|
||
}
|
||
} catch (e) {
|
||
resetFileInput();
|
||
showError('{:lang("js.manual_entry_required")}');
|
||
}
|
||
});
|
||
}
|
||
function compressImage(file, quality, callback) {
|
||
const reader = new FileReader();
|
||
reader.readAsDataURL(file);
|
||
reader.onload = function (event) {
|
||
const img = new Image();
|
||
img.src = event.target.result;
|
||
img.onload = function () {
|
||
const canvas = document.createElement('canvas');
|
||
const ctx = canvas.getContext('2d');
|
||
let maxWidth = 1200;
|
||
let width = img.width;
|
||
let height = img.height;
|
||
if (width > maxWidth) {
|
||
height *= maxWidth / width;
|
||
width = maxWidth;
|
||
}
|
||
canvas.width = width;
|
||
canvas.height = height;
|
||
ctx.drawImage(img, 0, 0, width, height);
|
||
canvas.toBlob(function (blob) {
|
||
const newFile = new File([blob], file.name, { type: file.type });
|
||
callback(newFile);
|
||
}, file.type, quality);
|
||
};
|
||
};
|
||
}
|
||
</script>
|
||
</body>
|
||
</html>
|