update pay function

src/views/ValueForum/PredictionTopicDetail.js

@@ -39,6 +39,8 @@ import { forumColors } from '@theme/forumTheme';
 import { getTopicDetail, getUserAccount } from '@services/predictionMarketService.api';
 import { useAuth } from '@contexts/AuthContext';
 import TradeModal from './components/TradeModal';
+import PredictionCommentSection from './components/PredictionCommentSection';
+import CommentInvestModal from './components/CommentInvestModal';
 
 const MotionBox = motion(Box);
 
@@ -52,6 +54,8 @@ const PredictionTopicDetail = () => {
   const [topic, setTopic] = useState(null);
   const [userAccount, setUserAccount] = useState(null);
   const [tradeMode, setTradeMode] = useState('buy');
+  const [selectedComment, setSelectedComment] = useState(null);
+  const [commentSectionKey, setCommentSectionKey] = useState(0);
 
   // 模态框
   const {
@@ -60,6 +64,12 @@ const PredictionTopicDetail = () => {
     onClose: onTradeModalClose,
   } = useDisclosure();
 
+  const {
+    isOpen: isInvestModalOpen,
+    onOpen: onInvestModalOpen,
+    onClose: onInvestModalClose,
+  } = useDisclosure();
+
   // 加载话题数据
   useEffect(() => {
     const loadTopic = async () => {
@@ -136,6 +146,44 @@ const PredictionTopicDetail = () => {
     }
   };
 
+  // 打开投资弹窗
+  const handleOpenInvest = (comment) => {
+    if (!user) {
+      toast({
+        title: '请先登录',
+        status: 'warning',
+        duration: 3000,
+      });
+      return;
+    }
+
+    setSelectedComment(comment);
+    onInvestModalOpen();
+  };
+
+  // 投资成功回调
+  const handleInvestSuccess = async () => {
+    // 刷新账户数据
+    try {
+      const accountResponse = await getUserAccount();
+      if (accountResponse.success) {
+        setUserAccount(accountResponse.data);
+      }
+
+      // 刷新评论区（通过更新key触发重新加载）
+      setCommentSectionKey((prev) => prev + 1);
+
+      toast({
+        title: '投资成功',
+        description: '评论列表已刷新',
+        status: 'success',
+        duration: 2000,
+      });
+    } catch (error) {
+      console.error('刷新数据失败:', error);
+    }
+  };
+
   if (!topic) {
     return null;
   }
@@ -561,6 +609,22 @@ const PredictionTopicDetail = () => {
               )}
             </VStack>
           </Box>
+
+          {/* 评论区 - 占据全宽 */}
+          <Box gridColumn={{ base: "1", lg: "1 / -1" }}>
+            <MotionBox
+              initial={{ opacity: 0, y: 20 }}
+              animate={{ opacity: 1, y: 0 }}
+              transition={{ duration: 0.5, delay: 0.3 }}
+            >
+              <PredictionCommentSection
+                key={commentSectionKey}
+                topicId={topicId}
+                topic={topic}
+                onInvest={handleOpenInvest}
+              />
+            </MotionBox>
+          </Box>
         </SimpleGrid>
       </Container>
 
@@ -572,6 +636,15 @@ const PredictionTopicDetail = () => {
         mode={tradeMode}
         onTradeSuccess={handleTradeSuccess}
       />
+
+      {/* 观点投资模态框 */}
+      <CommentInvestModal
+        isOpen={isInvestModalOpen}
+        onClose={onInvestModalClose}
+        comment={selectedComment}
+        topic={topic}
+        onInvestSuccess={handleInvestSuccess}
+      />
     </Box>
   );
 };