admin/hztha.hkpgsow.cn
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

提交

Browse Source
This commit is contained in:
gaofeng
2026-05-13 10:44:29 +08:00
commit 0b165153c6
3674 changed files with 316663 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files

441
app/home/view/contact/index.html Normal file
View File

@@ -0,0 +1,441 @@
{include file="public/head" /}
<link rel="stylesheet" href="/static/css/visa.css?v={:time()}">
<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>