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;