Compare commits
3 Commits
bdd4424f44
...
c2465ece04
| Author | SHA1 | Date | |
|---|---|---|---|
|
|
c2465ece04 | ||
|
|
c297c2330e | ||
|
|
96abb97a9a |
@@ -1,6 +1,6 @@
|
|||||||
{
|
{
|
||||||
"name": "lanhu-web",
|
"name": "lanhu-web",
|
||||||
"version": "1.13.1",
|
"version": "1.14.0",
|
||||||
"private": true,
|
"private": true,
|
||||||
"scripts": {
|
"scripts": {
|
||||||
"dev": "next dev -H 0.0.0.0 --turbopack",
|
"dev": "next dev -H 0.0.0.0 --turbopack",
|
||||||
|
|||||||
@@ -80,12 +80,14 @@ export async function completeResource(props: {
|
|||||||
}) {
|
}) {
|
||||||
return callByUser('/api/trade/complete', props)
|
return callByUser('/api/trade/complete', props)
|
||||||
}
|
}
|
||||||
|
type PayCloseData = {
|
||||||
|
status: 0 | 1 | 2
|
||||||
|
}
|
||||||
export async function payClose(props: {
|
export async function payClose(props: {
|
||||||
trade_no: string
|
trade_no: string
|
||||||
method: number
|
method: number
|
||||||
}) {
|
}) {
|
||||||
return callByUser('/api/trade/cancel', props)
|
return callByUser<PayCloseData>('/api/trade/finish', props)
|
||||||
}
|
}
|
||||||
|
|
||||||
export async function getPrice(props: CreateResourceReq) {
|
export async function getPrice(props: CreateResourceReq) {
|
||||||
|
|||||||
@@ -14,8 +14,7 @@
|
|||||||
| b | string | 否 | 归属地城市。默认全局随机 |
|
| b | string | 否 | 归属地城市。默认全局随机 |
|
||||||
| s | string | 否 | 归属地运营商。默认全局随机 |
|
| s | string | 否 | 归属地运营商。默认全局随机 |
|
||||||
| d | string | 否 | 是否去重:1 - 是,0 - 否。默认为是 |
|
| d | string | 否 | 是否去重:1 - 是,0 - 否。默认为是 |
|
||||||
| rt | string | 否 | 返回类型:1 - TXT,2 - JSON。默认 TXT
|
| rt | string | 否 | 返回类型:1 - TXT,2 - JSON。默认 TXT |
|
||||||
| rh | string | 否 | 返回时主机字段的格式:1 - 域名,2 - IP。默认为域名 |
|
|
||||||
| rs | number[] | 否 | 返回时要使用的分隔符,值为该字符的 ascii 编码,可以有多个字符,多个字符用半角逗号连接。默认为 13,10,即回车 + 换行(\r\n) |
|
| rs | number[] | 否 | 返回时要使用的分隔符,值为该字符的 ascii 编码,可以有多个字符,多个字符用半角逗号连接。默认为 13,10,即回车 + 换行(\r\n) |
|
||||||
| rb | number[] | 否 | 返回时要使用的换行符,值为该字符的 ascii 编码,可以有多个字符,多个字符用半角逗号连接。默认为 124,即垂直线( \| ) |
|
| rb | number[] | 否 | 返回时要使用的换行符,值为该字符的 ascii 编码,可以有多个字符,多个字符用半角逗号连接。默认为 124,即垂直线( \| ) |
|
||||||
| n | number | 否 | 提取数量。默认为 1 |
|
| n | number | 否 | 提取数量。默认为 1 |
|
||||||
|
|||||||
@@ -197,7 +197,7 @@ export default function BalancePage(props: BalancePageProps) {
|
|||||||
<div className="flex items-center gap-1">
|
<div className="flex items-center gap-1">
|
||||||
<span
|
<span
|
||||||
className={`font-semibold ${
|
className={`font-semibold ${
|
||||||
isPositive ? 'text-green-600' : 'text-red-600'
|
isPositive ? 'text-red-600' : 'text-green-600'
|
||||||
}`}
|
}`}
|
||||||
>
|
>
|
||||||
{isPositive ? '+' : ''}
|
{isPositive ? '+' : ''}
|
||||||
|
|||||||
@@ -31,7 +31,7 @@ const schema = z.object({
|
|||||||
authType: z.enum(['1', '2'], {required_error: '请选择认证方式'}),
|
authType: z.enum(['1', '2'], {required_error: '请选择认证方式'}),
|
||||||
distinct: z.enum(['1', '0'], {required_error: '请选择去重选项'}),
|
distinct: z.enum(['1', '0'], {required_error: '请选择去重选项'}),
|
||||||
format: z.enum(['text', 'json'], {required_error: '请选择导出格式'}),
|
format: z.enum(['text', 'json'], {required_error: '请选择导出格式'}),
|
||||||
hostFormat: z.enum(['domain', 'ip'], {required_error: '请选择主机格式'}),
|
// hostFormat: z.enum(['domain', 'ip'], {required_error: '请选择主机格式'}),
|
||||||
separator: z.string({required_error: '请选择分隔符'}),
|
separator: z.string({required_error: '请选择分隔符'}),
|
||||||
breaker: z.string({required_error: '请选择换行符'}),
|
breaker: z.string({required_error: '请选择换行符'}),
|
||||||
count: z.number({required_error: '请输入有效的数量'}).min(1),
|
count: z.number({required_error: '请输入有效的数量'}).min(1),
|
||||||
@@ -53,7 +53,7 @@ export default function Extract(props: ExtractProps) {
|
|||||||
authType: '1',
|
authType: '1',
|
||||||
count: 1,
|
count: 1,
|
||||||
distinct: '1',
|
distinct: '1',
|
||||||
hostFormat: 'ip',
|
// hostFormat: 'ip',
|
||||||
format: 'text',
|
format: 'text',
|
||||||
breaker: '13,10',
|
breaker: '13,10',
|
||||||
separator: '124',
|
separator: '124',
|
||||||
@@ -221,7 +221,7 @@ const FormFields = memo(() => {
|
|||||||
</FormField>
|
</FormField>
|
||||||
|
|
||||||
{/* 主机格式 */}
|
{/* 主机格式 */}
|
||||||
<FormField name="hostFormat" className="md:max-w-[calc(160px*2+1rem)]" label="主机格式" classNames={{label: 'max-md:text-sm'}}>
|
{/* <FormField name="hostFormat" className="md:max-w-[calc(160px*2+1rem)]" label="主机格式" classNames={{label: 'max-md:text-sm'}}>
|
||||||
{({id, field}) => (
|
{({id, field}) => (
|
||||||
<RadioGroup
|
<RadioGroup
|
||||||
onValueChange={field.onChange}
|
onValueChange={field.onChange}
|
||||||
@@ -238,7 +238,7 @@ const FormFields = memo(() => {
|
|||||||
</FormLabel>
|
</FormLabel>
|
||||||
</RadioGroup>
|
</RadioGroup>
|
||||||
)}
|
)}
|
||||||
</FormField>
|
</FormField> */}
|
||||||
|
|
||||||
{/* 分隔符 */}
|
{/* 分隔符 */}
|
||||||
<FormField name="separator" className="md:max-w-[calc(160px*3+1rem*2)]" label="分隔符" classNames={{label: 'max-md:text-sm'}}>
|
<FormField name="separator" className="md:max-w-[calc(160px*3+1rem*2)]" label="分隔符" classNames={{label: 'max-md:text-sm'}}>
|
||||||
@@ -711,7 +711,7 @@ function ApplyLink() {
|
|||||||
}
|
}
|
||||||
|
|
||||||
function link(values: Schema) {
|
function link(values: Schema) {
|
||||||
const {resource, prov, city, isp, proto, authType, distinct, format: formatType, hostFormat, separator, breaker, count} = values
|
const {resource, prov, city, isp, proto, authType, distinct, format: formatType, separator, breaker, count} = values
|
||||||
console.log(values, 'values')
|
console.log(values, 'values')
|
||||||
|
|
||||||
const sp = new URLSearchParams()
|
const sp = new URLSearchParams()
|
||||||
@@ -724,7 +724,7 @@ function link(values: Schema) {
|
|||||||
if (isp != 'all') sp.set('s', isp)
|
if (isp != 'all') sp.set('s', isp)
|
||||||
sp.set('d', distinct)
|
sp.set('d', distinct)
|
||||||
sp.set('rt', formatType)
|
sp.set('rt', formatType)
|
||||||
sp.set('rh', hostFormat)
|
sp.set('rh', 'ip')
|
||||||
sp.set('rs', separator)
|
sp.set('rs', separator)
|
||||||
sp.set('rb', breaker)
|
sp.set('rb', breaker)
|
||||||
sp.set('n', String(count))
|
sp.set('n', String(count))
|
||||||
|
|||||||
@@ -8,7 +8,7 @@ import {payClose} from '@/actions/resource'
|
|||||||
import {useEffect} from 'react'
|
import {useEffect} from 'react'
|
||||||
import {UniversalDesktopPayment} from './universal-desktop-payment'
|
import {UniversalDesktopPayment} from './universal-desktop-payment'
|
||||||
import {useAppStore} from '@/components/stores/app'
|
import {useAppStore} from '@/components/stores/app'
|
||||||
|
import {toast} from 'sonner'
|
||||||
export type PaymentModalProps = {
|
export type PaymentModalProps = {
|
||||||
onConfirm: (showFail: boolean) => Promise<void>
|
onConfirm: (showFail: boolean) => Promise<void>
|
||||||
onClose: () => void
|
onClose: () => void
|
||||||
@@ -17,45 +17,49 @@ export type PaymentModalProps = {
|
|||||||
export function PaymentModal(props: PaymentModalProps) {
|
export function PaymentModal(props: PaymentModalProps) {
|
||||||
// 手动关闭时的处理
|
// 手动关闭时的处理
|
||||||
const handleClose = async () => {
|
const handleClose = async () => {
|
||||||
// try {
|
try {
|
||||||
// const res = await payClose({
|
const res = await payClose({
|
||||||
// trade_no: props.inner_no,
|
trade_no: props.inner_no,
|
||||||
// method: props.method,
|
method: props.method,
|
||||||
// })
|
})
|
||||||
// if (!res.success) {
|
|
||||||
// throw new Error(res.message)
|
if (!res.success) {
|
||||||
// }
|
throw new Error(res.message || '请求失败')
|
||||||
// }
|
}
|
||||||
// catch (error) {
|
if (res.data.status === 1) {
|
||||||
// console.error('关闭订单失败:', error)
|
toast.success('已支付成功!')
|
||||||
// }
|
}
|
||||||
// finally {
|
}
|
||||||
props.onClose?.()
|
catch (error) {
|
||||||
// }
|
console.error('关闭订单失败:', error)
|
||||||
|
}
|
||||||
|
finally {
|
||||||
|
props.onClose?.()
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
// SSE处理方式检查支付状态
|
// SSE处理方式检查支付状态
|
||||||
const apiUrl = useAppStore('apiUrl')
|
// const apiUrl = useAppStore('apiUrl')
|
||||||
useEffect(() => {
|
// useEffect(() => {
|
||||||
const eventSource = new EventSource(
|
// const eventSource = new EventSource(
|
||||||
`${apiUrl}/api/trade/check?trade_no=${props.inner_no}&method=${props.method}`,
|
// `${apiUrl}/api/trade/check?trade_no=${props.inner_no}&method=${props.method}`,
|
||||||
)
|
// )
|
||||||
eventSource.onmessage = async (event) => {
|
// eventSource.onmessage = async (event) => {
|
||||||
switch (event.data) {
|
// switch (event.data) {
|
||||||
case '1':
|
// case '1':
|
||||||
props.onConfirm?.(true)
|
// props.onConfirm?.(true)
|
||||||
case '2':
|
// case '2':
|
||||||
props.onClose?.()
|
// props.onClose?.()
|
||||||
}
|
// }
|
||||||
}
|
// }
|
||||||
eventSource.onerror = (error) => {
|
// eventSource.onerror = (error) => {
|
||||||
console.error('SSE 连接错误:', error)
|
// console.error('SSE 连接错误:', error)
|
||||||
}
|
// }
|
||||||
|
|
||||||
return () => {
|
// return () => {
|
||||||
eventSource.close()
|
// eventSource.close()
|
||||||
}
|
// }
|
||||||
}, [apiUrl, props])
|
// }, [apiUrl, props])
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Dialog
|
<Dialog
|
||||||
|
|||||||
@@ -30,6 +30,7 @@ export default function Purchase() {
|
|||||||
const res = profile
|
const res = profile
|
||||||
? await listProduct({})
|
? await listProduct({})
|
||||||
: await listProductHome({})
|
: await listProductHome({})
|
||||||
|
console.log(res, 'res')
|
||||||
|
|
||||||
if (res.success) {
|
if (res.success) {
|
||||||
setProductList(res.data)
|
setProductList(res.data)
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ import {Card} from '@/components/ui/card'
|
|||||||
import {BillingMethodField} from '../shared/billing-method-field'
|
import {BillingMethodField} from '../shared/billing-method-field'
|
||||||
import {FeatureList} from '../shared/feature-list'
|
import {FeatureList} from '../shared/feature-list'
|
||||||
import {NumberStepperField} from '../shared/number-stepper-field'
|
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}: {
|
export default function Center({skuData}: {
|
||||||
skuData: PurchaseSkuData
|
skuData: PurchaseSkuData
|
||||||
@@ -18,7 +18,7 @@ export default function Center({skuData}: {
|
|||||||
const type = useWatch<Schema>({name: 'type'}) as Schema['type']
|
const type = useWatch<Schema>({name: 'type'}) as Schema['type']
|
||||||
const live = useWatch<Schema>({name: 'live'}) as Schema['live']
|
const live = useWatch<Schema>({name: 'live'}) as Schema['live']
|
||||||
const expire = useWatch<Schema>({name: 'expire'}) as Schema['expire']
|
const expire = useWatch<Schema>({name: 'expire'}) as Schema['expire']
|
||||||
const {modeList, priceMap} = skuData
|
const {modeList, priceMap, discountMap} = skuData
|
||||||
const liveList = type === '1'
|
const liveList = type === '1'
|
||||||
? getAvailablePurchaseLives(skuData, {mode: type, expire})
|
? getAvailablePurchaseLives(skuData, {mode: type, expire})
|
||||||
: getAvailablePurchaseLives(skuData, {mode: type})
|
: getAvailablePurchaseLives(skuData, {mode: type})
|
||||||
@@ -144,6 +144,11 @@ export default function Center({skuData}: {
|
|||||||
live,
|
live,
|
||||||
expire: priceExpire,
|
expire: priceExpire,
|
||||||
})
|
})
|
||||||
|
const discount = getPurchaseSkuDiscount(discountMap, {
|
||||||
|
mode: type,
|
||||||
|
live,
|
||||||
|
expire: priceExpire,
|
||||||
|
})
|
||||||
return (
|
return (
|
||||||
<FormOption
|
<FormOption
|
||||||
key={live}
|
key={live}
|
||||||
@@ -151,6 +156,8 @@ export default function Center({skuData}: {
|
|||||||
value={live}
|
value={live}
|
||||||
label={`${Number(live) / 60} 小时`}
|
label={`${Number(live) / 60} 小时`}
|
||||||
description={price && `¥${price}/IP`}
|
description={price && `¥${price}/IP`}
|
||||||
|
price={price}
|
||||||
|
discount={discount}
|
||||||
compare={field.value}
|
compare={field.value}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -20,7 +20,7 @@ export type Schema = z.infer<typeof schema>
|
|||||||
|
|
||||||
export default function LongForm({skuList}: {skuList: ProductItem['skus']}) {
|
export default function LongForm({skuList}: {skuList: ProductItem['skus']}) {
|
||||||
const skuData = parsePurchaseSkuList('long', skuList)
|
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 defaultLive = getAvailablePurchaseLives(skuData, {mode: defaultMode})[0] || ''
|
||||||
const defaultExpire = defaultMode === '1'
|
const defaultExpire = defaultMode === '1'
|
||||||
? getAvailablePurchaseExpires(skuData, {mode: defaultMode, live: defaultLive})[0] || '0'
|
? getAvailablePurchaseExpires(skuData, {mode: defaultMode, live: defaultLive})[0] || '0'
|
||||||
@@ -46,7 +46,7 @@ export default function LongForm({skuList}: {skuList: ProductItem['skus']}) {
|
|||||||
return (
|
return (
|
||||||
<Form form={form} className="flex flex-col lg:flex-row gap-4">
|
<Form form={form} className="flex flex-col lg:flex-row gap-4">
|
||||||
<Center skuData={skuData}/>
|
<Center skuData={skuData}/>
|
||||||
<PurchaseSidePanel kind="long"/>
|
<PurchaseSidePanel kind="long" skuData={skuData}/>
|
||||||
</Form>
|
</Form>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -9,12 +9,37 @@ export type FormOptionProps = {
|
|||||||
value: string
|
value: string
|
||||||
label?: string
|
label?: string
|
||||||
description?: string
|
description?: string
|
||||||
|
price?: string
|
||||||
|
discount?: number
|
||||||
compare: string
|
compare: string
|
||||||
className?: string
|
className?: string
|
||||||
children?: ReactNode
|
children?: ReactNode
|
||||||
}
|
}
|
||||||
|
|
||||||
export default function FormOption(props: FormOptionProps) {
|
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 (
|
return (
|
||||||
<>
|
<>
|
||||||
<FormLabel
|
<FormLabel
|
||||||
@@ -28,7 +53,24 @@ export default function FormOption(props: FormOptionProps) {
|
|||||||
{props.children ? props.children : (
|
{props.children ? props.children : (
|
||||||
<>
|
<>
|
||||||
<span>{props.label}</span>
|
<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>
|
</FormLabel>
|
||||||
|
|||||||
@@ -34,16 +34,6 @@ export function BillingMethodField(props: {
|
|||||||
}}
|
}}
|
||||||
className="flex gap-4 max-md:flex-col"
|
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') && (
|
{props.modeList.includes('2') && (
|
||||||
<FormOption
|
<FormOption
|
||||||
id={`${id}-2`}
|
id={`${id}-2`}
|
||||||
@@ -53,6 +43,15 @@ export function BillingMethodField(props: {
|
|||||||
compare={field.value}
|
compare={field.value}
|
||||||
/>
|
/>
|
||||||
)}
|
)}
|
||||||
|
{props.modeList.includes('1') && (
|
||||||
|
<FormOption
|
||||||
|
id={`${id}-1`}
|
||||||
|
value="1"
|
||||||
|
label="包时套餐"
|
||||||
|
description="适用于每日提取量稳定的业务场景"
|
||||||
|
compare={field.value}
|
||||||
|
/>
|
||||||
|
)}
|
||||||
</RadioGroup>
|
</RadioGroup>
|
||||||
)}
|
)}
|
||||||
</FormField>
|
</FormField>
|
||||||
|
|||||||
@@ -11,7 +11,7 @@ import {FieldPayment} from './field-payment'
|
|||||||
import {buildPurchaseResource, PurchaseKind, PurchaseSelection} from './resource'
|
import {buildPurchaseResource, PurchaseKind, PurchaseSelection} from './resource'
|
||||||
import {getPrice, getPriceHome} from '@/actions/resource'
|
import {getPrice, getPriceHome} from '@/actions/resource'
|
||||||
import {ExtraResp} from '@/lib/api'
|
import {ExtraResp} from '@/lib/api'
|
||||||
import {formatPurchaseLiveLabel} from './sku'
|
import {formatPurchaseLiveLabel, getPurchaseSkuCountMin, PurchaseSkuData} from './sku'
|
||||||
import {User} from '@/lib/models'
|
import {User} from '@/lib/models'
|
||||||
import {PurchaseFormValues} from './form-values'
|
import {PurchaseFormValues} from './form-values'
|
||||||
import {IdCard} from 'lucide-react'
|
import {IdCard} from 'lucide-react'
|
||||||
@@ -25,6 +25,7 @@ const emptyPrice: ExtraResp<typeof getPrice> = {
|
|||||||
|
|
||||||
export type PurchaseSidePanelProps = {
|
export type PurchaseSidePanelProps = {
|
||||||
kind: PurchaseKind
|
kind: PurchaseKind
|
||||||
|
skuData: PurchaseSkuData
|
||||||
}
|
}
|
||||||
|
|
||||||
export function PurchaseSidePanel(props: PurchaseSidePanelProps) {
|
export function PurchaseSidePanel(props: PurchaseSidePanelProps) {
|
||||||
@@ -44,7 +45,7 @@ export function PurchaseSidePanel(props: PurchaseSidePanelProps) {
|
|||||||
expire,
|
expire,
|
||||||
dailyLimit,
|
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 {price, actual: discountedPrice = '0.00'} = priceData
|
||||||
const totalDiscount = getTotalDiscount(price, discountedPrice)
|
const totalDiscount = getTotalDiscount(price, discountedPrice)
|
||||||
const hasDiscount = Number(totalDiscount) > 0
|
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 [priceData, setPriceData] = useState<ExtraResp<typeof getPrice>>(emptyPrice)
|
||||||
const [isLoading, setIsLoading] = useState(true)
|
const [isLoading, setIsLoading] = useState(true)
|
||||||
const [isError, setIsError] = useState(false)
|
const [isError, setIsError] = useState(false)
|
||||||
@@ -164,6 +165,15 @@ function usePurchasePrice(profile: User | null, selection: PurchaseSelection) {
|
|||||||
useEffect(() => {
|
useEffect(() => {
|
||||||
const requestId = ++requestIdRef.current
|
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 () => {
|
const loadPrice = async () => {
|
||||||
setIsLoading(true)
|
setIsLoading(true)
|
||||||
setIsError(false)
|
setIsError(false)
|
||||||
@@ -177,6 +187,7 @@ function usePurchasePrice(profile: User | null, selection: PurchaseSelection) {
|
|||||||
expire,
|
expire,
|
||||||
dailyLimit,
|
dailyLimit,
|
||||||
})
|
})
|
||||||
|
|
||||||
const response = profile
|
const response = profile
|
||||||
? await getPrice(resource)
|
? await getPrice(resource)
|
||||||
: await getPriceHome(resource)
|
: await getPriceHome(resource)
|
||||||
@@ -184,7 +195,9 @@ function usePurchasePrice(profile: User | null, selection: PurchaseSelection) {
|
|||||||
if (requestId !== requestIdRef.current) {
|
if (requestId !== requestIdRef.current) {
|
||||||
return
|
return
|
||||||
}
|
}
|
||||||
|
if (!response.success) {
|
||||||
|
throw new Error(response.message)
|
||||||
|
}
|
||||||
if (response.success) {
|
if (response.success) {
|
||||||
setPriceData({
|
setPriceData({
|
||||||
price: response.data.price,
|
price: response.data.price,
|
||||||
@@ -211,7 +224,7 @@ function usePurchasePrice(profile: User | null, selection: PurchaseSelection) {
|
|||||||
}
|
}
|
||||||
|
|
||||||
loadPrice()
|
loadPrice()
|
||||||
}, [dailyLimit, expire, kind, live, mode, profile, quota])
|
}, [dailyLimit, expire, kind, live, mode, profile, quota, skuData])
|
||||||
|
|
||||||
return {priceData, isLoading, isError}
|
return {priceData, isLoading, isError}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -8,12 +8,14 @@ export type PurchaseSkuItem = {
|
|||||||
expire: string
|
expire: string
|
||||||
price: string
|
price: string
|
||||||
count_min: number
|
count_min: number
|
||||||
|
discount: number
|
||||||
}
|
}
|
||||||
|
|
||||||
export type PurchaseSkuData = {
|
export type PurchaseSkuData = {
|
||||||
items: PurchaseSkuItem[]
|
items: PurchaseSkuItem[]
|
||||||
priceMap: Map<string, string>
|
priceMap: Map<string, string>
|
||||||
countMinMap: Map<string, number>
|
countMinMap: Map<string, number>
|
||||||
|
discountMap: Map<string, number>
|
||||||
modeList: PurchaseMode[]
|
modeList: PurchaseMode[]
|
||||||
liveList: string[]
|
liveList: string[]
|
||||||
expireList: string[]
|
expireList: string[]
|
||||||
@@ -27,6 +29,7 @@ export function parsePurchaseSkuList(kind: PurchaseKind, skuList: ProductItem['s
|
|||||||
const items: PurchaseSkuItem[] = []
|
const items: PurchaseSkuItem[] = []
|
||||||
const priceMap = new Map<string, string>()
|
const priceMap = new Map<string, string>()
|
||||||
const countMinMap = new Map<string, number>()
|
const countMinMap = new Map<string, number>()
|
||||||
|
const discountMap = new Map<string, number>()
|
||||||
const modeSet = new Set<PurchaseMode>()
|
const modeSet = new Set<PurchaseMode>()
|
||||||
const liveSet = new Set<number>()
|
const liveSet = new Set<number>()
|
||||||
const expireSet = 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
|
const countMin = typeof sku.count_min === 'number' ? sku.count_min : Number(sku.count_min) || 0
|
||||||
countMinMap.set(code, countMin)
|
countMinMap.set(code, countMin)
|
||||||
|
|
||||||
|
const skuDiscount = sku.discount ?? 100
|
||||||
items.push({
|
items.push({
|
||||||
code,
|
code,
|
||||||
mode,
|
mode,
|
||||||
@@ -58,8 +62,10 @@ export function parsePurchaseSkuList(kind: PurchaseKind, skuList: ProductItem['s
|
|||||||
expire: expireValue,
|
expire: expireValue,
|
||||||
price: sku.price,
|
price: sku.price,
|
||||||
count_min: countMin,
|
count_min: countMin,
|
||||||
|
discount: skuDiscount,
|
||||||
})
|
})
|
||||||
priceMap.set(code, sku.price)
|
priceMap.set(code, sku.price)
|
||||||
|
discountMap.set(code, skuDiscount)
|
||||||
modeSet.add(mode)
|
modeSet.add(mode)
|
||||||
|
|
||||||
liveSet.add(live)
|
liveSet.add(live)
|
||||||
@@ -82,6 +88,7 @@ export function parsePurchaseSkuList(kind: PurchaseKind, skuList: ProductItem['s
|
|||||||
items,
|
items,
|
||||||
priceMap,
|
priceMap,
|
||||||
countMinMap,
|
countMinMap,
|
||||||
|
discountMap,
|
||||||
modeList: (['2', '1'] as const).filter(mode => modeSet.has(mode)),
|
modeList: (['2', '1'] as const).filter(mode => modeSet.has(mode)),
|
||||||
liveList: sortNumericValues(liveSet),
|
liveList: sortNumericValues(liveSet),
|
||||||
expireList: sortNumericValues(expireSet),
|
expireList: sortNumericValues(expireSet),
|
||||||
@@ -157,6 +164,14 @@ export function getPurchaseSkuPrice(priceMap: Map<string, string>, props: {
|
|||||||
return priceMap.get(getPurchaseSkuKey(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) {
|
export function formatPurchaseLiveLabel(live: string, kind: PurchaseKind) {
|
||||||
const minutes = Number(live)
|
const minutes = Number(live)
|
||||||
|
|
||||||
|
|||||||
@@ -9,7 +9,7 @@ import {Card} from '@/components/ui/card'
|
|||||||
import {BillingMethodField} from '../shared/billing-method-field'
|
import {BillingMethodField} from '../shared/billing-method-field'
|
||||||
import {FeatureList} from '../shared/feature-list'
|
import {FeatureList} from '../shared/feature-list'
|
||||||
import {NumberStepperField} from '../shared/number-stepper-field'
|
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({
|
export default function Center({
|
||||||
skuData,
|
skuData,
|
||||||
@@ -20,7 +20,7 @@ export default function Center({
|
|||||||
const type = useWatch<Schema>({name: 'type'}) as Schema['type']
|
const type = useWatch<Schema>({name: 'type'}) as Schema['type']
|
||||||
const live = useWatch<Schema>({name: 'live'}) as Schema['live']
|
const live = useWatch<Schema>({name: 'live'}) as Schema['live']
|
||||||
const expire = useWatch<Schema>({name: 'expire'}) as Schema['expire']
|
const expire = useWatch<Schema>({name: 'expire'}) as Schema['expire']
|
||||||
const {modeList, priceMap} = skuData
|
const {modeList, priceMap, discountMap} = skuData
|
||||||
const liveList = type === '1'
|
const liveList = type === '1'
|
||||||
? getAvailablePurchaseLives(skuData, {mode: type, expire})
|
? getAvailablePurchaseLives(skuData, {mode: type, expire})
|
||||||
: getAvailablePurchaseLives(skuData, {mode: type})
|
: getAvailablePurchaseLives(skuData, {mode: type})
|
||||||
@@ -145,6 +145,11 @@ export default function Center({
|
|||||||
live,
|
live,
|
||||||
expire: priceExpire,
|
expire: priceExpire,
|
||||||
})
|
})
|
||||||
|
const discount = getPurchaseSkuDiscount(discountMap, {
|
||||||
|
mode: type,
|
||||||
|
live,
|
||||||
|
expire: priceExpire,
|
||||||
|
})
|
||||||
const minutes = Number(live)
|
const minutes = Number(live)
|
||||||
const hours = minutes / 60
|
const hours = minutes / 60
|
||||||
const label = minutes % 60 === 0 ? `${hours} 小时` : `${minutes} 分钟`
|
const label = minutes % 60 === 0 ? `${hours} 小时` : `${minutes} 分钟`
|
||||||
@@ -155,6 +160,8 @@ export default function Center({
|
|||||||
value={live}
|
value={live}
|
||||||
label={label}
|
label={label}
|
||||||
description={price && `¥${price}/IP`}
|
description={price && `¥${price}/IP`}
|
||||||
|
price={price}
|
||||||
|
discount={discount}
|
||||||
compare={field.value}
|
compare={field.value}
|
||||||
/>
|
/>
|
||||||
)
|
)
|
||||||
|
|||||||
@@ -20,7 +20,7 @@ export type Schema = z.infer<typeof schema>
|
|||||||
|
|
||||||
export default function ShortForm({skuList}: {skuList: ProductItem['skus']}) {
|
export default function ShortForm({skuList}: {skuList: ProductItem['skus']}) {
|
||||||
const skuData = parsePurchaseSkuList('short', skuList)
|
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 defaultLive = getAvailablePurchaseLives(skuData, {mode: defaultMode})[0] || ''
|
||||||
const defaultExpire = defaultMode === '1'
|
const defaultExpire = defaultMode === '1'
|
||||||
? getAvailablePurchaseExpires(skuData, {mode: defaultMode, live: defaultLive})[0] || '0'
|
? getAvailablePurchaseExpires(skuData, {mode: defaultMode, live: defaultLive})[0] || '0'
|
||||||
@@ -42,11 +42,12 @@ export default function ShortForm({skuList}: {skuList: ProductItem['skus']}) {
|
|||||||
pay_type: 'balance', // 余额支付
|
pay_type: 'balance', // 余额支付
|
||||||
},
|
},
|
||||||
})
|
})
|
||||||
|
console.log(skuData, 'skuData')
|
||||||
|
|
||||||
return (
|
return (
|
||||||
<Form form={form} className="flex flex-col lg:flex-row gap-4">
|
<Form form={form} className="flex flex-col lg:flex-row gap-4">
|
||||||
<Center skuData={skuData}/>
|
<Center skuData={skuData}/>
|
||||||
<PurchaseSidePanel kind="short"/>
|
<PurchaseSidePanel kind="short" skuData={skuData}/>
|
||||||
</Form>
|
</Form>
|
||||||
)
|
)
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -1,7 +1,7 @@
|
|||||||
export const siteConfig = {
|
export const siteConfig = {
|
||||||
name: '蓝狐代理',
|
name: '蓝狐代理',
|
||||||
shortName: '蓝狐代理',
|
shortName: '蓝狐代理',
|
||||||
url: (process.env.API_BASE_URL || 'https://prov.lanhuip.com').replace(/\/$/, ''),
|
url: (process.env.API_BASE_URL || 'https://lanhuip.com').replace(/\/$/, ''),
|
||||||
description: '蓝狐代理 - 稳定、高速、安全的代理服务,提供HTTP代理、SOCKS5代理、动态IP、静态IP、爬虫代理等产品,保护您的隐私,畅游互联网',
|
description: '蓝狐代理 - 稳定、高速、安全的代理服务,提供HTTP代理、SOCKS5代理、动态IP、静态IP、爬虫代理等产品,保护您的隐私,畅游互联网',
|
||||||
keywords: ['代理ip', '国内代理ip', 'http代理', '动态ip', '静态ip', '爬虫代理', '独享代理', 'socks5代理'],
|
keywords: ['代理ip', '国内代理ip', 'http代理', '动态ip', '静态ip', '爬虫代理', '独享代理', 'socks5代理'],
|
||||||
author: '蓝狐团队',
|
author: '蓝狐团队',
|
||||||
|
|||||||
@@ -7,5 +7,6 @@ export type ProductSku = {
|
|||||||
price_min: string
|
price_min: string
|
||||||
product_id: number
|
product_id: number
|
||||||
discount_id: number
|
discount_id: number
|
||||||
|
discount?: number
|
||||||
status: number
|
status: number
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user