feat(questionDetail):修复questionDetail样式

eleliauk · Dec 18, 2024 · 1d36a3c · 1d36a3c
1 parent e4bbdf2
commit 1d36a3c
Show file tree

Hide file tree

Showing 6 changed files with 49 additions and 177 deletions.
diff --git a/src/common/components/QuestionDetail/QuestionDetail.tsx b/src/common/components/QuestionDetail/QuestionDetail.tsx
@@ -123,52 +123,56 @@ const QuestionDetail: React.FC<IQuestionProps> = ({
     void fetchAllPublishers();
   }, [question, answers]);
   return (
-    <View className="questionDetail">
-      <View className="question-detail">
+    <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]">
         <PublishHeader
           avatarUrl={questionDetail?.user?.avatar ?? ''}
           nickName={questionDetail?.user?.nickname ?? ''}
           date={formatTime(questionDetail?.ctime)}
         />
-        <View className="question-item">
-          {
-            // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-            <Image src={askicon} className="askicon"></Image>
-          }
-          <View className="question-value">{question.content}</View>
+        <View className="mt-[20rpx] flex">
+          <Image
+            src={askicon as string}
+            className="ml-[10rpx] mr-[20rpx] h-[47.05rpx] w-[44.44rpx]"
+          />
+          <View className="mt-[5rpx] max-w-[471rpx] text-[21.74rpx] text-[#565552]">
+            {question.content}
+          </View>
         </View>
       </View>
-      <View className="answer-list">
+
+      <View className="w-full">
         {answersDetail &&
           answersDetail.map((answer, index) => (
             <View
               key={index}
-              className="answer-item"
+              className="mx-auto w-[603.26rpx] border-b border-[#e3e3e3] pb-[35rpx] pt-[40rpx]"
               onClick={() => handleFloatLayoutChange(answer.id)}
             >
               <PublishHeader
                 avatarUrl={answer?.user?.avatar ?? ''}
                 nickName={answer?.user?.nickname ?? ''}
                 date={formatTime(answer.ctime)}
               />
-              <View className="question-item">
-                {
-                  // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
-                  <Image src={answericon} className="askicon"></Image>
-                }
-                <View className="answer-content">{answer?.content}</View>
+              <View className="mt-[20rpx] flex">
+                <Image src={answericon as string} className="h-[47.05rpx] w-[44.44rpx]" />
+                <View className="mt-[5rpx] max-w-[471rpx] text-[21.74rpx] text-[#565552]">
+                  {answer?.content}
+                </View>
               </View>
-              <View className="answer-statistics">
-                <View className="icon">
+              <View className="ml-[450rpx] flex items-center">
+                <View className="inline-block h-[40rpx] w-[40rpx] rounded-full text-center leading-[40rpx] shadow-md">
                   <IconFont name="comment" />
-                  {/* <Navigator className="iconfont">&#xe769;</Navigator> */}
                 </View>
-                <Text className="text1">{answer.total_comment_count}</Text>
-                <View className="icon">
+                <Text className="mx-[10rpx] text-[22rpx] font-bold text-[#565552]">
+                  {answer.total_comment_count}
+                </Text>
+                <View className="inline-block h-[40rpx] w-[40rpx] rounded-full text-center leading-[40rpx] shadow-md">
                   <IconFont name="like" />
-                  {/* <Navigator className="iconfont">&#xe786;</Navigator> */}
                 </View>
-                <Text className="text1">{answer.total_support_count}</Text>
+                <Text className="mx-[10rpx] text-[22rpx] font-bold text-[#565552]">
+                  {answer.total_support_count}
+                </Text>
               </View>
             </View>
           ))}

diff --git a/src/common/components/QuestionDetail/index.scss b/src/common/components/QuestionDetail/index.scss
diff --git a/src/common/components/QuestionListComponent/QuestionListComponent.tsx b/src/common/components/QuestionListComponent/QuestionListComponent.tsx
@@ -48,7 +48,10 @@ const formatTime = (timestamp: number) => {
   return `${year}-${month}-${day} ${hour}:${minute}:${second}`;
 };
 
-const QuestionListComponent: React.FC<{ question: IQuestion }> = ({ question }) => {
+const QuestionListComponent: React.FC<{ question: IQuestion; courseId: string }> = ({
+  question,
+  courseId,
+}) => {
   const dispatch = useCourseStore(({ getPublishers }) => ({ getPublishers }));
 
   const [questionDetail, setQuestion] = useState<IQuestion>(question);
@@ -90,11 +93,11 @@ const QuestionListComponent: React.FC<{ question: IQuestion }> = ({ question })
     };
 
     void fetchQuestionWithUserInfo();
-  }, [question]);
+  }, [question, dispatch]);
 
   const handleQuestionDetailClick = () => {
     void Taro.navigateTo({
-      url: `/pages/questionInfo/index?id=${questionDetail.id}`,
+      url: `/pages/questionInfo/index?id=${questionDetail.id}&&course_id=${courseId}`,
     });
   };
 

diff --git a/src/pages/questionInfo/index.scss b/src/pages/questionInfo/index.scss
@@ -1,26 +1 @@
 @import '~taro-ui/dist/style/components/float-layout.scss';
-
-.flex-page .at-row {
-  margin-bottom: 40px;
-
-  .at-col {
-    padding: 18px 16px;
-    color: #fff;
-    font-size: 28px;
-    text-align: center;
-
-    &:nth-child(odd) {
-      background-color: $color-brand-light;
-    }
-
-    &:nth-child(even) {
-      background-color: tint($color-brand-light, 20%);
-    }
-  }
-}
-
-.panel__content {
-  .example-item + .example-item.example-item--card {
-    margin-top: 48px;
-  }
-}
diff --git a/src/pages/questionInfo/index.tsx b/src/pages/questionInfo/index.tsx
@@ -51,40 +51,12 @@ interface ResponseType {
 }
 
 const Index: React.FC = () => {
-  // const question = {
-  //   id: 5,
-  //   questioner_id: 5208,
-  //   biz: 'Course',
-  //   biz_id: 2347,
-  //   content: '这节课怎么样？',
-  //   answer_cnt: 0,
-  //   preview_answers: null,
-  //   utime: 1725039765090,
-  //   ctime: 1725039765090,
-  // };
-
-  // const answers = [
-  //   {
-  //     id: 5,
-  //     publisher_id: 5208,
-  //     question_id: 5,
-  //     content: '我觉得很不错',
-  //     stance: 0,
-  //     total_support_count: 0,
-  //     total_oppose_count: 0,
-  //     total_comment_count: 0,
-  //     utime: 1725039834700,
-  //     ctime: 1725039834700,
-  //   },
-  // ];
-
   const [course, setCourse] = useState<Course | null>(null);
 
   const [question, setQuestion] = useState<IQuestion | null>(null);
 
   const [answers, setAnswers] = useState<IAnswer[] | null>(null);
-
-  const courseId = 2347; //先用概率统计A来调试吧
+  const [courseId, setCourseId] = useState<string>('');
   const [questionId, setQuestionId] = useState<string | null>(null);
 
   // const questionId = 5;
@@ -96,6 +68,7 @@ const Index: React.FC = () => {
       const params = instance?.router?.params || {};
 
       if (params.id) setQuestionId(params.id);
+      if (params.course_id) setCourseId(params.course_id);
     };
 
     getParams();
@@ -289,45 +262,36 @@ const Index: React.FC = () => {
   };
 
   return (
-    <View className="min-h-screen bg-gray-50 pb-20">
-      <View className="sticky top-0 z-10 bg-white shadow-sm">
-        <CourseInfo
-          name={course?.name}
-          school={course?.school}
-          teacher={course?.teacher}
-        />
-      </View>
+    <View>
+      <CourseInfo name={course?.name} school={course?.school} teacher={course?.teacher} />
       {question ? (
-        <View className="mx-auto mt-4 max-w-3xl px-4">
-          <QuestionDetail
-            question={question}
-            answers={answers}
-            handleFloatLayoutChange={handleFloatLayoutChange}
-          />
-        </View>
+        <QuestionDetail
+          question={question}
+          answers={answers}
+          handleFloatLayoutChange={handleFloatLayoutChange}
+        />
       ) : (
-        <View className="flex h-32 items-center justify-center">
-          <View className="text-gray-500">加载中...</View>
-        </View>
+        ''
       )}
 
       <View className="panel">
         <View className="panel__content">
+          {/* AtFloatLayout 组件 */}
           <AtFloatLayout
             isOpened={isFloatLayoutVisible}
             title={`${commentNum}条回复`}
             onClose={() => handleFloatLayoutChange(null)}
           >
-            <View onClick={handleClearReply} className="pb-16">
+            <View onClick={handleClearReply}>
+              {/* 这里是浮动弹层的内容 */}
               {commentsLoaded && (
                 <CommentComponent
                   comments={allComments}
                   onCommentClick={handleCommentClick}
                 />
               )}
-              <View className="fixed bottom-0 left-0 right-0 bg-white p-3 shadow-lg">
+              <View className="reply-input">
                 <Input
-                  className="rounded-full border border-gray-200 bg-gray-50 px-4 py-2"
                   type="text"
                   placeholder={placeholderContent}
                   value={replyContent}

diff --git a/src/pages/questionList/index.tsx b/src/pages/questionList/index.tsx
@@ -30,8 +30,7 @@ interface IQuestion {
 const App = () => {
   const [course, setCourse] = useState<Course | null>(null);
   const [questions, setQuestions] = useState<IQuestion[] | null>(null);
-  // const courseId = 2347; //先用概率统计A来调试吧
-  const [courseId, setCourseId] = useState<string | null>(null);
+  const [courseId, setCourseId] = useState<string>('');
   useEffect(() => {
     const getParams = () => {
       const instance = Taro.getCurrentInstance();
@@ -92,7 +91,7 @@ const App = () => {
       <CourseInfo name={course?.name} school={course?.school} teacher={course?.teacher} />
       {questions !== null &&
         questions.map((question, index) => (
-          <QuestionListComponent key={index} question={question} />
+          <QuestionListComponent key={index} question={question} courseId={courseId} />
         ))}
       <Button className="btn" onClick={handleAsk}>
         我也要提问