动态生成购买套餐 & 取消初次进后台修改密码的弹窗 & 添加总折扣字段 & 发布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>
+  )
+}

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

@@ -5,13 +5,14 @@ import Right from '@/components/composites/purchase/long/right'
 import {Form} from '@/components/ui/form'
 import * as z from 'zod'
 import {zodResolver} from '@hookform/resolvers/zod'
+import {ProductItem} from '@/actions/product'
 
 // 定义表单验证架构
 const schema = z.object({
   type: z.enum(['1', '2']).default('2'),
-  live: z.enum(['1', '4', '8', '12', '24']),
+  live: z.string(),
   quota: z.number().min(500, '购买数量不能少于 500 个'),
-  expire: z.enum(['7', '15', '30', '90', '180', '365']),
+  expire: z.string(),
   daily_limit: z.number().min(100, '每日限额不能少于 100 个'),
   pay_type: z.enum(['wechat', 'alipay', 'balance']),
 })
@@ -19,14 +20,31 @@ const schema = z.object({
 // 从架构中推断类型
 export type Schema = z.infer<typeof schema>
 
-export default function LongForm() {
+export default function LongForm({skuList}: {skuList: ProductItem['skus']}) {
+  if (!skuList) throw new Error('没有套餐数据')
+
+  const map = new Map<string, string>()
+  // const _modeList = new Set<string>()
+  const _liveList = new Set<number>()
+  const _expireList = new Set<number>()
+  for (const sku of skuList) {
+    const params = new URLSearchParams(sku.code)
+    // _modeList.add(params.get('mode') || '')
+    _liveList.add(Number(params.get('live')))
+    _expireList.add(Number(params.get('expire')))
+    map.set(sku.code, sku.price)
+  }
+  // const modeList = Array.from(_modeList).filter(Boolean)
+  const liveList = Array.from(_liveList).filter(Boolean).map(String)
+  const expireList = Array.from(_expireList).filter(Boolean).map(String)
+
   const form = useForm<Schema>({
     resolver: zodResolver(schema),
     defaultValues: {
       type: '2', // 默认为包量套餐
-      live: '1', // 小时
+      live: liveList[0], // 分钟
+      expire: '0', // 天
       quota: 500,
-      expire: '30', // 天
       daily_limit: 100,
       pay_type: 'balance', // 余额支付
     },
@@ -34,7 +52,7 @@ export default function LongForm() {
 
   return (
     <Form form={form} className="flex flex-col lg:flex-row gap-4">
-      <Center/>
+      <Center {...{liveList, map, expireList}}/>
       <Right/>
     </Form>
   )

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

@@ -22,8 +22,8 @@ export default function Right() {
   const dailyLimit = useWatch({control, name: 'daily_limit'})
   const [priceData, setPriceData] = useState<ExtraResp<typeof getPrice>>({
     price: '0.00',
-    discounted_price: '0.00',
-    discounted: 0,
+    actual: '0.00',
+    discounted: '0.00',
   })
 
   useEffect(() => {
@@ -32,20 +32,18 @@ export default function Right() {
         const resp = await getPrice({
           type: 2,
           long: {
-            live: Number(live) * 60,
+            live: Number(live),
             mode: Number(mode),
             quota: mode === '1' ? Number(dailyLimit) : Number(quota),
             expire: mode === '1' ? Number(expire) : undefined,
           },
         })
-
         if (!resp.success) {
           throw new Error('获取价格失败')
         }
-
         setPriceData({
           price: resp.data.price,
-          discounted_price: resp.data.discounted_price ?? resp.data.price ?? '',
+          actual: resp.data.actual ?? resp.data.price ?? '',
           discounted: resp.data.discounted,
         })
       }
@@ -53,16 +51,28 @@ export default function Right() {
         console.error('获取价格失败:', error)
         setPriceData({
           price: '0.00',
-          discounted_price: '0.00',
-          discounted: 0,
+          actual: '0.00',
+          discounted: '0.00',
         })
       }
     }
     price()
   }, [dailyLimit, expire, live, quota, mode])
 
-  const {price, discounted_price: discountedPrice = '', discounted} = priceData
+  const {price, actual: discountedPrice = ''} = priceData
+  // 计算总折扣价（原价 - 实付价格）
+  const calculateTotalDiscount = () => {
+    const originalPrice = parseFloat(price)
+    const actualPrice = parseFloat(discountedPrice)
+    if (isNaN(originalPrice) || isNaN(actualPrice)) {
+      return '0.00'
+    }
+    const discount = originalPrice - actualPrice
+    return discount.toFixed(2)
+  }
 
+  const totalDiscount = calculateTotalDiscount()
+  const hasDiscount = parseFloat(totalDiscount) > 0
   return (
     <Card className={merge(
       `flex-none basis-90 p-6 flex flex-col gap-6 relative`,
@@ -80,7 +90,7 @@ export default function Right() {
           <span className="text-sm">
             {live}
             {' '}
-            小时
+            分钟
           </span>
         </li>
         {mode === '2' ? (
@@ -93,11 +103,19 @@ export default function Right() {
               </span>
             </li>
             <li className="flex justify-between items-center">
-              <span className="text-sm text-gray-500">实价</span>
+              <span className="text-sm text-gray-500">原价</span>
               <span className="text-sm">
                 ￥{price}
               </span>
             </li>
+            {hasDiscount && (
+              <li className="flex justify-between items-center">
+                <span className="text-sm text-gray-500">总折扣</span>
+                <span className="text-sm">
+                  -￥{totalDiscount}
+                </span>
+              </li>
+            )}
           </>
         ) : (
           <>
@@ -116,19 +134,19 @@ export default function Right() {
               </span>
             </li>
             <li className="flex justify-between items-center">
-              <span className="text-sm text-gray-500">实价</span>
+              <span className="text-sm text-gray-500">原价</span>
               <span className="text-sm">
                 ￥{price}
               </span>
             </li>
-            {/* {discounted === 1 ? '' : (
+            {hasDiscount && (
               <li className="flex justify-between items-center">
                 <span className="text-sm text-gray-500">总折扣</span>
                 <span className="text-sm">
-                  -￥{discounted}
+                  -￥{totalDiscount}
                 </span>
               </li>
-            )} */}
+            )}
           </>
         )}
       </ul>
@@ -167,7 +185,7 @@ function BalanceOrLogin(props: {
           type: 2,
           long: {
             mode: Number(props.mode),
-            live: Number(props.live) * 60,
+            live: Number(props.live),
             expire: props.mode === '1' ? Number(props.expire) : undefined,
             quota: props.mode === '1' ? Number(props.dailyLimit) : Number(props.quota),
           },