79 lines
3.8 KiB
JavaScript
79 lines
3.8 KiB
JavaScript
import { state } from './state.js';
|
|
|
|
export const Login = {
|
|
render(onLoginSuccess) {
|
|
const container = document.getElementById('view-container');
|
|
container.innerHTML = `
|
|
<div class="w-full h-full flex items-center justify-center p-6 animate-fade-in">
|
|
<div class="glass-card max-w-md w-full p-10 space-y-8 border-white/5 shadow-2xl">
|
|
<div class="text-center space-y-2">
|
|
<h2 class="text-3xl font-serif tracking-wider text-white/90">欢迎回来</h2>
|
|
<p class="text-sm text-white/40 italic">开启你的数字生命档案</p>
|
|
</div>
|
|
|
|
<div class="space-y-4">
|
|
<div class="space-y-2">
|
|
<label class="text-[10px] text-white/30 uppercase tracking-[0.2em] font-bold">手机号码</label>
|
|
<input type="tel" id="login-phone" placeholder="输入手机号"
|
|
class="glass-input w-full text-center tracking-[0.1em]" maxlength="11">
|
|
</div>
|
|
|
|
<div class="grid grid-cols-3 gap-3">
|
|
<div class="col-span-2 space-y-2">
|
|
<label class="text-[10px] text-white/30 uppercase tracking-[0.2em] font-bold">验证码</label>
|
|
<input type="text" id="login-code" placeholder="六位验证码"
|
|
class="glass-input w-full text-center" maxlength="6">
|
|
</div>
|
|
<div class="flex items-end">
|
|
<button id="get-code-btn" class="w-full h-[46px] rounded-2xl border border-white/5 bg-white/5 text-[10px] uppercase tracking-tighter hover:bg-white/10 transition-all">
|
|
获取
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<button id="login-submit" class="w-full glass-btn py-4 rounded-2xl bg-orange-200/5 text-orange-200 font-bold tracking-[0.3em] hover:bg-orange-200/10 transition-all border-orange-200/20 shadow-lg shadow-orange-900/10">
|
|
开启旅程
|
|
</button>
|
|
|
|
<p class="text-[10px] text-center text-white/20 px-4 leading-relaxed">
|
|
登录即代表同意《用户协议》与《隐私政策》，我们将妥善保管您的生命数据。
|
|
</p>
|
|
</div>
|
|
</div>
|
|
`;
|
|
|
|
const phoneInput = document.getElementById('login-phone');
|
|
const codeInput = document.getElementById('login-code');
|
|
const codeBtn = document.getElementById('get-code-btn');
|
|
const loginBtn = document.getElementById('login-submit');
|
|
|
|
codeBtn.onclick = () => {
|
|
if (phoneInput.value.length !== 11) return alert('请输入正确的手机号');
|
|
codeBtn.disabled = true;
|
|
let count = 60;
|
|
const timer = setInterval(() => {
|
|
codeBtn.innerText = `${count}S`;
|
|
count--;
|
|
if (count < 0) {
|
|
clearInterval(timer);
|
|
codeBtn.disabled = false;
|
|
codeBtn.innerText = '获取';
|
|
}
|
|
}, 1000);
|
|
alert('验证码已发送 (模拟验证码: 888888)');
|
|
};
|
|
|
|
loginBtn.onclick = () => {
|
|
if (phoneInput.value.length === 11 && codeInput.value === '888888') {
|
|
state.isLoggedIn = true;
|
|
state.phone = phoneInput.value;
|
|
state.save();
|
|
onLoginSuccess();
|
|
} else {
|
|
alert('验证失败，请检查手机号或验证码');
|
|
}
|
|
};
|
|
}
|
|
};
|