/admin/profile 页面从服务端获取用户数据
This commit is contained in:
189
src/app/admin/profile/clients.tsx
Normal file
189
src/app/admin/profile/clients.tsx
Normal file
@@ -0,0 +1,189 @@
|
||||
'use client'
|
||||
import {update} from '@/actions/user'
|
||||
import {useProfileStore} from '@/components/stores-provider'
|
||||
import {Button} from '@/components/ui/button'
|
||||
import {Form, FormField} from '@/components/ui/form'
|
||||
import {Input} from '@/components/ui/input'
|
||||
import {User} from '@/lib/models'
|
||||
import {merge} from '@/lib/utils'
|
||||
import {zodResolver} from '@hookform/resolvers/zod'
|
||||
import {useEffect, useRef} from 'react'
|
||||
import {useForm} from 'react-hook-form'
|
||||
import {toast} from 'sonner'
|
||||
import z from 'zod'
|
||||
import * as qrcode from 'qrcode'
|
||||
import {Card, CardHeader, CardTitle, CardContent} from '@/components/ui/card'
|
||||
import {QrCodeIcon} from 'lucide-react'
|
||||
|
||||
export function Aftersale(props: {
|
||||
profile: User
|
||||
}) {
|
||||
const admin = props.profile.admin_id
|
||||
const canvasRef = useRef(null)
|
||||
|
||||
useEffect(() => {
|
||||
if (admin && canvasRef.current) {
|
||||
qrcode.toCanvas(canvasRef.current, String(admin), {
|
||||
width: 180,
|
||||
margin: 0,
|
||||
}).catch((err) => {
|
||||
console.error(err)
|
||||
})
|
||||
}
|
||||
}, [admin])
|
||||
|
||||
return (
|
||||
<Card className="flex-none max-sm:flex-col">
|
||||
<CardHeader>
|
||||
<CardTitle>
|
||||
<QrCodeIcon size={18}/>
|
||||
关于售后
|
||||
</CardTitle>
|
||||
</CardHeader>
|
||||
<CardContent className="flex flex-col gap-8">
|
||||
|
||||
<div className="flex flex-col gap-4">
|
||||
<p className="text-weak text-sm">
|
||||
1.全国100万+动态IP代理资源免费测试，先测后买让您安心使用。
|
||||
</p>
|
||||
|
||||
<p className="text-weak text-sm">
|
||||
2.注册即享新人福利，专业的客户经理，多维度为您提供在线代理相关答疑
|
||||
</p>
|
||||
|
||||
<p className="text-weak text-sm">
|
||||
3.1V1专属售后答疑，技术团队7*24小时在线支持提供专属解决方案
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div className="flex flex-col gap-4 items-center">
|
||||
<p>您的专属客服经理</p>
|
||||
<div>
|
||||
<canvas ref={canvasRef} width="180" height="180" className="mx-auto bg-muted"/>
|
||||
</div>
|
||||
<p className="text-xs text-weak">
|
||||
扫描上方二维码添加客服经理微信
|
||||
<br/>
|
||||
获取更多帮助与支持
|
||||
</p>
|
||||
</div>
|
||||
</CardContent>
|
||||
</Card>
|
||||
)
|
||||
}
|
||||
|
||||
export function BasicForm(props: {
|
||||
profile: User
|
||||
}) {
|
||||
const schema = z.object({
|
||||
username: z.string(),
|
||||
email: z.string().email('请输入正确的邮箱'),
|
||||
contact_qq: z.string(),
|
||||
contact_wechat: z.string(),
|
||||
})
|
||||
type Schema = z.infer<typeof schema>
|
||||
const form = useForm<Schema>({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: {
|
||||
username: props.profile.username || '',
|
||||
email: props.profile.email || '',
|
||||
contact_qq: props.profile.contact_qq || '',
|
||||
contact_wechat: props.profile.contact_wechat || '',
|
||||
},
|
||||
})
|
||||
const handler = form.handleSubmit(async (value) => {
|
||||
try {
|
||||
const resp = await update(value)
|
||||
if (!resp.success) {
|
||||
throw new Error(resp.message)
|
||||
}
|
||||
|
||||
await refreshProfile()
|
||||
toast.success(`保存成功`)
|
||||
}
|
||||
catch (e) {
|
||||
console.error(e)
|
||||
toast.error(`保存失败`, {
|
||||
description: e instanceof Error ? e.message : String(e),
|
||||
})
|
||||
}
|
||||
})
|
||||
|
||||
const refreshProfile = useProfileStore(store => store.refreshProfile)
|
||||
|
||||
return (
|
||||
<div className="flex flex-col gap-4 flex-1 w-full">
|
||||
<h3 className="font-normal">基本信息</h3>
|
||||
<Form
|
||||
form={form}
|
||||
handler={handler}
|
||||
className={merge(
|
||||
`grid grid-cols-2 gap-4 max-md:grid-cols-1 items-start`,
|
||||
)}
|
||||
>
|
||||
<FormField<Schema>
|
||||
name="username"
|
||||
label={<span className="w-full flex justify-end">用户名</span>}
|
||||
className="grid grid-cols-[48px_1fr] grid-rows-[auto_auto] gap-x-4"
|
||||
classNames={{
|
||||
message: `col-start-2`,
|
||||
}}
|
||||
>
|
||||
{({field}) => (
|
||||
<Input {...field} placeholder="请输入用户名" className="w-48 max-xl:w-full"/>
|
||||
)}
|
||||
</FormField>
|
||||
<FormField<Schema>
|
||||
name="email"
|
||||
label={<span className="w-full flex justify-end">邮箱</span>}
|
||||
className="grid grid-cols-[48px_1fr] grid-rows-[auto_auto] gap-x-4"
|
||||
classNames={{
|
||||
message: `col-start-2`,
|
||||
}}
|
||||
>
|
||||
{({field}) => (
|
||||
<Input {...field} placeholder="请输入邮箱" className="w-48 max-xl:w-full"/>
|
||||
)}
|
||||
</FormField>
|
||||
<FormField<Schema>
|
||||
name="contact_qq"
|
||||
label={<span className="w-full flex justify-end">QQ</span>}
|
||||
className="grid grid-cols-[48px_1fr] grid-rows-[auto_auto] gap-x-4"
|
||||
classNames={{
|
||||
message: `col-start-2`,
|
||||
}}
|
||||
>
|
||||
{({field}) => (
|
||||
<Input {...field} placeholder="请输入QQ号" className="w-48 max-xl:w-full"/>
|
||||
)}
|
||||
</FormField>
|
||||
<FormField<Schema>
|
||||
name="contact_wechat"
|
||||
label={<span className="w-full flex justify-end">微信</span>}
|
||||
className="grid grid-cols-[48px_1fr] grid-rows-[auto_auto] gap-x-4"
|
||||
classNames={{
|
||||
message: `col-start-2`,
|
||||
}}
|
||||
>
|
||||
{({field}) => (
|
||||
<Input {...field} placeholder="请输入微信号" className="w-48 max-xl:w-full"/>
|
||||
)}
|
||||
</FormField>
|
||||
<div className="flex justify-end gap-4 md:col-span-2 justify-self-stretch">
|
||||
<Button
|
||||
theme="outline"
|
||||
type="button"
|
||||
onClick={() => form.reset({
|
||||
username: props.profile.username || '',
|
||||
email: props.profile.email || '',
|
||||
contact_qq: props.profile.contact_qq || '',
|
||||
contact_wechat: props.profile.contact_wechat || '',
|
||||
})}>
|
||||
撤销
|
||||
</Button>
|
||||
<Button>保存</Button>
|
||||
</div>
|
||||
</Form>
|
||||
</div>
|
||||
)
|
||||
}
|
||||
Reference in New Issue
Block a user