动态生成购买套餐 & 取消初次进后台修改密码的弹窗 & 添加总折扣字段 & 发布v1.5.0版本

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

@@ -10,72 +10,22 @@ import check from '../_assets/check.svg'
 import {Schema} from '@/components/composites/purchase/long/form'
 import {useFormContext, useWatch} from 'react-hook-form'
 import {Card} from '@/components/ui/card'
-import {useEffect} from 'react'
 
-export default function Center() {
+export default function Center({map, expireList, liveList}: {
+  map: Map<string, string>
+  liveList: string[]
+  expireList: string[]
+}) {
   const form = useFormContext<Schema>()
   const type = useWatch({name: 'type'})
-  useEffect(() => {
-    if (type === '1') {
-      form.setValue('daily_limit', 100)
-    }
-    else {
-      form.setValue('quota', 500)
-    }
-  }, [type, form])
+
   return (
     <Card className="flex-auto p-6 flex flex-col gap-6 relative">
 
       {/* 计费方式 */}
-      <FormField
-        className="flex flex-col gap-4"
-        name="type"
-        label="计费方式">
-        {({id, field}) => (
-          <RadioGroup
-            id={id}
-            defaultValue={field.value}
-            onValueChange={field.onChange}
-            className="flex gap-4 max-md:flex-col">
-
-            <FormOption
-              id={`${id}-2`}
-              value="2"
-              label="包量套餐"
-              description="适用于短期或不定期高提取业务场景"
-              compare={field.value}/>
-
-            <FormOption
-              id={`${id}-1`}
-              value="1"
-              label="包时套餐"
-              description="适用于每日提取量稳定的业务场景"
-              compare={field.value}/>
-
-          </RadioGroup>
-        )}
-      </FormField>
-
+      <BillingMethod expireList={expireList}/>
       {/* IP 时效 */}
-      <FormField
-        className="space-y-4"
-        name="live"
-        label="IP 时效">
-        {({id, field}) => (
-          <RadioGroup
-            id={id}
-            defaultValue={field.value}
-            onValueChange={field.onChange}
-            className="grid grid-cols-[repeat(auto-fill,minmax(120px,1fr))] gap-4">
-
-            <FormOption id={`${id}-1`} value="1" label="1 小时" description="￥0.3/IP" compare={field.value}/>
-            <FormOption id={`${id}-4`} value="4" label="4 小时" description="￥0.8/IP" compare={field.value}/>
-            <FormOption id={`${id}-8`} value="8" label="8 小时" description="￥1.2/IP" compare={field.value}/>
-            <FormOption id={`${id}-12`} value="12" label="12 小时" description="￥1.8/IP" compare={field.value}/>
-            <FormOption id={`${id}-24`} value="24" label="24 小时" description="￥3.5/IP" compare={field.value}/>
-          </RadioGroup>
-        )}
-      </FormField>
+      <IpTime {...{map, liveList}}/>
 
       {/* 根据套餐类型显示不同表单项 */}
       {type === '2' ? (
@@ -126,26 +76,7 @@ export default function Center() {
       ) : (
         <>
           {/* 包时：套餐时效 */}
-          <FormField
-            className="space-y-4"
-            name="expire"
-            label="套餐时效">
-            {({id, field}) => (
-              <RadioGroup
-                id={id}
-                defaultValue={field.value}
-                onValueChange={field.onChange}
-                className="flex gap-4 flex-wrap">
-
-                <FormOption id={`${id}-7`} value="7" label="7天" compare={field.value}/>
-                <FormOption id={`${id}-15`} value="15" label="15天" compare={field.value}/>
-                <FormOption id={`${id}-30`} value="30" label="30天" compare={field.value}/>
-                <FormOption id={`${id}-90`} value="90" label="90天" compare={field.value}/>
-                <FormOption id={`${id}-180`} value="180" label="180天" compare={field.value}/>
-                <FormOption id={`${id}-365`} value="365" label="365天" compare={field.value}/>
-              </RadioGroup>
-            )}
-          </FormField>
+          <ComboValidity expireList={expireList}/>
 
           {/* 包时：每日提取上限 */}
           <FormField
@@ -244,3 +175,118 @@ export default function Center() {
     </Card>
   )
 }
+
+function BillingMethod(props: {
+  expireList: string[]
+}) {
+  const {setValue} = useFormContext<Schema>()
+  return (
+    <FormField
+      className="flex flex-col gap-4"
+      name="type"
+      label="计费方式">
+      {({id, field}) => (
+        <RadioGroup
+          id={id}
+          value={field.value}
+          onValueChange={(v) => {
+            field.onChange(v)
+            if (v === '2') {
+              setValue('expire', '0')
+            }
+            else if (props.expireList.length > 0) {
+              setValue('expire', props.expireList[0])
+            }
+          }}
+          className="flex gap-4 max-md:flex-col">
+
+          <FormOption
+            id={`${id}-2`}
+            value="2"
+            label="包量套餐"
+            description="适用于短期或不定期高提取业务场景"
+            compare={field.value}/>
+
+          <FormOption
+            id={`${id}-1`}
+            value="1"
+            label="包时套餐"
+            description="适用于每日提取量稳定的业务场景"
+            compare={field.value}/>
+
+        </RadioGroup>
+      )}
+    </FormField>
+  )
+}
+
+function IpTime({map, liveList}: {
+  map: Map<string, string>
+  liveList: string[]}) {
+  const {control, getValues} = useFormContext<Schema>()
+  const values = useWatch({control})
+
+  return (
+    <FormField
+      className="space-y-4"
+      name="live"
+      label="IP 时效">
+      {({id, field}) => (
+        <RadioGroup id={id} value={field.value} onValueChange={field.onChange} className="grid grid-cols-[repeat(auto-fill,minmax(120px,1fr))] gap-4">
+          {liveList.map((live) => {
+            const params = new URLSearchParams()
+            params.set('mode', {
+              1: 'time',
+              2: 'quota',
+            }[values.type || '2'])
+            params.set('live', live || '0')
+            params.set('expire', values.expire || '0')
+            const price = map.get(params.toString())
+            return (
+              <FormOption
+                key={live}
+                id={live}
+                value={live}
+                label={`${Number(live) / 60} 小时`}
+                description={price && `￥${price}/IP`}
+                compare={field.value}
+              />
+            )
+          })}
+
+        </RadioGroup>
+      )}
+    </FormField>
+  )
+}
+
+function ComboValidity({expireList}: {expireList: string[]}) {
+  return (
+    <FormField
+      className="space-y-4"
+      name="expire"
+      label="套餐时效"
+    >
+      {({id, field}) => (
+        <RadioGroup
+          id={id}
+          value={field.value}
+          onValueChange={(val) => {
+            field.onChange(val)
+          }}
+          className="flex gap-4 flex-wrap"
+        >
+          {expireList.map(item => (
+            <FormOption
+              key={item}
+              id={`${id}-${item}`}
+              value={item}
+              label={`${item} 天`}
+              compare={field.value}
+            />
+          ))}
+        </RadioGroup>
+      )}
+    </FormField>
+  )
+}