17 lines
3.0 KiB
TypeScript
17 lines
3.0 KiB
TypeScript
"use client";
|
|
|
|
import Link from "next/link";
|
|
import { ArrowLeft, CheckCircle2 } from "lucide-react";
|
|
import { FormEvent, useState } from "react";
|
|
import { apiFetch } from "@/lib/api";
|
|
|
|
const questions = ["您的投资目标是什么？", "您能接受多大程度的本金波动？", "您的投资期限通常是？", "您对基金投资的了解程度？", "如果短期亏损，您会如何处理？"];
|
|
const options = ["稳健保值", "平衡增长", "积极增值", "长期财富积累"];
|
|
|
|
export default function RiskAssessmentPage() {
|
|
const [answers, setAnswers] = useState<string[]>(Array(questions.length).fill(""));
|
|
const [message, setMessage] = useState(""); const [done, setDone] = useState(false); const [loading, setLoading] = useState(false);
|
|
async function submit(event: FormEvent) { event.preventDefault(); if (answers.some((item) => !item)) { setMessage("请完成全部测评问题"); return; } setLoading(true); setMessage(""); try { await apiFetch("/risk-assessment/submit", { method: "POST", body: JSON.stringify({ questionnaire_id: 1, answers: answers.map((option, index) => ({ question_no: index + 1, option })) }) }); setDone(true); } catch (error) { setMessage(error instanceof Error ? error.message : "测评提交失败"); } finally { setLoading(false); } }
|
|
return <main className="min-h-screen bg-slate-50 px-8 py-12"><div className="mx-auto max-w-3xl"><Link href="/account" className="inline-flex items-center gap-2 text-sm text-slate-500"><ArrowLeft className="h-4 w-4" />返回用户中心</Link><div className="mt-8 rounded-xl border border-slate-200 bg-white p-8"><p className="text-sm text-[var(--brand-primary)]">Risk Profile</p><h1 className="mt-2 text-3xl font-semibold text-[var(--brand-navy)]">风险承受能力测评</h1>{done ? <div className="mt-8 flex items-center gap-3 rounded-lg bg-emerald-50 p-5 text-emerald-700"><CheckCircle2 className="h-5 w-5" />测评已提交，系统将根据结果提供适当性提示。</div> : <form onSubmit={submit} className="mt-8 space-y-7">{questions.map((question, index) => <fieldset key={question}><legend className="text-sm font-medium text-slate-800">{index + 1}. {question}</legend><div className="mt-3 grid gap-2 sm:grid-cols-2">{options.map((option) => <label key={option} className={`cursor-pointer rounded-lg border px-4 py-3 text-sm ${answers[index] === option ? "border-[var(--brand-primary)] bg-indigo-50 text-[var(--brand-primary)]" : "border-slate-200 text-slate-600"}`}><input type="radio" name={`question-${index}`} value={option} checked={answers[index] === option} onChange={() => setAnswers((current) => current.map((item, itemIndex) => itemIndex === index ? option : item))} className="sr-only" />{option}</label>)}</div></fieldset>)}{message && <p className="rounded-lg bg-rose-50 p-3 text-sm text-rose-600">{message}</p>}<button disabled={loading} className="w-full rounded-lg bg-[var(--brand-primary)] px-4 py-3 text-sm font-semibold text-white disabled:opacity-50">{loading ? "提交中..." : "提交测评"}</button></form>}</div></div></main>;
|
|
}
|