From fca99f3ad60d9c9fac8d6d0c6a5da7d8cdee8514 Mon Sep 17 00:00:00 2001
From: =?UTF-8?q?=E7=A6=BA=E7=8B=A8?= <18119604035@163.com>
Date: Mon, 3 Jul 2023 10:44:44 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9C=80=E8=BF=91=E5=AD=A6=E4=B9=A0=E9=A1=B5?=
 =?UTF-8?q?=E9=9D=A2=E4=BC=98=E5=8C=96?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 src/pages/member/index.tsx |   2 +-
 src/pages/study/index.tsx  | 352 +++++++++++++++++++++++++++++--------
 2 files changed, 282 insertions(+), 72 deletions(-)

diff --git a/src/pages/member/index.tsx b/src/pages/member/index.tsx
index 93f72e0..0df06d8 100644
--- a/src/pages/member/index.tsx
+++ b/src/pages/member/index.tsx
@@ -273,7 +273,7 @@ const MemberPage = () => {
               </div>
             ) : (
               <div className={styles["value"]}>
-                已学完{" "}<strong>0 </strong>/ 0
+                已学完 <strong>0 </strong>/ 0
               </div>
             )}
           </div>
diff --git a/src/pages/study/index.tsx b/src/pages/study/index.tsx
index df70d7c..1a2e0d3 100644
--- a/src/pages/study/index.tsx
+++ b/src/pages/study/index.tsx
@@ -5,10 +5,13 @@ 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 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>([]);
 
   useEffect(() => {
@@ -22,7 +25,33 @@ const StudyPage = () => {
   const getCourses = () => {
     setLoading(true);
     course.latestLearn().then((res: any) => {
-      setCourses(res.data);
+      let data = res.data;
+      let today: any = [];
+      let yesterday: any = [];
+      let box: any = [];
+      if (data && data.length > 0) {
+        data.map((item: any) => {
+          if (
+            item.hour_record &&
+            moment(item.hour_record.updated_at).isSame(moment(), "day")
+          ) {
+            today.push(item);
+          } else if (
+            item.hour_record &&
+            moment(item.hour_record.updated_at).isSame(
+              moment().subtract(1, "day"),
+              "day"
+            )
+          ) {
+            yesterday.push(item);
+          } else {
+            box.push(item);
+          }
+          setTodayCourses(today);
+          setYesterdayCourses(yesterday);
+          setCourses(box);
+        });
+      }
       setLoading(false);
     });
   };
@@ -51,78 +80,259 @@ const StudyPage = () => {
           ))}
         {!loading && courses.length === 0 && <Empty></Empty>}
         {/* <div className={styles["label"]}>更早</div> */}
-        {!loading &&
-          courses.length > 0 &&
-          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",
-                          }}
+        {!loading && (
+          <>
+            {todayCourses.length > 0 && (
+              <>
+                <div className={styles["label"]}>今日</div>
+                {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>
+                        <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>
+                    )}
                   </div>
-                </div>
-              )}
-            </div>
-          ))}
+                ))}
+              </>
+            )}
+            {yesterdayCourses.length > 0 && (
+              <>
+                <div className={styles["label"]}>昨日</div>
+                {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>
+                    )}
+                  </div>
+                ))}
+              </>
+            )}
+            {courses.length > 0 && (
+              <>
+                <div className={styles["label"]}>更早</div>
+                {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>
+                    )}
+                  </div>
+                ))}
+              </>
+            )}
+          </>
+        )}
       </div>
       <TabBarFooter></TabBarFooter>
     </div>