签入版本

This commit is contained in:
2026-09-10 21:41:50 +08:00
commit 717116a605
2693 changed files with 355025 additions and 0 deletions
@@ -0,0 +1,735 @@
<!DOCTYPE html>
<html lang="en">
<!-- 引入头部 -->
<header th:replace="~{./public/header :: header}"></header>
<style>
.ew-banner {
max-width: 100vw;
overflow: hidden;
background: #fff;
color: #333;
position: relative;
}
.ew-banner:before {
display: none;
}
.ew-banner p {
color: #999;
}
.ew-banner img.shape {
-webkit-animation-duration: 5s;
animation-duration: 5s;
}
.ew-banner img {
pointer-events: none;
}
@media screen and (max-width: 768px) {
img.shape-main {
width: 90% !important;
max-width: 370px !important;
right: 15px !important;
top: 30px !important;
}
.ew-banner > .layui-container {
padding-top: 320px;
padding-bottom: 20px !important;
padding-right: 20px !important;
}
img.shape6 {
top: 510px !important;
}
img.shape4 {
left: 5px !important;
bottom: 300px !important;
}
.layui-logo > img {
top: 12px !important;
}
.ew-footer .img-group {
padding-left: 100px !important;
height: 103px !important;
}
.ew-footer .img-group > img {
width: 90px !important;
height: 90px !important;
top: 7px !important;
}
}
/* ========== 全部产品板块 ========== */
.xm-product-section {
padding-bottom: 60px;
}
.xm-product-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(300px, 1fr));
gap: 28px;
}
.xm-product-card {
background: #ffffff;
border-radius: 16px;
box-shadow: 0 4px 20px rgba(0, 20, 50, 0.05);
transition: all 0.3s ease;
overflow: hidden;
display: flex;
flex-direction: column;
border: 1px solid #f0f3fa;
position: relative;
}
.xm-product-card:hover {
transform: translateY(-6px);
box-shadow: 0 16px 32px rgba(0, 20, 50, 0.10);
border-color: #d9e2f0;
}
/* 右上角标签 */
.xm-card-badge {
position: absolute;
top: 14px;
right: 14px;
z-index: 5;
font-size: 12px;
font-weight: 600;
padding: 3px 14px;
border-radius: 40px;
letter-spacing: 0.5px;
color: #fff;
backdrop-filter: blur(2px);
border: 1px solid rgba(255,255,255,0.3);
text-transform: uppercase;
line-height: 1.6;
}
.xm-badge-hot { background: #ff6b4a; box-shadow: 0 3px 10px rgba(255,107,74,0.3); }
.xm-badge-new { background: #2a7de1; box-shadow: 0 3px 10px rgba(42,125,225,0.3); }
.xm-badge-flagship { background: #9b6bff; box-shadow: 0 3px 10px rgba(155,107,255,0.3); }
.xm-badge-recommend { background: #00b894; box-shadow: 0 3px 10px rgba(0,184,148,0.3); }
.xm-badge-vip { background: #f9a825; box-shadow: 0 3px 10px rgba(249,168,37,0.3); }
/* 卡片封面 */
.xm-card-image {
background: linear-gradient(145deg, #f0f5ff, #e6edf9);
padding: 24px 20px 14px;
text-align: center;
min-height: 140px;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
border-bottom: 1px solid #ecf1f9;
position: relative;
overflow: hidden;
}
.xm-card-image .xm-cover-img {
width: 100%;
height: 100%;
background-repeat: no-repeat;
background-position: center;
background-size: cover;
position: absolute;
top: 0; left: 0;
transition: transform 0.4s ease;
}
.xm-product-card:hover .xm-cover-img {
transform: scale(1.08);
}
.xm-card-image .xm-platform-icon {
font-size: 36px;
color: #1f3a6b;
opacity: 0.6;
position: relative;
z-index: 1;
}
.xm-card-image .xm-product-type {
font-size: 13px;
font-weight: 500;
color: #1f3a6b;
background: rgba(255,255,255,0.8);
display: inline-block;
padding: 3px 16px;
border-radius: 40px;
backdrop-filter: blur(4px);
margin-top: 8px;
position: relative;
z-index: 1;
}
/* 卡片内容 */
.xm-card-body {
padding: 18px 20px 16px;
flex: 1;
display: flex;
flex-direction: column;
}
.xm-card-body .xm-product-title {
font-size: 17px;
font-weight: 600;
color: #0b1a33;
margin-bottom: 6px;
line-height: 1.3;
}
.xm-card-body .xm-product-sub {
font-size: 13px;
color: #65748c;
margin-bottom: 10px;
line-height: 1.5;
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
}
.xm-card-body .xm-product-desc {
font-size: 13px;
color: #4a5a72;
line-height: 1.65;
margin-bottom: 14px;
flex: 1;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
}
/* 卡片底部 */
.xm-card-footer {
display: flex;
justify-content: space-between;
align-items: center;
border-top: 1px solid #eef2f8;
padding-top: 14px;
margin-top: 4px;
flex-wrap: wrap;
gap: 10px;
}
.xm-price {
font-size: 20px;
font-weight: 700;
color: #0b1a33;
}
.xm-price small {
font-size: 13px;
font-weight: 400;
color: #8b9ab5;
margin-left: 2px;
}
.xm-btn-group {
display: flex;
gap: 8px;
}
.xm-btn {
border: none;
background: transparent;
padding: 6px 14px;
border-radius: 40px;
font-size: 13px;
font-weight: 500;
cursor: pointer;
transition: all 0.2s;
text-decoration: none;
display: inline-flex;
align-items: center;
gap: 5px;
}
.xm-btn-primary {
background: #1f3a6b;
color: #fff;
box-shadow: 0 3px 10px rgba(31,58,107,0.15);
}
.xm-btn-primary:hover {
background: #16305a;
box-shadow: 0 5px 14px rgba(31,58,107,0.25);
}
.xm-btn-outline {
background: transparent;
color: #1f3a6b;
border: 1px solid #d0dbea;
}
.xm-btn-outline:hover {
background: #f0f5ff;
border-color: #b0c4e0;
}
/* 响应式 */
@media (max-width: 768px) {
.xm-product-grid {
grid-template-columns: 1fr;
gap: 20px;
}
.xm-card-badge {
font-size: 10px;
padding: 2px 10px;
top: 10px;
right: 10px;
}
}
@media (max-width: 480px) {
.xm-card-footer {
flex-direction: column;
align-items: stretch;
}
.xm-btn-group {
justify-content: flex-end;
}
}
.layer-get-code > .lay-code-group > button {
position: absolute;
right: 0;
top: 0;
height: 46px;
width: 120px;
border: 1px solid rgba(111, 121, 122, 0.3);
box-sizing: border-box;
cursor: pointer;
}
</style>
<body>
<!-- header -->
<div th:replace="~{./public/common_header::common_header}"></div>
<!-- banner -->
<div class="ew-banner" style="margin-top: 15px;">
<div class="layui-container" style="text-align: left;padding-bottom: 80px;padding-left: 30px;">
<h1 style="margin-top: 25px;">小蚂蚁云企业级中台解决方案</h1>
<p style="margin-bottom: 10px;">基于 Python 语言的企业级Web应用敏捷开发框架。</p>
<p>为企业、政府及开发者提供从架构到部署的应用平台解决方案;</p>
<div class="ew-banner-btngroup" style="margin-top: 40px;">
<button class="layui-btn" nav-scroll="pricing">获取授权<i class="layui-icon" style="transform: rotate(-90deg);">&#xe601;</i>
</button>
<a href="/doc/" class="layui-btn" target="_blank" style="display: none;">更新日志<i
class="layui-icon">&#xe702;</i></a>
</div>
<img class="shape-main" th:src="@{/static/assets/images/b1.png}"
style="width: 520px;position: absolute;top:5px;right: -60px;"/>
<img class="shape layui-anim-rotate layui-anim-loop" th:src="@{/static/assets/images/shape1.png}"
style="position: absolute;right: -120px;top: 260px;"/>
<img class="shape layui-anim-rotate layui-anim-loop" th:src="@{/static/assets/images/shape2.png}"
style="position: absolute;right: 560px;top: 60px;"/>
<img class="shape layui-anim-rotate layui-anim-loop" th:src="@{/static/assets/images/shape3.png}"
style="position: absolute;right: 10px;top: 30px;"/>
<img class="shape shape4 layui-anim-rotate layui-anim-loop" th:src="@{/static/assets/images/shape4.png}"
style="position: absolute;left: -60px;bottom: 100px;"/>
<img class="shape layui-anim-rotate layui-anim-loop" th:src="@{/static/assets/images/shape5.png}"
style="position: absolute;left: -120px;top: 100px;"/>
<img class="shape shape6 layui-anim-rotate layui-anim-loop" th:src="@{/static/assets/images/shape6.png}"
style="position: absolute;left: 300px;top: 400px;"/>
</div>
</div>
<!-- feature -->
<div class="section" style="padding-bottom: 15px;margin-top: 15px;">
<div class="section-title">
<h2>产品优势</h2>
<p>竭诚为用户提供全方位的解决方案</p>
</div>
<div class="layui-container">
<div class="layui-row">
<div class="layui-col-md4 layui-col-sm6">
<div class="feature">
<i class="layui-icon layui-icon-fonts-code"></i>
<h3>源码可控</h3>
<p>源码注释详细,便于阅读与二开</p>
<p>代码无后门,安全可信赖</p>
<p>提供标准化API接口,易于扩展</p>
</div>
</div>
<div class="layui-col-md4 layui-col-sm6">
<div class="feature">
<i class="layui-icon layui-icon-app"></i>
<h3>功能完善</h3>
<p>集成用户、权限、日志等20+基础模块</p>
<p>内置RBAC权限,精细化按钮级控制</p>
<p>配备代码生成器,一键生成CRUD模块</p>
</div>
</div>
<div class="layui-col-md4 layui-col-sm6">
<div class="feature">
<i class="layui-icon layui-icon-cellphone"></i>
<h3>多端适配</h3>
<p>响应式布局,自动适配不同屏幕尺寸</p>
<p>覆盖手机、平板、桌面电脑全终端</p>
<p>兼容Chrome、Firefox、Edge等浏览器</p>
</div>
</div>
<div class="layui-col-md4 layui-col-sm6">
<div class="feature">
<i class="layui-icon layui-icon-praise"></i>
<h3>上手容易</h3>
<p>完善的开发文档,快速完成部署</p>
<p>开箱即用,敏捷开发,降低编码成本</p>
<p>授权用户享1V1专属技术支持服务</p>
</div>
</div>
<div class="layui-col-md4 layui-col-sm6">
<div class="feature">
<i class="layui-icon layui-icon-rmb"></i>
<h3>灵活授权</h3>
<p>一年授权 / 永久授权可选,按需购买</p>
<p>授权期间版本持续免费升级</p>
<p>较同类产品节省70%+成本,性价比高</p>
</div>
</div>
<div class="layui-col-md4 layui-col-sm6">
<div class="feature">
<i class="layui-icon layui-icon-auz"></i>
<h3>售后保障</h3>
<p>5×8小时在线服务,问题及时响应</p>
<p>基于前沿技术栈,持续迭代升级</p>
<p>支持ElementPlus、AntDesign</p>
</div>
</div>
</div>
</div>
</div>
<!-- pricing -->
<div class="section" nav-id="pricing">
<div class="section-title">
<h2>产品价格</h2>
<p>选择需要授权的产品</p>
</div>
<div class="layui-container" style="padding-bottom: 45px;">
<div class="layui-row layui-col-space30">
<div class="layui-row layui-col-space30">
<div th:each="item,itemStat:${productList}" th:if="${item['id'] != 1}" class="layui-col-sm4">
<div class="pricing">
<div class="price-title" th:text="${item['productTitle']}"></div>
<div class="price"><span class="small">¥</span>[[${item['discountPrice']}]]</div>
<div th:if="${item['id']==2}" class="desc">组件丰富,生态成熟稳定</div>
<div th:if="${item['id']==3}" class="desc">设计优雅,企业级首选</div>
<div th:if="${item['id']==4}" class="desc">轻量高效,更现代化</div>
<ul th:if="${item['id']==2}" class="price-content">
<li class="active">基于Vue3、TypeScript、Vite构建</li>
<li class="active">集成ElementPlus,组件全面覆盖</li>
<li class="active">源码注释详细,便于二次扩展</li>
<li>响应式布局,自适应全屏幕尺寸</li>
<li>可灵活配置颜色,自由切换主题</li>
<li>版本持续更新,集大众之所需</li>
<li>完善的开发文档,助你快速掌握</li>
<li>提供授权本地部署专属服务,随时提问</li>
</ul>
<ul th:if="${item['id']==3}" class="price-content">
<li class="active">基于Vue3、TypeScript、Vite构建</li>
<li class="active">集成AntDesign,专业级组件库</li>
<li class="active">源码注释详细,便于二次扩展</li>
<li>响应式布局,自适应全屏幕尺寸</li>
<li>可灵活配置颜色,自由切换主题</li>
<li>版本持续更新,集大众之所需</li>
<li>完善的开发文档,助你快速掌握</li>
<li>提供授权本地部署专属服务,随时提问</li>
</ul>
<ul th:if="${item['id']==4}" class="price-content">
<li class="active">基于Vue3、TypeScript、Vite构建</li>
<li class="active">集成NaiveUI,时尚现代设计</li>
<li class="active">源码注释详细,便于二次扩展</li>
<li>响应式布局,自适应全屏幕尺寸</li>
<li>可灵活配置颜色,自由切换主题</li>
<li>版本持续更新,集大众之所需</li>
<li>完善的开发文档,助你快速掌握</li>
<li>提供授权本地部署专属服务,随时提问</li>
</ul>
<div class="price-btn">
<a th:href="'/goods/detail/'+${item['id']}" class="layui-btn layui-btn-radius layui-btn-lg">选择此版本</a>
<a href="tencent://message/?Menu=yes&uin=575073565" class="layui-btn layui-btn-radius layui-btn-lg" target="_blank">立即咨询</a>
</div>
</div>
</div>
</div>
</div>
<blockquote class="layui-elem-quote layui-text" style="margin-top: 35px;">
付费授权是为了产品更好的发展,提供更好的服务和技术支持,禁止恶意分享产品源代码、二次转售等任何形式的泄露行为,<a href="/copyright">查看版权声明</a>。
</blockquote>
</div>
</div>
<!-- guide -->
<div class="section" nav-id="guide">
<div class="section-title">
<h2>选择指南</h2>
<p>Product Selection Guide</p>
</div>
<div class="layui-container" style="padding-bottom: 85px;">
<div class="layui-row layui-col-space30">
<div th:each="item,itemStat:${productList}" th:if="${item['id'] != 1}" class="layui-col-md4">
<div class="guide">
<i th:if="${item['id']==2}" class="layui-icon layui-icon-template-1"></i>
<i th:if="${item['id']==3}" class="layui-icon layui-icon-component"></i>
<i th:if="${item['id']==4}" class="layui-icon layui-icon-diamond"></i>
<h3 th:text="${item['productTitle']}"></h3>
<p th:if="${item['id']==2}" class="text-left">&emsp;&emsp;基于Vue3、TypeScript、Vite构建,UI组件库采用ElementPlus的企业级中台解决方案。后端采用Python语言,提供Django、Flask、FastAPI、Tornado四种框架版本可选,既支持传统同步服务,也可满足高性能异步及高并发场景需求。数据层支持MySQL、PostgreSQL、SqlServer、Oracle、Sqlite等多种数据库,并提供ORM统一接口,便于后续数据库迁移与扩展。采用前后端分离架构,后端提供标准化API接口,前端通过Axios完成数据请求与渲染,实现业务逻辑与用户界面完全解耦。内置RBAC权限管理体系,权限粒度精细化到按钮与方法层级,支持动态菜单配置与权限拦截,适配各类复杂企业权限场景。配备代码生成器引擎,支持自定义模板配置,可根据规范数据表结构一键生成模型、视图、控制器及前端页面的完整CRUD功能模块,极大提升开发效率。多端适配覆盖手机、平板、PC,栅格化布局配合深色与浅色主题自由切换机制,确保不同终端下的良好操作体验。提供完善的开发文档、源码注释及授权专属技术支持服务,为项目选型与落地提供全流程保障。</p>
<p th:if="${item['id']==3}" class="text-left">&emsp;&emsp;基于Vue3、TypeScript、Vite构建,UI组件库采用AntDesign的企业级中台解决方案。后端采用Python语言,提供Django、Flask、FastAPI、Tornado四种框架版本可选,既支持传统同步服务,也可满足高性能异步及高并发场景需求。数据层支持MySQL、PostgreSQL、SqlServer、Oracle、Sqlite等多种数据库,并提供ORM统一接口,便于后续数据库迁移与扩展。采用前后端分离架构,后端提供标准化API接口,前端通过Axios完成数据请求与渲染,实现业务逻辑与用户界面完全解耦。内置RBAC权限管理体系,权限粒度精细化到按钮与方法层级,支持动态菜单配置与权限拦截,适配各类复杂企业权限场景。配备代码生成器引擎,支持自定义模板配置,可根据规范数据表结构一键生成模型、视图、控制器及前端页面的完整CRUD功能模块,极大提升开发效率。多端适配覆盖手机、平板、PC,栅格化布局配合深色与浅色主题自由切换机制,确保不同终端下的良好操作体验。提供完善的开发文档、源码注释及授权专属技术支持服务,为项目选型与落地提供全流程保障。</p>
<p th:if="${item['id']==4}" class="text-left">&emsp;&emsp;基于Vue3、TypeScript、Vite构建,UI组件库采用NaiveUI的企业级中台解决方案。后端采用Python语言,提供Django、Flask、FastAPI、Tornado四种框架版本可选,既支持传统同步服务,也可满足高性能异步及高并发场景需求。数据层支持MySQL、PostgreSQL、SqlServer、Oracle、Sqlite等多种数据库,并提供ORM统一接口,便于后续数据库迁移与扩展。采用前后端分离架构,后端提供标准化API接口,前端通过Axios完成数据请求与渲染,实现业务逻辑与用户界面完全解耦。内置RBAC权限管理体系,权限粒度精细化到按钮与方法层级,支持动态菜单配置与权限拦截,适配各类复杂企业权限场景。配备代码生成器引擎,支持自定义模板配置,可根据规范数据表结构一键生成模型、视图、控制器及前端页面的完整CRUD功能模块,极大提升开发效率。多端适配覆盖手机、平板、PC,栅格化布局配合深色与浅色主题自由切换机制,确保不同终端下的良好操作体验。提供完善的开发文档、源码注释及授权专属技术支持服务,为项目选型与落地提供全流程保障。</p>
<a th:href="'/goods/detail/'+${item['id']}" class="layui-btn layui-btn-radius layui-btn-lg" target="_blank">产品详情</a>
</div>
</div>
</div>
</div>
</div>
<!-- product -->
<div class="section xm-product-section" nav-id="product">
<div class="section-title">
<h2>全部产品</h2>
<p>All Our Products</p>
</div>
<div class="layui-container">
<div class="xm-product-grid">
<div th:each="item,itemStat:${productSkuList}" class="xm-product-card">
<!-- 右上角标签 -->
<span class="xm-card-badge xm-badge-hot" th:if="${#strings.contains(item['productTag'],'热门')}"><i class="layui-icon layui-icon-fire"></i> 热门</span>
<span class="xm-card-badge xm-badge-new" th:if="${#strings.contains(item['productTag'],'新品')}"><i class="layui-icon layui-icon-star"></i> 新品</span>
<span class="xm-card-badge xm-badge-flagship" th:if="${#strings.contains(item['productTag'],'旗舰')}"><i class="layui-icon layui-icon-diamond"></i> 旗舰</span>
<span class="xm-card-badge xm-badge-recommend" th:if="${#strings.contains(item['productTag'],'推荐')}"><i class="layui-icon layui-icon-praise"></i> 推荐</span>
<span class="xm-card-badge xm-badge-vip" th:if="${#strings.contains(item['productTag'],'经典')}"><i class="layui-icon layui-icon-auz"></i> 经典</span>
<!-- 封面区域 -->
<div class="xm-card-image">
<div class="xm-cover-img" th:style="'background-image: url('+${item['skuCover']}+')'"></div>
<div class="xm-platform-icon"><i class="layui-icon layui-icon-code-circle"></i></div>
<span class="xm-product-type" th:text="${item['skuAttribute']}"></span>
</div>
<!-- 内容区域 -->
<div class="xm-card-body">
<div class="xm-product-title" th:text="${item['productTitle']}"></div>
<div class="xm-product-sub">
<i class="layui-icon layui-icon-tag"></i>
<span th:text="${item['productTag']}"></span>
</div>
<div class="xm-product-desc" th:text="${item['productDesc']}"></div>
<div class="xm-card-footer">
<span class="xm-price">¥[[${item['discountPrice']}]]</span>
<div class="xm-btn-group">
<a th:href="${item['fileUrl']}" class="xm-btn xm-btn-outline" target="_blank"><i class="layui-icon layui-icon-play"></i> 演示</a>
<a th:href="'/goods/detail/'+${item['productId']}" class="xm-btn xm-btn-primary"><i class="layui-icon layui-icon-about"></i> 详情</a>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- contact -->
<div class="section">
<div class="section-title">
<h2>留言反馈</h2>
<p>Contact With Me</p>
</div>
<div class="layui-container">
<form class="layui-form contact" id="contactForm">
<div class="layui-form-item">
<label class="layui-form-label layui-input-lg">联系人</label>
<div class="layui-input-block">
<input name="contactName" class="layui-input layui-input-lg" placeholder="输入您的真实姓名" maxlength="30"
lay-verType="tips" lay-verify="required" required/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label layui-input-lg">联系电话</label>
<div class="layui-input-block">
<input name="contactPhone" class="layui-input layui-input-lg" placeholder="输入您的联系电话"
maxlength="30" lay-verType="tips" lay-verify="required" required/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label layui-input-lg">联系邮箱</label>
<div class="layui-input-block">
<input name="contactEmail" class="layui-input layui-input-lg" placeholder="输入您的联系邮箱"
maxlength="50" lay-verType="tips" lay-verify="required" required/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label layui-input-lg">联系QQ</label>
<div class="layui-input-block">
<input name="contactQq" class="layui-input layui-input-lg" placeholder="输入您的联系QQ号码"
maxlength="30" lay-verType="tips" lay-verify="required" required/>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label layui-input-lg">反馈内容</label>
<div class="layui-input-block">
<textarea name="content" class="layui-textarea layui-input-lg" placeholder="写下对我们的意见或者建议"
maxlength="600" lay-verType="tips" lay-verify="required" required></textarea>
</div>
</div>
<div class="layui-form-item">
<div class="layui-input-block">
<button class="layui-btn layui-btn-radius layui-btn-lg" lay-filter="submitMessage" lay-submit>
提交您的反馈
</button>
</div>
</div>
</form>
</div>
</div>
<!-- 输入图形验证码弹窗 -->
<script type="text/html" id="layerGetCode">
<div class="layer-get-code">
<p>验证码将发送到您的邮箱,请注意查收:</p>
<div class="lay-code-group" style="padding-right:0px !important;">
<input class="layui-input" name="email" type="text" placeholder="请输入绑定邮箱"
lay-verType="tips" lay-verify="required|email" readonly maxlength="30" required/>
</div>
<div class="lay-code-group">
<input class="layui-input" name="captcha" type="text" placeholder="请输入验证码"
autocomplete="off" lay-verType="tips" lay-verify="required" maxlength="6" required/>
<button type="button" class="layui-btn layui-btn-code">获取验证码</button>
</div>
<div>
<button class="layui-btn layui-btn-fluid">确定</button>
</div>
</div>
</script>
<!-- 引入脚部 -->
<footer th:replace="~{./public/footer :: footer}"></footer>
<script>
layui.use(['layer', 'form'], function () {
var $ = layui.jquery;
var layer = layui.layer;
var form = layui.form;
// 表单提交事件
form.on('submit(submitMessage)', function (data) {
var layIndex = layer.open({
type: 1,
title: false,
shade: .1,
skin: 'layui-layer-admin',
content: $('#layerGetCode').html(),
success: function () {
// 手机号
var $contactEmail = $('input[name="contactEmail"]');
var contactEmail = $contactEmail.val();
var $inputEmail = $('input[name="email"]');
$inputEmail.val(contactEmail);
// 发送验证码
$('.layer-get-code .layui-btn-code').click(function () {
// 邮箱
var email = $inputEmail.val();
var emailReg = /^([a-zA-Z]|[0-9])(\w|\-)+@[a-zA-Z0-9]+\.([a-zA-Z]{2,4})$/;
if (!emailReg.test(email)) {
layer.tips('邮箱格式不正确', $inputEmail, {tips: [1, '#ff4c4c']});
return;
}
// 当前按钮对象
var $btn = $(this);
// 计时器
startTimer($btn);
// 发送验证码请求
var loadIndex = layer.msg('邮箱发送中...', {icon: 16, shade: 0.01, time: false});
$.ajax({
type: "POST",
url: '/sendEmail',
data: JSON.stringify({email: email, type: 5}),
contentType: "application/json",
dataType: "json",
beforeSend: function () {
// TODO...
},
success: function (res) {
layer.close(loadIndex);
if (res.code == 0) {
layer.msg(res.msg, {icon: 1});
startTimer($btn);
} else {
layer.msg(res.msg, {icon: 2, anim: 6});
}
},
error: function () {
layer.msg("AJAX请求异常");
}
});
return false;
});
// 确定按钮事件
$('.layer-get-code .layui-btn-fluid').click(function () {
// 短信验证码
var $inputCaptcha = $('input[name="captcha"]');
var captcha = $inputCaptcha.val();
if (!captcha) {
layer.tips('请输入验证码', $inputCaptcha, {tips: [1, '#ff4c4c']});
return;
}
data.field.captcha = captcha;
var loadIndex = layer.msg('留言提交中...', {icon: 16, shade: 0.01, time: false});
$.ajax({
type: "POST",
url: '/feedback',
data: JSON.stringify(data.field),
contentType: "application/json",
dataType: "json",
beforeSend: function () {
// TODO...
},
success: function (res) {
layer.close(loadIndex);
if (res.code == 0) {
// 关闭弹出层
layer.close(layIndex);
layer.msg(res.msg, {
icon: 1,
time: 1500
});
// 重置表单
setTimeout(function () {
$("#contactForm")[0].reset();
}, 1000);
} else {
layer.msg(res.msg, {icon: 2, anim: 6});
// 重置表单
setTimeout(function () {
location.href = "/login";
}, 2000);
}
},
error: function () {
layer.msg("AJAX请求异常");
}
});
return false;
});
return false;
}
})
return false;
});
// 按钮开始倒计时
function startTimer($btn, second) {
second || (second = 60);
$btn.attr('org-text', $btn.text());
$btn.text(second + 's');
$btn.attr('disabled', 'disabled');
$btn.addClass('layui-disabled');
var timer = setInterval(function () {
second--;
if (second <= 0) {
clearInterval(timer);
$btn.text($btn.attr('org-text'));
$btn.removeAttr('disabled');
$btn.removeClass('layui-disabled');
} else {
$btn.text(second + 's');
}
}, 1000);
}
});
</script>
</body>
</html>