|
|
|
|
|
<!DOCTYPE html>
|
|
|
|
|
|
<html lang="zh-CN">
|
|
|
|
|
|
<head>
|
|
|
|
|
|
<meta charset="UTF-8" />
|
|
|
|
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
|
|
|
|
|
<title>申请加入团队</title>
|
|
|
|
|
|
<style>
|
|
|
|
|
|
/* 基础样式重置 */
|
|
|
|
|
|
* {
|
|
|
|
|
|
margin: 0;
|
|
|
|
|
|
padding: 0;
|
|
|
|
|
|
box-sizing: border-box;
|
|
|
|
|
|
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
body {
|
|
|
|
|
|
background-color: #f9fafb;
|
|
|
|
|
|
color: #1f2937;
|
|
|
|
|
|
min-height: 100vh;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
flex-direction: column;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 主内容区样式 */
|
|
|
|
|
|
main {
|
|
|
|
|
|
flex-grow: 1;
|
|
|
|
|
|
max-width: 1200px;
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
padding: 64px 16px 32px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.page-title {
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
margin-bottom: 32px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.page-title h2 {
|
|
|
|
|
|
font-size: clamp(1.5rem, 3vw, 2rem);
|
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
|
color: #1f2937;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.page-title p {
|
|
|
|
|
|
color: #6b7280;
|
|
|
|
|
|
max-width: 600px;
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.required {
|
|
|
|
|
|
color: #dc2626;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 表单样式 */
|
|
|
|
|
|
.form-card {
|
|
|
|
|
|
max-width: 400px;
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
background-color: white;
|
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
|
box-shadow: 0 4px 6px rgba(0, 0, 0, 0.05);
|
|
|
|
|
|
overflow: hidden;
|
|
|
|
|
|
transition: box-shadow 0.3s;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.form-card:hover {
|
|
|
|
|
|
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
#simpleForm {
|
|
|
|
|
|
padding: 24px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.form-group {
|
|
|
|
|
|
margin-bottom: 20px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.form-label {
|
|
|
|
|
|
display: block;
|
|
|
|
|
|
font-size: 0.875rem;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
color: #4b5563;
|
|
|
|
|
|
margin-bottom: 6px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.form-input {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
padding: 8px 12px;
|
|
|
|
|
|
border: 1px solid #d1d5db;
|
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
|
transition: all 0.2s;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.form-input:focus {
|
|
|
|
|
|
outline: none;
|
|
|
|
|
|
border-color: #3b82f6;
|
|
|
|
|
|
box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.2);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.error-message {
|
|
|
|
|
|
color: #dc2626;
|
|
|
|
|
|
font-size: 0.75rem;
|
|
|
|
|
|
margin-top: 4px;
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.button-area {
|
|
|
|
|
|
padding-top: 16px;
|
|
|
|
|
|
border-top: 1px solid #f3f4f6;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.submit-button {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
background-color: #3b82f6;
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
|
padding: 10px 16px;
|
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
gap: 8px;
|
|
|
|
|
|
transition: all 0.2s;
|
|
|
|
|
|
box-shadow: 0 4px 6px rgba(59, 130, 246, 0.15);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.submit-button:hover {
|
|
|
|
|
|
background-color: #2563eb;
|
|
|
|
|
|
transform: translateY(-1px);
|
|
|
|
|
|
box-shadow: 0 6px 8px rgba(59, 130, 246, 0.2);
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.submit-button:disabled {
|
|
|
|
|
|
background-color: #93c5fd;
|
|
|
|
|
|
cursor: not-allowed;
|
|
|
|
|
|
transform: none;
|
|
|
|
|
|
box-shadow: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 加载指示器 */
|
|
|
|
|
|
.loader {
|
|
|
|
|
|
width: 16px;
|
|
|
|
|
|
height: 16px;
|
|
|
|
|
|
border: 2px solid white;
|
|
|
|
|
|
border-bottom-color: transparent;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
display: inline-block;
|
|
|
|
|
|
animation: rotation 1s linear infinite;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
@keyframes rotation {
|
|
|
|
|
|
0% {
|
|
|
|
|
|
transform: rotate(0deg);
|
|
|
|
|
|
}
|
|
|
|
|
|
100% {
|
|
|
|
|
|
transform: rotate(360deg);
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 表单说明 */
|
|
|
|
|
|
.form-info {
|
|
|
|
|
|
max-width: 400px;
|
|
|
|
|
|
margin: 24px auto 0;
|
|
|
|
|
|
background-color: #eff6ff;
|
|
|
|
|
|
border: 1px solid #dbeafe;
|
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
|
padding: 16px;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: start;
|
|
|
|
|
|
gap: 8px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.info-icon {
|
|
|
|
|
|
color: #3b82f6;
|
|
|
|
|
|
margin-top: 1px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.info-text {
|
|
|
|
|
|
font-size: 0.875rem;
|
|
|
|
|
|
color: #4b5563;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 消息提示 */
|
|
|
|
|
|
.message {
|
|
|
|
|
|
max-width: 400px;
|
|
|
|
|
|
margin: 16px auto 0;
|
|
|
|
|
|
padding: 12px 16px;
|
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
|
font-size: 0.875rem;
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.success-message {
|
|
|
|
|
|
background-color: #ecfdf5;
|
|
|
|
|
|
border: 1px solid #d1fae5;
|
|
|
|
|
|
color: #059669;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.error-message-bar {
|
|
|
|
|
|
background-color: #fee2e2;
|
|
|
|
|
|
border: 1px solid #fecaca;
|
|
|
|
|
|
color: #dc2626;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 页脚样式 */
|
|
|
|
|
|
footer {
|
|
|
|
|
|
background-color: #1f2937;
|
|
|
|
|
|
color: #9ca3af;
|
|
|
|
|
|
padding: 24px 16px;
|
|
|
|
|
|
margin-top: 48px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.footer-container {
|
|
|
|
|
|
max-width: 1200px;
|
|
|
|
|
|
margin: 0 auto;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
font-size: 0.875rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
/* 弹窗样式 */
|
|
|
|
|
|
.modal-overlay {
|
|
|
|
|
|
position: fixed;
|
|
|
|
|
|
top: 0;
|
|
|
|
|
|
left: 0;
|
|
|
|
|
|
right: 0;
|
|
|
|
|
|
bottom: 0;
|
|
|
|
|
|
background-color: rgba(0, 0, 0, 0.5);
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
z-index: 1000;
|
|
|
|
|
|
display: none;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.modal-content {
|
|
|
|
|
|
background-color: white;
|
|
|
|
|
|
border-radius: 8px;
|
|
|
|
|
|
max-width: 300px;
|
|
|
|
|
|
width: 90%;
|
|
|
|
|
|
padding: 24px;
|
|
|
|
|
|
text-align: center;
|
|
|
|
|
|
transform: scale(0.95);
|
|
|
|
|
|
opacity: 0;
|
|
|
|
|
|
transition: all 0.3s;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.success-icon-container {
|
|
|
|
|
|
width: 64px;
|
|
|
|
|
|
height: 64px;
|
|
|
|
|
|
background-color: #dcfce7;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
margin: 0 auto 16px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.success-icon {
|
|
|
|
|
|
color: #16a34a;
|
|
|
|
|
|
font-size: 2rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.error-icon-container {
|
|
|
|
|
|
width: 64px;
|
|
|
|
|
|
height: 64px;
|
|
|
|
|
|
background-color: #fee2e2;
|
|
|
|
|
|
border-radius: 50%;
|
|
|
|
|
|
display: flex;
|
|
|
|
|
|
align-items: center;
|
|
|
|
|
|
justify-content: center;
|
|
|
|
|
|
margin: 0 auto 16px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.error-icon {
|
|
|
|
|
|
color: #dc2626;
|
|
|
|
|
|
font-size: 2rem;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.modal-title {
|
|
|
|
|
|
font-size: 1.25rem;
|
|
|
|
|
|
font-weight: 600;
|
|
|
|
|
|
color: #1f2937;
|
|
|
|
|
|
margin-bottom: 8px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.modal-message {
|
|
|
|
|
|
color: #6b7280;
|
|
|
|
|
|
margin-bottom: 24px;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.close-button {
|
|
|
|
|
|
width: 100%;
|
|
|
|
|
|
background-color: #3b82f6;
|
|
|
|
|
|
color: white;
|
|
|
|
|
|
border: none;
|
|
|
|
|
|
border-radius: 6px;
|
|
|
|
|
|
padding: 10px 16px;
|
|
|
|
|
|
font-size: 1rem;
|
|
|
|
|
|
font-weight: 500;
|
|
|
|
|
|
cursor: pointer;
|
|
|
|
|
|
transition: background-color 0.2s;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
.close-button:hover {
|
|
|
|
|
|
background-color: #2563eb;
|
|
|
|
|
|
}
|
|
|
|
|
|
</style>
|
|
|
|
|
|
</head>
|
|
|
|
|
|
<body>
|
|
|
|
|
|
<!-- 主要内容 -->
|
|
|
|
|
|
<main id="noTimeOut">
|
|
|
|
|
|
<!-- 页面标题 -->
|
|
|
|
|
|
<div class="page-title">
|
|
|
|
|
|
<h2>申请加入团队</h2>
|
|
|
|
|
|
<p>请填写以下必要信息，带 <span class="required">*</span> 的字段为必填项</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 表单卡片 -->
|
|
|
|
|
|
<div class="form-card">
|
|
|
|
|
|
<!-- 表单内容 -->
|
|
|
|
|
|
<form id="simpleForm" novalidate>
|
|
|
|
|
|
<!-- 姓名 -->
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label for="username" class="form-label"> 姓名 <span class="required">*</span> </label>
|
|
|
|
|
|
<input type="text" id="username" name="username" class="form-input" placeholder="请输入您的姓名" required />
|
|
|
|
|
|
<p class="error-message">请输入您的姓名</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 手机号码 -->
|
|
|
|
|
|
<div class="form-group">
|
|
|
|
|
|
<label for="phone" class="form-label"> 手机号码 <span class="required">*</span> </label>
|
|
|
|
|
|
<input type="tel" id="phone" name="phone" class="form-input" placeholder="请输入您的手机号码" required />
|
|
|
|
|
|
<p class="error-message">请输入有效的手机号码</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 按钮区域 -->
|
|
|
|
|
|
<div class="button-area">
|
|
|
|
|
|
<button type="submit" class="submit-button">
|
|
|
|
|
|
<span id="buttonText">提交信息</span>
|
|
|
|
|
|
<span class="loader" style="display: none"></span>
|
|
|
|
|
|
</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</form>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 表单说明 -->
|
|
|
|
|
|
<div class="form-info">
|
|
|
|
|
|
<span class="info-icon">ⓘ</span>
|
|
|
|
|
|
<p class="info-text">我们会保护您的个人信息安全，仅用于必要的业务联系</p>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 消息提示区域 -->
|
|
|
|
|
|
<div id="successMessage" class="message success-message">提交成功！我们会尽快与您联系。</div>
|
|
|
|
|
|
<div id="errorMessage" class="message error-message-bar">提交失败，请稍后再试。</div>
|
|
|
|
|
|
</main>
|
|
|
|
|
|
<div id="timeOut" style="min-height: calc(100vh - 116px)">
|
|
|
|
|
|
<div style="padding: 120px 0; text-align: center; font-size: 20px">该二维码已过期，请重新获取</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 页脚 -->
|
|
|
|
|
|
<footer>
|
|
|
|
|
|
<div class="footer-container" id="footerText"></div>
|
|
|
|
|
|
</footer>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- 弹窗 -->
|
|
|
|
|
|
<div id="statusModal" class="modal-overlay">
|
|
|
|
|
|
<div id="modalContent" class="modal-content">
|
|
|
|
|
|
<div id="successIconContainer" class="success-icon-container" style="display: none">
|
|
|
|
|
|
<span class="success-icon">✓</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<div id="errorIconContainer" class="error-icon-container" style="display: none">
|
|
|
|
|
|
<span class="error-icon">✗</span>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
<h3 class="modal-title" id="modalTitle">操作结果</h3>
|
|
|
|
|
|
<p class="modal-message" id="modalMessageText">信息提交结果将显示在这里</p>
|
|
|
|
|
|
<button id="closeModal" class="close-button">确定</button>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
</div>
|
|
|
|
|
|
|
|
|
|
|
|
<!-- JavaScript -->
|
|
|
|
|
|
<script>
|
|
|
|
|
|
function getUrlParams(url) {
|
|
|
|
|
|
// 如果没有提供URL，使用当前页面的URL
|
|
|
|
|
|
url = url || window.location.href;
|
|
|
|
|
|
|
|
|
|
|
|
// 创建一个对象来存储参数
|
|
|
|
|
|
const params = {};
|
|
|
|
|
|
|
|
|
|
|
|
// 去掉URL的哈希部分
|
|
|
|
|
|
url = url.split("#")[0];
|
|
|
|
|
|
|
|
|
|
|
|
// 获取查询字符串部分
|
|
|
|
|
|
const queryString = url.split("?")[1];
|
|
|
|
|
|
|
|
|
|
|
|
// 如果没有查询字符串，返回空对象
|
|
|
|
|
|
if (!queryString) {
|
|
|
|
|
|
return params;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 解析查询字符串
|
|
|
|
|
|
const pairs = queryString.split("&");
|
|
|
|
|
|
|
|
|
|
|
|
for (let i = 0; i < pairs.length; i++) {
|
|
|
|
|
|
const pair = pairs[i].split("=");
|
|
|
|
|
|
const key = decodeURIComponent(pair[0]);
|
|
|
|
|
|
const value = decodeURIComponent(pair[1] || "");
|
|
|
|
|
|
|
|
|
|
|
|
// 如果参数已存在，转换为数组
|
|
|
|
|
|
if (params[key]) {
|
|
|
|
|
|
if (Array.isArray(params[key])) {
|
|
|
|
|
|
params[key].push(value);
|
|
|
|
|
|
} else {
|
|
|
|
|
|
params[key] = [params[key], value];
|
|
|
|
|
|
}
|
|
|
|
|
|
} else {
|
|
|
|
|
|
params[key] = value;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
return params;
|
|
|
|
|
|
}
|
|
|
|
|
|
let params = {};
|
|
|
|
|
|
// 表单验证和提交处理
|
|
|
|
|
|
document.addEventListener("DOMContentLoaded", function () {
|
|
|
|
|
|
const form = document.getElementById("simpleForm");
|
|
|
|
|
|
const statusModal = document.getElementById("statusModal");
|
|
|
|
|
|
const modalContent = document.getElementById("modalContent");
|
|
|
|
|
|
const modalTitle = document.getElementById("modalTitle");
|
|
|
|
|
|
const modalMessageText = document.getElementById("modalMessageText");
|
|
|
|
|
|
const successIconContainer = document.getElementById("successIconContainer");
|
|
|
|
|
|
const errorIconContainer = document.getElementById("errorIconContainer");
|
|
|
|
|
|
const closeModal = document.getElementById("closeModal");
|
|
|
|
|
|
const submitButton = form.querySelector(".submit-button");
|
|
|
|
|
|
const buttonText = document.getElementById("buttonText");
|
|
|
|
|
|
const loader = document.querySelector(".loader");
|
|
|
|
|
|
const successMessage = document.getElementById("successMessage");
|
|
|
|
|
|
const errorMessage = document.getElementById("errorMessage");
|
|
|
|
|
|
const timeOut = document.getElementById("timeOut");
|
|
|
|
|
|
const noTimeOut = document.getElementById("noTimeOut");
|
|
|
|
|
|
const footerText = document.getElementById("footerText");
|
|
|
|
|
|
footerText.textContent = `© ${new Date().getFullYear()} 人海科技 技术支持 `;
|
|
|
|
|
|
// http://127.0.0.1:5500/agencyGroupUserApply.html?inviteUserId=123&agencyId=456&agencyName=%E6%98%A5%E9%9B%B7%E4%BA%BA%E5%8A%9B&agencyFullName=%E6%98%A5%E9%9B%B7&expirationTimestamp=13123123123123
|
|
|
|
|
|
const url = window.location.href;
|
|
|
|
|
|
let urlParams = getUrlParams(url);
|
|
|
|
|
|
console.log("urlurl", urlParams);
|
|
|
|
|
|
if (urlParams) {
|
|
|
|
|
|
params = urlParams;
|
|
|
|
|
|
}
|
|
|
|
|
|
timeOut.style.display = "none";
|
|
|
|
|
|
if (params.expirationTimestamp && params.expirationTimestamp < new Date().getTime()) {
|
|
|
|
|
|
timeOut.style.display = "block";
|
|
|
|
|
|
noTimeOut.style.display = "none";
|
|
|
|
|
|
} else {
|
|
|
|
|
|
noTimeOut.style.display = "none";
|
|
|
|
|
|
noTimeOut.style.display = "block";
|
|
|
|
|
|
}
|
|
|
|
|
|
// 表单提交处理
|
|
|
|
|
|
form.addEventListener("submit", function (e) {
|
|
|
|
|
|
e.preventDefault();
|
|
|
|
|
|
|
|
|
|
|
|
// 隐藏之前的消息
|
|
|
|
|
|
successMessage.style.display = "none";
|
|
|
|
|
|
errorMessage.style.display = "none";
|
|
|
|
|
|
|
|
|
|
|
|
// 验证表单
|
|
|
|
|
|
if (validateForm()) {
|
|
|
|
|
|
// 准备提交数据
|
|
|
|
|
|
const formData = {
|
|
|
|
|
|
agencyId: params.agencyId,
|
|
|
|
|
|
inviteUserId: params.inviteUserId,
|
|
|
|
|
|
username: document.getElementById("username").value.trim(),
|
|
|
|
|
|
userTel: document.getElementById("phone").value.trim(),
|
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
|
|
// 显示加载状态
|
|
|
|
|
|
submitButton.disabled = true;
|
|
|
|
|
|
buttonText.style.display = "none";
|
|
|
|
|
|
loader.style.display = "inline-block";
|
|
|
|
|
|
|
|
|
|
|
|
// 使用Fetch API提交数据
|
|
|
|
|
|
submitData(formData)
|
|
|
|
|
|
.then((response) => {
|
|
|
|
|
|
console.log("response1", response);
|
|
|
|
|
|
if (response.status == 200) {
|
|
|
|
|
|
showSuccess(response.msg || response.message || "信息提交成功！");
|
|
|
|
|
|
form.reset();
|
|
|
|
|
|
} else {
|
|
|
|
|
|
showError(response.msg || response.message || "提交失败，请稍后再试");
|
|
|
|
|
|
}
|
|
|
|
|
|
})
|
|
|
|
|
|
.catch((error) => {
|
|
|
|
|
|
console.error("提交失败:", error);
|
|
|
|
|
|
showError("网络错误，请检查您的连接");
|
|
|
|
|
|
})
|
|
|
|
|
|
.finally(() => {
|
|
|
|
|
|
// 恢复按钮状态
|
|
|
|
|
|
submitButton.disabled = false;
|
|
|
|
|
|
buttonText.style.display = "inline-block";
|
|
|
|
|
|
loader.style.display = "none";
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 使用Fetch API提交数据的函数
|
|
|
|
|
|
function submitData(data) {
|
|
|
|
|
|
// 对于实际使用，将URL替换为您的服务器API端点
|
|
|
|
|
|
const apiUrl = "https://daotian.matripe.com.cn/yishoudan/agency/group/user/apply/addApplyH5"; // 本地服务器端点
|
|
|
|
|
|
|
|
|
|
|
|
return fetch(apiUrl, {
|
|
|
|
|
|
method: "POST",
|
|
|
|
|
|
headers: {
|
|
|
|
|
|
"Content-Type": "application/json",
|
|
|
|
|
|
// 可以添加其他请求头，如认证信息
|
|
|
|
|
|
},
|
|
|
|
|
|
body: JSON.stringify(data),
|
|
|
|
|
|
mode: "cors", // 处理跨域请求
|
|
|
|
|
|
cache: "no-cache",
|
|
|
|
|
|
credentials: "same-origin", // 发送同域cookie
|
|
|
|
|
|
}).then((response) => {
|
|
|
|
|
|
console.log("responseresponseresponseresponse", response);
|
|
|
|
|
|
// 检查HTTP响应状态
|
|
|
|
|
|
if (!response.ok) {
|
|
|
|
|
|
throw new Error(`HTTP错误，状态码: ${response.status}`);
|
|
|
|
|
|
}
|
|
|
|
|
|
// 解析JSON响应
|
|
|
|
|
|
return response.json();
|
|
|
|
|
|
});
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 关闭弹窗
|
|
|
|
|
|
closeModal.addEventListener("click", function () {
|
|
|
|
|
|
modalContent.style.transform = "scale(0.95)";
|
|
|
|
|
|
modalContent.style.opacity = "0";
|
|
|
|
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
statusModal.style.display = "none";
|
|
|
|
|
|
successIconContainer.style.display = "none";
|
|
|
|
|
|
errorIconContainer.style.display = "none";
|
|
|
|
|
|
}, 300);
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 实时验证
|
|
|
|
|
|
const inputs = form.querySelectorAll("input[required]");
|
|
|
|
|
|
inputs.forEach((input) => {
|
|
|
|
|
|
input.addEventListener("blur", function () {
|
|
|
|
|
|
validateField(this);
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
input.addEventListener("input", function () {
|
|
|
|
|
|
// 清除错误状态
|
|
|
|
|
|
if (this.style.borderColor === "rgb(220, 38, 38)") {
|
|
|
|
|
|
validateField(this);
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
});
|
|
|
|
|
|
|
|
|
|
|
|
// 显示成功消息
|
|
|
|
|
|
function showSuccess(message) {
|
|
|
|
|
|
// 显示成功弹窗
|
|
|
|
|
|
modalTitle.textContent = "提交成功！";
|
|
|
|
|
|
modalMessageText.textContent = message;
|
|
|
|
|
|
successIconContainer.style.display = "flex";
|
|
|
|
|
|
errorIconContainer.style.display = "none";
|
|
|
|
|
|
|
|
|
|
|
|
statusModal.style.display = "flex";
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
modalContent.style.transform = "scale(1)";
|
|
|
|
|
|
modalContent.style.opacity = "1";
|
|
|
|
|
|
}, 10);
|
|
|
|
|
|
|
|
|
|
|
|
// 同时显示页面内成功消息
|
|
|
|
|
|
// successMessage.textContent = message;
|
|
|
|
|
|
// successMessage.style.display = "block";
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 显示错误消息
|
|
|
|
|
|
function showError(message) {
|
|
|
|
|
|
// 显示错误弹窗
|
|
|
|
|
|
modalTitle.textContent = "提交失败";
|
|
|
|
|
|
modalMessageText.textContent = message;
|
|
|
|
|
|
successIconContainer.style.display = "none";
|
|
|
|
|
|
errorIconContainer.style.display = "flex";
|
|
|
|
|
|
|
|
|
|
|
|
statusModal.style.display = "flex";
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
|
modalContent.style.transform = "scale(1)";
|
|
|
|
|
|
modalContent.style.opacity = "1";
|
|
|
|
|
|
}, 10);
|
|
|
|
|
|
|
|
|
|
|
|
// 同时显示页面内错误消息
|
|
|
|
|
|
errorMessage.textContent = message;
|
|
|
|
|
|
errorMessage.style.display = "block";
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 表单验证函数
|
|
|
|
|
|
function validateForm() {
|
|
|
|
|
|
let isValid = true;
|
|
|
|
|
|
|
|
|
|
|
|
// 验证姓名
|
|
|
|
|
|
const username = document.getElementById("username");
|
|
|
|
|
|
if (!validateField(username)) isValid = false;
|
|
|
|
|
|
|
|
|
|
|
|
// 验证手机号码
|
|
|
|
|
|
const phone = document.getElementById("phone");
|
|
|
|
|
|
if (!validateField(phone)) isValid = false;
|
|
|
|
|
|
|
|
|
|
|
|
return isValid;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 字段验证函数
|
|
|
|
|
|
function validateField(field) {
|
|
|
|
|
|
const id = field.id;
|
|
|
|
|
|
const value = field.value.trim();
|
|
|
|
|
|
const errorElement = field.nextElementSibling;
|
|
|
|
|
|
|
|
|
|
|
|
// 重置状态
|
|
|
|
|
|
field.style.borderColor = "#d1d5db";
|
|
|
|
|
|
errorElement.style.display = "none";
|
|
|
|
|
|
|
|
|
|
|
|
// 验证空值
|
|
|
|
|
|
if (value === "") {
|
|
|
|
|
|
setError(field, errorElement, id === "username" ? "请输入您的姓名" : "请输入您的手机号码");
|
|
|
|
|
|
return false;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 验证手机号码格式
|
|
|
|
|
|
if (id === "phone") {
|
|
|
|
|
|
const phoneRegex = /^1[3-9]\d{9}$/;
|
|
|
|
|
|
if (!phoneRegex.test(value)) {
|
|
|
|
|
|
setError(field, errorElement, "请输入有效的手机号码");
|
|
|
|
|
|
return false;
|
|
|
|
|
|
}
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 验证通过
|
|
|
|
|
|
field.style.borderColor = "#16a34a";
|
|
|
|
|
|
return true;
|
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
// 设置错误状态
|
|
|
|
|
|
function setError(field, errorElement, message) {
|
|
|
|
|
|
field.style.borderColor = "#dc2626";
|
|
|
|
|
|
errorElement.textContent = message;
|
|
|
|
|
|
errorElement.style.display = "block";
|
|
|
|
|
|
|
|
|
|
|
|
// 滚动到错误字段
|
|
|
|
|
|
field.scrollIntoView({ behavior: "smooth", block: "nearest" });
|
|
|
|
|
|
}
|
|
|
|
|
|
});
|
|
|
|
|
|
</script>
|
|
|
|
|
|
</body>
|
|
|
|
|
|
</html>
|
