From cd93d27e06b60461611d150014950ed41644a2de Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A6=BA=E7=8B=A8?= <18119604035@163.com>
Date: Tue, 4 Jul 2023 15:30:46 +0800
Subject: [PATCH] =?UTF-8?q?=E9=A6=96=E9=A1=B5=E3=80=81=E6=9C=80=E8=BF=91?=
 =?UTF-8?q?=E5=AD=A6=E4=B9=A0=E9=A1=B5=E9=9D=A2=E9=87=8D=E6=9E=84=E4=BB=A3?=
 =?UTF-8?q?=E7=A0=81?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/index/compenents/courses-model.tsx  |  28 +-
 src/pages/index/index.tsx                     |  47 +---
 .../compenents/courses-model.module.scss      |  74 +++++
 src/pages/study/compenents/courses-model.tsx  |  97 +++++++
 src/pages/study/index.tsx                     | 256 ++----------------
 5 files changed, 235 insertions(+), 267 deletions(-)
 create mode 100644 src/pages/study/compenents/courses-model.module.scss
 create mode 100644 src/pages/study/compenents/courses-model.tsx

diff --git a/src/pages/index/compenents/courses-model.tsx b/src/pages/index/compenents/courses-model.tsx
index 54df993..9a3d505 100644
--- a/src/pages/index/compenents/courses-model.tsx
+++ b/src/pages/index/compenents/courses-model.tsx
@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useEffect, useState } from "react";
 import { Image, ProgressBar } from "antd-mobile";
 import { useNavigate } from "react-router-dom";
 import styles from "./courses-model.module.scss";
@@ -9,7 +9,8 @@ interface PropInterface {
   title: string;
   thumb: string;
   isRequired: number;
-  progress: number;
+  record: any;
+  hourCount: number;
 }
 
 export const CoursesModel: React.FC<PropInterface> = ({
@@ -17,9 +18,22 @@ export const CoursesModel: React.FC<PropInterface> = ({
   title,
   thumb,
   isRequired,
-  progress,
+  record,
+  hourCount,
 }) => {
   const navigate = useNavigate();
+  const [userCourseProgress, setUserCourseProgress] = useState(0);
+
+  useEffect(() => {
+    if (record?.progress) {
+      setUserCourseProgress(Math.floor(record.progress / 100));
+    } else if (hourCount && hourCount > 0) {
+      setUserCourseProgress(1);
+    } else {
+      setUserCourseProgress(0);
+    }
+  }, [record, hourCount]);
+
   return (
     <>
       <div
@@ -41,7 +55,7 @@ export const CoursesModel: React.FC<PropInterface> = ({
             {isRequired === 0 && (
               <div className={styles["active-type"]}>选修课</div>
             )}
-            {progress == 0 && (
+            {userCourseProgress == 0 && (
               <>
                 <ProgressBar
                   percent={0}
@@ -56,9 +70,9 @@ export const CoursesModel: React.FC<PropInterface> = ({
                 <span className={styles["no-pro"]}>未学习</span>
               </>
             )}
-            {progress > 0 && progress < 100 && (
+            {userCourseProgress > 0 && userCourseProgress < 100 && (
               <ProgressBar
-                percent={progress}
+                percent={userCourseProgress}
                 text
                 style={{
                   flex: 1,
@@ -69,7 +83,7 @@ export const CoursesModel: React.FC<PropInterface> = ({
                 }}
               />
             )}
-            {progress >= 100 && (
+            {userCourseProgress >= 100 && (
               <div className={styles["success"]}>
                 <Image
                   width={20}
diff --git a/src/pages/index/index.tsx b/src/pages/index/index.tsx
index 38bb0be..f4f0bcb 100644
--- a/src/pages/index/index.tsx
+++ b/src/pages/index/index.tsx
@@ -8,6 +8,10 @@ import { useNavigate, useLocation } from "react-router-dom";
 import { Footer, TabBarFooter, Empty } from "../../components";
 import { CoursesModel } from "./compenents/courses-model";
 
+type LocalUserLearnHourRecordModel = {
+  [key: number]: UserLearnHourRecordModel;
+};
+
 const IndexPage = () => {
   const ref = useRef<DropdownRef>(null);
   const navigate = useNavigate();
@@ -22,7 +26,8 @@ const IndexPage = () => {
   const [categoryText, setCategoryText] = useState<string>(
     String(result.get("catName") || "所有分类")
   );
-  const [learnCourseRecords, setLearnCourseRecords] = useState<any>({});
+  const [learnCourseRecords, setLearnCourseRecords] =
+    useState<LocalUserLearnHourRecordModel>({});
   const [learnCourseHourCount, setLearnCourseHourCount] = useState<any>({});
   const systemConfig = useSelector((state: any) => state.systemConfig.value);
   const currentDepId = useSelector(
@@ -293,38 +298,14 @@ const IndexPage = () => {
           <>
             {coursesList.map((item: any) => (
               <div className={styles["item"]} key={item.id}>
-                {learnCourseRecords[item.id] && (
-                  <CoursesModel
-                    id={item.id}
-                    title={item.title}
-                    thumb={item.thumb}
-                    isRequired={item.is_required}
-                    progress={Math.floor(
-                      learnCourseRecords[item.id].progress / 100
-                    )}
-                  ></CoursesModel>
-                )}
-                {!learnCourseRecords[item.id] &&
-                  learnCourseHourCount[item.id] &&
-                  learnCourseHourCount[item.id] > 0 && (
-                    <CoursesModel
-                      id={item.id}
-                      title={item.title}
-                      thumb={item.thumb}
-                      isRequired={item.is_required}
-                      progress={1}
-                    ></CoursesModel>
-                  )}
-                {!learnCourseRecords[item.id] &&
-                  !learnCourseHourCount[item.id] && (
-                    <CoursesModel
-                      id={item.id}
-                      title={item.title}
-                      thumb={item.thumb}
-                      isRequired={item.is_required}
-                      progress={0}
-                    ></CoursesModel>
-                  )}
+                <CoursesModel
+                  id={item.id}
+                  title={item.title}
+                  thumb={item.thumb}
+                  isRequired={item.is_required}
+                  record={learnCourseRecords[item.id]}
+                  hourCount={learnCourseHourCount[item.id]}
+                ></CoursesModel>
               </div>
             ))}
             <Footer></Footer>
diff --git a/src/pages/study/compenents/courses-model.module.scss b/src/pages/study/compenents/courses-model.module.scss
new file mode 100644
index 0000000..4489140
--- /dev/null
+++ b/src/pages/study/compenents/courses-model.module.scss
@@ -0,0 +1,74 @@
+.item {
+  width: 100%;
+  height: 75px;
+  display: flex;
+  flex-direction: row;
+  align-items: center;
+  .info {
+    flex: 1;
+    height: 75px;
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    .title {
+      width: 100%;
+      height: 42px;
+      font-size: 15px;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 0.88);
+      line-height: 21px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+    }
+    .status-content {
+      width: 100%;
+      display: flex;
+      align-items: center;
+      .type {
+        width: 46px;
+        height: 24px;
+        background: rgba(255, 77, 79, 0.1);
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #ff4d4f;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 20px;
+      }
+      .active-type {
+        width: 46px;
+        height: 24px;
+        background: rgba(#ff9900, 0.1);
+        border-radius: 4px;
+        font-size: 12px;
+        font-weight: 400;
+        color: #ff9900;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        margin-right: 20px;
+      }
+
+      .no-pro {
+        height: 12px;
+        font-size: 12px;
+        font-weight: 400;
+        color: rgba(0, 0, 0, 0.45);
+        line-height: 12px;
+        margin-left: 10px;
+      }
+      .success {
+        display: flex;
+        align-items: center;
+        font-size: 12px;
+        font-weight: 400;
+        color: #ff4d4f;
+      }
+    }
+  }
+}
diff --git a/src/pages/study/compenents/courses-model.tsx b/src/pages/study/compenents/courses-model.tsx
new file mode 100644
index 0000000..0a78b6d
--- /dev/null
+++ b/src/pages/study/compenents/courses-model.tsx
@@ -0,0 +1,97 @@
+import React, { useEffect, useState } from "react";
+import { Image, ProgressBar } from "antd-mobile";
+import { useNavigate } from "react-router-dom";
+import styles from "./courses-model.module.scss";
+import mediaIcon from "../../../assets/images/commen/icon-medal.png";
+
+interface PropInterface {
+  id: number;
+  title: string;
+  thumb: string;
+  isRequired: number;
+  record: any;
+}
+
+export const CoursesModel: React.FC<PropInterface> = ({
+  id,
+  title,
+  thumb,
+  isRequired,
+  record,
+}) => {
+  const navigate = useNavigate();
+  const [userCourseProgress, setUserCourseProgress] = useState(0);
+
+  useEffect(() => {
+    if (record?.progress) {
+      setUserCourseProgress(Math.floor(record.progress / 100));
+    } else {
+      setUserCourseProgress(1);
+    }
+  }, [record]);
+
+  return (
+    <>
+      <div
+        className={styles["item"]}
+        onClick={() => {
+          navigate(`/course/${id}`);
+        }}
+      >
+        <Image
+          width={100}
+          height={75}
+          style={{ borderRadius: 8, marginRight: 15 }}
+          src={thumb}
+        />
+        <div className={styles["info"]}>
+          <div className={styles["title"]}>{title}</div>
+          <div className={styles["status-content"]}>
+            {isRequired === 1 && <div className={styles["type"]}>必修课</div>}
+            {isRequired === 0 && (
+              <div className={styles["active-type"]}>选修课</div>
+            )}
+            {userCourseProgress == 1 && (
+              <ProgressBar
+                percent={1}
+                text
+                style={{
+                  flex: 1,
+                  "--fill-color": "#FF4D4F",
+                  "--track-color": "#F6F6F6",
+                  "--track-width": "8px",
+                  "--text-width": "27px",
+                }}
+              />
+            )}
+            {userCourseProgress > 1 && userCourseProgress < 100 && (
+              <ProgressBar
+                percent={userCourseProgress}
+                text
+                style={{
+                  flex: 1,
+                  "--fill-color": "#FF4D4F",
+                  "--track-color": "#F6F6F6",
+                  "--track-width": "8px",
+                  "--text-width": "27px",
+                }}
+              />
+            )}
+            {userCourseProgress >= 100 && (
+              <div className={styles["success"]}>
+                <Image
+                  width={20}
+                  height={20}
+                  src={mediaIcon}
+                  style={{ marginRight: 5 }}
+                />
+                <span>恭喜你学完此课程!</span>
+              </div>
+            )}
+          </div>
+        </div>
+      </div>
+      <div className="sp-line"></div>
+    </>
+  );
+};
diff --git a/src/pages/study/index.tsx b/src/pages/study/index.tsx
index 1a2e0d3..29afaf8 100644
--- a/src/pages/study/index.tsx
+++ b/src/pages/study/index.tsx
@@ -1,18 +1,16 @@
 import { useState, useEffect } from "react";
-import { Image, ProgressBar, Skeleton } from "antd-mobile";
+import { Skeleton } from "antd-mobile";
 import styles from "./index.module.scss";
-import { useNavigate } from "react-router-dom";
 import { course } from "../../api/index";
 import { TabBarFooter, Empty } from "../../components";
-import mediaIcon from "../../assets/images/commen/icon-medal.png";
+import { CoursesModel } from "./compenents/courses-model";
 import moment from "moment";
 
 const StudyPage = () => {
-  const navigate = useNavigate();
   const [loading, setLoading] = useState<boolean>(false);
-  const [todayCourses, setTodayCourses] = useState<any>([]);
-  const [yesterdayCourses, setYesterdayCourses] = useState<any>([]);
-  const [courses, setCourses] = useState<any>([]);
+  const [todayCourses, setTodayCourses] = useState<CourseModel[]>([]);
+  const [yesterdayCourses, setYesterdayCourses] = useState<CourseModel[]>([]);
+  const [courses, setCourses] = useState<CourseModel[]>([]);
 
   useEffect(() => {
     document.title = "最近学习";
@@ -26,9 +24,9 @@ const StudyPage = () => {
     setLoading(true);
     course.latestLearn().then((res: any) => {
       let data = res.data;
-      let today: any = [];
-      let yesterday: any = [];
-      let box: any = [];
+      let today: CourseModel[] = [];
+      let yesterday: CourseModel[] = [];
+      let box: CourseModel[] = [];
       if (data && data.length > 0) {
         data.map((item: any) => {
           if (
@@ -79,7 +77,6 @@ const StudyPage = () => {
             </div>
           ))}
         {!loading && courses.length === 0 && <Empty></Empty>}
-        {/* <div className={styles["label"]}>更早</div> */}
         {!loading && (
           <>
             {todayCourses.length > 0 && (
@@ -88,78 +85,13 @@ const StudyPage = () => {
                 {todayCourses.map((item: any, index: number) => (
                   <div key={index} style={{ width: "100%" }}>
                     {item.course && (
-                      <div
-                        className={styles["item"]}
-                        onClick={() => {
-                          navigate(`/course/${item.course.id}`);
-                        }}
-                      >
-                        <Image
-                          src={item.course.thumb}
-                          width={100}
-                          height={75}
-                          style={{ borderRadius: 8, marginRight: 15 }}
-                        />
-                        <div className={styles["item-info"]}>
-                          <div className={styles["item-title"]}>
-                            {item.course.title}
-                          </div>
-                          <div className={styles["item-record"]}>
-                            {item.course.is_required === 1 && (
-                              <div className={styles["type"]}>必修课</div>
-                            )}
-                            {item.course.is_required === 0 && (
-                              <div className={styles["active-type"]}>
-                                选修课
-                              </div>
-                            )}
-                            {item.record && (
-                              <>
-                                {item.record.progress < 10000 && (
-                                  <ProgressBar
-                                    percent={Math.floor(
-                                      item.record.progress / 100
-                                    )}
-                                    text
-                                    style={{
-                                      flex: 1,
-                                      "--fill-color": "#FF4D4F",
-                                      "--track-color": "#F6F6F6",
-                                      "--track-width": "8px",
-                                      "--text-width": "27px",
-                                    }}
-                                  />
-                                )}
-                                {item.record.progress >= 10000 && (
-                                  <>
-                                    <Image
-                                      width={20}
-                                      height={20}
-                                      src={mediaIcon}
-                                    />
-                                    <span className={styles["tip"]}>
-                                      恭喜你学完此课程!
-                                    </span>
-                                  </>
-                                )}
-                              </>
-                            )}
-                            {!item.record && (
-                              <ProgressBar
-                                percent={1}
-                                text
-                                style={{
-                                  flex: 1,
-                                  "--fill-color": "#FF4D4F",
-                                  "--track-color": "#F6F6F6",
-                                  "--track-width": "8px",
-                                  "--text-width": "27px",
-                                }}
-                              />
-                            )}
-                          </div>
-                        </div>
-                      </div>
+                      <CoursesModel
+                        id={item.course.id}
+                        title={item.course.title}
+                        thumb={item.course.thumb}
+                        isRequired={item.course.is_required}
+                        record={item.record}
+                      ></CoursesModel>
                     )}
                   </div>
                 ))}
@@ -171,78 +103,13 @@ const StudyPage = () => {
                 {yesterdayCourses.map((item: any, index: number) => (
                   <div key={index} style={{ width: "100%" }}>
                     {item.course && (
-                      <div
-                        className={styles["item"]}
-                        onClick={() => {
-                          navigate(`/course/${item.course.id}`);
-                        }}
-                      >
-                        <Image
-                          src={item.course.thumb}
-                          width={100}
-                          height={75}
-                          style={{ borderRadius: 8, marginRight: 15 }}
-                        />
-                        <div className={styles["item-info"]}>
-                          <div className={styles["item-title"]}>
-                            {item.course.title}
-                          </div>
-                          <div className={styles["item-record"]}>
-                            {item.course.is_required === 1 && (
-                              <div className={styles["type"]}>必修课</div>
-                            )}
-                            {item.course.is_required === 0 && (
-                              <div className={styles["active-type"]}>
-                                选修课
-                              </div>
-                            )}
-                            {item.record && (
-                              <>
-                                {item.record.progress < 10000 && (
-                                  <ProgressBar
-                                    percent={Math.floor(
-                                      item.record.progress / 100
-                                    )}
-                                    text
-                                    style={{
-                                      flex: 1,
-                                      "--fill-color": "#FF4D4F",
-                                      "--track-color": "#F6F6F6",
-                                      "--track-width": "8px",
-                                      "--text-width": "27px",
-                                    }}
-                                  />
-                                )}
-                                {item.record.progress >= 10000 && (
-                                  <>
-                                    <Image
-                                      width={20}
-                                      height={20}
-                                      src={mediaIcon}
-                                    />
-                                    <span className={styles["tip"]}>
-                                      恭喜你学完此课程!
-                                    </span>
-                                  </>
-                                )}
-                              </>
-                            )}
-                            {!item.record && (
-                              <ProgressBar
-                                percent={1}
-                                text
-                                style={{
-                                  flex: 1,
-                                  "--fill-color": "#FF4D4F",
-                                  "--track-color": "#F6F6F6",
-                                  "--track-width": "8px",
-                                  "--text-width": "27px",
-                                }}
-                              />
-                            )}
-                          </div>
-                        </div>
-                      </div>
+                      <CoursesModel
+                        id={item.course.id}
+                        title={item.course.title}
+                        thumb={item.course.thumb}
+                        isRequired={item.course.is_required}
+                        record={item.record}
+                      ></CoursesModel>
                     )}
                   </div>
                 ))}
@@ -254,78 +121,13 @@ const StudyPage = () => {
                 {courses.map((item: any, index: number) => (
                   <div key={index} style={{ width: "100%" }}>
                     {item.course && (
-                      <div
-                        className={styles["item"]}
-                        onClick={() => {
-                          navigate(`/course/${item.course.id}`);
-                        }}
-                      >
-                        <Image
-                          src={item.course.thumb}
-                          width={100}
-                          height={75}
-                          style={{ borderRadius: 8, marginRight: 15 }}
-                        />
-                        <div className={styles["item-info"]}>
-                          <div className={styles["item-title"]}>
-                            {item.course.title}
-                          </div>
-                          <div className={styles["item-record"]}>
-                            {item.course.is_required === 1 && (
-                              <div className={styles["type"]}>必修课</div>
-                            )}
-                            {item.course.is_required === 0 && (
-                              <div className={styles["active-type"]}>
-                                选修课
-                              </div>
-                            )}
-                            {item.record && (
-                              <>
-                                {item.record.progress < 10000 && (
-                                  <ProgressBar
-                                    percent={Math.floor(
-                                      item.record.progress / 100
-                                    )}
-                                    text
-                                    style={{
-                                      flex: 1,
-                                      "--fill-color": "#FF4D4F",
-                                      "--track-color": "#F6F6F6",
-                                      "--track-width": "8px",
-                                      "--text-width": "27px",
-                                    }}
-                                  />
-                                )}
-                                {item.record.progress >= 10000 && (
-                                  <>
-                                    <Image
-                                      width={20}
-                                      height={20}
-                                      src={mediaIcon}
-                                    />
-                                    <span className={styles["tip"]}>
-                                      恭喜你学完此课程!
-                                    </span>
-                                  </>
-                                )}
-                              </>
-                            )}
-                            {!item.record && (
-                              <ProgressBar
-                                percent={1}
-                                text
-                                style={{
-                                  flex: 1,
-                                  "--fill-color": "#FF4D4F",
-                                  "--track-color": "#F6F6F6",
-                                  "--track-width": "8px",
-                                  "--text-width": "27px",
-                                }}
-                              />
-                            )}
-                          </div>
-                        </div>
-                      </div>
+                      <CoursesModel
+                        id={item.course.id}
+                        title={item.course.title}
+                        thumb={item.course.thumb}
+                        isRequired={item.course.is_required}
+                        record={item.record}
+                      ></CoursesModel>
                     )}
                   </div>
                 ))}