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

开启充值和余额支付功能

Browse Source
This commit is contained in:
Eamon-meng
2026-03-31 16:11:36 +08:00
parent e27869fb4a
commit 8ce5f99a24
8 changed files with 121 additions and 109 deletions
Download Patch File Download Diff File Expand all files Collapse all files

189
src/components/composites/extract/index.tsx
View File

@@ -382,102 +382,103 @@ function SelectResource() {
<Loader className="animate-spin" size={20}/>
<span>暂无可用套餐</span>
</div>
) : resources.map((resource, i) => (
) : (
<>
<SelectItem
key={`${resource.id}`}
value={String(resource.id)}
className="p-3">
<div className="flex flex-col gap-2 w-72">
{resource.type === 1 && resource.short.type === 1 && (
<>
<div className="flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md text-sm">
<Timer size={20}/>
<span>{name(resource)}</span>
</div>
<div className="flex text-xs text-weak">
<span>{resource.resource_no}</span>
</div>
<div className="flex justify-between gap-2 text-xs text-weak">
<span>
到期时间：
{format(resource.short.expire_at, 'yyyy-MM-dd HH:mm')}
</span>
<span>{intlFormatDistance(resource.short.expire_at, new Date())}</span>
</div>
</>
)}
{resource.type === 1 && resource.short.type === 2 && (
<>
<div className="flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md text-sm">
<Box size={20}/>
<span>{name(resource)}</span>
</div>
<div className="flex text-xs text-weak">
<span>{resource.resource_no}</span>
</div>
<div className="flex justify-between gap-2 text-xs text-weak">
<span>
提取数量：
{resource.short.used}
{' '}
/
{resource.short.quota}
</span>
<span>
剩余
{resource.short.quota - resource.short.used}
</span>
</div>
</>
)}
{resource.type === 2 && resource.long.type === 1 && (
<>
<div className="flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md text-sm">
<Timer size={20}/>
<span>{name(resource)}</span>
</div>
<div className="flex text-xs text-weak">
<span>{resource.resource_no}</span>
</div>
<div className="flex justify-between gap-2 text-xs text-weak">
<span>
到期时间：
{format(resource.long.expire_at, 'yyyy-MM-dd HH:mm')}
</span>
<span>{intlFormatDistance(resource.long.expire_at, new Date())}</span>
</div>
</>
)}
{resource.type === 2 && resource.long.type === 2 && (
<>
<div className="flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md text-sm">
<Box size={20}/>
<span>{name(resource)}</span>
</div>
<div className="flex text-xs text-weak">
<span>{resource.resource_no}</span>
</div>
<div className="flex justify-between gap-2 text-xs text-weak">
<span>
提取数量：
{resource.long.used}
{' '}
/
{resource.long.quota}
</span>
<span>
剩余
{resource.long.quota - resource.long.used}
</span>
</div>
</>
)}
</div>
</SelectItem>
{i < resources.length - 1 && <SelectSeparator className="m-1"/>}
{resources.map(resource => (
<SelectItem
key={resource.id}
value={String(resource.id)}
className="p-3">
<div className="flex flex-col gap-2 w-72">
{resource.type === 1 && resource.short.type === 1 && (
<>
<div className="flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md text-sm">
<Timer size={20}/>
<span>{name(resource)}</span>
</div>
<div className="flex text-xs text-weak">
<span>{resource.resource_no}</span>
</div>
<div className="flex justify-between gap-2 text-xs text-weak">
<span>
到期时间：
{format(resource.short.expire_at, 'yyyy-MM-dd HH:mm')}
</span>
<span>{intlFormatDistance(resource.short.expire_at, new Date())}</span>
</div>
</>
)}
{resource.type === 1 && resource.short.type === 2 && (
<>
<div className="flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md text-sm">
<Box size={20}/>
<span>{name(resource)}</span>
</div>
<div className="flex text-xs text-weak">
<span>{resource.resource_no}</span>
</div>
<div className="flex justify-between gap-2 text-xs text-weak">
<span>
提取数量：
{resource.short.used}
{' '}
/
{resource.short.quota}
</span>
<span>
剩余
{resource.short.quota - resource.short.used}
</span>
</div>
</>
)}
{resource.type === 2 && resource.long.type === 1 && (
<>
<div className="flex gap-2 items-center bg-green-50 w-fit px-2 py-1 rounded-md text-sm">
<Timer size={20}/>
<span>{name(resource)}</span>
</div>
<div className="flex text-xs text-weak">
<span>{resource.resource_no}</span>
</div>
<div className="flex justify-between gap-2 text-xs text-weak">
<span>
到期时间：
{format(resource.long.expire_at, 'yyyy-MM-dd HH:mm')}
</span>
<span>{intlFormatDistance(resource.long.expire_at, new Date())}</span>
</div>
</>
)}
{resource.type === 2 && resource.long.type === 2 && (
<>
<div className="flex gap-2 items-center bg-blue-50 w-fit px-2 py-1 rounded-md text-sm">
<Box size={20}/>
<span>{name(resource)}</span>
</div>
<div className="flex text-xs text-weak">
<span>{resource.resource_no}</span>
</div>
<div className="flex justify-between gap-2 text-xs text-weak">
<span>
提取数量：
{resource.long.used}
{' '}
/
{resource.long.quota}
</span>
<span>
剩余
{resource.long.quota - resource.long.used}
</span>
</div>
</>
)}
</div>
</SelectItem>
))}
</>
))}
)}
</SelectContent>
</Select>
)}

6
src/components/composites/payment/payment-modal.tsx
View File

@@ -62,12 +62,12 @@ export function PaymentModal(props: PaymentModalProps) {
if (!open) handleClose()
}}>
{/* {props.platform === TradePlatform.Mobile
{props.platform === TradePlatform.Mobile
? <MobilePayment {...props} onClose={handleClose}/>
: <DesktopPayment {...props} onClose={handleClose}/>
} */}
}
<UniversalDesktopPayment {...props} onClose={handleClose}/>
{/* <UniversalDesktopPayment {...props} onClose={handleClose}/> */}
</Dialog>
)
}

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

@@ -28,7 +28,7 @@ export default function LongForm() {
quota: 500,
expire: '30', // 天
daily_limit: 100,
pay_type: 'wechat', // 余额支付
pay_type: 'balance', // 余额支付
},
})

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

@@ -164,7 +164,7 @@ function BalanceOrLogin(props: {
const profile = use(useProfileStore(store => store.profile))
return profile ? (
<>
{/* <FieldPayment/> */}
<FieldPayment/>
<Pay
method={props.method}
balance={profile.balance}

23
src/components/composites/purchase/shared/field-payment.tsx
View File

@@ -4,9 +4,17 @@ import {FormField} from '@/components/ui/form'
import Image from 'next/image'
import alipay from '../_assets/alipay.svg'
import wechat from '../_assets/wechat.svg'
import balance from '../_assets/balance.svg'
import RechargeModal from '@/components/composites/recharge'
import {useProfileStore} from '@/components/stores/profile'
import {use} from 'react'
import Link from 'next/link'
import {buttonVariants} from '@/components/ui/button'
export function FieldPayment() {
return (
const profile = use(useProfileStore(store => store.profile))
return profile ? (
<FormField name="pay_type" label="支付方式" className="flex flex-col gap-6">
{({id, field}) => (
<RadioGroup
@@ -15,7 +23,7 @@ export function FieldPayment() {
onValueChange={field.onChange}
className="flex flex-col gap-3">
{/* <div className="w-full p-3 flex flex-col gap-4 bg-gray-100 rounded-md">
<div className="w-full p-3 flex flex-col gap-4 bg-gray-100 rounded-md">
<p className="flex items-center gap-3">
<Image src={balance} alt="余额icon"/>
<span className="text-sm text-gray-500">账户余额</span>
@@ -24,16 +32,15 @@ export function FieldPayment() {
<span className="text-xl">{profile.balance}</span>
<RechargeModal/>
</p>
</div> */}
{/* <FormOption
</div>
<FormOption
id={`${id}-balance`}
value="balance"
compare={field.value}
className="p-3 w-full flex-row gap-2 justify-center">
<Image src={balance} alt="余额 icon"/>
<span>余额</span>
</FormOption> */}
</FormOption>
<FormOption
id={`${id}-wechat`}
value="wechat"
@@ -53,5 +60,9 @@ export function FieldPayment() {
</RadioGroup>
)}
</FormField>
) : (
<Link href="/login" className={buttonVariants()}>
登录后支付
</Link>
)
}

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

@@ -28,7 +28,7 @@ export default function ShortForm() {
quota: 10_000, // >= 10000
expire: '30', // 天
daily_limit: 2_000, // >= 2000
pay_type: 'wechat', // 余额支付
pay_type: 'balance', // 余额支付
},
})

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

@@ -165,7 +165,7 @@ function BalanceOrLogin(props: {
const profile = use(useProfileStore(store => store.profile))
return profile ? (
<>
{/* <FieldPayment/> */}
<FieldPayment/>
<Pay
method={props.method}
balance={profile.balance}