qimaohong
/
hcdbqbVue
1
0
Fork 0
Code Issues Pull Requests Projects Releases Wiki Activity
Browse Source

修改跳转

master
zhaoruhui 7 hours ago
parent
dcb6cb6554
commit
8d5116ae53
1 changed files with 118 additions and 74 deletions
Whitespace
Show all changes Ignore whitespace when comparing lines Ignore changes in amount of whitespace Ignore changes in whitespace at EOL
Split View
Diff Options
Show Stats Download Patch File Download Diff File
  1. 162
      hkRegister.html

162
hkRegister.html
View File

@ -13,9 +13,11 @@
<meta http-equiv="keywords" content="夺宝奇兵,homilychart,homilylink,DeepChart">
<meta http-equiv="description" content="HomilyLink">
<title>夺宝奇兵免费体验</title>
<!-- 引入外部资源 -->
<script src="https://cdn.tailwindcss.com?v=3.3.5"></script>
<link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
<!-- 基础样式配置 -->
<script>
tailwind.config = {
theme: {
@ -152,14 +154,11 @@
margin-top: 15px;
font-size: 16px;
}
button:disabled {
cursor: not-allowed;
}
</style>
</head>
<body class="bg-gray-50 text-gray-800 font-sans">
<!-- 导航栏 -->
<header class="fixed top-0 left-0 right-0 bg-white/95 shadow-sm z-50">
<div class="container mx-auto px-4 py-4 flex justify-between items-center">
<div class="flex items-center space-x-2">
@ -171,6 +170,7 @@
<span
class="text-xl font-bold bg-clip-text text-transparent bg-gradient-to-r from-primary to-secondary">夺宝奇兵免费体验</span>
</div>
<nav class="hidden md:flex items-center space-x-8">
<a href="hkhcdbqb.html" class="hover:text-primary transition-colors">首页</a>
<a href="hkhcdbqbDownload.html" class="hover:text-primary transition-colors">下载中心</a>
@ -178,10 +178,12 @@
<a href="https://wa.me/85269518757?text=我要了解夺宝奇兵" target="_blank"
class="px-5 py-2 rounded-full bg-gradient-to-r from-primary to-secondary text-white hover:shadow-lg transition-all">联系我们</a>
</nav>
<button id="mobileMenuBtn" class="md:hidden text-xl">
<i class="fa fa-bars"></i>
</button>
</div>
<div id="mobileMenu" class="md:hidden hidden bg-white border-t">
<div class="container mx-auto px-4 py-3 flex flex-col space-y-3">
<a href="hkhcdbqb.html" class="py-2 hover:text-primary transition-colors">首页</a>
@ -193,6 +195,7 @@
</div>
</header>
<!-- 主要内容 -->
<main class="pt-28 pb-16 px-4">
<div class="container mx-auto max-w-6xl">
<div class="text-center mb-12 fade-in">
@ -201,10 +204,11 @@
</div>
<div class="grid grid-cols-1 lg:grid-cols-5 gap-8 max-w-5xl mx-auto">
<!-- 注册表单 -->
<div class="lg:col-span-3 fade-in delay-100">
<div class="bg-white rounded-xl shadow-md p-6 md:p-8 card-hover">
<!-- 保持原有 action 和 method，但用 JS 拦截处理 -->
<form id="registrationForm" action="./hkRegisterTip.html" method="post">
<!-- 注意：移除了 action 和 method，由JS处理 -->
<form id="registrationForm">
<div class="form-group">
<label class="form-label">姓名 <span class="text-red-500">*</span></label>
<div class="relative">
@ -261,6 +265,7 @@
<option value="+420">+420 捷克</option>
</select>
</div>
<div class="flex-1 relative">
<div class="form-icon-container">
<i class="form-icon fa fa-whatsapp"></i>
@ -311,11 +316,13 @@
</div>
</div>
<!-- 注册说明 -->
<div class="lg:col-span-2 fade-in delay-200">
<div class="bg-white rounded-xl shadow-md p-6 md:p-8 h-full card-hover">
<h3 class="text-xl font-bold mb-5 flex items-center">
<i class="fa fa-info-circle text-primary mr-2"></i>注册说明
</h3>
<div class="space-y-4 text-gray-600">
<div class="flex">
<div
@ -324,6 +331,7 @@
</div>
<p>请填写方便称呼您的姓名信息。</p>
</div>
<div class="flex">
<div
class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mr-3 mt-0.5">
@ -331,6 +339,7 @@
</div>
<p>手机号码最好支持WhatsApp联系。</p>
</div>
<div class="flex">
<div
class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mr-3 mt-0.5">
@ -338,6 +347,7 @@
</div>
<p>微信的联系方式我们也支持。</p>
</div>
<div class="flex">
<div
class="w-8 h-8 rounded-full bg-primary/10 flex items-center justify-center text-primary flex-shrink-0 mr-3 mt-0.5">
@ -345,11 +355,16 @@
</div>
<p>邮箱作为联系您的备用联系方式。</p>
</div>
<div class="mt-6 pt-5 border-t border-gray-100">
<h4 class="font-semibold mb-3 text-gray-700">温馨提示</h4>
<p class="text-sm">
AD粉可以进入HomilyLink内部班级群<br />免费学习。<br />免费体验包括：夺宝奇兵三大模板<br />铁粉可以体验部分DeepChart功能！</p>
AD粉可以进入HomilyLink内部班级群<br />免费学习。<br />
免费体验包括：夺宝奇兵三大模板<br />
铁粉可以体验部分DeepChart功能！
</p>
</div>
<div class="mt-6 pt-5 border-t border-gray-100">
<h4 class="font-semibold mb-3 text-gray-700">郑重声明</h4>
<p class="text-sm">我们将严格保护您的个人信息安全，绝对不会向第三方泄露。</p>
@ -361,6 +376,7 @@
</div>
</main>
<!-- 页脚 -->
<footer class="bg-gray-900 text-white py-10 px-4 mt-16">
<div class="container mx-auto max-w-6xl text-center">
<div class="mb-6">
@ -376,37 +392,33 @@
</div>
</footer>
<!-- 交互脚本 - 使用 type="module" 保留原有API导入 -->
<script type="module">
// 从外部文件导入 registerMemberApi 函数（保持原有方式）
import { registerMemberApi } from './src/api/hkmember.js';
// 获取表单元素
const form = document.getElementById('registrationForm');
const submitBtn = document.getElementById('submitBtn');
// 错误提示元素
const nameError = document.getElementById('nameError');
const phoneError = document.getElementById('phoneError');
const emailError = document.getElementById('emailError');
// ========== 清理残留loading ==========
function cleanupLoading() {
const existingOverlay = document.getElementById('loadingOverlay');
if (existingOverlay) existingOverlay.remove();
if (submitBtn) {
submitBtn.disabled = false;
submitBtn.style.opacity = '1';
submitBtn.innerHTML = '<i class="fa fa-check-circle mr-2"></i>提交注册';
}
sessionStorage.removeItem('isSubmitting');
}
// 隐藏所有错误提示
function hideAllErrors() {
if (nameError) nameError.style.display = 'none';
if (phoneError) phoneError.style.display = 'none';
if (emailError) emailError.style.display = 'none';
}
// 显示错误
function showError(element) {
if (element) element.style.display = 'block';
}
// 邮箱校验
function isValidEmail(email) {
if (!email || email.trim() === '') return false;
const emailRegex = /^[^\s@]+@([^\s@]+\.)+[^\s@]+$/;
@ -416,6 +428,7 @@
return true;
}
// 手机号校验
function isValidPhone(phone) {
if (!phone || phone.trim() === '') return false;
const digitsOnly = phone.replace(/[^\d]/g, '');
@ -423,6 +436,7 @@
return true;
}
// 清理手机号
function cleanPhoneNumber(phone) {
if (!phone) return '';
let cleaned = phone.replace(/[^\d]/g, '');
@ -430,37 +444,53 @@
return cleaned;
}
// 显示加载状态
function showLoading() {
if (document.getElementById('loadingOverlay')) return;
const loadingDiv = document.createElement('div');
loadingDiv.id = 'loadingOverlay';
loadingDiv.className = 'loading-overlay';
loadingDiv.innerHTML = '<div class="spinner"></div><div class="loading-text">正在提交注册信息...</div>';
document.body.appendChild(loadingDiv);
if (submitBtn) {
submitBtn.disabled = true;
submitBtn.style.opacity = '0.6';
submitBtn.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i>提交中...';
}
sessionStorage.setItem('isSubmitting', 'true');
}
// 隐藏加载状态
function hideLoading() {
const loadingDiv = document.getElementById('loadingOverlay');
if (loadingDiv) loadingDiv.remove();
if (submitBtn) {
submitBtn.disabled = false;
submitBtn.style.opacity = '1';
submitBtn.innerHTML = '<i class="fa fa-check-circle mr-2"></i>提交注册';
}
sessionStorage.removeItem('isSubmitting');
}
let isSubmitting = false;
// 使用 GET 方式跳转到提示页面（避免 Nginx 405 错误）
function redirectToSuccessPage(formData) {
const params = new URLSearchParams();
params.set('unameinfo', formData.name);
params.set('countryinfo', formData.countryCode);
params.set('umoblie', formData.phone);
params.set('uemail', formData.email);
if (formData.wechat) params.set('uwechat', formData.wechat);
params.set('zbtype', formData.zbtype);
// GET 方式跳转，不会出现 405 错误
window.location.href = `./hkRegisterTip.html?${params.toString()}`;
}
// 表单提交 - 先调API，成功后继续表单提交（保持原有跳转）
// 表单提交处理 - 先调用API保存数据，然后GET跳转
form.addEventListener('submit', async function (e) {
// 先进行前端校验
// 阻止默认提交
e.preventDefault();
// 前端校验
hideAllErrors();
const name = document.getElementById('unameinfo').value.trim();
@ -468,6 +498,7 @@
const phoneRaw = document.getElementById('umoblie').value.trim();
const wechat = document.getElementById('uwechat').value.trim();
const email = document.getElementById('uemail').value.trim();
const zbtype = document.getElementById('zbtype').value;
let isValid = true;
@ -487,56 +518,66 @@
}
if (!isValid) {
e.preventDefault();
return;
}
// 防止重复提交
if (isSubmitting) {
e.preventDefault();
return;
}
e.preventDefault();
isSubmitting = true;
// 清理手机号
const cleanedPhone = cleanPhoneNumber(phoneRaw);
// 组装请求参数（与原来保持一致）
const requestData = {
name: name,
code: countryCode,
tel: cleanedPhone,
email: email
};
if (wechat) {
requestData.weChat = wechat;
}
// 保存表单数据用于跳转
const formData = {
name: name,
countryCode: countryCode,
phone: cleanedPhone,
wechat: wechat,
email: email,
zbtype: zbtype
};
// 显示加载状态
showLoading();
try {
// 调用原有的 API 接口保存数据
const result = await registerMemberApi(requestData);
if (result.code === 200) {
// API调用成功，继续原有的表单提交（POST到hkRegisterTip.html）
hideLoading();
// 重新提交表单（不再拦截）
isSubmitting = false;
form.submit();
// API调用成功，GET方式跳转到提示页面
redirectToSuccessPage(formData);
} else {
hideLoading();
isSubmitting = false;
alert('注册失败：' + (result.msg || '未知错误，请稍后重试'));
}
} catch (error) {
console.error('提交注册出错:', error);
hideLoading();
isSubmitting = false;
alert('网络错误或接口异常，请稍后重试');
// API失败时，询问是否继续（数据未保存到后端）
if (confirm('网络错误，注册失败。请检查网络后重试。\n\n是否返回表单重新提交？')) {
// 用户选择重试，停留在当前页面
return;
}
}
});
// 移动端菜单切换
document.getElementById('mobileMenuBtn').addEventListener('click', function () {
const mobileMenuBtn = document.getElementById('mobileMenuBtn');
if (mobileMenuBtn) {
mobileMenuBtn.addEventListener('click', function () {
const menu = document.getElementById('mobileMenu');
if (menu) {
menu.classList.toggle('hidden');
const icon = this.querySelector('i');
if (icon.classList.contains('fa-bars')) {
@ -544,36 +585,39 @@
} else {
icon.classList.replace('fa-times', 'fa-bars');
}
}
});
}
// 页面加载动画 + 清理残留loading
// 页面加载动画
document.addEventListener('DOMContentLoaded', function () {
document.querySelectorAll('.fade-in').forEach(el => {
el.style.opacity = '1';
});
cleanupLoading();
});
// 处理浏览器后退/前进时的残留loading
window.addEventListener('pageshow', function (event) {
if (event.persisted) {
cleanupLoading();
}
});
window.addEventListener('popstate', function () {
cleanupLoading();
});
// 输入框实时验证
const nameInput = document.getElementById('unameinfo');
const phoneInput = document.getElementById('umoblie');
const emailInput = document.getElementById('uemail');
// 实时验证
document.getElementById('unameinfo')?.addEventListener('blur', function () {
if (nameInput) {
nameInput.addEventListener('blur', function () {
if (this.value.trim()) nameError.style.display = 'none';
});
document.getElementById('umoblie')?.addEventListener('blur', function () {
}
if (phoneInput) {
phoneInput.addEventListener('blur', function () {
if (this.value.trim() && isValidPhone(this.value.trim())) phoneError.style.display = 'none';
});
document.getElementById('uemail')?.addEventListener('blur', function () {
}
if (emailInput) {
emailInput.addEventListener('blur', function () {
if (this.value.trim() && isValidEmail(this.value.trim())) emailError.style.display = 'none';
});
}
</script>
</body>
Write Preview
Loading…
Cancel
Save