lanhu/web
2
0
Fork 0
Code Issues Actions Packages Releases 11 Activity

修改购买套餐调用接口后端计算价格 & 重置包时/包量初始化数量

Browse Source
This commit is contained in:
Eamon-meng
2025-12-17 10:13:38 +08:00
parent 4bb8d35b2a
commit 32a1b2a8b7
4 changed files with 87 additions and 32 deletions
Download Patch File Download Diff File Expand all files Collapse all files

16
src/components/composites/purchase/long/center.tsx
View File

@@ -10,11 +10,19 @@ import check from '../_assets/check.svg'
import {Schema} from '@/components/composites/purchase/long/form'
import {useFormContext, useWatch} from 'react-hook-form'
import {Card} from '@/components/ui/card'
import {useEffect} from 'react'
export default function Center() {
const form = useFormContext<Schema>()
const type = useWatch({name: 'type'})
useEffect(() => {
if (type === '1') {
form.setValue('quota', 100)
}
else {
form.setValue('quota', 500)
}
}, [type, form])
return (
<Card className="flex-auto p-6 flex flex-col gap-6 relative">
@@ -136,7 +144,7 @@ export default function Center() {
{/* 包时：每日提取上限 */}
<FormField
className="space-y-4"
name="daily_limit"
name="quota"
label="每日提取上限">
{({id, field}) => {
const value = Number(field.value) || 100
@@ -151,7 +159,7 @@ export default function Center() {
className={`h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg ${
value === minValue ? 'opacity-50 cursor-not-allowed' : ''
}`}
onClick={() => form.setValue('daily_limit', Math.max(minValue, value - step))}
onClick={() => form.setValue('quota', Math.max(minValue, value - step))}
disabled={value === minValue}>
<Minus/>
</Button>
@@ -164,7 +172,7 @@ export default function Center() {
theme="outline"
type="button"
className="h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg"
onClick={() => form.setValue('daily_limit', value + step)}>
onClick={() => form.setValue('quota', value + step)}>
<Plus/>
</Button>
</div>

47
src/components/composites/purchase/long/right.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import {Suspense, use, useContext, useMemo} from 'react'
import {Suspense, use, useContext, useEffect, useMemo, useState} from 'react'
import {PurchaseFormContext} from '@/components/composites/purchase/short/form'
import {RadioGroup} from '@/components/ui/radio-group'
import {FormField} from '@/components/ui/form'
@@ -17,6 +17,7 @@ import {merge} from '@/lib/utils'
import {useFormContext, useWatch} from 'react-hook-form'
import {Schema} from '@/components/composites/purchase/long/form'
import {Card} from '@/components/ui/card'
import {getPrice, CreateResourceReq} from '@/actions/resource'
export default function Right() {
const {control} = useFormContext<Schema>()
@@ -27,21 +28,37 @@ export default function Right() {
const expire = useWatch({control, name: 'expire'})
const dailyLimit = useWatch({control, name: 'daily_limit'})
const price = useMemo(() => {
const base = {
1: 30,
4: 80,
8: 120,
12: 180,
24: 350,
}[live]
const factor = {
1: Number(expire) * dailyLimit,
2: quota,
}[mode]
return (base * factor / 100).toFixed(2)
}, [dailyLimit, expire, live, quota, mode])
const [price, setPrice] = useState<string>('0.00')
useEffect(() => {
const price = async () => {
const params: CreateResourceReq = {
type: 2,
long: {
live: Number(live),
mode: Number(mode),
quota: quota,
expire: Number(mode) === 1 ? Number(expire) : undefined,
},
}
console.log(params, 'params')
try {
const priceValue = await getPrice(params)
if (priceValue.success && priceValue.data?.price) {
setPrice(priceValue.data.price)
}
else {
setPrice('0.00')
}
}
catch (error) {
console.error('获取价格失败:', error)
setPrice('0.00')
}
}
price()
}, [dailyLimit, expire, live, quota, mode])
return (
<Card className={merge(
`flex-none basis-90 p-6 flex flex-col gap-6 relative`,

16
src/components/composites/purchase/short/center.tsx
View File

@@ -10,11 +10,19 @@ import check from '../_assets/check.svg'
import {useFormContext, useWatch} from 'react-hook-form'
import {Schema} from '@/components/composites/purchase/short/form'
import {Card} from '@/components/ui/card'
import {useEffect} from 'react'
export default function Center() {
const form = useFormContext<Schema>()
const type = useWatch({name: 'type'})
useEffect(() => {
if (type === '1') {
form.setValue('quota', 2000)
}
else {
form.setValue('quota', 10000)
}
}, [type, form])
return (
<Card className="flex-auto p-6 flex flex-col gap-6 relative">
@@ -130,7 +138,7 @@ export default function Center() {
{/* 包时：每日提取上限 */}
<FormField
className="space-y-4"
name="daily_limit"
name="quota"
label="每日提取上限">
{({id, field}) => (
<div className="flex gap-2 items-center">
@@ -138,7 +146,7 @@ export default function Center() {
theme="outline"
type="button"
className="h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg"
onClick={() => form.setValue('daily_limit', Math.max(2_000, Number(field.value) - 1_000))}
onClick={() => form.setValue('quota', Math.max(2_000, Number(field.value) - 1_000))}
disabled={Number(field.value) === 2_000}>
<Minus/>
</Button>
@@ -154,7 +162,7 @@ export default function Center() {
theme="outline"
type="button"
className="h-10 w-10 border border-gray-200 rounded-sm flex items-center justify-center text-lg"
onClick={() => form.setValue('daily_limit', Number(field.value) + 1_000)}>
onClick={() => form.setValue('quota', Number(field.value) + 1_000)}>
<Plus/>
</Button>
</div>

40
src/components/composites/purchase/short/right.tsx
View File

@@ -1,5 +1,5 @@
'use client'
import {Suspense, use, useMemo} from 'react'
import {Suspense, use, useEffect, useMemo, useState} from 'react'
import {Schema} from '@/components/composites/purchase/short/form'
import {RadioGroup} from '@/components/ui/radio-group'
import {FormField} from '@/components/ui/form'
@@ -16,7 +16,7 @@ import {merge} from '@/lib/utils'
import Pay from '@/components/composites/purchase/pay'
import {useFormContext, useWatch} from 'react-hook-form'
import {Card} from '@/components/ui/card'
import {CreateResourceReq, getPrice} from '@/actions/resource'
export default function Right() {
const {control} = useFormContext<Schema>()
const method = useWatch({control, name: 'pay_type'})
@@ -26,13 +26,35 @@ export default function Right() {
const expire = useWatch({control, name: 'expire'})
const quota = useWatch({control, name: 'quota'})
const price = useMemo(() => {
const base = live === '180' ? 150 : Number(live)
const factor = {
1: Number(expire) * dailyLimit,
2: quota,
}[mode]
return (base * factor / 30000).toFixed(2)
const [price, setPrice] = useState<string>('0.00')
useEffect(() => {
const price = async () => {
const params: CreateResourceReq = {
type: 1,
short: {
live: Number(live),
mode: Number(mode),
quota: quota,
expire: Number(mode) === 1 ? Number(expire) : undefined,
},
}
console.log(params, 'params')
try {
const priceResponse = await getPrice(params)
if (priceResponse.success && priceResponse.data?.price) {
setPrice(priceResponse.data.price)
}
else {
setPrice('0.00')
}
}
catch (error) {
console.error('获取价格失败:', error)
setPrice('0.00')
}
}
price()
}, [dailyLimit, expire, live, quota, mode])
return (