feat: 修改样式

apps/user/components/main/OfferDialog/index.tsx

@@ -78,36 +78,12 @@ const PriceDisplay = ({ plan }: { plan: ProcessedPlanData }) => {
 
 import { useLoginDialog } from '@/app/auth/LoginDialogContext';
 import { Display } from '@/components/display';
+import Modal from '@/components/Modal';
 import Purchase from '@/components/subscribe/purchase';
 import useGlobalStore from '@/config/use-global';
+import { queryUserSubscribe } from '@/services/user/user';
 import { useTranslations } from 'next-intl';
 
-// 订阅按钮组件
-const SubscribeButton = ({ onClick }: { onClick?: () => void }) => {
-  const { user } = useGlobalStore();
-  const { openLoginDialog } = useLoginDialog();
-  const t = useTranslations('components.offerDialog');
-
-  function handleClick() {
-    console.log('click', user);
-    if (!user) {
-      // 强制登陆
-      openLoginDialog(false);
-      return;
-    }
-    onClick();
-  }
-
-  return (
-    <button
-      onClick={handleClick}
-      className='h-10 w-full rounded-full bg-[#0F2C53] text-sm font-medium text-white shadow-md transition-all duration-300 hover:bg-[#225BA9] sm:h-10 sm:text-sm md:h-[40px] md:text-[14px]'
-    >
-      {t('subscribe')}
-    </button>
-  );
-};
-
 // 星级评分组件
 const StarRating = ({ rating, maxRating = 5 }: { rating: number; maxRating?: number }) => (
   <div className='text-right text-xs font-light leading-[1.8461538461538463em] text-black sm:text-[13px]'>
@@ -186,9 +162,26 @@ const PlanCard = forwardRef<
     isFirstCard?: boolean;
   }
 >(({ plan, onSubscribe, isFirstCard = false }, ref) => {
-  const handleSubscribe = () => {
+  const { user } = useGlobalStore();
+  const { openLoginDialog } = useLoginDialog();
+  const t = useTranslations('components.offerDialog');
+  const ModalRef = useRef(null);
+  async function handleSubscribe() {
+    if (!user) {
+      // 强制登陆
+      openLoginDialog(false);
+      return;
+    }
+
+    // 有生效套餐进行弹窗提示
+    const { data } = await queryUserSubscribe();
+    if (data?.data?.list?.[0].status === 1) {
+      ModalRef.current.show();
+      return;
+    }
+
     onSubscribe?.(plan);
-  };
+  }
 
   return (
     <div
@@ -202,10 +195,26 @@ const PlanCard = forwardRef<
       <PriceDisplay plan={plan} />
 
       {/* 订阅按钮 */}
-      <SubscribeButton onClick={handleSubscribe} />
+      <button
+        onClick={handleSubscribe}
+        className='h-10 w-full rounded-full bg-[#0F2C53] text-sm font-medium text-white shadow-md transition-all duration-300 hover:bg-[#225BA9] sm:h-10 sm:text-sm md:h-[40px] md:text-[14px]'
+      >
+        {t('subscribe')}
+      </button>
 
       {/* 功能列表 */}
       <FeatureList plan={plan} />
+
+      <Modal
+        ref={ModalRef}
+        title={'【重要提示】'}
+        description={
+          '您已有正在生效的套餐，如继续购买新的套餐，原套餐将自动失效。账户套餐将自动转为最新套餐。未使用部分不支持退款或叠加。'
+        }
+        confirmText={'同意'}
+        cancelText={'取消'}
+        onConfirm={() => onSubscribe?.(plan)}
+      />
     </div>
   );
 });
@@ -350,7 +359,6 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
   // 处理订阅点击
   const handleSubscribe = (plan: ProcessedPlanData) => {
     setSelectedPlan(plan);
-    console.log('用户选择了套餐:', plan);
     // 这里可以添加订阅逻辑，比如跳转到支付页面或显示确认对话框
     PurchaseRef.current.show(plan, tabValue);
   };
@@ -412,12 +420,6 @@ const OfferDialog = forwardRef<OfferDialogRef>((props, ref) => {
                 <span className='absolute -top-8 left-16 z-10 rounded-md bg-[#E22C2E] px-2 py-0.5 text-[10px] font-bold leading-none text-white shadow sm:text-xs'>
                   -20%
                   {/* 小三角箭头 */}
-                  {/* <span className="
-                  absolute right-0 top-full
-                  block h-0 w-0
-                  border-l-[6px] border-r-[6px] border-t-[16px]
-                  border-l-transparent border-r-transparent border-t-[#E22C2E]
-                " />*/}
                   <span
                     className='absolute right-0 top-[80%] h-10 w-2 bg-[#E22C2E]'
                     style={{ clipPath: 'polygon(100% 0, 100% 100%, 0 0)' }}