修整优惠券页面，添加发放功能及权限控制 & 用户添加查看优惠券发放详情 & 添加切换线上环境页面显示功能
This commit is contained in:
Eamon
@@ -26,12 +26,40 @@ import {
|
||||
import type { Coupon } from "@/models/coupon"
|
||||
|
||||
const schema = z.object({
|
||||
code: z.string().min(1, "请输入优惠券名称"),
|
||||
amount: z.string().min(1, "请输入优惠券金额"),
|
||||
remark: z.string().optional(),
|
||||
min_amount: z.string().optional(),
|
||||
name: z.string().min(1, "请输入优惠券名称"),
|
||||
amount: z.string()
|
||||
.min(1, "请输入优惠券金额")
|
||||
.regex(/^\d+(\.\d+)?$/, "请输入有效的金额数字")
|
||||
.refine(val => Number(val) > 0, "优惠券金额必须大于0"),
|
||||
count: z.string()
|
||||
.min(1, "请输入优惠券数量")
|
||||
.regex(/^\d+$/, "请输入正整数")
|
||||
.refine(val => Number(val) >= 1, "优惠券数量至少为1"),
|
||||
min_amount: z.string()
|
||||
.min(1, "请输入最低消费金额")
|
||||
.regex(/^\d+(\.\d+)?$/, "请输入有效的金额数字")
|
||||
.refine(val => Number(val) >= 0, "最低消费金额不能为负数"),
|
||||
expire_at: z.string().optional(),
|
||||
status: z.string().optional(),
|
||||
expire_type: z.string().min(1, "请选择过期类型"),
|
||||
expire_in: z.string().optional(),
|
||||
status:z.string().optional()
|
||||
}).superRefine((data, ctx) => {
|
||||
const expireType = Number(data.expire_type);
|
||||
if (!data.expire_type) return;
|
||||
if (expireType === 1 && !data.expire_at) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
message: "请选择过期时间",
|
||||
path: ["expire_at"]
|
||||
});
|
||||
}
|
||||
if (expireType === 2 && !data.expire_in) {
|
||||
ctx.addIssue({
|
||||
code: z.ZodIssueCode.custom,
|
||||
message: "请输入过期时长天数",
|
||||
path: ["expire_in"]
|
||||
});
|
||||
}
|
||||
})
|
||||
|
||||
export function UpdateCoupon(props: {
|
||||
@@ -43,32 +71,36 @@ export function UpdateCoupon(props: {
|
||||
const form = useForm({
|
||||
resolver: zodResolver(schema),
|
||||
defaultValues: {
|
||||
code: props.coupon.code || "",
|
||||
remark: props.coupon.remark || "",
|
||||
amount: String(props.coupon.amount || 0),
|
||||
min_amount: String(props.coupon.min_amount || 0),
|
||||
expire_at: props.coupon.expire_at
|
||||
? new Date(props.coupon.expire_at).toISOString().split("T")[0]
|
||||
name: props.coupon.name,
|
||||
amount: String(props.coupon.amount),
|
||||
min_amount: String(props.coupon.min_amount),
|
||||
expire_at: props?.coupon.expire_at
|
||||
? new Date(props?.coupon.expire_at).toISOString().split("T")[0]
|
||||
: "",
|
||||
status: String(props.coupon.status || "0"),
|
||||
status: String(props.coupon.status),
|
||||
count: String(props.coupon.count),
|
||||
expire_in: String(props?.coupon.expire_in),
|
||||
},
|
||||
mode: "onChange",
|
||||
})
|
||||
|
||||
const { control, handleSubmit, reset } = form
|
||||
|
||||
const { control, handleSubmit, reset, watch } = form
|
||||
const watchExpireType = watch("expire_type")
|
||||
const onSubmit = async (data: z.infer<typeof schema>) => {
|
||||
try {
|
||||
const expireType = Number(data.expire_type)
|
||||
const payload = {
|
||||
id: props.coupon.id,
|
||||
code: data.code,
|
||||
name: data.name,
|
||||
amount: Number(data.amount),
|
||||
remark: data.remark,
|
||||
min_amount: Number(data.min_amount),
|
||||
expire_at: data.expire_at ? new Date(data.expire_at) : undefined,
|
||||
count: Number(data.count),
|
||||
status: Number(data.status),
|
||||
expire_type: expireType,
|
||||
expire_at: data.expire_at ? new Date(data.expire_at) : undefined,
|
||||
expire_in: expireType === 2 ? Number(data.expire_in) : undefined,
|
||||
}
|
||||
const resp = await updateCoupon(payload)
|
||||
const resp = await updateCoupon(payload)
|
||||
if (resp.success) {
|
||||
toast.success("优惠券修改成功")
|
||||
props.onSuccess?.()
|
||||
@@ -85,14 +117,16 @@ export function UpdateCoupon(props: {
|
||||
const handleOpenChange = (value: boolean) => {
|
||||
if (value) {
|
||||
reset({
|
||||
code: props.coupon.code || "",
|
||||
remark: props.coupon.remark || "",
|
||||
amount: String(props.coupon.amount || 0),
|
||||
min_amount: String(props.coupon.min_amount || 0),
|
||||
name: props.coupon.name,
|
||||
count: String(props.coupon.count),
|
||||
amount: String(props.coupon.amount ),
|
||||
min_amount: String(props.coupon.min_amount),
|
||||
expire_at: props.coupon.expire_at
|
||||
? new Date(props.coupon.expire_at).toISOString().split("T")[0]
|
||||
: "",
|
||||
status: String(props.coupon.status || "0"),
|
||||
status: String(props.coupon.status),
|
||||
expire_type: String(props.coupon.expire_type),
|
||||
expire_in: String(props.coupon.expire_in),
|
||||
})
|
||||
}
|
||||
setOpen(value)
|
||||
@@ -115,10 +149,10 @@ export function UpdateCoupon(props: {
|
||||
<FieldGroup>
|
||||
<Controller
|
||||
control={control}
|
||||
name="code"
|
||||
name="name"
|
||||
render={({ field, fieldState }) => (
|
||||
<div className="flex items-start gap-4">
|
||||
<FieldLabel className="w-28 pt-2">名称:</FieldLabel>
|
||||
<FieldLabel className="w-28 pt-2">优惠券名称:</FieldLabel>
|
||||
<div className="flex-1">
|
||||
<Input {...field} />
|
||||
<FieldError>{fieldState.error?.message}</FieldError>
|
||||
@@ -129,10 +163,10 @@ export function UpdateCoupon(props: {
|
||||
|
||||
<Controller
|
||||
control={control}
|
||||
name="remark"
|
||||
name="count"
|
||||
render={({ field, fieldState }) => (
|
||||
<div className="flex items-start gap-4">
|
||||
<FieldLabel className="w-28 pt-2">备注:</FieldLabel>
|
||||
<FieldLabel className="w-28 pt-2">优惠券数量:</FieldLabel>
|
||||
<div className="flex-1">
|
||||
<Input {...field} />
|
||||
<FieldError>{fieldState.error?.message}</FieldError>
|
||||
@@ -146,20 +180,9 @@ export function UpdateCoupon(props: {
|
||||
name="amount"
|
||||
render={({ field, fieldState }) => (
|
||||
<div className="flex items-start gap-4">
|
||||
<FieldLabel className="w-28 pt-2">金额:</FieldLabel>
|
||||
<FieldLabel className="w-28 pt-2">优惠券金额:</FieldLabel>
|
||||
<div className="flex-1">
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
step={5}
|
||||
{...field}
|
||||
onChange={e => {
|
||||
const value = e.target.value
|
||||
if (value === "" || parseFloat(value) >= 0) {
|
||||
field.onChange(value)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Input {...field} />
|
||||
<FieldError>{fieldState.error?.message}</FieldError>
|
||||
</div>
|
||||
</div>
|
||||
@@ -171,58 +194,28 @@ export function UpdateCoupon(props: {
|
||||
name="min_amount"
|
||||
render={({ field, fieldState }) => (
|
||||
<div className="flex items-start gap-4">
|
||||
<FieldLabel className="w-28 pt-2">最低消费:</FieldLabel>
|
||||
<FieldLabel className="w-28 pt-2">最低消费金额:</FieldLabel>
|
||||
<div className="flex-1">
|
||||
<Input
|
||||
type="number"
|
||||
min={0}
|
||||
step={5}
|
||||
{...field}
|
||||
onChange={e => {
|
||||
const value = e.target.value
|
||||
if (value === "" || parseFloat(value) >= 0) {
|
||||
field.onChange(value)
|
||||
}
|
||||
}}
|
||||
/>
|
||||
<Input {...field} />
|
||||
<FieldError>{fieldState.error?.message}</FieldError>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
control={control}
|
||||
name="expire_at"
|
||||
render={({ field, fieldState }) => (
|
||||
<div className="flex items-start gap-4">
|
||||
<FieldLabel className="w-28 pt-2">过期时间:</FieldLabel>
|
||||
<div className="flex-1">
|
||||
<Input
|
||||
type="date"
|
||||
min={new Date().toISOString().split("T")[0]}
|
||||
{...field}
|
||||
/>
|
||||
<FieldError>{fieldState.error?.message}</FieldError>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
|
||||
<Controller
|
||||
control={control}
|
||||
name="status"
|
||||
render={({ field, fieldState }) => (
|
||||
<div className="flex items-start gap-4">
|
||||
<FieldLabel className="w-28 pt-2">状态:</FieldLabel>
|
||||
<FieldLabel className="w-28 pt-2">优惠券状态:</FieldLabel>
|
||||
<div className="flex-1">
|
||||
<Select value={field.value} onValueChange={field.onChange}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="请选择状态" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="0">未使用</SelectItem>
|
||||
<SelectItem value="1">已使用</SelectItem>
|
||||
<SelectItem value="0">禁用</SelectItem>
|
||||
<SelectItem value="1">正常</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FieldError>{fieldState.error?.message}</FieldError>
|
||||
@@ -230,6 +223,68 @@ export function UpdateCoupon(props: {
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
<Controller
|
||||
control={control}
|
||||
name="expire_type"
|
||||
render={({ field, fieldState }) => (
|
||||
<div className="flex items-start gap-4">
|
||||
<FieldLabel className="w-28 pt-2">过期类型:</FieldLabel>
|
||||
<div className="flex-1">
|
||||
<Select value={field.value} onValueChange={field.onChange}>
|
||||
<SelectTrigger>
|
||||
<SelectValue placeholder="请选择过期类型" />
|
||||
</SelectTrigger>
|
||||
<SelectContent>
|
||||
<SelectItem value="0">不过期</SelectItem>
|
||||
<SelectItem value="1">固定日期</SelectItem>
|
||||
<SelectItem value="2">相对日期</SelectItem>
|
||||
</SelectContent>
|
||||
</Select>
|
||||
<FieldError>{fieldState.error?.message}</FieldError>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
{watchExpireType === "1" && (
|
||||
<Controller
|
||||
control={control}
|
||||
name="expire_at"
|
||||
render={({ field, fieldState }) => (
|
||||
<div className="flex items-start gap-4">
|
||||
<FieldLabel className="w-28 pt-2">过期时间:</FieldLabel>
|
||||
<div className="flex-1">
|
||||
<Input
|
||||
type="date"
|
||||
min={new Date().toISOString().split("T")[0]}
|
||||
{...field}
|
||||
/>
|
||||
<FieldError>{fieldState.error?.message}</FieldError>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
|
||||
{watchExpireType === "2" && (
|
||||
<Controller
|
||||
control={control}
|
||||
name="expire_in"
|
||||
render={({ field, fieldState }) => (
|
||||
<div className="flex items-start gap-4">
|
||||
<FieldLabel className="w-28 pt-2">过期时长（天）:</FieldLabel>
|
||||
<div className="flex-1">
|
||||
<Input
|
||||
type="number"
|
||||
min="0"
|
||||
placeholder="请输入过期天数"
|
||||
{...field}
|
||||
/>
|
||||
<FieldError>{fieldState.error?.message}</FieldError>
|
||||
</div>
|
||||
</div>
|
||||
)}
|
||||
/>
|
||||
)}
|
||||
</FieldGroup>
|
||||
</form>
|
||||
|
||||
|
||||
Reference in New Issue
Block a user