完善账单页面，抽取公共页面组件

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

@@ -0,0 +1,128 @@
+'use client'
+import {useContext} from 'react'
+import {PurchaseFormContext} from '@/components/composites/purchase/_client/form'
+import {RadioGroup} from '@/components/ui/radio-group'
+import {FormField} from '@/components/ui/form'
+import FormOption from '@/components/composites/purchase/_client/option'
+import Image from 'next/image'
+import alipay from '@/components/composites/purchase/_assets/alipay.svg'
+import wechat from '@/components/composites/purchase/_assets/wechat.svg'
+import balance from '@/components/composites/purchase/_assets/balance.svg'
+import {Button} from '@/components/ui/button'
+import {AuthContext} from '@/components/providers/AuthProvider'
+import RechargeModal from '@/components/composites/purchase/_client/recharge'
+
+export type RightProps = {}
+
+export default function Right(props: RightProps) {
+  console.log('Right render')
+
+  const authCtx = useContext(AuthContext)
+  const profile = authCtx.profile
+
+  const form = useContext(PurchaseFormContext)?.form
+  if (!form) {
+    throw new Error(`Center component must be used within PurchaseFormContext`)
+  }
+
+  const watchType = form.watch('type')
+  const watchLive = form.watch('live')
+  const watchQuota = form.watch('quota')
+  const watchExpire = form.watch('expire')
+  const watchDailyLimit = form.watch('daily_limit')
+
+  return (
+    <div className={`flex-none basis-80 p-6 flex flex-col gap-6`}>
+      <h3>订单详情</h3>
+      <ul className={`flex flex-col gap-3`}>
+        <li className={`flex justify-between items-center`}>
+          <span className={`text-sm text-gray-500`}>套餐名称</span>
+          <span className={`text-sm`}>
+            {watchType === '2' ? `包量套餐` : `包时套餐`}
+          </span>
+        </li>
+        <li className={`flex justify-between items-center`}>
+          <span className={`text-sm text-gray-500`}>IP 时效</span>
+          <span className={`text-sm`}>
+            {watchLive}分钟
+          </span>
+        </li>
+        {watchType === '2' ? (
+          <li className={`flex justify-between items-center`}>
+            <span className={`text-sm text-gray-500`}>购买 IP 量</span>
+            <span className={`text-sm`}>
+              {watchQuota}个
+            </span>
+          </li>
+        ) : <>
+          <li className={`flex justify-between items-center`}>
+            <span className={`text-sm text-gray-500`}>套餐时长</span>
+            <span className={`text-sm`}>
+              {watchExpire}天
+            </span>
+          </li>
+          <li className={`flex justify-between items-center`}>
+            <span className={`text-sm text-gray-500`}>每日限额</span>
+            <span className={`text-sm`}>
+              {watchDailyLimit}个
+            </span>
+          </li>
+        </>}
+      </ul>
+      <div className={`border-b border-gray-200`}></div>
+      <p className={`flex justify-between items-center`}>
+        <span>价格</span>
+        <span className={`text-xl text-orange-500`}>￥--</span>
+      </p>
+      <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>
+      <Button className={`mt-4 h-12`} type="submit">
+        立即支付
+      </Button>
+    </div>
+  )
+}
+