feat: 订阅支付弹窗添加会员协议确认功能

- SubscriptionContentNew.tsx: 添加协议确认 Checkbox 和链接
- SubscriptionContent.js: 同步添加协议确认功能(旧版组件)
- 根据套餐类型动态显示 PRO/MAX 会员服务协议链接
- 未勾选协议时点击支付按钮显示 Toast 提示
- 切换套餐时自动重置协议勾选状态

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
zdl
2025-12-17 13:52:08 +08:00
parent 0310c40323
commit 4e9a942d66
2 changed files with 99 additions and 2 deletions

View File

@@ -32,6 +32,8 @@ import {
Input,
InputGroup,
InputRightElement,
Checkbox,
Link as ChakraLink,
} from '@chakra-ui/react';
import React, { useState, useEffect } from 'react';
import { logger } from '../../utils/logger';
@@ -55,6 +57,12 @@ import {
} from 'react-icons/fa';
import { getApiBase } from '../../utils/apiConfig';
// 会员协议 URL 配置
const AGREEMENT_URLS = {
pro: 'https://valuefrontier.cn/htmls/pro-member-agreement.html',
max: 'https://valuefrontier.cn/htmls/max-member-agreement.html',
};
export default function SubscriptionContent() {
// Auth context
const { user } = useAuth();
@@ -97,6 +105,9 @@ export default function SubscriptionContent() {
const [validatingPromo, setValidatingPromo] = useState(false);
const [priceInfo, setPriceInfo] = useState(null); // 价格信息(包含升级计算)
// 会员协议确认状态
const [agreementChecked, setAgreementChecked] = useState(false);
// 加载订阅套餐数据
useEffect(() => {
fetchSubscriptionPlans();
@@ -286,6 +297,9 @@ export default function SubscriptionContent() {
setSelectedPlan(plan);
// 切换套餐时重置协议勾选状态
setAgreementChecked(false);
// 计算价格(包含升级判断)
await calculatePrice(plan, selectedCycle, promoCodeApplied ? promoCode : null);
@@ -1603,11 +1617,45 @@ export default function SubscriptionContent() {
</Box>
)}
{/* 会员协议确认 */}
<Checkbox
isChecked={agreementChecked}
onChange={(e) => setAgreementChecked(e.target.checked)}
colorScheme="green"
size="md"
>
<Text fontSize="sm" color={secondaryText}>
我已阅读并同意
<ChakraLink
href={AGREEMENT_URLS[selectedPlan?.name?.toLowerCase()] || AGREEMENT_URLS.pro}
isExternal
color="blue.500"
textDecoration="underline"
mx={1}
onClick={(e) => e.stopPropagation()}
>
{selectedPlan?.name?.toLowerCase() === 'max' ? 'MAX' : 'PRO'}会员服务协议
</ChakraLink>
</Text>
</Checkbox>
<Button
colorScheme="green"
size="lg"
leftIcon={<Icon as={FaWeixin} />}
onClick={handleCreateOrder}
onClick={() => {
if (!agreementChecked) {
toast({
title: '请先阅读并同意会员服务协议',
status: 'warning',
duration: 3000,
isClosable: true,
position: 'top',
});
return;
}
handleCreateOrder();
}}
isLoading={loading}
loadingText="创建订单中..."
isDisabled={!selectedPlan}