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

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}