提交
This commit is contained in:
242
app/home/view/user/index.html
Normal file
242
app/home/view/user/index.html
Normal file
@@ -0,0 +1,242 @@
|
||||
{include file="public/head" /}
|
||||
<style>
|
||||
body.user-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #f5f7fb;
|
||||
}
|
||||
|
||||
.user-main {
|
||||
flex: 1;
|
||||
padding: 32px 0 52px;
|
||||
}
|
||||
|
||||
.account-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 240px minmax(0, 1fr);
|
||||
gap: 18px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.account-nav,
|
||||
.account-panel {
|
||||
background: #fff;
|
||||
border: 1px solid rgba(15, 23, 42, .08);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.account-nav__title,
|
||||
.account-panel__title {
|
||||
background: var(--main-color);
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
line-height: 50px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.account-nav__link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
height: 50px;
|
||||
padding: 0 18px;
|
||||
color: #263241;
|
||||
border-bottom: 1px solid #eef1f5;
|
||||
text-decoration: none;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.account-nav__link:hover,
|
||||
.account-nav__link.is-active {
|
||||
color: var(--main-color);
|
||||
background: rgba(21, 56, 84, .06);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.account-panel__body {
|
||||
padding: 18px;
|
||||
}
|
||||
|
||||
.order-list {
|
||||
display: grid;
|
||||
gap: 14px;
|
||||
}
|
||||
|
||||
.order-card {
|
||||
border: 1px solid #dfe5ee;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.order-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(2, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.order-item {
|
||||
display: grid;
|
||||
grid-template-columns: 96px minmax(0, 1fr);
|
||||
gap: 8px;
|
||||
padding: 12px 14px;
|
||||
border-bottom: 1px solid #edf1f5;
|
||||
color: #334155;
|
||||
line-height: 1.55;
|
||||
min-width: 0;
|
||||
}
|
||||
|
||||
.order-item:nth-child(odd) {
|
||||
border-right: 1px solid #edf1f5;
|
||||
}
|
||||
|
||||
.order-item strong {
|
||||
color: #0f172a;
|
||||
font-weight: 700;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
.order-item span {
|
||||
word-break: break-word;
|
||||
}
|
||||
|
||||
.order-actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
padding: 12px 14px;
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.account-btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-width: 92px;
|
||||
height: 36px;
|
||||
padding: 0 16px;
|
||||
border-radius: 4px;
|
||||
background: var(--main-color);
|
||||
color: #fff;
|
||||
text-decoration: none;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.account-btn:hover {
|
||||
color: #fff;
|
||||
background: #0f2b42;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
padding: 52px 20px;
|
||||
text-align: center;
|
||||
color: #64748b;
|
||||
}
|
||||
|
||||
.empty-state .account-btn {
|
||||
margin-top: 16px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.user-main {
|
||||
padding: 20px 12px 36px;
|
||||
}
|
||||
|
||||
.account-layout {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.account-nav {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.account-nav__title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.account-nav__link {
|
||||
justify-content: center;
|
||||
padding: 0 8px;
|
||||
font-size: 14px;
|
||||
border-right: 1px solid #eef1f5;
|
||||
}
|
||||
|
||||
.order-grid {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
|
||||
.order-item {
|
||||
grid-template-columns: 88px minmax(0, 1fr);
|
||||
}
|
||||
|
||||
.order-item:nth-child(odd) {
|
||||
border-right: 0;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body class="user-page">
|
||||
{include file="public/newnav" /}
|
||||
|
||||
<main class="user-main">
|
||||
<div class="layui-container">
|
||||
<div class="account-layout">
|
||||
<aside class="account-nav">
|
||||
<div class="account-nav__title">个人中心</div>
|
||||
<a href="{:url('user/index')}" class="account-nav__link is-active">
|
||||
<i class="bi bi-receipt"></i><span>我的订单</span>
|
||||
</a>
|
||||
<a href="{:url('user/invoice')}" class="account-nav__link">
|
||||
<i class="bi bi-file-earmark-text"></i><span>自助开票</span>
|
||||
</a>
|
||||
<a href="{:url('visa/index')}" class="account-nav__link">
|
||||
<i class="bi bi-send"></i><span>签证申请</span>
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<section class="account-panel">
|
||||
<div class="account-panel__title">我的订单</div>
|
||||
<div class="account-panel__body">
|
||||
<div class="order-list">
|
||||
{volist name="order_list" id="vo"}
|
||||
<article class="order-card">
|
||||
<div class="order-grid">
|
||||
<div class="order-item"><strong>订单号</strong><span>{$vo.order_sn}</span></div>
|
||||
<div class="order-item"><strong>姓名</strong><span>{$vo.last_name} {$vo.first_name}</span></div>
|
||||
<div class="order-item"><strong>出生日期</strong><span>{$vo.birth_date}</span></div>
|
||||
<div class="order-item"><strong>护照号</strong><span>{$vo.passport_number}</span></div>
|
||||
<div class="order-item"><strong>手机号</strong><span>{$vo.phone}</span></div>
|
||||
<div class="order-item"><strong>下单时间</strong><span>{$vo.reg_time}</span></div>
|
||||
<div class="order-item"><strong>状态</strong><span>{$vo.order_text}</span></div>
|
||||
</div>
|
||||
<div class="order-actions">
|
||||
{eq name="$vo.pay_status" value="1"}
|
||||
{eq name="$vo.invoice" value="0"}
|
||||
<a class="account-btn" href="{:url('invoice/index',array('order_sn'=>$vo['order_sn']))}">开发票</a>
|
||||
{/eq}
|
||||
{/eq}
|
||||
</div>
|
||||
</article>
|
||||
{/volist}
|
||||
</div>
|
||||
|
||||
{empty name="order_list"}
|
||||
<div class="empty-state">
|
||||
<div>暂无订单记录</div>
|
||||
<a class="account-btn" href="{:url('visa/index')}">去登记</a>
|
||||
</div>
|
||||
{/empty}
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{include file="public/newfooter" /}
|
||||
</body>
|
||||
</html>
|
||||
273
app/home/view/user/invoice.html
Normal file
273
app/home/view/user/invoice.html
Normal file
@@ -0,0 +1,273 @@
|
||||
{include file="public/head" /}
|
||||
<style>
|
||||
body.user-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #f5f7fb;
|
||||
}
|
||||
|
||||
.user-main {
|
||||
flex: 1;
|
||||
padding: 32px 0 52px;
|
||||
}
|
||||
|
||||
.account-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 240px minmax(0, 1fr);
|
||||
gap: 18px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.account-nav,
|
||||
.account-panel {
|
||||
background: #fff;
|
||||
border: 1px solid rgba(15, 23, 42, .08);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.account-nav__title,
|
||||
.account-panel__title {
|
||||
background: var(--main-color);
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
line-height: 50px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.account-nav__link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
height: 50px;
|
||||
padding: 0 18px;
|
||||
color: #263241;
|
||||
border-bottom: 1px solid #eef1f5;
|
||||
text-decoration: none;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.account-nav__link:hover,
|
||||
.account-nav__link.is-active {
|
||||
color: var(--main-color);
|
||||
background: rgba(21, 56, 84, .06);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.account-panel__body {
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.invoice-tip {
|
||||
margin: 0 0 20px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid rgba(149, 30, 20, .16);
|
||||
border-radius: 6px;
|
||||
color: #951e14;
|
||||
background: rgba(149, 30, 20, .05);
|
||||
line-height: 1.7;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.invoice-tip a {
|
||||
color: var(--main-color);
|
||||
font-weight: 800;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.invoice-form .layui-form-label {
|
||||
display: block;
|
||||
float: none;
|
||||
width: auto;
|
||||
padding: 0 0 7px;
|
||||
color: #1f2937;
|
||||
text-align: left;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.invoice-form .layui-form-label span {
|
||||
color: #e53935;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.invoice-form .layui-input-block {
|
||||
margin-left: 0;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.invoice-form .layui-input {
|
||||
height: 50px;
|
||||
border: 1px solid #d8dee8;
|
||||
border-radius: 4px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.invoice-form .layui-input:focus {
|
||||
border-color: var(--main-color) !important;
|
||||
box-shadow: 0 0 0 3px rgba(21, 56, 84, .08);
|
||||
}
|
||||
|
||||
.invoice-form .layui-btn {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
border-radius: 6px;
|
||||
background: var(--main-color);
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.user-main {
|
||||
padding: 20px 12px 36px;
|
||||
}
|
||||
|
||||
.account-layout {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.account-nav {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.account-nav__title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.account-nav__link {
|
||||
justify-content: center;
|
||||
padding: 0 8px;
|
||||
font-size: 14px;
|
||||
border-right: 1px solid #eef1f5;
|
||||
}
|
||||
|
||||
.account-panel__body {
|
||||
padding: 18px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body class="user-page">
|
||||
{include file="public/newnav" /}
|
||||
|
||||
<main class="user-main">
|
||||
<div class="layui-container">
|
||||
<div class="account-layout">
|
||||
<aside class="account-nav">
|
||||
<div class="account-nav__title">个人中心</div>
|
||||
<a href="{:url('user/index')}" class="account-nav__link">
|
||||
<i class="bi bi-receipt"></i><span>我的订单</span>
|
||||
</a>
|
||||
<a href="{:url('user/invoice')}" class="account-nav__link is-active">
|
||||
<i class="bi bi-file-earmark-text"></i><span>自助开票</span>
|
||||
</a>
|
||||
<a href="{:url('user/multiple')}" class="account-nav__link">
|
||||
<i class="bi bi-files"></i><span>合并开票</span>
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<section class="account-panel">
|
||||
<div class="account-panel__title">自助开票</div>
|
||||
<div class="account-panel__body">
|
||||
<p class="invoice-tip">
|
||||
适用于单个订单开票。多个订单请使用
|
||||
<a href="{:url('user/multiple')}">合并开票</a>
|
||||
</p>
|
||||
|
||||
<form class="layui-form invoice-form" id="lookupform" name="form1" autocomplete="off">
|
||||
<div class="layui-row layui-col-space24">
|
||||
<div class="layui-col-xs12 layui-col-md6">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label" for="passport_number">护照号码<span>*</span></label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" id="passport_number" name="passport_number"
|
||||
maxlength="9" minlength="9" lay-verify="required"
|
||||
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="order_sn">订单号<span>*</span></label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" id="order_sn" name="order_sn" lay-verify="required"
|
||||
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="last_name">姓氏<span>*</span></label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" id="last_name" name="last_name" maxlength="45"
|
||||
lay-verify="required|englishName" 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="first_name">名字<span>*</span></label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" id="first_name" name="first_name" maxlength="40"
|
||||
lay-verify="required|englishName" placeholder="填写名字拼音"
|
||||
class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="layui-col-xs12">
|
||||
<button class="layui-btn layui-btn-fluid" lay-submit lay-filter="invoiceSubmit">提交</button>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{include file="public/newfooter" /}
|
||||
<script>
|
||||
layui.use(function () {
|
||||
var $ = layui.$;
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
|
||||
form.verify({
|
||||
englishName: [/^[A-Za-z]+$/, '请填写英文拼音']
|
||||
});
|
||||
|
||||
form.on('submit(invoiceSubmit)', function () {
|
||||
var index1;
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: "{:url('user/checkInvoice')}",
|
||||
data: $('#lookupform').serialize(),
|
||||
beforeSend: function () {
|
||||
index1 = layer.load(1, {shade: [0.3, '#fff']});
|
||||
},
|
||||
success: function (data) {
|
||||
layer.close(index1);
|
||||
if (data.status == 1) {
|
||||
layer.msg('查询成功');
|
||||
window.location.href = data.url;
|
||||
} else {
|
||||
layer.msg(data.msg);
|
||||
}
|
||||
},
|
||||
error: function () {
|
||||
layer.close(index1);
|
||||
layer.msg('请求失败,请稍后重试');
|
||||
}
|
||||
});
|
||||
|
||||
return false;
|
||||
});
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
368
app/home/view/user/login.html
Normal file
368
app/home/view/user/login.html
Normal file
@@ -0,0 +1,368 @@
|
||||
{include file="public/head" /}
|
||||
<style>
|
||||
body.login-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #f5f7fb;
|
||||
}
|
||||
|
||||
.login-main {
|
||||
flex: 1;
|
||||
padding: 42px 0 56px;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
max-width: 520px;
|
||||
margin: 0 auto;
|
||||
background: #fff;
|
||||
border: 1px solid rgba(15, 23, 42, .08);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, .08);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.login-card__hd {
|
||||
background: var(--main-color);
|
||||
color: #fff;
|
||||
padding: 18px 24px;
|
||||
}
|
||||
|
||||
.login-card__hd h1 {
|
||||
margin: 0;
|
||||
font-size: 22px;
|
||||
font-weight: 800;
|
||||
line-height: 1.35;
|
||||
letter-spacing: 0;
|
||||
}
|
||||
|
||||
.login-card__hd p {
|
||||
margin: 6px 0 0;
|
||||
color: rgba(255, 255, 255, .76);
|
||||
font-size: 13px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.login-form {
|
||||
padding: 28px 24px 26px;
|
||||
}
|
||||
|
||||
.login-form .layui-form-item {
|
||||
margin-bottom: 18px;
|
||||
}
|
||||
|
||||
.login-form .layui-input-wrap {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.login-form .layui-input {
|
||||
height: 50px;
|
||||
border: 1px solid #d8dee8;
|
||||
border-radius: 4px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.login-form .layui-input:focus {
|
||||
border-color: var(--main-color) !important;
|
||||
box-shadow: 0 0 0 3px rgba(21, 56, 84, .08);
|
||||
}
|
||||
|
||||
.login-code-row {
|
||||
display: grid;
|
||||
grid-template-columns: minmax(0, 1fr) 148px;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.login-get {
|
||||
width: 100%;
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
padding: 0 12px;
|
||||
border-radius: 4px;
|
||||
border-color: var(--main-color);
|
||||
color: var(--main-color);
|
||||
background: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.login-get:hover,
|
||||
.login-get:focus {
|
||||
border-color: var(--main-color);
|
||||
color: var(--main-color);
|
||||
background: rgba(21, 56, 84, .06);
|
||||
}
|
||||
|
||||
.login-get[disabled] {
|
||||
border-color: #d8dee8 !important;
|
||||
color: #9aa3af !important;
|
||||
background: #f6f7f9 !important;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.login-submit {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
border-radius: 6px;
|
||||
background: var(--main-color);
|
||||
border-color: var(--main-color);
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.login-submit:hover,
|
||||
.login-submit:focus {
|
||||
background: #0f2b42;
|
||||
border-color: #0f2b42;
|
||||
}
|
||||
|
||||
.login-agreement {
|
||||
margin-top: 2px;
|
||||
color: #475569;
|
||||
font-size: 13px;
|
||||
line-height: 1.7;
|
||||
}
|
||||
|
||||
.login-agreement a {
|
||||
color: var(--main-color);
|
||||
font-weight: 700;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.login-agreement a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.layui-form-checked[lay-skin=primary] > i {
|
||||
border-color: var(--main-color) !important;
|
||||
background-color: var(--main-color);
|
||||
color: #fff;
|
||||
}
|
||||
|
||||
.login-terms {
|
||||
padding: 20px;
|
||||
max-height: 70vh;
|
||||
overflow-y: auto;
|
||||
color: #333;
|
||||
line-height: 1.8;
|
||||
}
|
||||
|
||||
.login-terms h3 {
|
||||
margin: 10px 0 8px;
|
||||
color: var(--main-color);
|
||||
font-size: 18px;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.login-terms p {
|
||||
margin: 0 0 10px;
|
||||
font-size: 13px;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.login-main {
|
||||
padding: 24px 12px 36px;
|
||||
}
|
||||
|
||||
.login-card__hd,
|
||||
.login-form {
|
||||
padding-left: 18px;
|
||||
padding-right: 18px;
|
||||
}
|
||||
|
||||
.login-code-row {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 10px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body class="login-page">
|
||||
{include file="public/newnav" /}
|
||||
|
||||
<main class="login-main">
|
||||
<div class="layui-container">
|
||||
<section class="login-card">
|
||||
<div class="login-card__hd">
|
||||
<h1>用户登录</h1>
|
||||
<p>使用手机号验证码登录后,可查看订单进度和已提交的申请信息。</p>
|
||||
</div>
|
||||
|
||||
<form class="layui-form login-form" autocomplete="off">
|
||||
<div class="layui-form-item">
|
||||
<div class="login-code-row">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-cellphone"></i>
|
||||
</div>
|
||||
<input type="text" name="phone" value="" lay-verify="required|phone"
|
||||
placeholder="{:lang('visa.phone_placeholder')}"
|
||||
lay-reqtext="{:lang('visa.phone_placeholder')}" autocomplete="off"
|
||||
class="layui-input" id="reg-cellphone">
|
||||
</div>
|
||||
<input class="login-get layui-btn layui-btn-primary" type="button"
|
||||
id="getcode" value="获取验证码" lay-on="reg-get-vercode">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item">
|
||||
<div class="layui-input-wrap">
|
||||
<div class="layui-input-prefix">
|
||||
<i class="layui-icon layui-icon-vercode"></i>
|
||||
</div>
|
||||
<input type="text" name="vercode" value="" lay-verify="required"
|
||||
placeholder="{:lang('contact.yzm')}" lay-reqtext="请填写验证码"
|
||||
autocomplete="off" class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item login-agreement">
|
||||
<input type="checkbox" lay-filter="termsCheckbox" name="agreement" lay-skin="primary"
|
||||
title="{:lang('visa.terms_acceptance')}" checked
|
||||
lay-verify="required|checkboxRequired">
|
||||
</div>
|
||||
|
||||
<div class="layui-form-item" style="margin-bottom: 0;">
|
||||
<button class="layui-btn layui-btn-fluid login-submit" lay-submit lay-filter="demo-reg">登录</button>
|
||||
</div>
|
||||
</form>
|
||||
</section>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{include file="public/newfooter" /}
|
||||
|
||||
<script>
|
||||
layui.use(function () {
|
||||
var $ = layui.$;
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
var util = layui.util;
|
||||
var wait = 60;
|
||||
var timer = null;
|
||||
|
||||
form.verify({
|
||||
checkboxRequired: function () {
|
||||
if (!$('input[name="agreement"]').prop('checked')) {
|
||||
return '请先阅读并接受《条款与条件》及《隐私政策》';
|
||||
}
|
||||
}
|
||||
});
|
||||
|
||||
function getLayerArea() {
|
||||
return window.innerWidth <= 768 ? ['90%', '90%'] : ['50%', '60%'];
|
||||
}
|
||||
|
||||
function openTermsDialog() {
|
||||
layer.open({
|
||||
type: 1,
|
||||
title: '{:lang(\'js.terms_privacy_title\')}',
|
||||
area: getLayerArea(),
|
||||
btn: ['关闭'],
|
||||
content: `
|
||||
<div class="login-terms">
|
||||
<h3>{:lang('js.terms_conditions')}</h3>
|
||||
<p>{:str_replace('%country%', $country ?? '', lang('js.terms_intro'))}</p>
|
||||
<p>{:str_replace('%country%', $country ?? '', lang('js.our_services'))}</p>
|
||||
<p>{:str_replace('%country%', $country ?? '', lang('js.application_process'))}</p>
|
||||
<p>{:lang('js.read_confirmation')}</p>
|
||||
|
||||
<h3>{:lang('js.privacy_policy')}</h3>
|
||||
<p>{:lang('js.privacy_intro')}</p>
|
||||
<h3>1. {:lang('js.scope')}</h3>
|
||||
<p>{:lang('js.scope_content')}</p>
|
||||
<h3>2. {:lang('js.information_use')}</h3>
|
||||
<p>{:lang('js.information_use_content')}</p>
|
||||
<h3>3. {:lang('js.information_disclosure')}</h3>
|
||||
<p>{:lang('js.information_disclosure_content')}</p>
|
||||
<h3>4. {:lang('js.information_storage')}</h3>
|
||||
<p>{:lang('js.information_storage_content')}</p>
|
||||
<h3>5. {:lang('js.cookie_use')}</h3>
|
||||
<p>{:lang('js.cookie_use_content')}</p>
|
||||
<h3>6. {:lang('js.information_security')}</h3>
|
||||
<p>{:lang('js.information_security_content')}</p>
|
||||
<h3>7. {:lang('js.policy_changes')}</h3>
|
||||
<p>{:lang('js.policy_changes_content')}</p>
|
||||
</div>
|
||||
`
|
||||
});
|
||||
}
|
||||
|
||||
form.on('checkbox(termsCheckbox)', function (data) {
|
||||
if (data.elem.checked) {
|
||||
openTermsDialog();
|
||||
}
|
||||
});
|
||||
|
||||
form.on('submit(demo-reg)', function (data) {
|
||||
if (!data.field.agreement) {
|
||||
layer.msg('请先阅读并接受《条款与条件》及《隐私政策》', {icon: 2});
|
||||
return false;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
url: '/home/login/login',
|
||||
type: 'post',
|
||||
data: data.field,
|
||||
success: function (res) {
|
||||
if (res.code == 1) {
|
||||
layer.msg('登录成功', {icon: 1}, function () {
|
||||
window.location.href = res.url;
|
||||
});
|
||||
} else {
|
||||
layer.msg(res.msg, {icon: 2});
|
||||
}
|
||||
},
|
||||
error: function () {
|
||||
layer.msg('请求失败,请稍后重试', {icon: 2});
|
||||
}
|
||||
});
|
||||
return false;
|
||||
});
|
||||
|
||||
function settime() {
|
||||
var $code = $('#getcode');
|
||||
|
||||
if (wait <= 0) {
|
||||
$code.removeAttr('disabled').val('获取验证码');
|
||||
wait = 60;
|
||||
timer = null;
|
||||
return;
|
||||
}
|
||||
|
||||
$code.prop('disabled', true).val('重新发送 ' + wait + 's');
|
||||
wait--;
|
||||
timer = setTimeout(settime, 1000);
|
||||
}
|
||||
|
||||
util.on('lay-on', {
|
||||
'reg-get-vercode': function () {
|
||||
var isvalid = form.validate('#reg-cellphone');
|
||||
|
||||
if (isvalid) {
|
||||
$.ajax({
|
||||
url: '/home/login/login_code',
|
||||
type: 'POST',
|
||||
data: {mobile: $('#reg-cellphone').val()},
|
||||
dataType: 'json',
|
||||
success: function (data) {
|
||||
if (data.code == 1) {
|
||||
if (timer) {
|
||||
clearTimeout(timer);
|
||||
}
|
||||
wait = 60;
|
||||
settime();
|
||||
} else {
|
||||
layer.msg(data.msg, {icon: 2});
|
||||
}
|
||||
},
|
||||
error: function () {
|
||||
layer.msg('验证码发送失败,请稍后重试', {icon: 2});
|
||||
}
|
||||
});
|
||||
}
|
||||
}
|
||||
});
|
||||
});
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
387
app/home/view/user/multiple.html
Normal file
387
app/home/view/user/multiple.html
Normal file
@@ -0,0 +1,387 @@
|
||||
{include file="public/head" /}
|
||||
<style>
|
||||
body.user-page {
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
background: #f5f7fb;
|
||||
}
|
||||
|
||||
.user-main {
|
||||
flex: 1;
|
||||
padding: 32px 0 52px;
|
||||
}
|
||||
|
||||
.account-layout {
|
||||
display: grid;
|
||||
grid-template-columns: 240px minmax(0, 1fr);
|
||||
gap: 18px;
|
||||
align-items: start;
|
||||
}
|
||||
|
||||
.account-nav,
|
||||
.account-panel {
|
||||
background: #fff;
|
||||
border: 1px solid rgba(15, 23, 42, .08);
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 8px 24px rgba(15, 23, 42, .06);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.account-nav__title,
|
||||
.account-panel__title {
|
||||
background: var(--main-color);
|
||||
color: #fff;
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
line-height: 50px;
|
||||
padding: 0 20px;
|
||||
}
|
||||
|
||||
.account-nav__link {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 9px;
|
||||
height: 50px;
|
||||
padding: 0 18px;
|
||||
color: #263241;
|
||||
border-bottom: 1px solid #eef1f5;
|
||||
text-decoration: none;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.account-nav__link:hover,
|
||||
.account-nav__link.is-active {
|
||||
color: var(--main-color);
|
||||
background: rgba(21, 56, 84, .06);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.account-panel__body {
|
||||
padding: 22px;
|
||||
}
|
||||
|
||||
.invoice-tip {
|
||||
margin: 0 0 20px;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid rgba(149, 30, 20, .16);
|
||||
border-radius: 6px;
|
||||
color: #951e14;
|
||||
background: rgba(149, 30, 20, .05);
|
||||
line-height: 1.7;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.invoice-tip a {
|
||||
color: var(--main-color);
|
||||
font-weight: 800;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.invoice-row {
|
||||
position: relative;
|
||||
margin-bottom: 16px;
|
||||
padding: 18px;
|
||||
border: 1px solid #dfe5ee;
|
||||
border-radius: 8px;
|
||||
background: #fff;
|
||||
}
|
||||
|
||||
.invoice-row__actions {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
gap: 10px;
|
||||
margin-top: 4px;
|
||||
}
|
||||
|
||||
.invoice-action {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
color: var(--main-color);
|
||||
cursor: pointer;
|
||||
font-weight: 800;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.invoice-action.is-danger {
|
||||
color: #951e14;
|
||||
}
|
||||
|
||||
.invoice-form .layui-form-label {
|
||||
display: block;
|
||||
float: none;
|
||||
width: auto;
|
||||
padding: 0 0 7px;
|
||||
color: #1f2937;
|
||||
text-align: left;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
.invoice-form .layui-form-label span {
|
||||
color: #e53935;
|
||||
margin-left: 3px;
|
||||
}
|
||||
|
||||
.invoice-form .layui-input-block {
|
||||
margin-left: 0;
|
||||
min-height: auto;
|
||||
}
|
||||
|
||||
.invoice-form .layui-input {
|
||||
height: 50px;
|
||||
border: 1px solid #d8dee8;
|
||||
border-radius: 4px;
|
||||
font-size: 15px;
|
||||
}
|
||||
|
||||
.invoice-form .layui-input:focus {
|
||||
border-color: var(--main-color) !important;
|
||||
box-shadow: 0 0 0 3px rgba(21, 56, 84, .08);
|
||||
}
|
||||
|
||||
.invoice-submit {
|
||||
height: 50px;
|
||||
line-height: 50px;
|
||||
border-radius: 6px;
|
||||
background: var(--main-color);
|
||||
font-size: 17px;
|
||||
font-weight: 800;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.user-main {
|
||||
padding: 20px 12px 36px;
|
||||
}
|
||||
|
||||
.account-layout {
|
||||
grid-template-columns: 1fr;
|
||||
gap: 12px;
|
||||
}
|
||||
|
||||
.account-nav {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(3, minmax(0, 1fr));
|
||||
}
|
||||
|
||||
.account-nav__title {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.account-nav__link {
|
||||
justify-content: center;
|
||||
padding: 0 8px;
|
||||
font-size: 14px;
|
||||
border-right: 1px solid #eef1f5;
|
||||
}
|
||||
|
||||
.account-panel__body {
|
||||
padding: 18px;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
<body class="user-page">
|
||||
{include file="public/newnav" /}
|
||||
|
||||
<main class="user-main">
|
||||
<div class="layui-container">
|
||||
<div class="account-layout">
|
||||
<aside class="account-nav">
|
||||
<div class="account-nav__title">个人中心</div>
|
||||
<a href="{:url('user/index')}" class="account-nav__link">
|
||||
<i class="bi bi-receipt"></i><span>我的订单</span>
|
||||
</a>
|
||||
<a href="{:url('user/invoice')}" class="account-nav__link">
|
||||
<i class="bi bi-file-earmark-text"></i><span>自助开票</span>
|
||||
</a>
|
||||
<a href="{:url('user/multiple')}" class="account-nav__link is-active">
|
||||
<i class="bi bi-files"></i><span>合并开票</span>
|
||||
</a>
|
||||
</aside>
|
||||
|
||||
<section class="account-panel">
|
||||
<div class="account-panel__title">合并开票</div>
|
||||
<div class="account-panel__body">
|
||||
<p class="invoice-tip">
|
||||
适用于多个订单合并开票。单个订单请使用
|
||||
<a href="{:url('user/invoice')}">自助开票</a>
|
||||
</p>
|
||||
|
||||
<form class="layui-form invoice-form" id="lookupform" name="form1" autocomplete="off">
|
||||
<div id="invoiceRows">
|
||||
<div class="invoice-row">
|
||||
<div class="layui-row layui-col-space24">
|
||||
<div class="layui-col-xs12 layui-col-md6">
|
||||
<div class="layui-form-item">
|
||||
<label class="layui-form-label">护照号码<span>*</span></label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="passport_number" maxlength="9" minlength="9"
|
||||
lay-verify="required" 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">订单号<span>*</span></label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="order_sn" lay-verify="required"
|
||||
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">姓氏<span>*</span></label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="last_name" maxlength="45"
|
||||
lay-verify="required|englishName" 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">名字<span>*</span></label>
|
||||
<div class="layui-input-block">
|
||||
<input type="text" name="first_name" maxlength="40"
|
||||
lay-verify="required|englishName" placeholder="填写名字拼音"
|
||||
class="layui-input">
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="invoice-row__actions">
|
||||
<span class="invoice-action js-add-row"><i class="layui-icon layui-icon-add-circle"></i>添加</span>
|
||||
<span class="invoice-action is-danger js-remove-row"><i class="layui-icon layui-icon-reduce-circle"></i>删除</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<button class="layui-btn layui-btn-fluid invoice-submit" lay-submit lay-filter="multipleSubmit">提交</button>
|
||||
</form>
|
||||
</div>
|
||||
</section>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
|
||||
{include file="public/newfooter" /}
|
||||
<script>
|
||||
layui.use(function () {
|
||||
var $ = layui.$;
|
||||
var form = layui.form;
|
||||
var layer = layui.layer;
|
||||
|
||||
form.verify({
|
||||
englishName: [/^[A-Za-z]+$/, '请填写英文拼音']
|
||||
});
|
||||
|
||||
function refreshRemoveButtons() {
|
||||
var $rows = $('#invoiceRows .invoice-row');
|
||||
$rows.find('.js-remove-row').toggle($rows.length > 1);
|
||||
}
|
||||
|
||||
function getRowData($row) {
|
||||
return {
|
||||
passport_number: $.trim($row.find("input[name='passport_number']").val()),
|
||||
order_sn: $.trim($row.find("input[name='order_sn']").val()),
|
||||
last_name: $.trim($row.find("input[name='last_name']").val()),
|
||||
first_name: $.trim($row.find("input[name='first_name']").val())
|
||||
};
|
||||
}
|
||||
|
||||
function validateRow($row) {
|
||||
var data = getRowData($row);
|
||||
|
||||
if (!data.passport_number) {
|
||||
layer.msg('请输入护照号');
|
||||
return false;
|
||||
}
|
||||
if (!data.order_sn) {
|
||||
layer.msg('请输入订单号');
|
||||
return false;
|
||||
}
|
||||
if (!data.last_name) {
|
||||
layer.msg('请输入姓氏');
|
||||
return false;
|
||||
}
|
||||
if (!data.first_name) {
|
||||
layer.msg('请输入名字');
|
||||
return false;
|
||||
}
|
||||
if (!/^[A-Za-z]+$/.test(data.last_name) || !/^[A-Za-z]+$/.test(data.first_name)) {
|
||||
layer.msg('请填写英文拼音');
|
||||
return false;
|
||||
}
|
||||
|
||||
return true;
|
||||
}
|
||||
|
||||
$(document).on('click', '.js-add-row', function () {
|
||||
var $row = $(this).closest('.invoice-row');
|
||||
|
||||
if (!validateRow($row)) {
|
||||
return false;
|
||||
}
|
||||
|
||||
var $newRow = $row.clone(false, false);
|
||||
$newRow.find('input').val('');
|
||||
$('#invoiceRows').append($newRow);
|
||||
refreshRemoveButtons();
|
||||
});
|
||||
|
||||
$(document).on('click', '.js-remove-row', function () {
|
||||
$(this).closest('.invoice-row').remove();
|
||||
refreshRemoveButtons();
|
||||
});
|
||||
|
||||
form.on('submit(multipleSubmit)', function () {
|
||||
var datas = [];
|
||||
var isValid = true;
|
||||
var index1;
|
||||
|
||||
$('#invoiceRows .invoice-row').each(function () {
|
||||
var $row = $(this);
|
||||
|
||||
if (!validateRow($row)) {
|
||||
isValid = false;
|
||||
return false;
|
||||
}
|
||||
|
||||
datas.push(getRowData($row));
|
||||
});
|
||||
|
||||
if (!isValid) {
|
||||
return false;
|
||||
}
|
||||
|
||||
$.ajax({
|
||||
type: 'POST',
|
||||
url: "{:url('user/checkMultiple')}",
|
||||
data: {datas: JSON.stringify(datas)},
|
||||
beforeSend: function () {
|
||||
index1 = layer.load(1, {shade: [0.3, '#fff']});
|
||||
},
|
||||
success: function (data) {
|
||||
layer.close(index1);
|
||||
if (data.status == 1) {
|
||||
layer.msg('查询成功');
|
||||
window.location.href = data.url;
|
||||
} else {
|
||||
layer.msg(data.msg);
|
||||
}
|
||||
},
|
||||
error: function () {
|
||||
layer.close(index1);
|
||||
layer.msg('请求失败,请稍后重试');
|
||||
}
|
||||
});
|
||||
|
||||
return false;
|
||||
});
|
||||
|
||||
refreshRemoveButtons();
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user