支付组件统一使用二维码展示

src/components/composites/purchase/long/form.tsx

@@ -1,6 +1,5 @@
 'use client'
-import {createContext} from 'react'
-import {useForm, UseFormReturn} from 'react-hook-form'
+import {useForm} from 'react-hook-form'
 import Center from '@/components/composites/purchase/long/center'
 import Right from '@/components/composites/purchase/long/right'
 import {Form} from '@/components/ui/form'
@@ -20,13 +19,6 @@ const schema = z.object({
 // 从架构中推断类型
 export type Schema = z.infer<typeof schema>
 
-type PurchaseFormContextType = {
-  form: UseFormReturn<Schema>
-  onSubmit?: () => void
-}
-
-export const LongFormContext = createContext<PurchaseFormContextType | undefined>(undefined)
-
 export default function LongForm() {
   const form = useForm<Schema>({
     resolver: zodResolver(schema),
@@ -36,16 +28,14 @@ export default function LongForm() {
       quota: 500,
       expire: '30', // 天
       daily_limit: 100,
-      pay_type: 'balance', // 余额支付
+      pay_type: 'wechat', // 余额支付
     },
   })
 
   return (
     <Form form={form} className="flex flex-col lg:flex-row gap-4">
-      <LongFormContext.Provider value={{form}}>
-        <Center/>
-        <Right/>
-      </LongFormContext.Provider>
+      <Center/>
+      <Right/>
     </Form>
   )
 }

src/components/composites/purchase/long/right.tsx

@@ -1,15 +1,6 @@
 'use client'
-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'
-import FormOption from '@/components/composites/purchase/option'
-import Image from 'next/image'
-import alipay from '../_assets/alipay.svg'
-import wechat from '../_assets/wechat.svg'
-import balance from '../_assets/balance.svg'
+import {Suspense, use, useEffect, useState} from 'react'
 import {useProfileStore} from '@/components/stores/profile'
-import RechargeModal from '@/components/composites/recharge'
 import Pay from '@/components/composites/purchase/pay'
 import {buttonVariants} from '@/components/ui/button'
 import Link from 'next/link'
@@ -17,8 +8,9 @@ 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'
+import {getPrice} from '@/actions/resource'
 import {ExtraResp} from '@/lib/api'
+import {FieldPayment} from '../shared/field-payment'
 
 export default function Right() {
   const {control} = useFormContext<Schema>()
@@ -164,52 +156,7 @@ function BalanceOrLogin(props: {
   const profile = use(useProfileStore(store => store.profile))
   return profile ? (
     <>
-      <FormField name="pay_type" label="支付方式" className="flex flex-col gap-6">
-        {({id, field}) => (
-          <RadioGroup
-            id={id}
-            defaultValue={field.value}
-            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">
-              <p className="flex items-center gap-3">
-                <Image src={balance} alt="余额icon"/>
-                <span className="text-sm text-gray-500">账户余额</span>
-              </p>
-              <p className="flex justify-between items-center">
-                <span className="text-xl">{profile?.balance}</span>
-                <RechargeModal/>
-              </p>
-            </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
-              id={`${id}-wechat`}
-              value="wechat"
-              compare={field.value}
-              className="p-3 w-full flex-row gap-2 justify-center">
-              <Image src={wechat} alt="微信 logo"/>
-              <span>微信</span>
-            </FormOption>
-            <FormOption
-              id={`${id}-alipay`}
-              value="alipay"
-              compare={field.value}
-              className="p-3 w-full flex-row gap-2 justify-center">
-              <Image src={alipay} alt="支付宝 logo"/>
-              <span>支付宝</span>
-            </FormOption>
-          </RadioGroup>
-        )}
-      </FormField>
+      {/* <FieldPayment/> */}
       <Pay
         method={props.method}
         balance={profile.balance}

src/components/composites/purchase/pay.tsx

@@ -11,7 +11,7 @@ import {useRouter} from 'next/navigation'
 import {completeResource, createResource, CreateResourceReq, prepareResource} from '@/actions/resource'
 import {
   TradeMethod,
-  TradeMethodDecoration,
+  TradePlatform,
 } from '@/lib/models/trade'
 import {PaymentModal} from '@/components/composites/payment/payment-modal'
 import {PaymentProps} from '@/components/composites/payment/type'
@@ -32,7 +32,7 @@ export default function Pay(props: PayProps) {
   const [open, setOpen] = useState(false)
   const [trade, setTrade] = useState<PaymentProps | null>(null)
   const router = useRouter()
-  const platform = usePlatformType()
+  // const platform = usePlatformType()
 
   const onOpen = async () => {
     setOpen(true)
@@ -45,7 +45,7 @@ export default function Pay(props: PayProps) {
     const req = {
       ...props.resource,
       payment_method: method,
-      payment_platform: platform,
+      payment_platform: TradePlatform.Desktop,
     }
 
     const resp = await prepareResource(req)
@@ -60,9 +60,8 @@ export default function Pay(props: PayProps) {
       inner_no: resp.data.trade_no,
       pay_url: resp.data.pay_url,
       amount: Number(props.amount),
-      platform: platform,
+      platform: TradePlatform.Desktop,
       method: method,
-      decoration: TradeMethodDecoration[props.method],
     })
   }
 

src/components/composites/purchase/shared/field-payment.tsx

@@ -0,0 +1,57 @@
+import FormOption from '../option'
+import {RadioGroup} from '@/components/ui/radio-group'
+import {FormField} from '@/components/ui/form'
+import Image from 'next/image'
+import alipay from '../_assets/alipay.svg'
+import wechat from '../_assets/wechat.svg'
+
+export function FieldPayment() {
+  return (
+    <FormField name="pay_type" label="支付方式" className="flex flex-col gap-6">
+      {({id, field}) => (
+        <RadioGroup
+          id={id}
+          defaultValue={field.value}
+          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">
+            <p className="flex items-center gap-3">
+              <Image src={balance} alt="余额icon"/>
+              <span className="text-sm text-gray-500">账户余额</span>
+            </p>
+            <p className="flex justify-between items-center">
+              <span className="text-xl">{profile.balance}</span>
+              <RechargeModal/>
+            </p>
+          </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
+            id={`${id}-wechat`}
+            value="wechat"
+            compare={field.value}
+            className="p-3 w-full flex-row gap-2 justify-center">
+            <Image src={wechat} alt="微信 logo"/>
+            <span>微信</span>
+          </FormOption>
+          <FormOption
+            id={`${id}-alipay`}
+            value="alipay"
+            compare={field.value}
+            className="p-3 w-full flex-row gap-2 justify-center">
+            <Image src={alipay} alt="支付宝 logo"/>
+            <span>支付宝</span>
+          </FormOption>
+        </RadioGroup>
+      )}
+    </FormField>
+  )
+}

src/components/composites/purchase/short/form.tsx

@@ -1,6 +1,5 @@
 'use client'
-import {createContext} from 'react'
-import {useForm, UseFormReturn} from 'react-hook-form'
+import {useForm} from 'react-hook-form'
 import Center from '@/components/composites/purchase/short/center'
 import Right from '@/components/composites/purchase/short/right'
 import {Form} from '@/components/ui/form'
@@ -20,16 +19,7 @@ const schema = z.object({
 // 从架构中推断类型
 export type Schema = z.infer<typeof schema>
 
-type PurchaseFormContextType = {
-  form: UseFormReturn<Schema>
-  onSubmit?: () => void
-}
-
-export const PurchaseFormContext = createContext<PurchaseFormContextType | undefined>(undefined)
-
-export type PurchaseFormProps = {}
-
-export default function PurchaseForm(props: PurchaseFormProps) {
+export default function ShortForm() {
   const form = useForm<Schema>({
     resolver: zodResolver(schema),
     defaultValues: {
@@ -38,7 +28,7 @@ export default function PurchaseForm(props: PurchaseFormProps) {
       quota: 10_000, // >= 10000
       expire: '30', // 天
       daily_limit: 2_000, // >= 2000
-      pay_type: 'balance', // 余额支付
+      pay_type: 'wechat', // 余额支付
     },
   })
 

src/components/composites/purchase/short/right.tsx

@@ -1,23 +1,16 @@
 'use client'
-import {Suspense, use, useEffect, useMemo, useState} from 'react'
+import {Suspense, use, useEffect, useState} from 'react'
 import {Schema} from '@/components/composites/purchase/short/form'
-import {RadioGroup} from '@/components/ui/radio-group'
-import {FormField} from '@/components/ui/form'
-import FormOption from '@/components/composites/purchase/option'
-import Image from 'next/image'
-import alipay from '../_assets/alipay.svg'
-import wechat from '../_assets/wechat.svg'
-import balance from '../_assets/balance.svg'
 import {useProfileStore} from '@/components/stores/profile'
-import RechargeModal from '@/components/composites/recharge'
 import {buttonVariants} from '@/components/ui/button'
 import Link from 'next/link'
 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'
+import {getPrice} from '@/actions/resource'
 import {ExtraResp} from '@/lib/api'
+import {FieldPayment} from '../shared/field-payment'
 
 export default function Right() {
   const {control} = useFormContext<Schema>()
@@ -165,52 +158,7 @@ function BalanceOrLogin(props: {
   const profile = use(useProfileStore(store => store.profile))
   return profile ? (
     <>
-      <FormField name="pay_type" label="支付方式" className="flex flex-col gap-6">
-        {({id, field}) => (
-          <RadioGroup
-            id={id}
-            defaultValue={field.value}
-            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">
-              <p className="flex items-center gap-3">
-                <Image src={balance} alt="余额icon"/>
-                <span className="text-sm text-gray-500">账户余额</span>
-              </p>
-              <p className="flex justify-between items-center">
-                <span className="text-xl">{profile.balance}</span>
-                <RechargeModal/>
-              </p>
-            </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
-              id={`${id}-wechat`}
-              value="wechat"
-              compare={field.value}
-              className="p-3 w-full flex-row gap-2 justify-center">
-              <Image src={wechat} alt="微信 logo"/>
-              <span>微信</span>
-            </FormOption>
-            <FormOption
-              id={`${id}-alipay`}
-              value="alipay"
-              compare={field.value}
-              className="p-3 w-full flex-row gap-2 justify-center">
-              <Image src={alipay} alt="支付宝 logo"/>
-              <span>支付宝</span>
-            </FormOption>
-          </RadioGroup>
-        )}
-      </FormField>
+      {/* <FieldPayment/> */}
       <Pay
         method={props.method}
         balance={profile.balance}