diff --git a/src/components/subscribe-plan-list/index.scss b/src/components/subscribe-plan-list/index.scss index 18ffd1c..47be3d8 100644 --- a/src/components/subscribe-plan-list/index.scss +++ b/src/components/subscribe-plan-list/index.scss @@ -17,6 +17,12 @@ } } +.plans.plans_no-billing-cycle:not(.plans_embedded) { + .plan-grid-container { + padding-top: 52px; + } +} + .plans { margin-top: 19px; diff --git a/src/components/subscribe-plan-list/index.tsx b/src/components/subscribe-plan-list/index.tsx index 395e660..58bbd90 100644 --- a/src/components/subscribe-plan-list/index.tsx +++ b/src/components/subscribe-plan-list/index.tsx @@ -198,6 +198,10 @@ export default function SubscribePlanList({ embedded = false, onBillingCycleChan const [planList, setPlanList] = useState([]); const [selectedPlanKeyByGroup, setSelectedPlanKeyByGroup] = useState>({}); const userMemberLevel = Number(user?.memberLevel ?? 0); + const hasMonthlyPlan = planList.some((plan) => plan.planCategory === "monthly"); + const hasYearlyPlan = planList.some((plan) => plan.planCategory === "yearly"); + const activeBillingCycle: SubscribeBillingCycle = billingCycle === "yearly" && hasYearlyPlan ? "yearly" : hasMonthlyPlan ? "monthly" : hasYearlyPlan ? "yearly" : billingCycle; + const showBillingCycle = hasMonthlyPlan && hasYearlyPlan; // 拉取套餐列表 useEffect(() => { @@ -234,7 +238,7 @@ export default function SubscribePlanList({ embedded = false, onBillingCycleChan const groupByLevel = new Map(); planList.forEach((plan, index) => { - if (plan.planCategory !== billingCycle) { + if (plan.planCategory !== activeBillingCycle) { return; } @@ -250,7 +254,7 @@ export default function SubscribePlanList({ embedded = false, onBillingCycleChan }); return groups; - }, [billingCycle, planList]); + }, [activeBillingCycle, planList]); const showPaySubscribe = useCallback((plan: ProductPlan) => { void openPaySubscribeDialog({ type: "subscribe", plan }); @@ -259,48 +263,50 @@ export default function SubscribePlanList({ embedded = false, onBillingCycleChan const joinCls = (...parts: Array) => parts.filter(Boolean).join(" "); return ( -
-
-
- - + + +
-
+ ) : null}
{planGroups.map((planGroup) => { - const groupKey = `${billingCycle}-${String(planGroup.level)}`; + const groupKey = `${activeBillingCycle}-${String(planGroup.level)}`; const selectedPlanItem = planGroup.plans.find((item) => item.key === selectedPlanKeyByGroup[groupKey]) ?? planGroup.plans[0]; const plan = selectedPlanItem.plan; const price = Number(plan.price ?? 0) / 100; // 价格单位为分,需要除以100转换为元