feat: 修改样式

2025-08-12 05:38:14 -07:00 · 2025-08-12 05:38:14 -07:00 · 612829375b
commit 612829375b
parent 265519a03d
8 changed files with 51 additions and 110 deletions
--- a/apps/user/app/(main)/(content)/(user)/dashboard/content.tsx
+++ b/apps/user/app/(main)/(content)/(user)/dashboard/content.tsx
@ -75,7 +75,7 @@ export default function Content() {
  const { data: orderData } = useQuery({
    queryKey: ['orderData'],
    queryFn: async () => {
-      const { data } = await queryOrderList({ status: 5 });
+      const { data } = await queryOrderList({ status: 5, page: 1, size: 10 });
      return data?.[0] ?? {};
    },
  });
--- a/apps/user/app/(main)/(content)/(user)/order/components/OrderDetailDialog.tsx
+++ b/apps/user/app/(main)/(content)/(user)/order/components/OrderDetailDialog.tsx
@ -1,6 +1,6 @@
 'use client';
 import { useQuery } from '@tanstack/react-query';
-import { Dialog, DialogContent } from '@workspace/airo-ui/components/dialog';
+import { Dialog, DialogContent, DialogTitle } from '@workspace/airo-ui/components/dialog';
 import { Separator } from '@workspace/airo-ui/components/separator';
 import { useTranslations } from 'next-intl';
 import { useRouter } from 'next/navigation';
@ -63,6 +63,9 @@ const OrderDetailDialog = forwardRef<OrderDetailDialogRef, OrderDetailDialogProp

  return (
    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogTitle>
+        <div className={'sr-only'}>order detail</div>
+      </DialogTitle>
      <DialogContent className='sm:w-[675px]'>
        <div className='text-4xl font-bold text-[#0F2C53] sm:mb-8 sm:text-center sm:text-4xl'>
          {t('orderDetail')}
@ -75,7 +78,7 @@ const OrderDetailDialog = forwardRef<OrderDetailDialogRef, OrderDetailDialogProp
        <Separator className='mb-3 mt-2 h-[2px] bg-[#225BA9]' />
        <div className='text-[15px] text-[#225BA9]'>
          <div>{t('paymentMethod')}</div>
-          <div className='font-light text-[#666]'>{t('walletBalance')}</div>
+          <div className='font-light text-[#666]'>{data?.payment?.name}</div>
        </div>
        <Separator className='mb-3 mt-4 bg-[#225BA9]' />
        <div>
--- a/apps/user/app/(main)/(content)/(user)/payment/page.tsx
+++ b/apps/user/app/(main)/(content)/(user)/payment/page.tsx
@ -39,7 +39,7 @@ export default function Page() {
    queryFn: async () => {
      const { data } = await queryOrderDetail({ order_no: orderNo! });
      if (data?.data?.status !== 1) {
-        getUserInfo();
+        await getUserInfo();
        setEnabled(false);
      }
      return data?.data;
--- a/apps/user/components/main/OfferDialog/index.tsx
+++ b/apps/user/components/main/OfferDialog/index.tsx
@ -175,7 +175,7 @@ const PlanCard = forwardRef<

    // 有生效套餐进行弹窗提示
    const { data } = await queryUserSubscribe();
-    if (data?.data?.list?.[0].status === 1) {
+    if (data?.data?.list?.[0]?.status === 1) {
      ModalRef.current.show();
      return;
    }
--- a/apps/user/components/subscribe/billing.tsx
+++ b/apps/user/components/subscribe/billing.tsx
@ -1,55 +1,3 @@
-/*
-'use client';
-
-import { Card, CardContent, CardHeader, CardTitle } from '@workspace/ui/components/card';
-import { Separator } from '@workspace/ui/components/separator';
-import { useTranslations } from 'next-intl';
-
-export function SubscribeBilling({ order }: { order: API.Order }) {
-  const t = useTranslations('subscribe.billing');
-  const t_c = useTranslations('components.billing');
-  return (
-    <Card>
-      <CardHeader>
-        <CardTitle>{t('billingTitle')}</CardTitle>
-      </CardHeader>
-      <CardContent>
-        <div className={'grid gap-4'}>
-          <div className={'flex items-center justify-between'}>
-            <span className={'text-muted-foreground'}>{t('productDiscount')}</span>
-            <span className={''}>-¥ {order?.discount_amount}</span>
-          </div>
-          <div className={'flex items-center justify-between'}>
-            <span className={'text-muted-foreground'}>{t('couponDiscount')}</span>
-            <span className={''}>-¥ {order?.coupon_discount_amount}</span>
-          </div>
-          <div className={'flex items-center justify-between'}>
-            <span className={'text-muted-foreground'}>{t_c('planDuration')}</span>
-            <span className={''}>
-              {order?.quantity === 1 ? t_c('30days') : ''}
-              {order?.quantity === 12 ? t_c('365days') : ''}
-            </span>
-          </div>
-          <div className={'flex items-center justify-between'}>
-            <span className={'text-muted-foreground'}>{t('gift')}</span>
-            <span className={''}>-¥ {order?.gift_balance_deduction_amount}</span>
-          </div>
-          <div className={'flex items-center justify-between'}>
-            <span className={'text-muted-foreground'}>{t('fee')}</span>
-            <span className={''}>¥ {order?.fee}</span>
-          </div>
-          <Separator />
-          <div className={'flex items-center justify-between font-medium'}>
-            <span className={'text-muted-foreground'}>{t('total')}</span>
-            <span className={''}>¥ {order?.total_amount}</span>
-          </div>
-        </div>
-      </CardContent>
-    </Card>
-  );
-}
-*/
-
 'use client';

 import { Display } from '@/components/display';
@ -81,14 +29,6 @@ export function SubscribeBilling({ order }: Readonly<SubscribeBillingProps>) {
            {order?.quantity === 12 ? t_c('365days') : ''}
          </span>
        </li>
-        {order?.type && [1, 2].includes(order?.type) && (
-          <li>
-            <span className=''>{t('billing.duration')}</span>
-            <span>
-              {order?.quantity || 1} {t(order?.unit_time || 'Month')}
-            </span>
-          </li>
-        )}
        <li>
          <span className=''>{t('billing.price')}</span>
          <span>
--- a/apps/user/components/subscribe/payment-methods.tsx
+++ b/apps/user/components/subscribe/payment-methods.tsx
@ -7,64 +7,71 @@ import { RadioGroup, RadioGroupItem } from '@workspace/airo-ui/components/radio-
 import { cn } from '@workspace/airo-ui/lib/utils';
 import { useTranslations } from 'next-intl';
 import Image from 'next/image';
-import React, { memo } from 'react';
+import React, { memo, useState } from 'react';

 interface PaymentMethodsProps {
  value: number;
  onChange: (value: number) => void;
  balance?: boolean;
+  titleClassName: string;
 }

-const PaymentMethods: React.FC<PaymentMethodsProps> = ({ value, onChange, balance = true }) => {
+const PaymentMethods: React.FC<PaymentMethodsProps> = ({
+  value,
+  onChange,
+  balance = true,
+  titleClassName,
+}) => {
  const t = useTranslations('subscribe');
-
+  const [methods, setMethods] = useState({});
  const { data } = useQuery({
    queryKey: ['getAvailablePaymentMethods', { balance }],
    queryFn: async () => {
      const { data } = await getAvailablePaymentMethods();
      const list = data.data?.list || [];
      const methods = balance ? list : list.filter((item) => item.id !== -1);
-      const defaultMethod = methods.find((item) => item.id)?.id;
-      if (defaultMethod) onChange(defaultMethod);
+      const defaultMethod = methods.find((item) => item.id);
+      if (defaultMethod?.id) {
+        onChange(defaultMethod?.id);
+        setMethods(defaultMethod);
+      }
      return methods;
    },
  });
  return (
    <>
-      <div className='font-semibold'>{t('paymentMethod')}</div>
+      <div className='mb-2 flex items-center font-semibold'>
+        <span className={titleClassName}>{t('paymentMethod')}</span>
+        <span className={'ml-4 text-sm font-medium text-[#666]'}>{methods.name}</span>
+      </div>
      <RadioGroup
-        className='grid grid-cols-2 gap-2 md:grid-cols-5'
+        className='flex flex-wrap gap-2'
        value={String(value)}
-        onValueChange={(val) => {
-          console.log(val);
-          onChange(Number(val));
+        onValueChange={(item) => {
+          setMethods(item);
+          onChange(Number(item.id));
        }}
      >
        {data?.map((item) => (
-          <div key={item.id} className='relative'>
+          <div key={item.id} className='relative size-10'>
            <RadioGroupItem
-              value={String(item.id)}
+              value={item}
              id={String(item.id)}
              className='absolute inset-0 z-10 h-full w-full cursor-pointer opacity-0'
            />
            <Label
              htmlFor={String(item.id)}
              className={cn(
-                'border-muted bg-popover hover:bg-accent hover:text-accent-foreground flex flex-col items-center justify-between rounded-md border-2 py-2',
+                'border-muted bg-popover hover:bg-accent hover:text-accent-foreground flex size-10 flex-col items-center justify-center rounded-md border-2',
                String(value) === String(item.id) ? 'border-primary' : '',
              )}
            >
-              <div className='mb-3 size-12'>
              <Image
                src={item.icon || `/payment/balance.svg`}
-                  width={48}
-                  height={48}
+                width={32}
+                height={32}
                alt={item.name}
              />
-              </div>
-              <span className='w-full overflow-hidden text-ellipsis whitespace-nowrap text-center'>
-                {item.name}
-              </span>
            </Label>
          </div>
        ))}
--- a/apps/user/components/subscribe/purchase.tsx
+++ b/apps/user/components/subscribe/purchase.tsx
@ -1,8 +1,8 @@
 'use client';

+import PaymentMethods from '@/components/subscribe/payment-methods';
 import useGlobalStore from '@/config/use-global';
 import { preCreateOrder, purchase } from '@/services/user/order';
-import { purchaseCheckout } from '@/services/user/portal';
 import { useQuery } from '@tanstack/react-query';
 import { Button } from '@workspace/airo-ui/components/button';
 import {
@ -24,7 +24,6 @@ import {
  useState,
  useTransition,
 } from 'react';
-import { toast } from 'sonner';
 import { SubscribeBilling } from './billing';
 import { SubscribeDetail } from './detail';

@ -109,17 +108,8 @@ const Purchase = forwardRef<PurchaseDialogRef, PurchaseProps>((props, ref) => {
        const response = await purchase(params as API.PurchaseOrderRequest);
        const orderNo = response.data.data?.order_no;
        if (orderNo) {
-          const data = await purchaseCheckout({
-            orderNo: orderNo,
-            returnUrl: window.location.href,
-          });
          await getUserInfo();
-          if (data.data?.type === 'url' && data.data.checkout_url) {
-            window.open(data.data.checkout_url, '_blank');
-          } else {
-            toast.success(t('paymentSuccess'));
-            router.push(`/dashboard`);
-          }
+          router.push(`/payment?order_no=${orderNo}`);
        }
      } catch (error) {
        /* empty */
@ -193,10 +183,13 @@ const Purchase = forwardRef<PurchaseDialogRef, PurchaseProps>((props, ref) => {
              }}
            />
            <Separator className='mb-3 mt-4 bg-[#225BA9]' />
-            <div className='flex items-center justify-between text-[15px] text-[#225BA9]'>
-              <div>{t('paymentMethod')}</div>
-              <div className='font-light text-[#666]'>{t('walletBalance')}</div>
-            </div>
+            <PaymentMethods
+              titleClassName={'text-[15px] text-[#225BA9]'}
+              value={params.payment!}
+              onChange={(value) => {
+                handleChange('payment', value);
+              }}
+            />
          </div>
          <div className='mt-8 flex items-center justify-center'>
            <Button
--- a/apps/user/components/subscribe/recharge.tsx
+++ b/apps/user/components/subscribe/recharge.tsx
@ -7,7 +7,6 @@ import { ButtonProps } from '@workspace/airo-ui/components/button';
 import {
  Dialog,
  DialogContent,
-  DialogDescription,
  DialogHeader,
  DialogTitle,
  DialogTrigger,
@ -43,13 +42,12 @@ export default function Recharge(props: Readonly<ButtonProps>) {
      </DialogTrigger>
      <DialogContent className='flex h-full flex-col overflow-hidden md:h-auto'>
        <DialogHeader>
-          <DialogTitle className={'text-4xl'}>{t('balanceRecharge')}</DialogTitle>
-          <DialogDescription>{t('rechargeDescription')}</DialogDescription>
+          <DialogTitle className={'text-3xl'}>{t('balanceRecharge')}</DialogTitle>
        </DialogHeader>
-        <div className='mt-8 flex flex-col justify-between text-sm'>
+        <div className='mt-6 flex flex-col justify-between text-sm'>
          <div className='grid gap-3'>
            <div className='font-semibold'>{t('rechargeAmount')}</div>
-            <div className='mb-8 flex'>
+            <div className='mb-6 flex'>
              <EnhancedInput
                type='number'
                placeholder={t('enterAmount')}