From 8393ed5da2736780319f54b7e4cf779dce47bdb9 Mon Sep 17 00:00:00 2001
From: eleliauk <2831336720@qq.com>
Date: Thu, 19 Dec 2024 00:44:21 +0800
Subject: [PATCH] =?UTF-8?q?feat(questionDetail):=E4=BF=AE=E5=A4=8Dquestion?=
 =?UTF-8?q?Detail=E9=80=BB=E8=BE=91=E6=9C=AA=E6=88=90=E5=8A=9F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 .../QuestionDetail/QuestionDetail.tsx         | 75 ++++++++++++++++++-
 src/common/components/iconfont/index.d.ts     |  3 +-
 2 files changed, 75 insertions(+), 3 deletions(-)

diff --git a/src/common/components/QuestionDetail/QuestionDetail.tsx b/src/common/components/QuestionDetail/QuestionDetail.tsx
index 4e5fd0b..f9d043f 100644
--- a/src/common/components/QuestionDetail/QuestionDetail.tsx
+++ b/src/common/components/QuestionDetail/QuestionDetail.tsx
@@ -1,5 +1,5 @@
 import '@/common/components/QuestionDetail/QuestionDetail';
-import { Image, Text, View } from '@tarojs/components';
+import { Button, Image, Text, Textarea, View } from '@tarojs/components';
 import React, { useEffect, useState } from 'react';
 
 import answericon from '@/common/assets/img/publishQuestion/answer.png';
@@ -52,6 +52,7 @@ interface IQuestionProps {
   question: IQuestion;
   answers: IAnswer[] | null;
   handleFloatLayoutChange: (answerId: number | null) => void;
+  onAnswer?: (questionId: number) => void;
 }
 
 const formatTime = (timestamp: number) => {
@@ -69,11 +70,14 @@ const QuestionDetail: React.FC<IQuestionProps> = ({
   question,
   answers,
   handleFloatLayoutChange,
+  onAnswer,
 }) => {
   const dispatch = useCourseStore(({ getPublishers }) => ({ getPublishers }));
 
   const [questionDetail, setQuestion] = useState<IQuestion>(question);
   const [answersDetail, setAnswers] = useState<IAnswer[] | null>(answers);
+  const [showAnswerForm, setShowAnswerForm] = useState(false);
+  const [answerContent, setAnswerContent] = useState('');
 
   useEffect(() => {
     const fetchAllPublishers = async () => {
@@ -121,7 +125,30 @@ const QuestionDetail: React.FC<IQuestionProps> = ({
     };
 
     void fetchAllPublishers();
-  }, [question, answers]);
+  }, [question]);
+
+  const handlePublishAnswer = async () => {
+    try {
+      const response = await fetch('/answers/publish', {
+        method: 'POST',
+        headers: {
+          'Content-Type': 'application/json',
+        },
+        body: JSON.stringify({
+          content: answerContent,
+          question_id: question.id,
+        }),
+      });
+
+      if (response.ok) {
+        setAnswerContent('');
+        setShowAnswerForm(false);
+      }
+    } catch (error) {
+      console.error('发布回答失败:', error);
+    }
+  };
+
   return (
     <View className="relative mx-auto flex w-[659.42rpx] flex-col items-center bg-[#f9f9f2]">
       <View className="w-[603.26rpx] border-b border-[#e3e3e3] pb-[35rpx] pt-[40rpx]">
@@ -141,6 +168,13 @@ const QuestionDetail: React.FC<IQuestionProps> = ({
         </View>
       </View>
 
+      <View
+        className="bg-primary fixed bottom-[40rpx] right-[40rpx] flex h-[80rpx] w-[80rpx] items-center justify-center rounded-full shadow-lg"
+        onClick={() => onAnswer?.(question.id)}
+      >
+        <IconFont name="tiwen" size={40} color="#ffffff" />
+      </View>
+
       <View className="w-full">
         {answersDetail &&
           answersDetail.map((answer, index) => (
@@ -177,6 +211,43 @@ const QuestionDetail: React.FC<IQuestionProps> = ({
             </View>
           ))}
       </View>
+
+      <View className="w-full px-[28rpx] py-[20rpx]">
+        {!showAnswerForm ? (
+          <Button
+            className="bg-primary w-full rounded-lg py-[20rpx] text-white"
+            onClick={() => setShowAnswerForm(true)}
+          >
+            写回答
+          </Button>
+        ) : (
+          <View className="w-full">
+            <Textarea
+              className="mb-[20rpx] min-h-[200rpx] w-full rounded-lg bg-white p-[20rpx]"
+              value={answerContent}
+              onInput={(e) => setAnswerContent(e.detail.value)}
+              placeholder="请输入您的回答..."
+            />
+            <View className="flex justify-end space-x-[20rpx]">
+              <Button
+                className="rounded-lg bg-gray-200 px-[30rpx] text-gray-600"
+                onClick={() => {
+                  setShowAnswerForm(false);
+                  setAnswerContent('');
+                }}
+              >
+                取消
+              </Button>
+              <Button
+                className="bg-primary rounded-lg px-[30rpx] text-white"
+                onClick={() => void handlePublishAnswer()}
+              >
+                发布回答
+              </Button>
+            </View>
+          </View>
+        )}
+      </View>
     </View>
   );
 };
diff --git a/src/common/components/iconfont/index.d.ts b/src/common/components/iconfont/index.d.ts
index 529da84..63482a2 100644
--- a/src/common/components/iconfont/index.d.ts
+++ b/src/common/components/iconfont/index.d.ts
@@ -10,7 +10,8 @@ interface Props {
     | 'wechat'
     | 'yanjing'
     | 'yanjing1'
-    | 'xiaxue';
+    | 'xiaxue'
+    | 'edit';
   size?: number;
   color?: string | string[];
   style?: React.CSSProperties;