738 lines
42 KiB
HTML
738 lines
42 KiB
HTML
{include file="public/head"}
|
||
<link rel="stylesheet" href="/static/css/visa.css?v={:time()}">
|
||
<link rel="stylesheet" href="https://files.jzvisa.com/visa/calendar/calendar.min.css"/>
|
||
<script src="https://files.jzvisa.com/visa/calendar/calendar.min.js"></script>
|
||
<script type="text/javascript" async="" src="/static/js/xm-select.js"></script>
|
||
<style>
|
||
.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;
|
||
}
|
||
</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">{: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">{:lang('visa.nationality')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<select lay-search="" name="nation" lay-verify="required">
|
||
<option value="">{:lang('visa.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|englishOnly"
|
||
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|englishOnly"
|
||
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" 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"
|
||
for="passport_expiration_date">{:lang('visa.passport_expiry')}<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="passport_expiration_date" id="passport_expiration_date"
|
||
lay-verify="required"
|
||
placeholder="{:lang('visa.passport_expiry_placeholder')}"
|
||
class="layui-input layui-hou" 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" 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">
|
||
{volist name="phone_prefix" id="vo"}
|
||
<option value="{$vo['0']}">{$vo['1']}</option>
|
||
{/volist}
|
||
</select>
|
||
</div>
|
||
<input type="text" name="phone"
|
||
placeholder="{:lang('visa.phone_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" for="gender">{:lang('visa.gender')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<input type="radio" name="gender" value="1" title="{:lang('visa.gender_male')}" lay-verify="otherReq"/>
|
||
<input type="radio" name="gender" value="2" title="{:lang('visa.gender_female')}" 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.arrive_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" lay-verify="required"
|
||
placeholder="{:lang('visa.arrive_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.leave_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" lay-verify="required"
|
||
placeholder="{:lang('visa.leave_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.travel_way')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<select name="travel_way" lay-verify="required">
|
||
<option value="">{:lang('visa.travel_way_placeholder')}</option>
|
||
<option value="1">{:lang('visa.by_air')}</option>
|
||
<option value="2">{:lang('visa.by_sea')}</option>
|
||
<option value="3">{:lang('visa.by_land')}</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.travel_country')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<select name="travel_country" lay-search lay-verify="required">
|
||
<option value="">{:lang('visa.travel_country_placeholder')}</option>
|
||
{volist name="travel_country" id="vo"}
|
||
<option value="{$vo['value']}">{$vo['text']}</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_number')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="travel_number" lay-verify="required"
|
||
placeholder="{:lang('visa.travel_number_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.hotel_type')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<select name="hotel_type" lay-verify="required">
|
||
<option value="">{:lang('visa.hotel_type_placeholder')}</option>
|
||
<option value="01">{:lang('visa.guesthouse')}</option>
|
||
<option value="02">{:lang('visa.friend')}</option>
|
||
<option value="99">{:lang('visa.other')}</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.hotel_state')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<select name="hotel_state" lay-search lay-filter="hotel_state_select"
|
||
lay-verify="required">
|
||
<option value="">{:lang('visa.hotel_state_placeholder')}</option>
|
||
<option value="01">JOHOR 柔佛</option>
|
||
<option value="02">KEDAH 吉打</option>
|
||
<option value="03">KELANTAN 吉兰丹</option>
|
||
<option value="04">MELAKA 马六甲</option>
|
||
<option value="05">NEGERI SEMBILAN 森美兰</option>
|
||
<option value="06">PAHANG 彭亨</option>
|
||
<option value="07">PULAU PINANG 槟城</option>
|
||
<option value="08">PERAK 霹雳</option>
|
||
<option value="09">PERLIS 玻璃市</option>
|
||
<option value="10">SELANGOR 雪兰莪</option>
|
||
<option value="11">TERENGGANU 登嘉楼</option>
|
||
<option value="12">SABAH 沙巴</option>
|
||
<option value="13">SARAWAK 砂拉越</option>
|
||
<option value="14">WP KUALA LUMPUR 联邦直辖区吉隆坡</option>
|
||
<option value="15">WP LABUAN 联邦直辖区纳闽</option>
|
||
<option value="16">WP PUTRAJAYA 联邦直辖区布城</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.hotel_city')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<select name="hotel_city" id="hotel_city" lay-verify="required">
|
||
<option value="">{:lang('visa.hotel_city_placeholder')}</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.hotel_address')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="hotel_address" lay-verify="required"
|
||
placeholder="{:lang('visa.hotel_address_placeholder')}"
|
||
class="layui-input">
|
||
<span class="layui-form-mid layui-word-aux">{:lang('visa.copy_hotel')}</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('visa.hotel_zip')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<input type="text" name="hotel_zip" lay-verify="required"
|
||
placeholder="{:lang('visa.hotel_zip_placeholder')}"
|
||
class="layui-input">
|
||
</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="Form5" id="Form5" action="" autocomplete="off">-->
|
||
<!-- <div class="m-form-application-title">-->
|
||
<!-- <h2>附件信息</h2>-->
|
||
<!-- </div>-->
|
||
<!-- <div class="layui-row">-->
|
||
<!-- <div class="layui-col-xs12 layui-col-md12">-->
|
||
<!-- <div class="layui-form-item">-->
|
||
<!-- <label class="layui-form-label">证件照片<span>*</span></label>-->
|
||
<!-- <div class="layui-input-block">-->
|
||
<!-- <div class="layui-upload">-->
|
||
<!-- <button type="button" class="layui-btn" id="person_img">上传图片</button>-->
|
||
<!-- <div class="layui-upload-list">-->
|
||
<!-- <img class="layui-upload-img" id="person_img_view">-->
|
||
<!-- </div>-->
|
||
<!-- </div>-->
|
||
<!-- <input type="hidden" name="person_img" lay-verify="required">-->
|
||
<!-- </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>下一步</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-md6">
|
||
<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.passport_expiry')}:</td>
|
||
<td id="passport_expiration_date_con"></td>
|
||
</tr>
|
||
<tr>
|
||
<td>{:lang('visa.arrive_date')}:</td>
|
||
<td id="arrive_date_con"></td>
|
||
</tr>
|
||
<tr>
|
||
<td>{:lang('visa.leave_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 lang = {
|
||
field_required: "{:lang('js.field_required')}",
|
||
alert_message:"{:lang('js.alert_message')}",
|
||
notice:"{:lang('js.notice')}",
|
||
departure_date_error:"{:lang('js.departure_date_error')}",
|
||
failed:"{:lang('js.failed')}",
|
||
search_directly:"{:lang('js.search_directly')}",
|
||
check_declaration:"{:lang('js.check_declaration')}",
|
||
select_one_option:"{:lang('js.select_one_option')}",
|
||
choose_package:"{:lang('js.choose_package')}",
|
||
english_only:"{:lang('js.english_only')}",
|
||
uppercase_only:"{:lang('js.uppercase_only')}",
|
||
chinese_only:"{:lang('js.chinese_only')}",
|
||
max_100_chars:"{:lang('js.max_100_chars')}",
|
||
upload_successful:"{:lang('js.upload_successful')}",
|
||
upload_failed:"{:lang('js.upload_failed')}",
|
||
upload_error:"{:lang('js.upload_error')}",
|
||
verify:"{:lang('js.verify')}",
|
||
confirms:"{:lang('js.confirm')}",
|
||
edit:"{:lang('js.edit')}",
|
||
china_passport_invalid:"{:lang('controller.china_passport_invalid')}",
|
||
};
|
||
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);
|
||
}
|
||
}
|
||
</script>
|
||
<script src="/static/js/mala.js"></script>
|
||
<script>
|
||
var ismobile = `{$ismobile}`
|
||
// 监听复选框点击
|
||
form.on('checkbox(termsCheckbox)', function (data) {
|
||
var area = [];
|
||
if (ismobile == 1) {
|
||
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 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', 'mala');
|
||
$.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> |