支付与权益组件

@mbjia/components

支付与权益组件

处理会员、点数、下载权益、充值和权益不足提示。

这一组组件处理会员、点数、下载权益、充值和权益不足提示。

模块定位

处理会员购买、点数购买、权益不足提示和通用权益拦截流程，通常和下载、分析、拆条等任务联动。

会员点数权益拦截

接入前确认

需要用户信息、权益接口、订单状态接口和支付跳转地址。部分流程通过 eventBus 打开弹窗。

userInforights APIeventBus

接入速览

什么时候用

下载、发布、拆条、AI 分析等动作需要先判断会员、点数、空间或通用权益时使用。

最少必填

弹窗类组件通常需要 open/show、关闭回调和用户/权益数据；流程类通常由 eventBus 打开。

返回什么

多数回调只通知关闭、支付或确认动作；真正订单状态和权益变化需要查服务接口。

服务接口业务 Hooks

容易漏什么

权益弹窗不应散落拼装，优先复用已有流程组件，避免扣费、确认和轮询状态不一致。

组件

组件	说明
`Payment`	会员套餐支付弹窗
`BuyPointsModal`	加量包/点数购买弹窗
`VipModal`	会员升级/购买弹窗
`InsufficientModalFlow`	点数不足流程
`GeneralInterestsFlow`	通用权益提示流程
`OrderConfirm`	支付结果二次确认弹窗
`DownloadConfirmModal`	下载次数确认弹窗
`PublishConfirmModal`	发布次数确认弹窗
`DownLoadProgress`	下载进度弹窗
`DownLoadOverModal`	下载成功弹窗
`DownLoadFailModal`	下载失败弹窗
`ConfirmDownloadMemo`	扣费确认弹窗
`NotEnoughVideoPointsMemo`	非会员点数不足弹窗
`PurchasePointsMemo`	基础会员点数不足弹窗
`PremiumPointsMemo`	高级会员点数不足弹窗
`BigAccountPointsMemo`	大客户点数不足弹窗
`NotEnoughSpaceMemo`	非会员空间不足弹窗
`VipNotEnoughSpaceMemo`	会员空间不足弹窗
`BuyPointsMemo`	新版点数加量包购买弹窗
`WaitingMemo`	下载/扣费等待弹窗
`GeneralInterestsModalMemo`	通用权益不足弹窗
`MemberRecharge`	会员充值提醒弹窗
`AliBuyModal`	阿里云服务市场购买/加购授权弹窗
`BindPhoneModal`	下载前绑定手机号弹窗
`CollectInfoModal`	获取试用信息收集弹窗
`QueryStorageSpace`	存储空间查询和空间不足弹窗流程
`TaobaoDispatchSelectModal`	淘宝/抖店发布目标选择弹窗
`ECommerceStatusModal`	电商发布、支付和上传状态弹窗

权益弹窗预览

权益拦截

下载、发布、拆条和 AI 分析通常先检查次数/点数/空间，再决定执行任务、升级会员或联系客户经理。

Payment

interface IPayment {
  userInfo: any
  open: boolean
  isDiscount: boolean
  onClose: () => void
  onPay: () => void
}

行为：

用户必须勾选《会员服务协议》后才能支付。
根据 isDiscount 使用不同价格列表。
点击支付后打开 ${MBJIA_ROOT_URL}/alipay?type=${type}。

示例：

tsx

<Payment
  open={open}
  userInfo={user}
  isDiscount={false}
  onClose={() => setOpen(false)}
  onPay={() => console.log('开始支付')}
/>

回调出参：

回调	出参	说明
`onClose`	无	关闭支付弹窗。
`onPay`	无	点击支付时触发。组件内部会按套餐类型打开支付地址。

BuyPointsModal

interface IProps {
  show?: boolean
  onClose?: Function
  eventBus?: any
}

回调出参：

回调	出参	说明
`onClose`	由组件内部调用决定	关闭购买点数弹窗。

依赖：

reqUserInfo
reqRights
reqIncrementList
getChargeOrderStatus
reqGetDescription

VipModal

interface IProps {
  isUpgrade?: boolean
  handlePayCall?: () => void
  close?: () => void
  askLevel?: VIP_LEVEL
  askType?: VIP_TYPE
  show?: boolean
}

回调出参：

回调	出参	说明
`handlePayCall`	无	支付动作回调。
`close`	无	关闭会员弹窗。

枚举：

enum VIP_TYPE {
  MONTH = 3,
  QUARTER = 4,
  YEAR = 5,
}

InsufficientModalFlow

interface PropsType {
  eventBus: any
  hasEnoughPointAction?: (point: number) => void
}

回调出参：

回调	出参	说明
`hasEnoughPointAction`	`point: number`	点数足够时返回可用点数。

当点数不足时展示不同弹窗，并可触发：

事件	说明
`vip:modal:open`	打开会员弹窗
`global:AllUserInterests:UpgradeVip:changeState`	通知业务切换会员升级状态

GeneralInterestsFlow

interface PropsType {
  eventBus: any
  userType: TaskJobStatusEnum
}

interface GeneralInterestsOpen {
  title?: string
  desc?: string
}

主要事件：

事件	说明
`global:GeneralInterestsFlow:show`	打开通用权益弹窗

订单与确认弹窗

这组组件用于支付、下载、发布前后的确认。它们只负责弹窗 UI 和回调，不直接完成业务扣费。

OrderConfirm

支付完成后的二次确认弹窗。

tsx

<OrderConfirm
  open={confirmOpen}
  handleCancelOrder={() => closeConfirm()}
  handleConfirmOrder={() => queryOrderStatus()}
  desc="支付成功后可下载高清无水印视频"
/>

字段	类型	必填	默认值	说明
`open`	`boolean`	是	-	弹窗是否打开。
`handleCancelOrder`	`() => void`	是	-	点击“支付失败/未支付”时触发。
`handleConfirmOrder`	`() => void`	是	-	点击“已支付成功”时触发。
`closeModal`	`() => void`	否	-	关闭弹窗。
`desc`	`string`	否	`'支付成功后发布高清无水印视频'`	描述文案。
`closable`	`boolean`	否	`false`	是否展示关闭按钮。
`zIndex`	`number`	否	`4001`	弹窗层级。

DownloadConfirmModal

下载前确认消费次数。

tsx

<DownloadConfirmModal
  open={open}
  remain={10}
  current={1}
  onConfirm={() => download()}
  onClose={() => setOpen(false)}
/>

字段	类型	必填	默认值	说明
`open`	`boolean`	是	-	弹窗是否打开。
`remain`	`number`	是	-	剩余下载次数。
`current`	`number`	是	-	本次消费次数。
`onConfirm`	`() => void`	是	-	确认下载。
`onClose`	`() => void`	是	-	关闭弹窗。

PublishConfirmModal

发布前确认消费次数；当剩余次数为 0 时只展示升级会员入口。

tsx

<PublishConfirmModal
  open={open}
  remain={3}
  current={1}
  onConfirm={() => publish()}
  onUpgrade={() => openVip()}
  onClose={() => setOpen(false)}
/>

字段	类型	必填	默认值	说明
`open`	`boolean`	是	-	弹窗是否打开。
`remain`	`number`	是	-	剩余发布次数。
`current`	`number`	是	-	本次消费次数。
`onConfirm`	`() => void`	是	-	确认发布。
`onUpgrade`	`() => void`	是	-	升级会员。
`onClose`	`() => void`	是	-	关闭弹窗。

下载结果弹窗

DownLoadProgress

下载进度弹窗。progress 取值按 0 ~ 1 处理，展示时会乘以 100。

tsx

<DownLoadProgress
  isShowProgress={progressOpen}
  progress={0.6}
  hideProgressBar={() => setProgressOpen(false)}
  emptyProgress={() => resetProgress()}
  copyUrl={() => copyDownloadUrl()}
/>

字段	类型	必填	默认值	说明
`isShowProgress`	`boolean`	是	-	是否展示下载进度。
`progress`	`number \| string`	是	-	下载进度，`1` 表示完成。
`showDownLoadModal`	`Function`	否	-	保留回调，当前源码未主动调用。
`emptyProgress`	`Function`	否	-	清空进度。
`hideProgressBar`	`Function`	否	-	关闭进度弹窗。
`copyUrl`	`Function`	否	-	复制下载链接。

DownLoadOverModal

下载成功弹窗。大弹窗会展示“重新下载”、个人中心查看和客户经理二维码。

tsx

<DownLoadOverModal
  isDownLoadVideoModal={open}
  eventBus={eventBus}
  typeOfWork="template"
  hideDownLoadModal={() => setOpen(false)}
  copyUrl={() => copyDownloadUrl()}
/>

字段	类型	必填	默认值	说明
`isDownLoadVideoModal`	`boolean`	是	-	是否展示弹窗。
`hideDownLoadModal`	`() => void`	是	-	关闭弹窗。
`eventBus`	`any`	否	-	点击重新下载时触发 `global:downloadVideosDirectly`。
`typeOfWork`	`'template' \| 'jianji' \| 'ai'`	否	`'template'`	个人中心跳转锚点类型。
`showBigDownloadOverModal`	`boolean`	否	`true`	是否展示大弹窗。
`copyUrl`	`() => void`	否	-	复制下载链接。

DownLoadFailModal

下载失败弹窗，支持复制下载链接和展示客户经理二维码。

tsx

<DownLoadFailModal
  show={open}
  copyUrl={downloadUrl}
  hideDownLoadModal={() => setOpen(false)}
/>

字段	类型	必填	默认值	说明
`show`	`boolean`	否	`false`	是否展示弹窗。
`copyUrl`	`string`	否	`''`	需要复制的下载链接。
`hideDownLoadModal`	`() => void`	否	空函数	关闭弹窗。
`showBigDownloadOverModal`	`boolean`	否	`true`	是否展示大弹窗。
`isOem`	`boolean`	否	-	是否 OEM 站点，影响背景和二维码区域。

扣费过程弹窗

这些组件来自 DeductionProcessModule，多数是 CommonModal 的场景化封装。业务通常不直接组合所有弹窗，而是在下载/生成流程里按用户类型和权益状态选择展示。

组件	触发场景	关键入参	主要动作
`ConfirmDownloadMemo`	点数足够，下载/任务前确认扣费	`confirmDownloadShow`、`deductPoints`、`restPoints`、`costInfo`	确认后继续任务。
`NotEnoughVideoPointsMemo`	非会员视频点不足	`notEnoughVideoPointsShow`、`deductPoints`、`restPoints`	购买加量包或升级会员。
`PurchasePointsMemo`	基础会员视频点不足	`purchasePointsShow`、`deductPoints`、`restPoints`	购买加量包或升级会员。
`PremiumPointsMemo`	高级会员视频点不足	`PremiumPointsShow`、`accountUrl`	联系客户经理或购买加量包。
`BigAccountPointsMemo`	大客户视频点不足	`BigAccountPointsShow`、`accountUrl`	联系客户经理。
`NotEnoughSpaceMemo`	非会员存储空间不足	`notEnoughSpaceShow`	清理素材或升级会员。
`VipNotEnoughSpaceMemo`	会员存储空间不足	`vipNotEnoughSpaceShow`、`accountUrl`	清理素材或联系客户经理。
`WaitingMemo`	下载/扣费等待中	`open`、`notice`	展示加载态。
`MemberRecharge`	充值提醒	`reminderShow`、`text`、`accountUrl`	联系客户经理或继续充值。

通用入参约定：

字段	类型	说明
`deductPoints`	`number`	本次需要扣除的视频点。
`restPoints`	`number`	当前剩余视频点。
`costInfo`	`{ text?: string[] }`	扣费规则说明。
`accountUrl`	`string`	客户经理二维码地址。
`onOpenChange`	`Function`	弹窗开关变化回调。
`onOk`	`Function`	确认按钮回调。
`onCancel`	`Function`	取消按钮回调。

BuyPointsMemo

新版点数加量包购买弹窗，会请求用户信息、权益信息、加量包列表，并在支付后复用 OrderConfirm 查询订单。

tsx

<BuyPointsMemo
  buyPointsShow={open}
  onCancel={() => setOpen(false)}
  defaultAvaterUrl="/default-user.png"
/>

字段	类型	必填	默认值	说明
`buyPointsShow`	`boolean`	是	-	是否展示弹窗。
`onCancel`	`() => void`	是	-	关闭弹窗。
`defaultAvaterUrl`	`string`	否	内置默认头像	用户头像兜底地址。

依赖接口：

接口	用途
`reqUserInfo`	获取用户头像、昵称。
`reqRights`	获取会员和权益信息。
`reqIncrementList`	获取加量包列表。
`getChargeOrderStatus`	支付后查询订单状态。

GeneralInterestsModalMemo

通用权益不足弹窗。支持普通用户升级会员、大客户联系客户经理、阿里云服务市场用户购买/加购等分支。

tsx

<GeneralInterestsModalMemo
  GeneralInterestsShow={open}
  title="权益不足"
  desc="当前权益不足，请升级"
  memberShip={TaskJobStatusEnum.FREE}
  eventBus={eventBus}
  onCancel={() => setOpen(false)}
/>

字段	类型	必填	默认值	说明
`GeneralInterestsShow`	`boolean`	是	-	是否展示弹窗。
`title`	`string`	否	`'权益不足'`	标题。
`desc`	`string`	否	`'您当前权益不足，请升级'`	描述，`$$高亮内容$$` 会被渲染为红色。
`memberShip`	`TaskJobStatusEnum`	否	`FREE`	用户会员状态。
`eventBus`	`any`	是	-	普通用户升级时触发 `vip:modal:open`。
`mastBig`	`boolean`	否	`false`	是否按大客户分支展示。
`showConfirmBtn`	`boolean`	否	`false`	是否展示确认按钮。
`onConfirm`	`() => void`	否	-	确认按钮回调。
`onCancel`	`(type?: string) => void`	是	-	关闭或购买/加购回调。

AliBuyModal

阿里云服务市场购买/加购授权弹窗。展示购买链接，支持复制链接和输入授权码兑换。

tsx

<AliBuyModal
  open={open}
  type="add"
  onOpenChange={() => setOpen(false)}
/>

字段	类型	必填	默认值	说明
`open`	`boolean`	否	-	是否展示弹窗。
`type`	`'buy' \| 'add'`	否	-	`buy` 购买解决方案，`add` 加购增量包。
`onOpenChange`	`(open?: boolean, isClose?: boolean) => void`	否	-	弹窗关闭或授权成功后触发。

账号与空间前置校验

这些组件一般不单独展示给用户，而是在下载、上传、试用申请等流程前作为前置校验节点。

BindPhoneModal

下载前绑定手机号弹窗。用户输入手机号和验证码，绑定成功后执行 handleDownloadVideo。

tsx

<BindPhoneModal
  isShowBindPhone={open}
  setModalConversion={() => setOpen(false)}
  handleDownloadVideo={() => download()}
/>

字段	类型	必填	默认值	说明
`isShowBindPhone`	`boolean`	是	-	是否展示弹窗。
`setModalConversion`	`() => void`	是	-	关闭弹窗。
`handleDownloadVideo`	`() => void`	是	-	绑定成功后继续下载。

依赖接口：

接口	用途
`getBindVerification`	获取短信验证码。
`bindMobile`	提交手机号和验证码完成绑定。

CollectInfoModal

获取产品试用信息弹窗。收集姓名、手机号、短信验证码和公司名称，内部复用 useVerifyCode。

tsx

<CollectInfoModal
  open={open}
  registry={false}
  onClose={() => setOpen(false)}
  onConfirm={() => submitTrial()}
/>

字段	类型	必填	默认值	说明
`open`	`boolean`	是	-	是否展示弹窗。
`registry`	`boolean`	是	-	源码声明字段，当前实现未直接使用。
`onClose`	`() => void`	是	-	关闭弹窗。
`onConfirm`	`() => void`	是	-	提交成功后触发。

提交数据：

字段	类型	说明
`name`	`string`	用户姓名。
`company`	`string`	公司名称。
`phone`	`string`	手机号，来自 `useVerifyCode`。
`code`	`string`	短信验证码，来自 `useVerifyCode`。

QueryStorageSpace

存储空间查询流程组件。组件本身不渲染入口，通过 ref.getStorageSpace() 暴露检查方法；空间不足时自动打开对应弹窗。

tsx

const storageRef = useRef<{ getStorageSpace: () => Promise<any> }>(null)

<QueryStorageSpace ref={storageRef} typeOfWork="template" eventBus={eventBus} />

const result = await storageRef.current?.getStorageSpace()
if (result?.spaceEnough) {
  startUpload()
}

字段	类型	必填	默认值	说明
`typeOfWork`	`'template' \| 'ai' \| 'jianji'`	是	-	空间不足后跳转个人中心时使用。
`eventBus`	`any`	否	-	非会员点击升级时触发 `vip:modal:open`。

Ref 方法：

方法	返回值	说明
`getStorageSpace()`	`Promise<{ spaceEnough; isVip; userRight } \| null>`	查询用户权益和空间，空间不足时打开对应弹窗。

电商发布弹窗

TaobaoDispatchSelectModal

淘宝/抖店发布目标选择弹窗。根据 theme 和 doudianData 决定可发布到主图、微详情、视频空间、轻应用讲解视频等目标。

tsx

<TaobaoDispatchSelectModal
  open={open}
  theme="taobaoTemplate"
  eventBus={eventBus}
  data={{ productId, templateId, taobaoProductId, renderLogId }}
  onClose={() => setOpen(false)}
  onConfirm={() => confirm()}
/>

字段	类型	必填	默认值	说明
`eventBus`	`any`	是	-	发布、支付、轻应用事件通信。
`open`	`boolean`	是	`true`	弹窗是否打开。
`onClose`	`() => void`	是	-	关闭弹窗。
`onConfirm`	`() => void`	是	-	确认回调。
`validateBeforeConfirm`	`() => boolean`	否	-	确认前校验。
`updateOrderStatus`	`(status: number) => void`	否	-	更新订单状态。
`theme`	`'ai' \| 'jijian' \| 'taobaoTemplate'`	是	`'taobaoTemplate'`	发布来源。
`isMainDisable`	`boolean`	否	`false`	是否禁用主图目标。
`data`	`object`	否	`{}`	商品、模板、订单和记录 id。
`doudianData`	`object`	否	-	轻应用/抖店数据。

主要事件：

事件	说明
`taobao:saas:dispatch`	AI SaaS 发布。
`lightApplication:publishVideo`	轻应用发布视频。
`global:taobaoDispatchSelectModal:dispatch`	电商状态弹窗确认后重新发布。

ECommerceStatusModal

电商状态弹窗。用于展示待支付、上传视频空间中、发布成功、取消、失败、重复订单、轻应用会员不足等状态。

tsx

<ECommerceStatusModal
  open={open}
  status={1}
  application="taobaoTemplate"
  eventBus={eventBus}
  onClose={() => setOpen(false)}
/>

字段	类型	必填	默认值	说明
`open`	`boolean`	是	-	弹窗是否打开。
`closable`	`boolean`	是	`false`	是否可关闭。
`status`	`number \| string`	是	-	状态码或特殊状态。
`onClose`	`(status?: any) => void`	是	-	关闭弹窗。
`data`	`any`	否	`{}`	业务数据，常用 `data.url` 跳转商品。
`eventBus`	`any`	否	-	发布、重试、支付确认事件。
`application`	`'ai' \| 'taobaoTemplate' \| 'lightApplication'`	是	`'taobaoTemplate'`	应用来源。
`errorMsg`	`string`	否	-	错误文案。
`restNumber`	`number`	否	`0`	剩余次数。
`btnText`	`string`	否	`''`	操作按钮文案。

常见状态：

`status`	说明
`0`	待支付。
`1`	支付完成，等待上传视频空间；内部使用假进度。
`2`	订单完成。
`3`	订单取消。
`4`	上传视频空间失败。
`7`	存在重复订单。
`'confirmPayment'`	支付后确认发布。

流程预览

用户触发下载/分析/拆条→查询权益和费用→判断点数是否足够

权益判断

足够：执行扣费或任务不足：判断用户类型→非会员点数不足会员点数不足→购买会员/加量包

支付与权益组件 ​

支付与权益组件

模块定位

接入前确认

接入速览 ​

组件 ​

权益弹窗预览 ​

权益拦截

Payment ​

BuyPointsModal ​

VipModal ​

InsufficientModalFlow ​

GeneralInterestsFlow ​

订单与确认弹窗 ​

OrderConfirm ​

DownloadConfirmModal ​

PublishConfirmModal ​

下载结果弹窗 ​

DownLoadProgress ​

DownLoadOverModal ​

DownLoadFailModal ​

扣费过程弹窗 ​

BuyPointsMemo ​

GeneralInterestsModalMemo ​

AliBuyModal ​

账号与空间前置校验 ​

BindPhoneModal ​

CollectInfoModal ​

QueryStorageSpace ​

电商发布弹窗 ​

TaobaoDispatchSelectModal ​

ECommerceStatusModal ​

流程预览 ​

支付与权益组件

接入速览

组件

权益弹窗预览

Payment

BuyPointsModal

VipModal

InsufficientModalFlow

GeneralInterestsFlow

订单与确认弹窗

OrderConfirm

DownloadConfirmModal

PublishConfirmModal

下载结果弹窗

DownLoadProgress

DownLoadOverModal

DownLoadFailModal

扣费过程弹窗

BuyPointsMemo

GeneralInterestsModalMemo

AliBuyModal

账号与空间前置校验

BindPhoneModal

CollectInfoModal

QueryStorageSpace

电商发布弹窗

TaobaoDispatchSelectModal

ECommerceStatusModal

流程预览