fix: pc端修改

2025-08-06 00:38:29 -07:00
parent f6f5c2828b
commit 19fe24660e
142 changed files with 162226 additions and 851 deletions
@@ -0,0 +1,103 @@
+'use client';
+import { useQuery } from '@tanstack/react-query';
+import { Dialog, DialogContent } from '@workspace/airo-ui/components/dialog';
+import { Separator } from '@workspace/ui/components/separator';
+import { useTranslations } from 'next-intl';
+import { useRouter } from 'next/navigation';
+import { forwardRef, useImperativeHandle, useState } from 'react';
+
+import { SubscribeBilling } from '@/components/subscribe/billing';
+import { SubscribeDetail } from '@/components/subscribe/detail';
+import useGlobalStore from '@/config/use-global';
+import { queryOrderDetail } from '@/services/user/order';
+
+interface OrderDetailDialogProps {
+  orderNo?: string;
+}
+
+interface OrderDetailDialogRef {
+  show: (orderNo: string) => void;
+  hide: () => void;
+}
+
+const OrderDetailDialog = forwardRef<OrderDetailDialogRef, OrderDetailDialogProps>((props, ref) => {
+  const t = useTranslations('subscribe');
+  const { getUserInfo } = useGlobalStore();
+  const router = useRouter();
+  const [open, setOpen] = useState(false);
+  const [orderNo, setOrderNo] = useState<string | undefined>(props.orderNo);
+  const [enabled, setEnabled] = useState(true);
+
+  useImperativeHandle(ref, () => ({
+    show: (newOrderNo: string) => {
+      setOrderNo(newOrderNo);
+      setEnabled(true);
+      setOpen(true);
+    },
+    hide: () => {
+      setOpen(false);
+      setOrderNo(undefined);
+      setEnabled(false);
+    },
+  }));
+
+  const { data, isLoading } = useQuery({
+    enabled: enabled && !!orderNo,
+    queryKey: ['queryOrderDetail', orderNo],
+    queryFn: async () => {
+      const { data } = await queryOrderDetail({ order_no: orderNo! });
+      if (data?.data?.status !== 1) {
+        getUserInfo();
+        setEnabled(false);
+      }
+      return data?.data;
+    },
+    refetchInterval: 3000,
+  });
+
+  const handleClose = () => {
+    setOpen(false);
+    setOrderNo(undefined);
+    setEnabled(false);
+  };
+
+  return (
+    <Dialog open={open} onOpenChange={setOpen}>
+      <DialogContent className='sm:w-[675px]'>
+        <div className='text-4xl font-bold text-[#0F2C53] sm:mb-8 sm:text-center sm:text-4xl'>
+          订单详情
+        </div>
+
+        <div className='text-[16px] font-bold text-[#666]'>
+          <div>订单号</div>
+          <div className='text-[12px] font-light text-[#4D4D4D]'>{orderNo}</div>
+        </div>
+        <Separator className='mb-3 mt-2 h-[2px] bg-[#225BA9]' />
+        <div className='text-[15px] text-[#225BA9]'>
+          <div>支付方式</div>
+          <div className='font-light text-[#666]'>钱包余额</div>
+        </div>
+        <Separator className='mb-3 mt-4 bg-[#225BA9]' />
+        <div>
+          <SubscribeDetail
+            subscribe={{
+              ...data?.subscribe,
+              quantity: data?.quantity,
+            }}
+          />
+          <Separator className='mb-3 mt-4 bg-[#225BA9]' />
+          <SubscribeBilling
+            order={{
+              ...data,
+              unit_price: data?.subscribe?.unit_price,
+            }}
+          />
+          <Separator className='mb-3 mt-4 bg-[#225BA9]' />
+        </div>
+      </DialogContent>
+    </Dialog>
+  );
+});
+
+OrderDetailDialog.displayName = 'OrderDetailDialog';
+export default OrderDetailDialog;
@@ -9,80 +9,88 @@ import { Card, CardContent } from '@workspace/ui/components/card';
 import { formatDate } from '@workspace/ui/utils';
 import { useTranslations } from 'next-intl';
 import { useRef } from 'react';
+import OrderDetailDialog from './components/OrderDetailDialog';

 export default function Page() {
  const t = useTranslations('order');

  const ref = useRef<ProListActions>(null);
+  const OrderDetailDialogRef = useRef<typeof OrderDetailDialog>(null);
  return (
-    <ProList<API.OrderDetail, Record<string, unknown>>
-      action={ref}
-      request={async (pagination, filter) => {
-        const response = await queryOrderList({ ...pagination, ...filter });
-        return {
-          list: response.data.data?.list || [],
-          total: response.data.data?.total || 0,
-        };
-      }}
-      renderItem={(item) => {
-        return (
-          <Card className='rounded-[32px] border border-[#D9D9D9] px-3 pb-5 pt-3 shadow-[0px_0px_4.5px_0px_rgba(0,0,0,0.25)]'>
-            <div className={'flex justify-between'}>
-              <div>
-                <div className={'text-[#666]'}>{t('orderNo')}</div>
-                <p className='text-xs text-[#4D4D4D]'>{item.order_no}</p>
-              </div>
-              <div>
-                {item.status === 1 ? (
-                  <>
-                    <Button className='min-w-[150px] rounded-full border-[#0F2C53] bg-[#0F2C53] px-[35px] py-[9px] text-center text-xl font-bold hover:bg-[#225BA9] hover:text-white'>
-                      {t('payment')}
-                    </Button>
+    <div>
+      <ProList<API.OrderDetail, Record<string, unknown>>
+        action={ref}
+        request={async (pagination, filter) => {
+          const response = await queryOrderList({ ...pagination, ...filter });
+          return {
+            list: response.data.data?.list || [],
+            total: response.data.data?.total || 0,
+          };
+        }}
+        renderItem={(item) => {
+          return (
+            <Card className='rounded-[32px] border border-[#D9D9D9] pb-5 pl-16 pr-3 pt-3 shadow-[0px_0px_4.5px_0px_rgba(0,0,0,0.25)]'>
+              <div className={'flex justify-between'}>
+                <div>
+                  <div className={'text-[#666]'}>{t('orderNo')}</div>
+                  <p className='text-xs text-[#4D4D4D]'>{item.order_no}</p>
+                </div>
+                <div>
+                  {item.status === 1 ? (
+                    <>
+                      <Button
+                        className='min-w-[150px] rounded-full border-[#F8BFD2] bg-[#F8BFD2] px-[35px] py-[9px] text-center text-xl font-bold hover:border-[#F8BFD2] hover:bg-[#FF4248] hover:text-white'
+                        onClick={async () => {
+                          await closeOrder({ orderNo: item.order_no });
+                          ref.current?.refresh();
+                        }}
+                      >
+                        取消订单
+                      </Button>
+                      <Button className='ml-3 min-w-[150px] rounded-full border-[#A8D4ED] bg-[#A8D4ED] px-[35px] py-[9px] text-center text-xl font-bold hover:border-[#225BA9] hover:bg-[#225BA9] hover:text-white'>
+                        {t('payment')}
+                      </Button>
+                    </>
+                  ) : (
                    <Button
+                      onClick={() => OrderDetailDialogRef?.current?.show(item.order_no)}
                      className='min-w-[150px] rounded-full border-[#0F2C53] bg-[#0F2C53] px-[35px] py-[9px] text-center text-xl font-bold hover:bg-[#225BA9] hover:text-white'
-                      onClick={async () => {
-                        await closeOrder({ orderNo: item.order_no });
-                        ref.current?.refresh();
-                      }}
                    >
-                      {t('cancel')}
+                      {t('detail')}
                    </Button>
-                  </>
-                ) : (
-                  <Button className='min-w-[150px] rounded-full border-[#0F2C53] bg-[#0F2C53] px-[35px] py-[9px] text-center text-xl font-bold hover:bg-[#225BA9] hover:text-white'>
-                    {t('detail')}
-                  </Button>
-                )}
+                  )}
+                </div>
              </div>
-            </div>
-            <CardContent className='p-3 text-sm'>
-              <ul className='grid grid-cols-2 gap-3 *:flex *:flex-col lg:grid-cols-4'>
-                <li>
-                  <span className='text-[#225BA9]'>{t('name')}</span>
-                  <span className={'font-bold text-[#091B33]'}>
-                    {item.subscribe.name || t(`type.${item.type}`)}
-                  </span>
-                </li>
-                <li className='font-semibold'>
-                  <span className='text-[#225BA9]'>{t('paymentAmount')}</span>
-                  <span>
-                    <Display type='currency' value={item.amount} />
-                  </span>
-                </li>
-                <li className='font-semibold'>
-                  <span className='text-[#225BA9]'>{t('status.0')}</span>
-                  <span>{t(`status.${item.status}`)}</span>
-                </li>
-                <li className='font-semibold'>
-                  <span className='text-[#225BA9]'>{t('createdAt')}</span>
-                  <time>{formatDate(item.created_at)}</time>
-                </li>
-              </ul>
-            </CardContent>
-          </Card>
-        );
-      }}
-      empty={<Empty />}
-    />
+              <CardContent className='px-0 py-3 text-sm'>
+                <ul className='grid grid-cols-2 gap-3 *:flex *:flex-col lg:grid-cols-4'>
+                  <li>
+                    <span className='text-[#225BA9]'>{t('name')}</span>
+                    <span className={'font-bold text-[#091B33]'}>
+                      {item.subscribe.name || t(`type.${item.type}`)}
+                    </span>
+                  </li>
+                  <li className='font-semibold'>
+                    <span className='text-[#225BA9]'>{t('paymentAmount')}</span>
+                    <span>
+                      <Display type='currency' value={item.amount} />
+                    </span>
+                  </li>
+                  <li className='font-semibold'>
+                    <span className='text-[#225BA9]'>{t('status.0')}</span>
+                    <span>{t(`status.${item.status}`)}</span>
+                  </li>
+                  <li className='font-semibold'>
+                    <span className='text-[#225BA9]'>{t('createdAt')}</span>
+                    <time>{formatDate(item.created_at)}</time>
+                  </li>
+                </ul>
+              </CardContent>
+            </Card>
+          );
+        }}
+        empty={<Empty />}
+      />
+      <OrderDetailDialog ref={OrderDetailDialogRef} />
+    </div>
  );
 }