提交
This commit is contained in:
gaofeng
399
public/static/js/mala.js
Normal file
399
public/static/js/mala.js
Normal file
@@ -0,0 +1,399 @@
|
||||
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});
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user