小程序初始化
This commit is contained in:
@@ -0,0 +1,187 @@
|
||||
import { state } from './state.js';
|
||||
import { UI } from './components.js';
|
||||
|
||||
export const Registration = {
|
||||
render() {
|
||||
const container = document.getElementById('view-container');
|
||||
container.innerHTML = `
|
||||
<div id="step-container" class="w-full h-full flex flex-col items-center justify-center">
|
||||
<div id="step-content" class="glass-card w-full max-w-2xl p-8 min-h-[500px] flex flex-col justify-between overflow-y-auto">
|
||||
<!-- Step content will be injected here -->
|
||||
</div>
|
||||
<div class="mt-8 flex gap-3" id="step-indicators">
|
||||
<div class="step-indicator" data-step="1"></div>
|
||||
<div class="step-indicator" data-step="2"></div>
|
||||
<div class="step-indicator" data-step="3"></div>
|
||||
<div class="step-indicator" data-step="4"></div>
|
||||
<div class="step-indicator" data-step="5"></div>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
this.goToStep(1);
|
||||
},
|
||||
|
||||
goToStep(step) {
|
||||
state.currentStep = step;
|
||||
const content = document.getElementById('step-content');
|
||||
|
||||
gsap.to(content, { opacity: 0, y: 10, duration: 0.3, onComplete: () => {
|
||||
this.renderStep(step, content);
|
||||
gsap.to(content, { opacity: 1, y: 0, duration: 0.5 });
|
||||
this.updateIndicators(step);
|
||||
lucide.createIcons();
|
||||
}});
|
||||
},
|
||||
|
||||
renderStep(step, el) {
|
||||
switch(step) {
|
||||
case 1:
|
||||
el.innerHTML = `
|
||||
<div class="text-center mb-6">
|
||||
<h2 class="text-3xl font-serif mb-2">你是谁？</h2>
|
||||
<p class="text-white/40">让我们从最基础的认知开始...</p>
|
||||
</div>
|
||||
<div class="space-y-4">
|
||||
${UI.renderInput('昵称', 'reg-nick', 'text', '你想如何称呼自己？')}
|
||||
<div class="grid grid-cols-2 gap-4">
|
||||
${UI.renderInput('星座', 'reg-zodiac', 'text', '如：天蝎座')}
|
||||
${UI.renderInput('MBTI', 'reg-mbti', 'text', '如：INFJ')}
|
||||
</div>
|
||||
${UI.renderInput('兴趣爱好', 'reg-hobbies', 'text', '用逗号分隔你的热爱')}
|
||||
</div>
|
||||
<div class="flex justify-end mt-8">
|
||||
<button id="btn-next" class="glass-btn px-8 py-3 rounded-full flex items-center gap-2">
|
||||
下一步 <i data-lucide="arrow-right" class="w-4 h-4"></i>
|
||||
</button>
|
||||
</div>
|
||||
`;
|
||||
document.getElementById('btn-next').onclick = () => {
|
||||
state.updateRegistration({
|
||||
nickname: document.getElementById('reg-nick').value,
|
||||
zodiac: document.getElementById('reg-zodiac').value,
|
||||
mbti: document.getElementById('reg-mbti').value,
|
||||
hobbies: document.getElementById('reg-hobbies').value.split(',')
|
||||
});
|
||||
this.goToStep(2);
|
||||
};
|
||||
break;
|
||||
|
||||
case 2: // Childhood
|
||||
el.innerHTML = `
|
||||
<div class="flex flex-col md:flex-row gap-8 h-full">
|
||||
<div class="flex-1">
|
||||
<h2 class="text-2xl font-serif mb-2">童年往事</h2>
|
||||
<p class="text-white/40 mb-6 text-sm">那个阶段，你的世界是什么颜色的？</p>
|
||||
${UI.renderInput('大约时间', 'reg-child-date', 'date')}
|
||||
${UI.renderTextArea('描述你的感受', 'reg-child-text', '那个午后，我在...')}
|
||||
<div class="flex flex-wrap gap-2 mt-2">${UI.renderInspiration('childhood', 'reg-child-text')}</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 flex items-center justify-center">
|
||||
<img src="https://r2-bucket.flowith.net/f/182f104dccfd0838/illustration_past_dimension_index_2%401024x1024.jpeg" class="rounded-2xl shadow-xl w-full aspect-square object-cover opacity-80">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between mt-8">
|
||||
<button onclick="window.reg_instance.goToStep(1)" class="text-white/40 hover:text-white">返回</button>
|
||||
<button id="btn-next" class="glass-btn px-8 py-3 rounded-full">继续探索</button>
|
||||
</div>
|
||||
`;
|
||||
document.getElementById('btn-next').onclick = () => {
|
||||
state.updateRegistration({ childhood: { date: document.getElementById('reg-child-date').value, text: document.getElementById('reg-child-text').value }});
|
||||
this.goToStep(3);
|
||||
};
|
||||
break;
|
||||
|
||||
case 3: // Joy
|
||||
el.innerHTML = `
|
||||
<div class="flex flex-col md:flex-row gap-8 h-full">
|
||||
<div class="flex-1">
|
||||
<h2 class="text-2xl font-serif mb-2">感到满足的瞬间</h2>
|
||||
<p class="text-white/40 mb-6 text-sm">那些让你嘴角上扬，感到充盈的经历。</p>
|
||||
${UI.renderInput('发生日期', 'reg-joy-date', 'date')}
|
||||
${UI.renderTextArea('那一刻发生了什么？', 'reg-joy-text', '微风拂过，我发现...')}
|
||||
<div class="flex flex-wrap gap-2 mt-2">${UI.renderInspiration('joy', 'reg-joy-text')}</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 flex items-center justify-center">
|
||||
<img src="https://r2-bucket.flowith.net/f/5ec7d5ffbfed2024/illustration_recording_present_moment_index_3%401024x1024.jpeg" class="rounded-2xl shadow-xl w-full aspect-square object-cover opacity-80">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between mt-8">
|
||||
<button onclick="window.reg_instance.goToStep(2)" class="text-white/40 hover:text-white">返回</button>
|
||||
<button id="btn-next" class="glass-btn px-8 py-3 rounded-full">继续探索</button>
|
||||
</div>
|
||||
`;
|
||||
document.getElementById('btn-next').onclick = () => {
|
||||
state.updateRegistration({ joy: { date: document.getElementById('reg-joy-date').value, text: document.getElementById('reg-joy-text').value }});
|
||||
this.goToStep(4);
|
||||
};
|
||||
break;
|
||||
|
||||
case 4: // Low points
|
||||
el.innerHTML = `
|
||||
<div class="flex flex-col md:flex-row gap-8 h-full">
|
||||
<div class="flex-1">
|
||||
<h2 class="text-2xl font-serif mb-2">沉潜的时光</h2>
|
||||
<p class="text-white/40 mb-6 text-sm">那些让你慢下来，向内生长的日子。</p>
|
||||
${UI.renderInput('大约时间', 'reg-low-date', 'date')}
|
||||
${UI.renderTextArea('你是如何度过的？', 'reg-low-text', '在寂静中，我开始思考...')}
|
||||
<div class="flex flex-wrap gap-2 mt-2">${UI.renderInspiration('low', 'reg-low-text')}</div>
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 flex items-center justify-center">
|
||||
<div class="glass-card w-full aspect-square flex items-center justify-center bg-slate-800/50">
|
||||
<i data-lucide="cloud-rain" class="w-16 h-16 text-white/20"></i>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between mt-8">
|
||||
<button onclick="window.reg_instance.goToStep(3)" class="text-white/40 hover:text-white">返回</button>
|
||||
<button id="btn-next" class="glass-btn px-8 py-3 rounded-full">接近未来</button>
|
||||
</div>
|
||||
`;
|
||||
document.getElementById('btn-next').onclick = () => {
|
||||
state.updateRegistration({ low: { date: document.getElementById('reg-low-date').value, text: document.getElementById('reg-low-text').value }});
|
||||
this.goToStep(5);
|
||||
};
|
||||
break;
|
||||
|
||||
case 5: // Future
|
||||
el.innerHTML = `
|
||||
<div class="flex flex-col md:flex-row gap-8 h-full">
|
||||
<div class="flex-1">
|
||||
<h2 class="text-2xl font-serif mb-2">展望未来</h2>
|
||||
<p class="text-white/40 mb-6 text-sm">你渴望成为一个怎样的人？</p>
|
||||
${UI.renderTextArea('未来的愿景', 'reg-future-vision', '我希望在三年后...')}
|
||||
${UI.renderTextArea('理想生活状态', 'reg-future-ideal', '每天清晨，我能够...')}
|
||||
</div>
|
||||
<div class="w-full md:w-1/3 flex items-center justify-center">
|
||||
<img src="https://r2-bucket.flowith.net/f/5039a9a6936372c4/create_future_illustration_index_4%401024x1024.jpeg" class="rounded-2xl shadow-xl w-full aspect-square object-cover opacity-80">
|
||||
</div>
|
||||
</div>
|
||||
<div class="flex justify-between mt-8">
|
||||
<button onclick="window.reg_instance.goToStep(4)" class="text-white/40 hover:text-white">返回</button>
|
||||
<button id="btn-finish" class="glass-btn px-8 py-3 bg-orange-200/20 text-orange-200 border-orange-200/30 rounded-full">开启人生新篇章</button>
|
||||
</div>
|
||||
`;
|
||||
document.getElementById('btn-finish').onclick = () => {
|
||||
state.updateRegistration({ future: { vision: document.getElementById('reg-future-vision').value, ideal: document.getElementById('reg-future-ideal').value }});
|
||||
this.completeRegistration();
|
||||
};
|
||||
break;
|
||||
}
|
||||
},
|
||||
|
||||
updateIndicators(step) {
|
||||
document.querySelectorAll('.step-indicator').forEach(el => {
|
||||
el.classList.toggle('active', parseInt(el.dataset.step) === step);
|
||||
});
|
||||
},
|
||||
|
||||
completeRegistration() {
|
||||
const loader = document.getElementById('loader');
|
||||
loader.classList.remove('hidden');
|
||||
setTimeout(() => {
|
||||
state.view = 'dashboard';
|
||||
window.location.reload(); // Simple way to re-init app view
|
||||
}, 1500);
|
||||
}
|
||||
};
|
||||
window.reg_instance = Registration;
|
||||
Reference in New Issue
Block a user