From 4e9a942d66e8a27eba524f3e1bbe0c1ec1d56bd3 Mon Sep 17 00:00:00 2001
From: zdl <3489966805@qq.com>
Date: Wed, 17 Dec 2025 13:52:08 +0800
Subject: [PATCH] =?UTF-8?q?feat:=20=E8=AE=A2=E9=98=85=E6=94=AF=E4=BB=98?=
 =?UTF-8?q?=E5=BC=B9=E7=AA=97=E6=B7=BB=E5=8A=A0=E4=BC=9A=E5=91=98=E5=8D=8F?=
 =?UTF-8?q?=E8=AE=AE=E7=A1=AE=E8=AE=A4=E5=8A=9F=E8=83=BD?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

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

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

Co-Authored-By: Claude <noreply@anthropic.com>
---
 .../Subscription/SubscriptionContent.js       | 50 +++++++++++++++++-
 .../Subscription/SubscriptionContentNew.tsx   | 51 ++++++++++++++++++-
 2 files changed, 99 insertions(+), 2 deletions(-)

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() {
                   </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}
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() {
                   </Box>
                 )}
 
+                {/* 会员协议确认 */}
+                <Checkbox
+                  isChecked={agreementChecked}
+                  onChange={(e) => setAgreementChecked(e.target.checked)}
+                  colorScheme="green"
+                  size="md"
+                >
+                  <Text fontSize="sm" color="rgba(255, 255, 255, 0.7)">
+                    我已阅读并同意
+                    <ChakraLink
+                      href={AGREEMENT_URLS[(selectedPlan as any)?.name?.toLowerCase()] || AGREEMENT_URLS.pro}
+                      isExternal
+                      color="#3182CE"
+                      textDecoration="underline"
+                      mx={1}
+                      onClick={(e) => e.stopPropagation()}
+                    >
+                      《{(selectedPlan as any)?.name?.toLowerCase() === 'max' ? 'MAX' : 'PRO'}会员服务协议》
+                    </ChakraLink>
+                  </Text>
+                </Checkbox>
+
                 <Button
                   w="full"
                   size="lg"
@@ -1615,7 +1652,19 @@ export default function SubscriptionContentNew() {
                     : 'linear-gradient(135deg, #07C160, #059048)'}
                   color="white"
                   fontWeight="bold"
-                  onClick={handleCreatePaymentOrder}
+                  onClick={() => {
+                    if (!agreementChecked) {
+                      toast({
+                        title: '请先阅读并同意会员服务协议',
+                        status: 'warning',
+                        duration: 3000,
+                        isClosable: true,
+                        position: 'top',
+                      });
+                      return;
+                    }
+                    handleCreatePaymentOrder();
+                  }}
                   isLoading={loading}
                   isDisabled={!selectedPlan}
                   leftIcon={paymentMethod === 'alipay'