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

调整购买页面价格显示

Browse Source
This commit is contained in:
Eamon-meng
2026-06-18 15:11:28 +08:00
parent 96abb97a9a
commit c297c2330e
11 changed files with 111 additions and 25 deletions
Download Patch File Download Diff File Expand all files Collapse all files

2
src/app/admin/balance/page.tsx
View File

@@ -197,7 +197,7 @@ export default function BalancePage(props: BalancePageProps) {
<div className="flex items-center gap-1">
<span
className={`font-semibold ${
isPositive ? 'text-green-600' : 'text-red-600'
isPositive ? 'text-red-600' : 'text-green-600'
}`}
>
{isPositive ? '+' : ''}

1
src/components/composites/purchase/index.tsx
View File

@@ -30,6 +30,7 @@ export default function Purchase() {
const res = profile
? await listProduct({})
: await listProductHome({})
console.log(res, 'res')
if (res.success) {
setProductList(res.data)

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

@@ -9,7 +9,7 @@ import {Card} from '@/components/ui/card'
import {BillingMethodField} from '../shared/billing-method-field'
import {FeatureList} from '../shared/feature-list'
import {NumberStepperField} from '../shared/number-stepper-field'
import {getAvailablePurchaseExpires, getAvailablePurchaseLives, getPurchaseSkuCountMin, getPurchaseSkuPrice, hasPurchaseSku, PurchaseSkuData} from '../shared/sku'
import {getAvailablePurchaseExpires, getAvailablePurchaseLives, getPurchaseSkuCountMin, getPurchaseSkuDiscount, getPurchaseSkuPrice, hasPurchaseSku, PurchaseSkuData} from '../shared/sku'
export default function Center({skuData}: {
skuData: PurchaseSkuData
@@ -18,7 +18,7 @@ export default function Center({skuData}: {
const type = useWatch<Schema>({name: 'type'}) as Schema['type']
const live = useWatch<Schema>({name: 'live'}) as Schema['live']
const expire = useWatch<Schema>({name: 'expire'}) as Schema['expire']
const {modeList, priceMap} = skuData
const {modeList, priceMap, discountMap} = skuData
const liveList = type === '1'
? getAvailablePurchaseLives(skuData, {mode: type, expire})
: getAvailablePurchaseLives(skuData, {mode: type})
@@ -144,6 +144,11 @@ export default function Center({skuData}: {
live,
expire: priceExpire,
})
const discount = getPurchaseSkuDiscount(discountMap, {
mode: type,
live,
expire: priceExpire,
})
return (
<FormOption
key={live}
@@ -151,6 +156,8 @@ export default function Center({skuData}: {
value={live}
label={`${Number(live) / 60} 小时`}
description={price && `￥${price}/IP`}
price={price}
discount={discount}
compare={field.value}
/>
)

4
src/components/composites/purchase/long/form.tsx
View File

@@ -20,7 +20,7 @@ export type Schema = z.infer<typeof schema>
export default function LongForm({skuList}: {skuList: ProductItem['skus']}) {
const skuData = parsePurchaseSkuList('long', skuList)
const defaultMode = skuData.modeList.includes('1') ? '1' : '2'
const defaultMode = skuData.modeList.includes('2') ? '2' : '1'
const defaultLive = getAvailablePurchaseLives(skuData, {mode: defaultMode})[0] || ''
const defaultExpire = defaultMode === '1'
? getAvailablePurchaseExpires(skuData, {mode: defaultMode, live: defaultLive})[0] || '0'
@@ -46,7 +46,7 @@ export default function LongForm({skuList}: {skuList: ProductItem['skus']}) {
return (
<Form form={form} className="flex flex-col lg:flex-row gap-4">
<Center skuData={skuData}/>
<PurchaseSidePanel kind="long"/>
<PurchaseSidePanel kind="long" skuData={skuData}/>
</Form>
)
}

44
src/components/composites/purchase/option.tsx
View File

@@ -9,12 +9,37 @@ export type FormOptionProps = {
value: string
label?: string
description?: string
price?: string
discount?: number
compare: string
className?: string
children?: ReactNode
}
export default function FormOption(props: FormOptionProps) {
// 安全地解析价格
const priceNum = props.price ? parseFloat(props.price) : NaN
const isValidPrice = !isNaN(priceNum) && priceNum > 0
const discount = typeof props.discount === 'number' ? props.discount : undefined
const hasDiscount = isValidPrice && discount !== undefined && discount < 100
const discountedPrice = hasDiscount ? priceNum * discount / 100 : null
const formatPrice = (price: number | string): string => {
const num = typeof price === 'string' ? parseFloat(price) : price
// 如果是 NaN 或无效值，返回空字符串
if (isNaN(num) || !isFinite(num)) return ''
const str = num.toString()
if (!str.includes('.')) return str
const decimal = str.split('.')[1]
if (/^0+$/.test(decimal)) return Math.floor(num).toString()
if (decimal.length <= 2) return str
return num.toFixed(4).replace(/\.?0+$/, '')
}
return (
<>
<FormLabel
@@ -28,7 +53,24 @@ export default function FormOption(props: FormOptionProps) {
{props.children ? props.children : (
<>
<span>{props.label}</span>
{props.description && <p className="text-sm text-gray-500">{props.description}</p>}
{props.description && !isValidPrice && (
<p className="text-sm text-gray-500">{props.description}</p>
)}
{isValidPrice && (
<div className="flex items-center gap-2 flex-wrap">
{hasDiscount ? (
<>
<p className="text-sm font-medium">￥{formatPrice(discountedPrice!)}/IP</p>
<p className="text-sm text-gray-500 line-through">原价:{formatPrice(props.price!)}/IP</p>
{/* <span className="text-xs font-medium text-orange-600 bg-orange-50 px-1.5 py-0.5 rounded-full">
{props.discount}折
</span> */}
</>
) : (
<p className="text-sm">￥{formatPrice(props.price!)}/IP</p>
)}
</div>
)}
</>
)}
</FormLabel>

19
src/components/composites/purchase/shared/billing-method-field.tsx
View File

@@ -34,16 +34,6 @@ export function BillingMethodField(props: {
}}
className="flex gap-4 max-md:flex-col"
>
{props.modeList.includes('1') && (
<FormOption
id={`${id}-1`}
value="1"
label="包时套餐"
description="适用于每日提取量稳定的业务场景"
compare={field.value}
/>
)}
{props.modeList.includes('2') && (
<FormOption
id={`${id}-2`}
@@ -53,6 +43,15 @@ export function BillingMethodField(props: {
compare={field.value}
/>
)}
{props.modeList.includes('1') && (
<FormOption
id={`${id}-1`}
value="1"
label="包时套餐"
description="适用于每日提取量稳定的业务场景"
compare={field.value}
/>
)}
</RadioGroup>
)}
</FormField>

23
src/components/composites/purchase/shared/side-panel.tsx
View File

@@ -11,7 +11,7 @@ import {FieldPayment} from './field-payment'
import {buildPurchaseResource, PurchaseKind, PurchaseSelection} from './resource'
import {getPrice, getPriceHome} from '@/actions/resource'
import {ExtraResp} from '@/lib/api'
import {formatPurchaseLiveLabel} from './sku'
import {formatPurchaseLiveLabel, getPurchaseSkuCountMin, PurchaseSkuData} from './sku'
import {User} from '@/lib/models'
import {PurchaseFormValues} from './form-values'
import {IdCard} from 'lucide-react'
@@ -25,6 +25,7 @@ const emptyPrice: ExtraResp<typeof getPrice> = {
export type PurchaseSidePanelProps = {
kind: PurchaseKind
skuData: PurchaseSkuData
}
export function PurchaseSidePanel(props: PurchaseSidePanelProps) {
@@ -44,7 +45,7 @@ export function PurchaseSidePanel(props: PurchaseSidePanelProps) {
expire,
dailyLimit,
}
const {priceData, isLoading, isError} = usePurchasePrice(profile, selection)
const {priceData, isLoading, isError} = usePurchasePrice(profile, selection, props.skuData)
const {price, actual: discountedPrice = '0.00'} = priceData
const totalDiscount = getTotalDiscount(price, discountedPrice)
const hasDiscount = Number(totalDiscount) > 0
@@ -154,7 +155,7 @@ export function PurchaseSidePanel(props: PurchaseSidePanelProps) {
)
}
function usePurchasePrice(profile: User | null, selection: PurchaseSelection) {
function usePurchasePrice(profile: User | null, selection: PurchaseSelection, skuData: PurchaseSkuData) {
const [priceData, setPriceData] = useState<ExtraResp<typeof getPrice>>(emptyPrice)
const [isLoading, setIsLoading] = useState(true)
const [isError, setIsError] = useState(false)
@@ -164,6 +165,15 @@ function usePurchasePrice(profile: User | null, selection: PurchaseSelection) {
useEffect(() => {
const requestId = ++requestIdRef.current
const expireValue = mode === '1' ? expire : '0'
const countMin = getPurchaseSkuCountMin(skuData, {mode, live, expire: expireValue})
const quantity = mode === '1' ? dailyLimit : quota
if (countMin > 0 && quantity < countMin) {
setIsLoading(false)
setIsError(false)
return
}
const loadPrice = async () => {
setIsLoading(true)
setIsError(false)
@@ -177,6 +187,7 @@ function usePurchasePrice(profile: User | null, selection: PurchaseSelection) {
expire,
dailyLimit,
})
const response = profile
? await getPrice(resource)
: await getPriceHome(resource)
@@ -184,7 +195,9 @@ function usePurchasePrice(profile: User | null, selection: PurchaseSelection) {
if (requestId !== requestIdRef.current) {
return
}
if (!response.success) {
throw new Error(response.message)
}
if (response.success) {
setPriceData({
price: response.data.price,
@@ -211,7 +224,7 @@ function usePurchasePrice(profile: User | null, selection: PurchaseSelection) {
}
loadPrice()
}, [dailyLimit, expire, kind, live, mode, profile, quota])
}, [dailyLimit, expire, kind, live, mode, profile, quota, skuData])
return {priceData, isLoading, isError}
}

15
src/components/composites/purchase/shared/sku.ts
View File

@@ -8,12 +8,14 @@ export type PurchaseSkuItem = {
expire: string
price: string
count_min: number
discount: number
}
export type PurchaseSkuData = {
items: PurchaseSkuItem[]
priceMap: Map<string, string>
countMinMap: Map<string, number>
discountMap: Map<string, number>
modeList: PurchaseMode[]
liveList: string[]
expireList: string[]
@@ -27,6 +29,7 @@ export function parsePurchaseSkuList(kind: PurchaseKind, skuList: ProductItem['s
const items: PurchaseSkuItem[] = []
const priceMap = new Map<string, string>()
const countMinMap = new Map<string, number>()
const discountMap = new Map<string, number>()
const modeSet = new Set<PurchaseMode>()
const liveSet = new Set<number>()
const expireSet = new Set<number>()
@@ -51,6 +54,7 @@ export function parsePurchaseSkuList(kind: PurchaseKind, skuList: ProductItem['s
const countMin = typeof sku.count_min === 'number' ? sku.count_min : Number(sku.count_min) || 0
countMinMap.set(code, countMin)
const skuDiscount = sku.discount ?? 100
items.push({
code,
mode,
@@ -58,8 +62,10 @@ export function parsePurchaseSkuList(kind: PurchaseKind, skuList: ProductItem['s
expire: expireValue,
price: sku.price,
count_min: countMin,
discount: skuDiscount,
})
priceMap.set(code, sku.price)
discountMap.set(code, skuDiscount)
modeSet.add(mode)
liveSet.add(live)
@@ -82,6 +88,7 @@ export function parsePurchaseSkuList(kind: PurchaseKind, skuList: ProductItem['s
items,
priceMap,
countMinMap,
discountMap,
modeList: (['2', '1'] as const).filter(mode => modeSet.has(mode)),
liveList: sortNumericValues(liveSet),
expireList: sortNumericValues(expireSet),
@@ -157,6 +164,14 @@ export function getPurchaseSkuPrice(priceMap: Map<string, string>, props: {
return priceMap.get(getPurchaseSkuKey(props))
}
export function getPurchaseSkuDiscount(discountMap: Map<string, number>, props: {
mode: PurchaseMode
live: string
expire: string
}) {
return discountMap.get(getPurchaseSkuKey(props))
}
export function formatPurchaseLiveLabel(live: string, kind: PurchaseKind) {
const minutes = Number(live)

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

@@ -9,7 +9,7 @@ import {Card} from '@/components/ui/card'
import {BillingMethodField} from '../shared/billing-method-field'
import {FeatureList} from '../shared/feature-list'
import {NumberStepperField} from '../shared/number-stepper-field'
import {getAvailablePurchaseExpires, getAvailablePurchaseLives, getPurchaseSkuCountMin, getPurchaseSkuPrice, hasPurchaseSku, PurchaseSkuData} from '../shared/sku'
import {getAvailablePurchaseExpires, getAvailablePurchaseLives, getPurchaseSkuCountMin, getPurchaseSkuDiscount, getPurchaseSkuPrice, hasPurchaseSku, PurchaseSkuData} from '../shared/sku'
export default function Center({
skuData,
@@ -20,7 +20,7 @@ export default function Center({
const type = useWatch<Schema>({name: 'type'}) as Schema['type']
const live = useWatch<Schema>({name: 'live'}) as Schema['live']
const expire = useWatch<Schema>({name: 'expire'}) as Schema['expire']
const {modeList, priceMap} = skuData
const {modeList, priceMap, discountMap} = skuData
const liveList = type === '1'
? getAvailablePurchaseLives(skuData, {mode: type, expire})
: getAvailablePurchaseLives(skuData, {mode: type})
@@ -145,6 +145,11 @@ export default function Center({
live,
expire: priceExpire,
})
const discount = getPurchaseSkuDiscount(discountMap, {
mode: type,
live,
expire: priceExpire,
})
const minutes = Number(live)
const hours = minutes / 60
const label = minutes % 60 === 0 ? `${hours} 小时` : `${minutes} 分钟`
@@ -155,6 +160,8 @@ export default function Center({
value={live}
label={label}
description={price && `￥${price}/IP`}
price={price}
discount={discount}
compare={field.value}
/>
)

5
src/components/composites/purchase/short/form.tsx
View File

@@ -20,7 +20,7 @@ export type Schema = z.infer<typeof schema>
export default function ShortForm({skuList}: {skuList: ProductItem['skus']}) {
const skuData = parsePurchaseSkuList('short', skuList)
const defaultMode = skuData.modeList.includes('1') ? '1' : '2'
const defaultMode = skuData.modeList.includes('2') ? '2' : '1'
const defaultLive = getAvailablePurchaseLives(skuData, {mode: defaultMode})[0] || ''
const defaultExpire = defaultMode === '1'
? getAvailablePurchaseExpires(skuData, {mode: defaultMode, live: defaultLive})[0] || '0'
@@ -42,11 +42,12 @@ export default function ShortForm({skuList}: {skuList: ProductItem['skus']}) {
pay_type: 'balance', // 余额支付
},
})
console.log(skuData, 'skuData')
return (
<Form form={form} className="flex flex-col lg:flex-row gap-4">
<Center skuData={skuData}/>
<PurchaseSidePanel kind="short"/>
<PurchaseSidePanel kind="short" skuData={skuData}/>
</Form>
)
}

1
src/lib/models/product-sku.ts
View File

@@ -7,5 +7,6 @@ export type ProductSku = {
price_min: string
product_id: number
discount_id: number
discount?: number
status: number
}