chore(points): align types/api with final backend contract - apps/web/src/pages/subscription/UpgradeSubscription.tsx
This commit is contained in:
@@ -1,11 +1,10 @@
|
||||
/**
|
||||
* 升级/降级/续费页面
|
||||
* P1-3: antd Button/Modal/Radio/Spin → 自定义 UI 组件
|
||||
*/
|
||||
import React from "react"
|
||||
import { Modal } from "@/components/ui"
|
||||
import { useNavigate } from "react-router-dom"
|
||||
import type { PlanType } from "@/api/subscription"
|
||||
import type { PlanId } from "@/api/subscription/types"
|
||||
import PageHead from "@/components/layout/PageHead"
|
||||
import { Button } from "@/components/ui"
|
||||
import { PLANS_META, getPlanName, getPlanPrice } from "./constants"
|
||||
@@ -13,6 +12,9 @@ import { BillingCycleSwitch, Spinner } from "./components/SubscriptionUI"
|
||||
import { useSubscription } from "./hooks/useSubscription"
|
||||
import "./UpgradeSubscription.css"
|
||||
|
||||
/** 可选择的付费档位(不含 free) */
|
||||
const PAID_PLANS: PlanId[] = ["monthly", "quarterly", "yearly"]
|
||||
|
||||
const UpgradeSubscription: React.FC = () => {
|
||||
const navigate = useNavigate()
|
||||
const {
|
||||
@@ -49,12 +51,12 @@ const UpgradeSubscription: React.FC = () => {
|
||||
const handleCancelClick = () => {
|
||||
Modal.confirm({
|
||||
title: "确认取消订阅",
|
||||
content: "取消后,当前周期结束前仍可正常使用,到期后降级为体验版。",
|
||||
content: "取消后,当前周期结束前仍可正常使用,到期后降级为免费版。",
|
||||
okText: "确认取消",
|
||||
cancelText: "再想想",
|
||||
onOk: async () => {
|
||||
const ok = await handleCancel()
|
||||
if (ok) navigate("/app/subscription")
|
||||
if (ok) navigate("/subscription")
|
||||
},
|
||||
})
|
||||
}
|
||||
@@ -74,14 +76,22 @@ const UpgradeSubscription: React.FC = () => {
|
||||
<PageHead title="变更订阅方案" description={`当前套餐:${getPlanName(currentPlan)}`} />
|
||||
|
||||
<div className="xx-upgrade-plans">
|
||||
{(["standard", "pro", "enterprise"] as PlanType[]).map((planId) => {
|
||||
{PAID_PLANS.map((planId) => {
|
||||
const plan = PLANS_META[planId]
|
||||
const isCurrent = planId === currentPlan
|
||||
// 年卡显示年价,其他显示月价
|
||||
const monthlyPrice = plan.priceYuan
|
||||
const yearlyPrice = plan.yearlyPriceYuan || plan.priceYuan * 12
|
||||
// 选中季卡时默认切到月付周期;年卡切到年付
|
||||
const resolvedCycle: "monthly" | "yearly" = planId === "yearly" ? "yearly" : "monthly"
|
||||
return (
|
||||
<div
|
||||
key={planId}
|
||||
className={`xx-upgrade-card ${isCurrent ? "current" : ""} ${selectedPlan === planId ? "selected" : ""}`}
|
||||
onClick={() => setSelectedPlan(planId)}
|
||||
onClick={() => {
|
||||
setSelectedPlan(planId)
|
||||
setBillingCycle(resolvedCycle)
|
||||
}}
|
||||
>
|
||||
{isCurrent && <div className="xx-current-badge">当前</div>}
|
||||
<h3>{plan.name}</h3>
|
||||
@@ -89,8 +99,8 @@ const UpgradeSubscription: React.FC = () => {
|
||||
<BillingCycleSwitch
|
||||
value={billingCycle}
|
||||
onChange={setBillingCycle}
|
||||
monthlyPrice={plan.price}
|
||||
yearlyPrice={plan.yearlyPrice}
|
||||
monthlyPrice={monthlyPrice}
|
||||
yearlyPrice={yearlyPrice}
|
||||
/>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
Reference in New Issue
Block a user