更新底部服务保障跳转链接 & 购买套餐添加折扣字段 & 用户总览添加长效动态图表

src/components/composites/purchase/index.tsx

@@ -4,8 +4,6 @@ import {merge} from '@/lib/utils'
 import {Tabs, TabsContent, TabsList, TabsTrigger} from '@/components/ui/tabs'
 import LongForm from '@/components/composites/purchase/long/form'
 import ShortForm from '@/components/composites/purchase/short/form'
-import FixedForm from '@/components/composites/purchase/fixed/form'
-import Custom from '@/components/composites/purchase/custom/page'
 import {usePathname, useRouter, useSearchParams} from 'next/navigation'
 import SelfDesc from '@/components/features/self-desc'
 export type TabType = 'short' | 'long' | 'fixed' | 'custom'

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

@@ -19,6 +19,12 @@ import {Schema} from '@/components/composites/purchase/long/form'
 import {Card} from '@/components/ui/card'
 import {getPrice, CreateResourceReq} from '@/actions/resource'
 
+interface PriceData {
+  price: string
+  discounted_price?: string
+  discounted?: number
+}
+
 export default function Right() {
   const {control} = useFormContext<Schema>()
   const method = useWatch({control, name: 'pay_type'})
@@ -27,7 +33,11 @@ export default function Right() {
   const quota = useWatch({control, name: 'quota'})
   const expire = useWatch({control, name: 'expire'})
   const dailyLimit = useWatch({control, name: 'daily_limit'})
-  const [price, setPrice] = useState<string>('')
+  const [priceData, setPriceData] = useState<PriceData>({
+    price: '0.00',
+    discounted_price: '0.00',
+    discounted: 0,
+  })
 
   useEffect(() => {
     const price = async () => {
@@ -42,17 +52,31 @@ export default function Right() {
       }
       try {
         const priceValue = await getPrice(params)
+        console.log(priceValue, 'priceValue')
+
         if (priceValue.success && priceValue.data?.price) {
-          setPrice(priceValue.data.price)
+          const data: PriceData = priceValue.data
+          setPriceData({
+            price: data.price,
+            discounted_price: data.discounted_price ?? data.price ?? '',
+            discounted: data.discounted,
+          })
         }
       }
       catch (error) {
         console.error('获取价格失败:', error)
-        setPrice('0.00')
+        setPriceData({
+          price: '0.00',
+          discounted_price: '0.00',
+          discounted: 0,
+        })
       }
     }
     price()
   }, [dailyLimit, expire, live, quota, mode])
+
+  const {price, discounted_price: discountedPrice = '', discounted} = priceData
+
   return (
     <Card className={merge(
       `flex-none basis-90 p-6 flex flex-col gap-6 relative`,
@@ -74,13 +98,21 @@ export default function Right() {
           </span>
         </li>
         {mode === '2' ? (
-          <li className="flex justify-between items-center">
-            <span className="text-sm text-gray-500">购买 IP 量</span>
-            <span className="text-sm">
-              {quota}
-              个
-            </span>
-          </li>
+          <>
+            <li className="flex justify-between items-center">
+              <span className="text-sm text-gray-500">购买 IP 量</span>
+              <span className="text-sm">
+                {quota}
+                个
+              </span>
+            </li>
+            <li className="flex justify-between items-center">
+              <span className="text-sm text-gray-500">实价</span>
+              <span className="text-sm">
+                ￥{price}
+              </span>
+            </li>
+          </>
         ) : (
           <>
             <li className="flex justify-between items-center">
@@ -97,19 +129,30 @@ 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">
+                ￥{price}
+              </span>
+            </li>
+            <li className="flex justify-between items-center">
+              <span className="text-sm text-gray-500">总折扣</span>
+              <span className="text-sm">
+                -￥{discounted}
+              </span>
+            </li>
           </>
         )}
       </ul>
       <div className="border-b border-gray-200"></div>
       <p className="flex justify-between items-center">
-        <span>价格</span>
+        <span>实付价格</span>
         <span className="text-xl text-orange-500">
-          ￥
-          {price}
+          ￥{discountedPrice}
         </span>
       </p>
       <Suspense>
-        <BalanceOrLogin {...{method, price, mode, live, quota, expire, dailyLimit}}/>
+        <BalanceOrLogin {...{method, discountedPrice, mode, live, quota, expire, dailyLimit}}/>
       </Suspense>
     </Card>
   )
@@ -117,7 +160,7 @@ export default function Right() {
 
 function BalanceOrLogin(props: {
   method: 'wechat' | 'alipay' | 'balance'
-  price: string
+  discountedPrice: string
   mode: string
   live: string
   quota: number
@@ -176,7 +219,7 @@ function BalanceOrLogin(props: {
       <Pay
         method={props.method}
         balance={profile.balance}
-        amount={props.price}
+        amount={props.discountedPrice}
         resource={{
           type: 2,
           long: {

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

@@ -17,6 +17,13 @@ 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'
+
+interface PriceData {
+  price: string
+  discounted_price?: string
+  discounted?: number
+}
+
 export default function Right() {
   const {control} = useFormContext<Schema>()
   const method = useWatch({control, name: 'pay_type'})
@@ -25,7 +32,11 @@ export default function Right() {
   const expire = useWatch({control, name: 'expire'})
   const quota = useWatch({control, name: 'quota'})
   const dailyLimit = useWatch({control, name: 'daily_limit'})
-  const [price, setPrice] = useState<string>('')
+  const [priceData, setPriceData] = useState<PriceData>({
+    price: '0.00',
+    discounted_price: '0.00',
+    discounted: 0,
+  })
 
   useEffect(() => {
     const price = async () => {
@@ -40,18 +51,31 @@ export default function Right() {
       }
       try {
         const priceResponse = await getPrice(params)
-        if (priceResponse.success && priceResponse.data?.price) {
-          setPrice(priceResponse.data.price)
+        console.log(priceResponse, 'priceResponse')
+
+        if (priceResponse.success && priceResponse.data) {
+          const data: PriceData = priceResponse.data
+          setPriceData({
+            price: data.price,
+            discounted_price: data.discounted_price ?? data.price ?? '',
+            discounted: data.discounted,
+          })
         }
       }
       catch (error) {
         console.error('获取价格失败:', error)
-        setPrice('0.00')
+        setPriceData({
+          price: '0.00',
+          discounted_price: '0.00',
+          discounted: 0,
+        })
       }
     }
     price()
   }, [expire, live, quota, mode, dailyLimit])
 
+  const {price, discounted_price: discountedPrice = '', discounted} = priceData
+
   return (
     <Card className={merge(
       `flex-none basis-90 p-6 flex flex-col gap-6 relative`,
@@ -73,13 +97,21 @@ export default function Right() {
           </span>
         </li>
         {mode === '2' ? (
-          <li className="flex justify-between items-center">
-            <span className="text-sm text-gray-500">购买 IP 量</span>
-            <span className="text-sm">
-              {quota}
-              个
-            </span>
-          </li>
+          <>
+            <li className="flex justify-between items-center">
+              <span className="text-sm text-gray-500">购买 IP 量</span>
+              <span className="text-sm">
+                {quota}
+                个
+              </span>
+            </li>
+            <li className="flex justify-between items-center">
+              <span className="text-sm text-gray-500">实价</span>
+              <span className="text-sm">
+                ￥{price}
+              </span>
+            </li>
+          </>
         ) : (
           <>
             <li className="flex justify-between items-center">
@@ -96,19 +128,32 @@ 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">
+                ￥{price}
+              </span>
+            </li>
+            {discounted === 1 ? '' : (
+              <li className="flex justify-between items-center">
+                <span className="text-sm text-gray-500">总折扣</span>
+                <span className="text-sm">
+                  -￥{discounted === 1 ? '' : discounted}
+                </span>
+              </li>
+            )}
           </>
         )}
       </ul>
       <div className="border-b border-gray-200"></div>
       <p className="flex justify-between items-center">
-        <span>价格</span>
+        <span>实付价格</span>
         <span className="text-xl text-orange-500">
-          ￥
-          {price}
+          ￥{discountedPrice}
         </span>
       </p>
       <Suspense>
-        <BalanceOrLogin {...{method, price, mode, live, quota, expire, dailyLimit}}/>
+        <BalanceOrLogin {...{method, discountedPrice, mode, live, quota, expire, dailyLimit}}/>
       </Suspense>
     </Card>
   )
@@ -116,7 +161,7 @@ export default function Right() {
 
 function BalanceOrLogin(props: {
   method: 'wechat' | 'alipay' | 'balance'
-  price: string
+  discountedPrice: string
   mode: string
   live: string
   quota: number
@@ -175,7 +220,7 @@ function BalanceOrLogin(props: {
       <Pay
         method={props.method}
         balance={profile.balance}
-        amount={props.price}
+        amount={props.discountedPrice}
         resource={{
           type: 1,
           short: {