347 lines
12 KiB
TypeScript
347 lines
12 KiB
TypeScript
import { zodResolver } from "@hookform/resolvers/zod"
|
||
import { format } from "date-fns"
|
||
import { Suspense, useCallback, useState } from "react"
|
||
import { Controller, useForm } from "react-hook-form"
|
||
import { toast } from "sonner"
|
||
import z from "zod"
|
||
import { issueCoupon } from "@/actions/coupon"
|
||
import { getPageUser } from "@/actions/user"
|
||
import { Badge } from "@/components/ui/badge"
|
||
import { Button } from "@/components/ui/button"
|
||
import {
|
||
Dialog,
|
||
DialogClose,
|
||
DialogContent,
|
||
DialogFooter,
|
||
DialogHeader,
|
||
DialogTitle,
|
||
DialogTrigger,
|
||
} from "@/components/ui/dialog"
|
||
import { Field, FieldError, FieldLabel } from "@/components/ui/field"
|
||
import { Input } from "@/components/ui/input"
|
||
import type { Coupon } from "@/models/coupon"
|
||
import type { User } from "@/models/user"
|
||
|
||
interface UserQueryParams {
|
||
account?: string
|
||
name?: string
|
||
}
|
||
|
||
const filterSchema = z.object({
|
||
phone: z.string().optional(),
|
||
name: z.string().optional(),
|
||
})
|
||
type FormValues = z.infer<typeof filterSchema>
|
||
|
||
export function IssueCoupon(props: { coupon: Coupon; onSuccess?: () => void }) {
|
||
const [open, setOpen] = useState(false)
|
||
const [userList, setUserList] = useState<User[]>([])
|
||
const [loading, setLoading] = useState(false)
|
||
const [currentFilters, setCurrentFilters] = useState<UserQueryParams>({})
|
||
const { control, handleSubmit, reset } = useForm<FormValues>({
|
||
resolver: zodResolver(filterSchema),
|
||
defaultValues: {
|
||
phone: "",
|
||
name: "",
|
||
},
|
||
})
|
||
|
||
const fetchUsers = useCallback(async (filters: UserQueryParams = {}) => {
|
||
setLoading(true)
|
||
try {
|
||
setOpen(true)
|
||
const res = await getPageUser(filters)
|
||
if (res.success) {
|
||
const data = Array.isArray(res.data) ? res.data : [res.data]
|
||
setUserList(data)
|
||
} else {
|
||
toast.error(res.message || "获取用户失败")
|
||
setUserList([])
|
||
}
|
||
} catch (error) {
|
||
const message = error instanceof Error ? error.message : error
|
||
toast.error(`获取用户失败: ${message}`)
|
||
} finally {
|
||
setLoading(false)
|
||
}
|
||
}, [])
|
||
|
||
const onFilter = handleSubmit((data: FormValues) => {
|
||
const params: UserQueryParams = {}
|
||
if (data.phone?.trim()) params.account = data.phone.trim()
|
||
if (data.name?.trim()) params.name = data.name.trim()
|
||
if (Object.keys(params).length === 0) {
|
||
toast.info("请至少输入一个搜索条件")
|
||
return
|
||
}
|
||
setCurrentFilters(params)
|
||
fetchUsers(params)
|
||
})
|
||
|
||
const handleReset = useCallback(() => {
|
||
reset()
|
||
setCurrentFilters({})
|
||
setUserList([])
|
||
}, [reset])
|
||
|
||
const handleIssueCoupon = useCallback(
|
||
async (users: User[], coupon: Coupon) => {
|
||
console.log(coupon, "couponcouponcoupon")
|
||
|
||
const targetUser = users[0]
|
||
|
||
if (!targetUser || !targetUser.id) {
|
||
toast.error("用户信息无效")
|
||
return
|
||
}
|
||
|
||
if (!coupon || !coupon.id) {
|
||
toast.error("优惠券信息无效")
|
||
return
|
||
}
|
||
if (coupon.status !== 1) {
|
||
toast.error("优惠券不可用，请检查优惠券状态")
|
||
return
|
||
}
|
||
try {
|
||
const result = await issueCoupon({
|
||
coupon_id: coupon.id,
|
||
user_id: targetUser.id,
|
||
})
|
||
console.log({
|
||
coupon_id: coupon.id,
|
||
user_id: targetUser.id,
|
||
})
|
||
|
||
console.log(result, "resultresultresultresultresult")
|
||
if (result.success) {
|
||
toast.success(
|
||
`成功发放优惠券给用户 ${targetUser.phone || targetUser.username}`,
|
||
)
|
||
setOpen(false)
|
||
handleReset()
|
||
props.onSuccess?.()
|
||
} else {
|
||
toast.error("发放失败，请稍后重试")
|
||
}
|
||
} catch (error) {
|
||
const message = error instanceof Error ? error.message : "发放失败"
|
||
toast.error(`发放优惠券失败: ${message}`)
|
||
}
|
||
},
|
||
[props.onSuccess, handleReset],
|
||
)
|
||
|
||
return (
|
||
<Dialog
|
||
open={open}
|
||
onOpenChange={newOpen => {
|
||
setOpen(newOpen)
|
||
if (!newOpen) {
|
||
handleReset()
|
||
}
|
||
}}
|
||
>
|
||
<DialogTrigger asChild>
|
||
<Button size="sm" variant="secondary">
|
||
发放
|
||
</Button>
|
||
</DialogTrigger>
|
||
|
||
<DialogContent
|
||
className="max-h-[85vh] overflow-y-auto"
|
||
style={{ width: "auto", minWidth: "800px", maxWidth: "90vw" }}
|
||
>
|
||
<DialogHeader>
|
||
<DialogTitle>发放优惠券</DialogTitle>
|
||
</DialogHeader>
|
||
<form onSubmit={onFilter} className="bg-card rounded-lg">
|
||
<div className="flex items-end gap-4">
|
||
<Controller
|
||
name="phone"
|
||
control={control}
|
||
render={({ field, fieldState }) => (
|
||
<Field data-invalid={fieldState.invalid} className="w-40 flex">
|
||
<FieldLabel>手机号</FieldLabel>
|
||
<Input {...field} placeholder="请输入手机号" />
|
||
<FieldError>{fieldState.error?.message}</FieldError>
|
||
</Field>
|
||
)}
|
||
/>
|
||
<Button type="button" variant="outline" onClick={handleReset}>
|
||
重置
|
||
</Button>
|
||
<Button type="submit">搜索</Button>
|
||
</div>
|
||
</form>
|
||
<Suspense fallback={<div className="py-8 text-center">加载中...</div>}>
|
||
{loading ? (
|
||
<div className="py-8 text-center">加载中...</div>
|
||
) : userList.length === 0 ? (
|
||
<div className="py-8 text-center text-gray-500">暂无用户数据</div>
|
||
) : (
|
||
<div className="space-y-4 max-h-[60vh] overflow-y-auto pr-1">
|
||
{userList.map(user => (
|
||
<div
|
||
key={user.id}
|
||
className="border rounded-lg overflow-hidden hover:shadow-md transition-shadow"
|
||
>
|
||
<div className="bg-gray-50 px-4 py-3 border-b flex items-center justify-between flex-wrap gap-2">
|
||
<div className="flex items-center gap-3">
|
||
<span className="font-medium text-base">
|
||
{user.phone || "未绑定手机"}
|
||
</span>
|
||
<div className="flex gap-2">
|
||
<Badge
|
||
variant={user.id_type === 1 ? "default" : "secondary"}
|
||
className={
|
||
user.id_type === 1
|
||
? "bg-green-100 text-green-700 hover:bg-green-100"
|
||
: "bg-gray-100 text-gray-600 hover:bg-gray-100"
|
||
}
|
||
>
|
||
{user.id_type === 1 ? "✓ 已认证" : "○ 未认证"}
|
||
</Badge>
|
||
<Badge
|
||
variant={
|
||
user.status === 1 ? "default" : "destructive"
|
||
}
|
||
className={
|
||
user.status === 1
|
||
? "bg-green-100 text-green-700 hover:bg-green-100"
|
||
: "bg-red-100 text-red-700 hover:bg-red-100"
|
||
}
|
||
>
|
||
{user.status === 1 ? "正常" : "禁用"}
|
||
</Badge>
|
||
</div>
|
||
</div>
|
||
<div className="flex items-center gap-2">
|
||
<span className="text-sm text-gray-500">
|
||
余额:
|
||
<span
|
||
className={`ml-1 font-semibold ${
|
||
Number(user.balance) > 0
|
||
? "text-green-600"
|
||
: "text-orange-600"
|
||
}`}
|
||
>
|
||
¥{(Number(user.balance) || 0).toFixed(2)}
|
||
</span>
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="p-4">
|
||
<div className="grid grid-cols-3 gap-4">
|
||
<div className="space-y-2">
|
||
<div className="text-sm">
|
||
<span className="text-gray-500 w-20 inline-block">
|
||
姓名：
|
||
</span>
|
||
<span className="text-gray-900">
|
||
{user.name || ""}
|
||
</span>
|
||
</div>
|
||
<div className="text-sm">
|
||
<span className="text-gray-500 w-20 inline-block">
|
||
账号：
|
||
</span>
|
||
<span className="text-gray-900">
|
||
{user.username || ""}
|
||
</span>
|
||
</div>
|
||
<div className="text-sm">
|
||
<span className="text-gray-500 w-20 inline-block">
|
||
客户经理：
|
||
</span>
|
||
<span className="text-gray-900">
|
||
{user.admin?.name || ""}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
<div className="space-y-2">
|
||
<div className="text-sm">
|
||
<span className="text-gray-500 w-20 inline-block">
|
||
客户来源：
|
||
</span>
|
||
<span className="text-gray-900">
|
||
{(() => {
|
||
const sourceMap: Record<number, string> = {
|
||
0: "官网注册",
|
||
1: "管理员添加",
|
||
2: "代理商注册",
|
||
3: "代理商添加",
|
||
}
|
||
return sourceMap[user.source] ?? "官网注册"
|
||
})()}
|
||
</span>
|
||
</div>
|
||
<div className="text-sm">
|
||
<span className="text-gray-500 w-20 inline-block">
|
||
联系方式：
|
||
</span>
|
||
<span className="text-gray-900">
|
||
{user.contact_wechat || ""}
|
||
</span>
|
||
</div>
|
||
<div className="text-sm">
|
||
<span className="text-gray-500 w-20 inline-block">
|
||
创建时间：
|
||
</span>
|
||
<span className="text-gray-900">
|
||
{user.created_at
|
||
? format(new Date(user.created_at), "yyyy-MM-dd")
|
||
: ""}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div className="space-y-2">
|
||
<div className="text-sm">
|
||
<span className="text-gray-500 w-20 inline-block">
|
||
最后登录：
|
||
</span>
|
||
<span className="text-gray-900">
|
||
{user.last_login
|
||
? format(
|
||
new Date(user.last_login),
|
||
"yyyy-MM-dd HH:mm",
|
||
)
|
||
: "-"}
|
||
</span>
|
||
</div>
|
||
<div className="text-sm">
|
||
<span className="text-gray-500 w-20 inline-block">
|
||
登录IP：
|
||
</span>
|
||
<span className="text-gray-900">
|
||
{user.last_login_ip || "-"}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
)}
|
||
</Suspense>
|
||
<DialogFooter>
|
||
<DialogClose asChild>
|
||
<Button variant="ghost" onClick={handleReset}>
|
||
取消
|
||
</Button>
|
||
</DialogClose>
|
||
<Button
|
||
type="button"
|
||
onClick={() => handleIssueCoupon(userList, props.coupon)}
|
||
disabled={!userList || userList.length === 0}
|
||
>
|
||
发放优惠券
|
||
</Button>
|
||
</DialogFooter>
|
||
</DialogContent>
|
||
</Dialog>
|
||
)
|
||
}
|