diff --git a/src/components/Subscription/SubscriptionContent.js b/src/components/Subscription/SubscriptionContent.js
index 45f18a95..2075b4ae 100644
--- a/src/components/Subscription/SubscriptionContent.js
+++ b/src/components/Subscription/SubscriptionContent.js
@@ -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() {
)}
+ {/* 会员协议确认 */}
+ setAgreementChecked(e.target.checked)}
+ colorScheme="green"
+ size="md"
+ >
+
+ 我已阅读并同意
+ e.stopPropagation()}
+ >
+ 《{selectedPlan?.name?.toLowerCase() === 'max' ? 'MAX' : 'PRO'}会员服务协议》
+
+
+
+
}
- onClick={handleCreateOrder}
+ onClick={() => {
+ if (!agreementChecked) {
+ toast({
+ title: '请先阅读并同意会员服务协议',
+ status: 'warning',
+ duration: 3000,
+ isClosable: true,
+ position: 'top',
+ });
+ return;
+ }
+ handleCreateOrder();
+ }}
isLoading={loading}
loadingText="创建订单中..."
isDisabled={!selectedPlan}
diff --git a/src/components/Subscription/SubscriptionContentNew.tsx b/src/components/Subscription/SubscriptionContentNew.tsx
index cdd6bb0c..1debe858 100644
--- a/src/components/Subscription/SubscriptionContentNew.tsx
+++ b/src/components/Subscription/SubscriptionContentNew.tsx
@@ -23,6 +23,8 @@ import {
Icon,
Container,
useBreakpointValue,
+ Checkbox,
+ Link as ChakraLink,
} from '@chakra-ui/react';
import {
FaWeixin,
@@ -46,6 +48,12 @@ import { useSubscriptionEvents } from '../../hooks/useSubscriptionEvents';
import { subscriptionConfig, themeColors } from '../../views/Pages/Account/subscription-content';
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',
+};
+
// 计费周期选择器组件 - 移动端垂直布局(年付在上),桌面端水平布局
interface CycleSelectorProps {
options: any[];
@@ -154,6 +162,9 @@ export default function SubscriptionContentNew() {
const [openFaqIndex, setOpenFaqIndex] = useState(null);
+ // 会员协议确认状态
+ const [agreementChecked, setAgreementChecked] = useState(false);
+
const { isOpen, onOpen, onClose } = useDisclosure();
const toast = useToast();
@@ -418,6 +429,10 @@ export default function SubscriptionContentNew() {
);
setSelectedPlan(plan);
+
+ // 切换套餐时重置协议勾选状态
+ setAgreementChecked(false);
+
await calculatePrice(plan, selectedCycle, promoCodeApplied ? promoCode : null);
onOpen();
};
@@ -1607,6 +1622,28 @@ export default function SubscriptionContentNew() {
)}
+ {/* 会员协议确认 */}
+ setAgreementChecked(e.target.checked)}
+ colorScheme="green"
+ size="md"
+ >
+
+ 我已阅读并同意
+ e.stopPropagation()}
+ >
+ 《{(selectedPlan as any)?.name?.toLowerCase() === 'max' ? 'MAX' : 'PRO'}会员服务协议》
+
+
+
+