400 lines
14 KiB
JavaScript
400 lines
14 KiB
JavaScript
var layer = layui.layer, form = layui.form, upload = layui.upload, laydate = layui.laydate
|
||
|
||
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')) {
|
||
// 设置统一的必填提示
|
||
$field.attr('lay-reqtext', labelText + lang.field_required);
|
||
$field.attr('lay-verType', 'tips');
|
||
}
|
||
});
|
||
});
|
||
// 重新渲染表单
|
||
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-hou").each(function () {
|
||
xvDate({
|
||
target: this,
|
||
min: new Date().toISOString().split('T')[0]
|
||
});
|
||
});
|
||
$(".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.alert_message, {
|
||
icon: 0,
|
||
shadeClose: true,
|
||
title: lang.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 = $('input[name="arrive_date"]').val();
|
||
var date2 = $('input[name="leave_date"]').val();
|
||
|
||
if (date1 && date2) {
|
||
var d1 = new Date(date1);
|
||
var d2 = new Date(date2);
|
||
|
||
if (d1 > d2) {
|
||
layer.tips(lang.departure_date_error, 'input[name="leave_date"]');
|
||
$('input[name="leave_date"]').val('')
|
||
return false;
|
||
}
|
||
return true;
|
||
}
|
||
}
|
||
function isWithinThreeDays(dateString) {
|
||
const targetDate = new Date(dateString);
|
||
const currentDate = new Date();
|
||
const threeDaysInMillis = 2 * 24 * 60 * 60 * 1000;
|
||
|
||
// 将时间部分设置为0，以便只比较日期部分
|
||
targetDate.setHours(0, 0, 0, 0);
|
||
currentDate.setHours(0, 0, 0, 0);
|
||
|
||
return targetDate - currentDate <= threeDaysInMillis;
|
||
}
|
||
//监听
|
||
form.on('select(hotel_state_select)', function (data) {
|
||
var sub_select = document.getElementById('hotel_city');
|
||
sub_select.innerHTML = '';
|
||
if (data.value) {
|
||
layer.load(0)
|
||
$.ajax({
|
||
url: "/home/visa/get_sub_city", type: "POST", data: {'id': data.value}, success: function (data) {
|
||
if (data.data.length !== 0) {
|
||
// 动态添加城市选项
|
||
sub_select.innerHTML = '<option value="">'+lang.search_directly+'</option>' + data.data.text;
|
||
layer.closeAll()
|
||
form.render('select'); // 重新渲染下拉框
|
||
} else {
|
||
layer.closeAll()
|
||
layer.msg(lang.failed, {icon: 5});
|
||
form.render('select'); // 重新渲染下拉框
|
||
return false;
|
||
}
|
||
}
|
||
});
|
||
}
|
||
})
|
||
|
||
$('#shili').on('click', function () {
|
||
layer.photos({
|
||
photos: {
|
||
"data": [ //相册包含的图片，数组格式
|
||
{
|
||
"src": $('#sample_url').val(),
|
||
}]
|
||
},
|
||
})
|
||
});
|
||
//是否选择 默认显示或隐藏
|
||
$("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 {
|
||
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")) {
|
||
$(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;
|
||
});
|
||
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.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.choose_package;
|
||
}
|
||
}, radioChecked: function (value, item) { //value：表单的值、item：表单的DOM对象
|
||
var radio = $(item).parent('div').find('input[type=radio]:checked').length;
|
||
if (!radio) {
|
||
return lang.select_one_option;
|
||
}
|
||
}, 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.select_one_option;
|
||
}
|
||
},
|
||
english: [/^[A-Za-z]+$/, lang.english_only]
|
||
,daxie: [/^[A-Z]+$/, lang.uppercase_only],
|
||
zhongwen: [/^[\u4e00-\u9fa5]+$/, lang.chinese_only],
|
||
len40: [/^.{1,100}$/, lang.max_100_chars],
|
||
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.field_required;
|
||
}
|
||
},
|
||
chinaPassport: function (value, item) {
|
||
const nationality = $('select[name="nation"]').val();
|
||
if (!isChineseNationality(nationality)) {
|
||
return;
|
||
}
|
||
const normalized = normalizePassportNo(value);
|
||
if (!isValidChinesePassportNo(normalized)) {
|
||
return lang.china_passport_invalid;
|
||
}
|
||
$(item).val(normalized);
|
||
},
|
||
englishOnly: function (value, item) {
|
||
const v = (value ?? '').replace(/\s+/g, ''); // 去掉所有空白字符
|
||
if (!/^[A-Za-z]+$/.test(v)) {
|
||
return lang.english_only;
|
||
}
|
||
}
|
||
});
|
||
//监听提交
|
||
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())
|
||
$("#passport_expiration_date_con").html($('input[name="passport_expiration_date"]').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.verify,
|
||
btn: [lang.confirms, lang.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;
|
||
});
|
||
|
||
upload.render({
|
||
elem: '#passport_img', // 绑定的按钮 ID
|
||
url: '/home/upload/upload_passport', // 后端接口 URL
|
||
accept: 'images', // 仅支持图片类型
|
||
before: function (obj) {
|
||
loadIndex = layer.load(0);
|
||
obj.preview(function (index, file, result) {
|
||
$('#uploadPassportView').removeClass('layui-hide').find('img').attr('src', result);
|
||
});
|
||
},
|
||
done: function (res) {
|
||
// 上传成功后的回调
|
||
if (res.path.length !== 0) {
|
||
layer.close(loadIndex);
|
||
layer.msg(lang.upload_successful, {icon: 1});
|
||
$('input[name="passport_img"]').val(res.path);
|
||
if (res.data.length !== 0) {
|
||
$('input[name="last_name"]').val(res.data.last_name)
|
||
$('input[name="first_name"]').val(res.data.first_name)
|
||
$('input[name="birth_date"]').val(res.data.birth_date_year + '-' + ('0' + res.data.birth_date_month).slice(-2) + '-' + ('0' + res.data.birth_date_day).slice(-2))
|
||
$('input[name="passport_number"]').val(res.data.passport_number)
|
||
var gender = res.data.gender == 'male' ? '1' : '2'
|
||
$('input[name="gender"][value="' + gender + '"]').prop('checked', true);
|
||
$('input[name="passport_expiration_date"]').val(res.data.passport_expiration_date_year + '-' + ('0' + res.data.passport_expiration_date_month).slice(-2) + '-' + ('0' + res.data.passport_expiration_date_day).slice(-2))
|
||
form.render('radio');
|
||
}
|
||
} else {
|
||
layer.close(loadIndex);
|
||
$('#passport_img_preview').html('')
|
||
$('input[name="last_name"]').val('')
|
||
$('input[name="first_name"]').val('')
|
||
$('input[name="birth_date"]').val('')
|
||
$('input[name="passport_number"]').val('')
|
||
$('input[name="passport_expiration_date"]').val('')
|
||
$('input[name="gender"]').prop('checked', false);
|
||
form.render('radio');
|
||
layer.msg(lang.upload_failed+'：' + res.msg, {icon: 5});
|
||
}
|
||
}, error: function () {
|
||
// 上传失败的回调
|
||
layer.close(loadIndex);
|
||
$('#passport_img_preview').html('')
|
||
$('input[name="passport_img"]').val('')
|
||
$('input[name="last_name"]').val('')
|
||
$('input[name="first_name"]').val('')
|
||
$('input[name="birth_city"]').val('')
|
||
$('input[name="issuing_place"]').val('')
|
||
$('input[name="birth_date"]').val('')
|
||
$('input[name="passport_number"]').val('')
|
||
$('input[name="passport_expedition_date"]').val('')
|
||
$('input[name="passport_expiration_date"]').val('')
|
||
$('input[name="gender"]').prop('checked', false);
|
||
form.render('radio');
|
||
layer.msg(lang.upload_error, {icon: 5});
|
||
}
|
||
});
|
||
upload.render({
|
||
elem: '#person_img',
|
||
url: '/home/upload/file_upload', // 后端接口 URL
|
||
before: function(obj){
|
||
//预读本地文件示例，不支持ie8
|
||
obj.preview(function(index, file, result){
|
||
$('#person_img_view').attr('src', result); //图片链接（base64）
|
||
});
|
||
loadIndex = layer.load(0);
|
||
},
|
||
done: function(res){
|
||
layer.close(loadIndex);
|
||
// 上传成功后的回调
|
||
if (res.path.length !== 0) {
|
||
layer.msg(lang.upload_successful, {icon: 1});
|
||
$('input[name="person_img"]').val(res.path);
|
||
} else {
|
||
layer.msg(lang.upload_failed+'：' + res.msg, {icon: 5});
|
||
}
|
||
},
|
||
error: function(){
|
||
layer.close(loadIndex);
|
||
layer.msg(lang.upload_error, {icon: 5});
|
||
}
|
||
});
|