102 lines
3.9 KiB
TypeScript
102 lines
3.9 KiB
TypeScript
import Page from '@/components/page'
|
||
import {Card, CardContent, CardHeader, CardTitle} from '@/components/ui/card'
|
||
import {CheckCircle} from 'lucide-react'
|
||
import Image from 'next/image'
|
||
import banner from '@/app/admin/identify/_assets/banner.webp'
|
||
import RechargeModal from '@/components/composites/recharge'
|
||
import {RealnameAuthDialog} from '@/components/composites/dialogs/realname-auth-dialog'
|
||
import {ChangePasswordDialog} from '@/components/composites/dialogs/change-password-dialog'
|
||
import {getProfile} from '@/actions/auth'
|
||
import {Aftersale, BasicForm} from './clients'
|
||
|
||
export type ProfilePageProps = {}
|
||
|
||
export default async function ProfilePage(props: ProfilePageProps) {
|
||
const profile = await getProfile()
|
||
if (!profile.success) {
|
||
return (
|
||
<Page>
|
||
获取用户信息失败
|
||
</Page>
|
||
)
|
||
}
|
||
|
||
const user = profile.data
|
||
return (
|
||
<Page className="lg:flex-row lg:items-stretch md:flex-col max-sm:flex-col">
|
||
<div className="flex-3/4 flex flex-col gap-4">
|
||
{/* banner */}
|
||
<section className="flex-none relative rounded-lg p-16 pr-4 overflow-hidden flex max-sm:flex-col flex-col gap-4 pl-8 justify-center">
|
||
<Image src={banner} alt="背景图" aria-hidden className="absolute inset-0 w-full h-full object-cover"/>
|
||
<h3 className="text-lg font-bold z-10 relative">蓝狐HTTP邀请您参与【先测后买】服务</h3>
|
||
<p className="text-sm text-gray-600 z-10 relative">为了保障您的账户安全，请先完成实名认证，即可获取福利套餐测试资格</p>
|
||
</section>
|
||
|
||
{/* 块信息 */}
|
||
<div className="flex gap-4 max-md:flex-col max-sm:flex-col">
|
||
|
||
{/* <Card className="flex-1 ">
|
||
<CardHeader>
|
||
<CardTitle className="font-normal">账户余额（元）</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="flex-auto flex justify-between items-center px-8">
|
||
<p className="text-xl">{user.balance}</p>
|
||
<RechargeModal classNames={{
|
||
trigger: `h-10 px-6`,
|
||
}}/>
|
||
</CardContent>
|
||
</Card> */}
|
||
|
||
<Card className="flex-1 ">
|
||
<CardHeader>
|
||
<CardTitle className="font-normal">修改密码</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="flex-auto flex justify-between items-center px-8">
|
||
<p>{user.phone}</p>
|
||
<ChangePasswordDialog triggerClassName="w-24 h-9"/>
|
||
</CardContent>
|
||
</Card>
|
||
|
||
<Card className="flex-1">
|
||
<CardHeader>
|
||
<CardTitle className="font-normal">实名认证</CardTitle>
|
||
</CardHeader>
|
||
<CardContent className="flex-auto flex justify-between items-center gap-4 px-4 pr-8">
|
||
{!user.id_token
|
||
? (
|
||
<>
|
||
<p className="text-sm">为了保障您的账户安全和正常使用服务，请您尽快完成实名认证</p>
|
||
<RealnameAuthDialog
|
||
defaultOpen={!user.id_token}
|
||
triggerClassName="w-24"
|
||
/>
|
||
</>
|
||
)
|
||
: (
|
||
<>
|
||
<p className="flex flex-col gap-1">
|
||
<span>{user.name}</span>
|
||
<span className="text-sm">{user.id_no}</span>
|
||
</p>
|
||
<p className="flex gap-1 items-center">
|
||
<CheckCircle className="text-done" size={18}/>
|
||
<span>已认证</span>
|
||
</p>
|
||
</>
|
||
)}
|
||
</CardContent>
|
||
</Card>
|
||
</div>
|
||
|
||
<div className="flex-none rounded-lg bg-white p-4 flex max-sm:flex-col flex-col gap-8">
|
||
<BasicForm profile={user}/>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 侧边栏：客服经理信息 */}
|
||
<Aftersale profile={user}/>
|
||
|
||
</Page>
|
||
)
|
||
}
|