442 lines
17 KiB
HTML
442 lines
17 KiB
HTML
{include file="public/head" /}
|
||
<link rel="stylesheet" href="/static/css/visa.css">
|
||
<style>
|
||
body { background-color: #f5f5f5; }
|
||
/* ===== 页面容器：居中卡片风格 ===== */
|
||
.contact-card{
|
||
background: #fff;
|
||
border-radius: 10px;
|
||
box-shadow: 0 2px 10px rgba(0,0,0,.06);
|
||
padding: 28px 30px 22px;
|
||
border: 1px solid rgba(0,0,0,.06);
|
||
}
|
||
.contact-title h2{
|
||
font-size: 34px;
|
||
font-weight: 800;
|
||
color: #111;
|
||
margin: 0 0 10px;
|
||
}
|
||
.contact-desc{
|
||
color: #666;
|
||
font-size: 14px;
|
||
margin: 0 0 18px;
|
||
}
|
||
.contact-hr{
|
||
height: 1px;
|
||
background: #eee;
|
||
margin: 16px 0 22px;
|
||
}
|
||
|
||
/* ===== 表单：标签在上（截图同款） ===== */
|
||
.layui-form-item{ margin-bottom: 18px; }
|
||
|
||
.layui-form-label{
|
||
float: none;
|
||
width: 100%;
|
||
text-align: left;
|
||
padding: 0 0 8px 0;
|
||
font-weight: 700;
|
||
color: #222;
|
||
}
|
||
.layui-input-block{
|
||
margin-left: 0;
|
||
min-height: auto;
|
||
}
|
||
.layui-form-label span{
|
||
color: #e53935;
|
||
margin-left: 4px;
|
||
font-weight: 800;
|
||
}
|
||
|
||
/* 输入框更接近截图（高度、边框、圆角） */
|
||
.layui-input, .layui-textarea, .layui-select{
|
||
border-radius: 4px;
|
||
border-color: #e6e6e6;
|
||
}
|
||
.layui-input{ height: 44px; line-height: 44px; }
|
||
.layui-textarea{ min-height: 150px; padding: 10px 12px; }
|
||
|
||
/* ===== 输入组：做成 flex，验证码在右侧不挤压 ===== */
|
||
.layui-input-group{
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 12px;
|
||
width: 100%;
|
||
}
|
||
.layui-input-group > .layui-input,
|
||
.layui-input-group > input.layui-input{
|
||
flex: 1 1 auto;
|
||
min-width: 0;
|
||
}
|
||
.layui-input-group .layui-input-group-prepend{
|
||
flex: 0 0 auto;
|
||
width: auto;
|
||
}
|
||
.captcha-img-container{
|
||
display: flex;
|
||
align-items: center;
|
||
gap: 10px;
|
||
white-space: nowrap;
|
||
}
|
||
.captcha-img-container img{
|
||
height: 44px;
|
||
border-radius: 4px;
|
||
}
|
||
.captcha-img-container a{
|
||
color: #1e88e5;
|
||
font-size: 13px;
|
||
}
|
||
|
||
/* radio 更靠近截图：一行内更紧凑 */
|
||
.layui-form-radio{ margin: 0 18px 0 0; }
|
||
|
||
/* 提交按钮居中、接近你导航蓝色 */
|
||
.contact-actions{ margin-top: 8px; }
|
||
.contact-actions .layui-btn{
|
||
height: 44px;
|
||
line-height: 44px;
|
||
padding: 0 34px;
|
||
border-radius: 4px;
|
||
background: #1e73b8;
|
||
font-weight: 700;
|
||
}
|
||
|
||
@media (max-width: 740px) {
|
||
.contact-card{ padding: 22px 16px 18px; }
|
||
.contact-title h2{ font-size: 28px; }
|
||
}
|
||
/* 只影响验证码这一行 */
|
||
.captcha-item .layui-input-group{
|
||
justify-content: flex-start; /* 不把验证码推到最右 */
|
||
}
|
||
|
||
/* 固定验证码输入框宽度（你可以改成 180/200/220） */
|
||
.captcha-item .layui-input-group > input.layui-input{
|
||
flex: 0 0 220px;
|
||
max-width: 220px;
|
||
}
|
||
|
||
/* 小屏幕下恢复全宽并换行更舒服 */
|
||
@media (max-width: 740px){
|
||
.captcha-item .layui-input-group{
|
||
flex-wrap: wrap;
|
||
gap: 10px;
|
||
}
|
||
.captcha-item .layui-input-group > input.layui-input{
|
||
flex: 1 1 100%;
|
||
max-width: 100%;
|
||
}
|
||
}
|
||
|
||
</style>
|
||
|
||
<body>
|
||
<div class="zh_content">
|
||
{include file="public/newnav" /}
|
||
</div>
|
||
|
||
<div class="layui-container contact-page">
|
||
<div class="contact-card">
|
||
|
||
<div class="contact-title">
|
||
<h2>{:lang('contact.menu_contact')}</h2>
|
||
</div>
|
||
<p class="contact-desc">
|
||
{:lang('contact.info')}
|
||
</p>
|
||
<div class="contact-hr"></div>
|
||
|
||
<form class="layui-form" id="Form1" lay-filter="Form1" autocomplete="off" style="display:block;">
|
||
<div class="layui-row layui-col-space20">
|
||
|
||
<div class="layui-col-xs12 layui-col-md12">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('contact.full_name')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<div class="layui-input-group">
|
||
<input type="text" name="name" value=""
|
||
placeholder="{:lang('contact.full_name')}"
|
||
lay-verify="required" class="layui-input">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('contact.email')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<div class="layui-input-group">
|
||
<input type="text" name="email" value=""
|
||
placeholder="{:lang('contact.email')}"
|
||
lay-verify="required|email" class="layui-input">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('contact.repeat_email')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<div class="layui-input-group">
|
||
<input type="text" name="re_email" value=""
|
||
placeholder="{:lang('contact.repeat_email')}"
|
||
lay-verify="required|email|sameEmail" class="layui-input">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('contact.passport_number')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<div class="layui-input-group">
|
||
<input type="text" name="passport_number" value=""
|
||
placeholder="{:lang('contact.passport_number')}"
|
||
lay-verify="required" class="layui-input">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('contact.is_apply')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<div class="layui-input-group" style="gap:22px;">
|
||
<input type="radio" name="is_apply" value="1" title="{:lang('contact.yes')}" alt="is_apply_1" lay-verify="otherReq"/>
|
||
<input type="radio" name="is_apply" value="0" title="{:lang('contact.no')}" alt="is_apply_0" lay-verify="otherReq"/>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-col-xs12 layui-row data-name-is_apply data-is_apply_1">
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('contact.contact_reason')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<div class="layui-input-group">
|
||
<select name="reason_contact" class="layui-required">
|
||
<option value="">{:lang('contact.contact_reason')}</option>
|
||
{foreach $reason as $key=>$value}
|
||
<option value="{$value}">{$value}</option>
|
||
{/foreach}
|
||
</select>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-col-xs12 layui-col-md6">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('contact.order_sn')}<span style="color:#999;font-weight:600;">{:lang('contact.optional')}</span></label>
|
||
<div class="layui-input-block">
|
||
<div class="layui-input-group">
|
||
<input type="text" name="order_sn" value=""
|
||
placeholder="{:lang('contact.order_sn')}"
|
||
class="layui-input">
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-col-xs12 layui-col-md12">
|
||
<div class="layui-form-item">
|
||
<label class="layui-form-label">{:lang('contact.comment')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<div class="layui-input-group">
|
||
<textarea name="comments" class="layui-textarea" placeholder="{:lang('contact.comment')}" lay-verify="required"></textarea>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-col-xs12 layui-col-md12">
|
||
<div class="layui-form-item captcha-item">
|
||
<label class="layui-form-label">{:lang('contact.yzm')}<span>*</span></label>
|
||
<div class="layui-input-block">
|
||
<div class="layui-input-group">
|
||
<input type="text" name="yzm" value=""
|
||
placeholder="{:lang('contact.yzm')}"
|
||
lay-verify="required" class="layui-input">
|
||
<div class="layui-input-group-prepend">
|
||
<div class="captcha-img-container">
|
||
<img src="{:captcha_src()}" id="captcha-img"
|
||
onclick="refreshCaptcha()"
|
||
style="cursor:pointer; border:1px solid #ddd;">
|
||
<a href="javascript:void(0);" onclick="refreshCaptcha()">
|
||
{:lang('contact.change')}
|
||
</a>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
|
||
<div class="layui-col-xs12 text-center contact-actions">
|
||
<div class="layui-form-item">
|
||
<button class="layui-btn" lay-submit lay-filter="formSubmit" id="submit">
|
||
{:lang('contact.submit_now')}
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
</div>
|
||
</form>
|
||
|
||
</div>
|
||
</div>
|
||
|
||
|
||
{include file="public/newfooter" /}
|
||
|
||
<script>
|
||
var layer = layui.layer, form = layui.form, laydate = layui.laydate, util = layui.util;
|
||
|
||
function refreshCaptcha() {
|
||
$('#captcha-img').attr('src', '{:captcha_src()}?t=' + Date.now());
|
||
}
|
||
|
||
form.on('submit(formSubmit)', function (data) {
|
||
var submitVal = "";
|
||
for (var i = 1; i < 2; i++) {
|
||
submitVal = $.extend(submitVal, form.val('Form' + i));
|
||
if (!form.validate('#Form' + i)) {
|
||
return false;
|
||
}
|
||
}
|
||
var load = layer.load(2, {shade: 0.3})
|
||
$.ajax({
|
||
url: "/home/contact/do_apply",
|
||
type: "POST",
|
||
data: submitVal,
|
||
success: function (data) {
|
||
layer.close(load);
|
||
refreshCaptcha()
|
||
if (data.code === 1) {
|
||
layer.msg(data.msg, {icon: 1}, function () {
|
||
window.location.reload()
|
||
});
|
||
} else {
|
||
layer.msg(data.msg, {icon: 5});
|
||
return false
|
||
}
|
||
}
|
||
});
|
||
return false;
|
||
});
|
||
|
||
form.verify({
|
||
/* 确认邮箱一致 */
|
||
sameEmail: function(value){
|
||
var email = $('input[name="email"]').val() || '';
|
||
if ((email.trim() !== (value || '').trim())) {
|
||
return '{:lang("contact.repeat_email")} 不一致';
|
||
}
|
||
},
|
||
|
||
otherReq: function (value, item) {
|
||
var $ = layui.$;
|
||
var verifyName = $(item).attr('name'),
|
||
verifyType = $(item).attr('type'),
|
||
formElem = $(item).parents('.layui-form'),
|
||
verifyElem = formElem.find('input[name=' + verifyName + ']'),
|
||
isTrue = verifyElem.is(':checked'),
|
||
focusElem = verifyElem.next().find('i.layui-icon'),
|
||
reqText = $(item).attr('lay-reqtext') || '{:lang("contact.default_reqtext")}';
|
||
|
||
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 reqText;
|
||
}
|
||
}
|
||
});
|
||
|
||
$("input[type='radio']").each(function () {
|
||
var alt = $(this).attr("alt");
|
||
if ($(this).is(":checked")) {
|
||
$(".data-" + alt).show();
|
||
} else {
|
||
$(".data-" + alt).hide();
|
||
}
|
||
})
|
||
|
||
form.on("radio", function (data) {
|
||
var name = data.elem.name;
|
||
var alt = data.elem.alt;
|
||
|
||
var $sections = $(".data-name-" + name);
|
||
|
||
$sections.each(function () {
|
||
var $section = $(this);
|
||
var isMatch = $section.hasClass("data-" + alt);
|
||
|
||
if (isMatch) {
|
||
$section.show();
|
||
} else {
|
||
$section.hide();
|
||
|
||
// 隐藏时移除 required 相关验证（你原逻辑保留）
|
||
$section.find("input, textarea, select").each(function () {
|
||
var $el = $(this);
|
||
var old = $el.attr("lay-verify") || "";
|
||
var newVerify = old
|
||
.split("|")
|
||
.filter(v => !["required", "otherReq", "checkboxChecked"].includes(v))
|
||
.join("|");
|
||
$el.attr("lay-verify", newVerify);
|
||
});
|
||
|
||
$section.find(".xm-select-default").each(function () {
|
||
var $el = $(this);
|
||
var old = $el.attr("lay-verify") || "";
|
||
var newVerify = old
|
||
.split("|")
|
||
.filter(v => !["required", "otherReq", "checkboxChecked"].includes(v))
|
||
.join("|");
|
||
$el.attr("lay-verify", newVerify);
|
||
});
|
||
}
|
||
});
|
||
|
||
// 只给当前显示块补 required
|
||
var $target = $(".data-" + alt);
|
||
$target.children().find(".layui-required").each(function () {
|
||
const $el = $(this);
|
||
const isVisible = $el.closest(".layui-form-item, .layui-col-xs12, .layui-col-md6").is(":visible");
|
||
if (!isVisible) return;
|
||
|
||
let verifyList = ($el.attr("lay-verify") || "").split("|").filter(Boolean);
|
||
|
||
if ($el.is(":radio")) {
|
||
if (!verifyList.includes("otherReq")) verifyList.push("otherReq");
|
||
} else if ($el.is(":checkbox")) {
|
||
if (!verifyList.includes("checkboxChecked")) verifyList.push("checkboxChecked");
|
||
} else {
|
||
if (!verifyList.includes("required")) verifyList.push("required");
|
||
}
|
||
|
||
$el.attr("lay-verify", verifyList.join("|"));
|
||
});
|
||
|
||
$target.find(".xm-select-default:visible").each(function () {
|
||
var $el = $(this);
|
||
var verifyList = ($el.attr("lay-verify") || "").split("|").filter(Boolean);
|
||
if (!verifyList.includes("required")) verifyList.push("required");
|
||
$el.attr("lay-verify", verifyList.join("|"));
|
||
});
|
||
|
||
form.render("radio");
|
||
form.render("checkbox");
|
||
});
|
||
</script>
|
||
</body>
|