feat: 购买页面

src/defines/planTagType.ts

@@ -1,4 +1,5 @@
 export enum PlanTagType {
-    NONE = 0,
-    MOST_POPULAR = 1,
+    NONE = 0, // 无标签
+    MOST_POPULAR = 1, // 最受欢迎标签
+    LIMITED_TIME = 2, // 限时优惠标签
 }

src/locales/en-US/pages.ts

@@ -26,6 +26,10 @@ export default {
             account: 'Your Account',
             planExpireDate: 'Plan Expire Date',
         },
+        planTag: {
+            mostPopular: 'Most Popular',
+            limitedTime: 'Limited Time',
+        },
         payMethod: {
             wechat: 'WeChat',
             alipay: 'Alipay',

src/locales/fa-IR/pages.ts

@@ -26,6 +26,10 @@ export default {
             account: 'حساب شما',
             planExpireDate: 'تاریخ انقضا پلن',
         },
+        planTag: {
+            mostPopular: 'بیشترین محبوبیت',
+            limitedTime: 'زمان محدود',
+        },
         payMethod: {
             wechat: 'واتس‌آپ',
             alipay: 'آلی‌پی',

src/locales/zh-CN/pages.ts

@@ -26,6 +26,10 @@ export default {
             account: '您的账户',
             planExpireDate: '套餐到期日期',
         },
+        planTag: {
+            mostPopular: '最受欢迎',
+            limitedTime: '限时优惠',
+        },
         payMethod: {
             wechat: '微信',
             alipay: '支付宝',

src/pages/pricing/components/PlanCard/index.tsx

@@ -1,6 +1,7 @@
 import { memo } from 'react';
 
 import { Icon } from '@iconify/react';
+import { useTranslation } from 'react-i18next';
 
 import { useResponsive } from '@/hooks/useResponsive';
 
@@ -10,6 +11,12 @@ import { PlanTagType } from '@/defines';
 
 import { useActions } from './useActions';
 
+const PLAN_TAG_TYPE_I18N_KEY: Record<PlanTagType, string> = {
+    [PlanTagType.NONE]: '',
+    [PlanTagType.MOST_POPULAR]: 'mostPopular',
+    [PlanTagType.LIMITED_TIME]: 'limitedTime',
+};
+
 export interface PlanCardProps {
     id: number;
     title: string;
@@ -23,6 +30,7 @@ export interface PlanCardProps {
 
 const PlanCard = memo(
     ({ title, subTitle, introduce, tag, tagType, isSelected = false, onClick }: PlanCardProps) => {
+        const { t } = useTranslation();
         const { isMobile } = useResponsive();
         const { containerRef, titleRef, subTitleRef, introduceRef, textSizes } = useActions(
             isMobile,
@@ -45,12 +53,14 @@ const PlanCard = memo(
                 }`}
                 onClick={onClick}
             >
-                {tagType !== PlanTagType.NONE && (
+                {tagType != null && tagType !== PlanTagType.NONE && (
                     <div
                         className={`absolute top-[-13.5px] bg-[#0FA4E9] px-4 ${isMobile ? 'end-[21.13px] rounded-[4px] h-[24px]' : 'start-[21.13px] rounded-full py-1'}`}
                     >
                         <span className="text-black text-[14px] leading-[24px] font-normal uppercase">
-                            {tag}
+                            {tag?.trim()
+                                ? tag
+                                : t(`pages.pricing.planTag.${PLAN_TAG_TYPE_I18N_KEY[tagType]}`)}
                         </span>
                     </div>
                 )}

src/pages/pricing/useService.ts

@@ -35,7 +35,7 @@ export function useService(): UseServiceReturn {
                 subTitle: 'USD 15.99',
                 introduce: '折合 USD 0.18/天',
                 tag: '0.8折优惠',
-                tagType: PlanTagType.MOST_POPULAR,
+                tagType: PlanTagType.LIMITED_TIME,
                 price: 15.99,
             },
             {
@@ -44,7 +44,7 @@ export function useService(): UseServiceReturn {
                 subTitle: 'USD 2.99',
                 introduce: '折合 USD 0.22/天',
                 tag: '0.9折优惠',
-                tagType: PlanTagType.MOST_POPULAR,
+                tagType: PlanTagType.NONE,
                 price: 2.99,
             },
             // {