You cannot select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
dandelionPlatformToB-uni-v3/agencyGroupUserApply.html

655 lines
17 KiB
HTML

This file contains ambiguous Unicode characters!

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

<!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>