Merge pull request #103 from MaggieMii/mhr-dev

✨ feat: 新增提问页面

src/app.config.ts

@@ -2,6 +2,8 @@
 
 export default defineAppConfig({
   pages: [
+    // 'pages/questionInfo/index',
+    'pages/publishQuestion/index',
     'pages/login/index',
     'pages/main/index',
     'pages/classInfo/index',

src/common/assets/types.ts

@@ -62,3 +62,18 @@ export interface CommentInfo {
   total_support_count?: number;
   utime?: number;
 }
+
+export interface Course {
+  id: number;
+  name: string;
+  teacher: string;
+  school: string;
+  type: string;
+  credit: number;
+  composite_score: number;
+  rater_count: number;
+  assessments: Record<string, never>; // 使用 Record 类型来表示对象，具体类型根据实际结构定义
+  features: Record<string, never>;
+  is_collected: boolean;
+  is_subscribed: boolean;
+}

src/common/components/comment/comment.scss

@@ -46,6 +46,7 @@ $content-line-height: 30;
 }
 
 .bigcomment {
+  margin: 60rpx 0;
   .commentplus {
     position: relative;
     margin-left: 45rpx;

src/pages/classInfo/index.tsx

@@ -16,25 +16,11 @@ import Label3 from '@/common/components/label3/label3';
 import ShowStar from '@/common/components/showStar/showStar';
 import { get } from '@/common/utils/fetch';
 
-import { CommentInfoType } from '../../common/assets/types';
+import { CommentInfoType, Course } from '../../common/assets/types';
 
 // import { useRef } from 'react';
 // import Echarts, { EChartOption, EchartsHandle } from 'taro-react-echarts';
 // 定义接口
-interface Course {
-  id: number;
-  name: string;
-  teacher: string;
-  school: string;
-  type: string;
-  credit: number;
-  composite_score: number;
-  rater_count: number;
-  assessments: Record<string, never>; // 使用 Record 类型来表示对象，具体类型根据实际结构定义
-  features: Record<string, never>;
-  is_collected: boolean;
-  is_subscribed: boolean;
-}
 
 // 创建一个对象来存储英文描述和对应的中文描述
 const coursePropertyMap = {

src/pages/main/index.scss

@@ -28,6 +28,6 @@
   margin-bottom: 70rpx;
 }
 
-.main .bigcomment {
-  margin: 60rpx 0;
-}
+// .main .bigcomment {
+//   margin: 60rpx 0;
+// }

src/pages/publishQuestion/index.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarTitleText: '问问同学',
+  navigationBarBackgroundColor: '#F9F9F2',
+});

src/pages/publishQuestion/index.scss

@@ -0,0 +1,77 @@
+.theClassnme {
+  font-size: 43rpx;
+  font-weight: bold;
+  color: #565552;
+  text-align: center;
+  margin-top: 22rpx;
+}
+
+.teacherName {
+  font-size: 33rpx;
+  font-weight: 400;
+  color: #9f9f9c;
+  text-align: center;
+  margin-top: 15rpx;
+  margin-bottom: 27rpx;
+}
+
+.publishView {
+  background-color: #f9f9f2;
+  padding: 45rpx;
+  width: 659.42rpx;
+  position: relative;
+  left: 50%;
+  transform: translateX(-50%);
+}
+
+.avatar {
+  width: 90.58rpx;
+  height: 90.58rpx;
+  border-radius: 100%;
+  margin-right: 10px;
+  border: #d2d5d8 solid 5rpx;
+  margin-right: 27rpx;
+}
+
+.nickname {
+  font-weight: bold;
+  font-size: 22rpx;
+  color: #565552;
+}
+
+.currentDate {
+  font-weight: 400;
+  font-size: 14rpx;
+  color: #9f9f9c;
+  margin-top: 20rpx;
+}
+
+.publish-header {
+  display: flex;
+  align-items: center;
+}
+
+.askicon {
+  width: 44.44rpx;
+  height: 47.05rpx;
+  margin: 28rpx 0;
+}
+
+.quesionContent {
+  width: 568.84rpx;
+  height: 719.2rpx;
+  background-color: white;
+  padding: 40rpx;
+  font-size: 25rpx;
+  box-sizing: border-box;
+}
+
+.publishBtn {
+  margin-top: 60rpx;
+  width: 230.07rpx;
+  height: 70.65rpx;
+  border-radius: 50rpx;
+  background-color: #ffd777;
+  color: white;
+  line-height: 70.65rpx;
+}

src/pages/publishQuestion/index.tsx

@@ -0,0 +1,178 @@
+import { Button, Image, Text, Textarea, View } from '@tarojs/components';
+import Taro from '@tarojs/taro';
+import { useEffect, useState } from 'react';
+
+// eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+import askicon from '@/common/assets/img/publishQuestion/ask.png';
+import { Course } from '@/common/assets/types';
+import { get, post } from '@/common/utils/fetch';
+
+import './index.scss';
+
+export interface UserInfo {
+  avatarUrl: string; // 用户头像的URL
+  nickName: string; // 用户昵称
+}
+
+export interface ResponseUser {
+  code?: number;
+  data: WebUserProfileVo;
+  msg?: string;
+}
+
+export interface WebUserProfileVo {
+  avatar: string;
+  ctime: number;
+  grade_sharing_is_signed?: boolean;
+  id: number;
+  /**
+   * 是否为新用户，新用户尚未编辑过个人信息
+   */
+  new: boolean;
+  nickname: string;
+  studentId: string;
+  title_ownership: { [key: string]: boolean };
+  using_title: string;
+  utime?: number;
+}
+
+const getCurrentDate = () => {
+  // 创建一个新的Date对象，它将被初始化为当前日期和时间
+  const now = new Date();
+
+  // 获取年、月、日
+  const year = now.getFullYear();
+  const month = now.getMonth() + 1; // getMonth() 返回的月份是从0开始的
+  const day = now.getDate();
+
+  // 格式化为 YYYY-MM-DD
+  const formattedDate = `${year}年${month.toString().padStart(2, '0')}月${day.toString().padStart(2, '0')}日`;
+
+  return formattedDate;
+};
+
+export default function Index() {
+  const [course, setCourse] = useState<Course | null>(null);
+
+  const courseId = 2347; //先用概率统计A来调试吧！
+
+  //用户个人身份信息
+  const [avatarUrl, setAvatarUrl] = useState<string>('');
+  const [nickName, setNickName] = useState<string>('昵称');
+
+  useEffect(() => {
+    // eslint-disable-next-line @typescript-eslint/require-await
+    const getCourseData = async () => {
+      try {
+        void get(`/courses/${courseId}/detail`, true).then((res) => {
+          console.log(res);
+          // 检查 res 是否有 data 属性，并且断言其类型
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+          setCourse(res?.data as Course);
+        });
+      } catch (error) {
+        // 错误处理，例如弹出提示
+        console.error('Failed to fetch course data:', error);
+      }
+    };
+
+    if (courseId) void getCourseData().then((r) => console.log(r));
+  }, [courseId]); // 在courseId变化时运行
+
+  useEffect(() => {
+    const fetchProfile = async () => {
+      try {
+        const url = '/users/profile';
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+        const response: ResponseUser = await get(url);
+        if (
+          typeof response?.data?.nickname == 'string' &&
+          typeof response?.data?.avatar == 'string'
+        ) {
+          setNickName(response?.data?.nickname);
+          setAvatarUrl(response?.data?.avatar);
+        }
+      } catch (error) {
+        console.error('Error fetching collection data:', error);
+      }
+    };
+    void fetchProfile();
+  }, []); //仅在挂载时运行一次
+
+  const [question, setQuestion] = useState<string>('');
+
+  const countContent = (e) => {
+    /* eslint-disable @typescript-eslint/no-unsafe-member-access */
+    // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+    const { value } = e?.detail ?? {};
+    if (typeof value === 'string') {
+      setQuestion(value);
+    } else {
+      console.error('Expected a string but received a different type');
+    }
+    /* eslint-enable @typescript-eslint/no-unsafe-member-access */
+    // const length = value.length;
+    // setLength(length);
+  };
+
+  const postQuestion = () => {
+    const questionobj = {
+      biz: 'Course',
+      biz_id: courseId,
+      content: question,
+    };
+    post(`/questions/publish`, questionobj)
+      .then((res) => {
+        // eslint-disable-next-line @typescript-eslint/no-unsafe-member-access
+        if (res?.code === 0) {
+          // 打印成功信息，但最好使用其他日志记录方式，而不是 console.log
+          // 例如：this.setState({ message: '发布课评成功' });
+          void Taro.showToast({ title: '发布问题成功', icon: 'success' });
+          // console.log('发布课评成功');
+          // 使用 redirectTo 跳转
+          // void Taro.redirectTo({
+          //   url: '/pages/main/index', // 页面路径
+          // });
+        } else {
+          // 处理其他响应代码，可能需要给用户一些反馈
+          void Taro.showToast({ title: '发布课评失败', icon: 'none' });
+        }
+      })
+      .catch((error) => {
+        // 处理可能出现的错误情况
+        void Taro.showToast({ title: '发布失败，请稍后重试', icon: 'none' });
+        console.error('发布问题请求失败:', error);
+      });
+  };
+  return (
+    <View>
+      <View className="theClassnme">{course?.name}</View>
+      <View className="teacherName">
+        {course?.school} {course?.teacher}
+      </View>
+      <View className="publishView">
+        <View className="publish-header">
+          <Image src={avatarUrl ?? ''} className="avatar" />
+          <View className="nameDate">
+            <Text className="nickname">{nickName}</Text>
+            <View className="currentDate">{getCurrentDate()}</View>
+          </View>
+        </View>
+        {
+          // eslint-disable-next-line @typescript-eslint/no-unsafe-assignment
+          <Image src={askicon} className="askicon"></Image>
+        }
+        <Textarea
+          maxlength={450}
+          onInput={countContent}
+          placeholderStyle="font-size: 25rpx;"
+          placeholder="关于课程你有什么要了解的？"
+          className="quesionContent"
+        ></Textarea>
+      </View>
+      <Button onClick={postQuestion} className="publishBtn">
+        提交
+      </Button>
+    </View>
+  );
+}

src/pages/questionInfo/index.config.ts

@@ -0,0 +1,4 @@
+export default definePageConfig({
+  navigationBarTitleText: '问问同学',
+  navigationBarBackgroundColor: '#F9F9F2',
+});

src/pages/questionInfo/index.tsx

@@ -0,0 +1,9 @@
+import { Navigator, View } from '@tarojs/components';
+
+export default function Index() {
+  return (
+    <View>
+      <Navigator url="../research/research">我要跳转到搜索页面</Navigator>
+    </View>
+  );
+}