180 lines
10 KiB
HTML
180 lines
10 KiB
HTML
<script>
|
|
if (window.parent && window.parent !== window) { window.parent.location.reload(); }
|
|
</script>
|
|
<div class="relative min-h-screen flex items-center justify-center bg-gray-50 dark:bg-gray-100 p-4">
|
|
<div class="hidden md:flex md:w-1/2 items-center justify-start px-4 opacity-0 translate-x-[-20px] animate-fade-in-left">
|
|
<div class="text-center w-full">
|
|
<div class="w-56 h-56 mx-auto mb-8 rounded-2xl bg-purple-500/5 flex items-center justify-center p-6 transition-all duration-300 hover:scale-105 hover:shadow-lg hover:shadow-purple-500/5"></div>
|
|
<h2 class="text-3xl font-bold text-gray-900 mb-4 opacity-0 animate-fade-in delay-100">G-ERP 账号注册</h2>
|
|
<p class="text-gray-600 mx-auto leading-relaxed opacity-0 animate-fade-in delay-200"> 填写以下信息完成注册，账号将用于在所有 GVSDS 下属平台访问<br> 请确保信息真实有效，注册后信息可在后台修改 </p>
|
|
<div class="relative mt-12 h-64">
|
|
<div class="absolute top-0 left-1/4 w-8 h-8 rounded bg-purple-500/30 animate-pulse"></div>
|
|
<div class="absolute top-1/4 left-1/2 w-12 h-12 rounded bg-blue-500/30 animate-pulse delay-300"></div>
|
|
<div class="absolute bottom-1/4 left-1/3 w-10 h-10 rounded bg-green-500/30 animate-pulse delay-500"></div>
|
|
<div class="absolute bottom-0 left-2/3 w-14 h-14 rounded bg-pink-500/30 animate-pulse delay-700"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<div class="w-full md:w-1/2 max-w-md opacity-0 translate-x-[20px] animate-fade-in-right">
|
|
<div class="bg-white dark:bg-gray-50 rounded-xl shadow-xl overflow-visible transition-all duration-300 hover:shadow-purple-500/5">
|
|
<div class="relative h-24">
|
|
<img src="https://bing.img.run/uhd.php" alt="Card image" class="w-full h-full object-cover">
|
|
<div class="absolute inset-0 bg-gradient-to-t from-white to-transparent"></div>
|
|
<h4 class="absolute bottom-4 left-6 text-xl font-bold text-gray-900">注册</h4>
|
|
</div>
|
|
<!-- Toast固定容器 -->
|
|
<div id="toastWrap" class="px-6 pt-6"></div>
|
|
<div class="p-6 pt-0">
|
|
<form class="space-y-4" id="registerForm">
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none transition-colors duration-200">
|
|
<i class="tim-icons icon-single-02 text-gray-500 input-icon"></i>
|
|
</div>
|
|
<input type="text" name="UserName"
|
|
class="block w-full pl-10 pr-3 py-2.5 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-gray-900 placeholder-gray-500 transition-all duration-200 focus:scale-[1.01] focus:bg-white" placeholder="昵称" required>
|
|
</div>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none transition-colors duration-200">
|
|
<i class="tim-icons icon-email-85 text-gray-500 input-icon"></i>
|
|
</div>
|
|
<input type="email" name="UserEmail"
|
|
class="block w-full pl-10 pr-3 py-2.5 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-gray-900 placeholder-gray-500 transition-all duration-200 focus:scale-[1.01] focus:bg-white" placeholder="邮箱（注意：请填写有效的邮箱）" required>
|
|
</div>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none transition-colors duration-200">
|
|
<i class="tim-icons icon-lock-circle text-gray-500 input-icon"></i>
|
|
</div>
|
|
<input type="password" name="UserPassword"
|
|
class="block w-full pl-10 pr-3 py-2.5 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-gray-900 placeholder-gray-500 transition-all duration-200 focus:scale-[1.01] focus:bg-white" placeholder="密码" required>
|
|
</div>
|
|
<div class="relative">
|
|
<div class="absolute inset-y-0 left-0 flex items-center pl-3 pointer-events-none transition-colors duration-200">
|
|
<i class="tim-icons icon-lock-circle text-gray-500 input-icon"></i>
|
|
</div>
|
|
<input type="password" name="UserPassword2"
|
|
class="block w-full pl-10 pr-3 py-2.5 bg-gray-50 border border-gray-200 rounded-lg focus:ring-2 focus:ring-purple-500 focus:border-transparent text-gray-900 placeholder-gray-500 transition-all duration-200 focus:scale-[1.01] focus:bg-white" placeholder="重复密码" required>
|
|
</div>
|
|
<div class="flex items-start">
|
|
<div class="flex items-center h-5">
|
|
<input id="UserConsent" name="UserConsent" type="checkbox" class="w-4 h-4 rounded border-gray-300 text-purple-500 focus:ring-purple-500 bg-gray-100 transition-all duration-200 hover:border-gray-400 checked:scale-[0.95]" required>
|
|
</div>
|
|
<div class="ml-3 text-sm">
|
|
<label for="UserConsent" class="text-gray-700 transition-colors duration-200 hover:text-gray-900"> 我阅读并同意
|
|
<a href="/Document/9bc298e9c1d03ed3bd4777181bf7411d/d2ae1dd63e9c35d687464a160896e1ab" target="_blank" class="text-purple-600 hover:underline transition-colors duration-200 hover:text-purple-700">GVSDS用户协议</a>
|
|
</label>
|
|
</div>
|
|
</div>
|
|
<div class="text-sm text-gray-700"> 我已有账号,去
|
|
<a href="/login.html" class="text-purple-600 hover:underline transition-colors duration-200 hover:text-purple-700">登录</a>
|
|
</div>
|
|
<div class="pt-2">
|
|
<button type="submit" class="w-full py-3 px-4 bg-purple-500 hover:bg-purple-600 rounded-lg text-white font-medium transition-all duration-200 flex items-center justify-center hover:scale-[1.02] active:scale-[0.98] hover:shadow-lg hover:shadow-purple-500/10"> 注册</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<style>
|
|
@keyframes fadeInLeft{from{opacity:0;transform:translateX(-20px)}to{opacity:1;transform:translateX(0)}}
|
|
.animate-fade-in-left{animation:fadeInLeft .5s ease-out forwards}
|
|
@keyframes fadeInRight{from{opacity:0;transform:translateX(20px)}to{opacity:1;transform:translateX(0)}}
|
|
.animate-fade-in-right{animation:fadeInRight .5s ease-out forwards}
|
|
@keyframes fadeIn{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}
|
|
.animate-fade-in{animation:fadeIn .3s ease-out forwards}
|
|
input:focus~.input-icon{color:#a855f7}
|
|
#RegisterToast{
|
|
animation:fadeIn .3s ease-out forwards;
|
|
position:relative;
|
|
z-index:999;
|
|
width:100%;
|
|
box-sizing:border-box;
|
|
}
|
|
</style>
|
|
<script>
|
|
document.addEventListener('DOMContentLoaded', () => {
|
|
const msg = new URLSearchParams(window.location.search).get('msg');
|
|
const registerForm = document.getElementById('registerForm');
|
|
const toastWrap = document.getElementById('toastWrap');
|
|
|
|
// 统一弹窗渲染函数
|
|
function showToast(content, type = 'error') {
|
|
let toast = document.getElementById('RegisterToast');
|
|
if (toast) toast.remove();
|
|
|
|
toast = document.createElement('div');
|
|
toast.id = 'RegisterToast';
|
|
toast.className = 'mb-4 p-3 rounded-lg animate-fade-in';
|
|
|
|
if (type === 'error') {
|
|
toast.style.color = '#dc2626';
|
|
toast.style.background = '#fef2f2';
|
|
toast.style.border = '1px solid #fecaca';
|
|
} else {
|
|
toast.style.color = '#16a34a';
|
|
toast.style.background = '#f0fdf4';
|
|
toast.style.border = '1px solid #bbf7d0';
|
|
}
|
|
toast.textContent = content;
|
|
toastWrap.appendChild(toast);
|
|
}
|
|
|
|
// 页面带错误参数时展示提示
|
|
if (msg) {
|
|
showToast(msg, 'error');
|
|
}
|
|
|
|
// label点击聚焦对应输入框
|
|
document.querySelectorAll('label[for]').forEach(label => {
|
|
label.addEventListener('click', () => {
|
|
const targetId = label.getAttribute('for');
|
|
const targetEl = document.getElementById(targetId);
|
|
if (targetEl) targetEl.focus();
|
|
})
|
|
});
|
|
|
|
// 注册表单提交事件
|
|
registerForm.addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
const UserConsent = document.getElementById('UserConsent').checked;
|
|
const UserPassword = this.querySelector('input[name="UserPassword"]').value;
|
|
const UserPassword2 = this.querySelector('input[name="UserPassword2"]').value;
|
|
|
|
if (!UserConsent) {
|
|
showToast('必须阅读并同意用户协议');
|
|
return;
|
|
}
|
|
if (UserPassword !== UserPassword2) {
|
|
showToast('两次输入的密码不一致，请重新输入');
|
|
return;
|
|
}
|
|
|
|
const submitButton = this.querySelector('button[type="submit"]');
|
|
const originalText = submitButton.innerHTML;
|
|
submitButton.disabled = true;
|
|
submitButton.innerHTML = '<i class="fa fa-spinner fa-spin mr-2"></i> 注册中...';
|
|
|
|
const formData = new FormData(registerForm);
|
|
fetch('https://ugm.gvsds.com/Auth/Register', {
|
|
method: 'POST',
|
|
credentials: 'include',
|
|
body: formData
|
|
}).then(res => res.json()).then(result => {
|
|
submitButton.disabled = false;
|
|
submitButton.innerHTML = originalText;
|
|
if (result.code === 0) {
|
|
showToast('注册成功，即将跳转...', 'success');
|
|
setTimeout(() => {
|
|
window.location.href = result.redirect || '/'
|
|
}, 500)
|
|
} else {
|
|
showToast(result.msg || '注册失败')
|
|
}
|
|
}).catch(err => {
|
|
submitButton.disabled = false;
|
|
submitButton.innerHTML = originalText;
|
|
showToast('网络错误：' + err.message)
|
|
});
|
|
});
|
|
})
|
|
</script> |