最近学习页面

src/components/empty/index.tsx

@@ -6,7 +6,7 @@ import empty from "../../assets/images/commen/empty.png";
 export const Empty: React.FC = () => {
   return (
     <div className={styles["img-box"]}>
-      <Image src={empty} width={250} height={250} />
+      <Image src={empty} width={250} height={250} style={{ marginTop: 100 }} />
     </div>
   );
 };

src/main.scss

@@ -78,3 +78,7 @@ code {
     color: #ff4d4f !important;
   }
 }
+
+.adm-progress-bar-text {
+  color: #ff4d4f !important;
+}

src/pages/loading/index.tsx

@@ -1,10 +1,10 @@
-import { DotLoading } from 'antd-mobile'
+import { SpinLoading } from "antd-mobile";
 
 const LoadingPage = () => {
   return (
-    <>
-      <DotLoading color='primary' />
-    </>
+    <div style={{ width: "100%", display: "flex", justifyContent: "center" }}>
+      <SpinLoading color="primary" />
+    </div>
   );
 };
 

src/pages/study/index.module.scss

@@ -0,0 +1,95 @@
+.title {
+  width: 100%;
+  box-sizing: border-box;
+  padding: 20px;
+  text-align: left;
+  font-size: 16px;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.88);
+  line-height: 24px;
+}
+.list-box {
+  width: 100%;
+  float: left;
+  height: auto;
+  box-sizing: border-box;
+  padding: 0px 20px;
+  text-align: left;
+  overflow-x: hidden;
+  overflow-y: auto;
+  .label {
+    width: 100%;
+    height: 40px;
+    font-size: 14px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.45);
+    line-height: 40px;
+  }
+  .item {
+    width: 100%;
+    height: 75px;
+    display: flex;
+    align-items: center;
+    margin-bottom: 20px;
+    .item-info {
+      flex: 1;
+      height: 75px;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .item-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;
+      }
+      .item-record {
+        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;
+        }
+        .tip {
+          flex: 1;
+          height: 12px;
+          font-size: 12px;
+          font-weight: 400;
+          color: #ff4d4f;
+          line-height: 12px;
+          margin-left: 5px;
+        }
+      }
+    }
+  }
+}

src/pages/study/index.tsx

@@ -0,0 +1,128 @@
+import { useState, useEffect } from "react";
+import {
+  Button,
+  Toast,
+  Input,
+  Image,
+  ProgressBar,
+  SpinLoading,
+} 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";
+
+const StudyPage = () => {
+  const navigate = useNavigate();
+  const [loading, setLoading] = useState<boolean>(false);
+  const [courses, setCourses] = useState<any>([]);
+
+  useEffect(() => {
+    document.title = "最近学习";
+  }, []);
+
+  useEffect(() => {
+    getCourses();
+  }, []);
+
+  const getCourses = () => {
+    setLoading(true);
+    course.latestLearn().then((res: any) => {
+      setCourses(res.data);
+      setLoading(false);
+    });
+  };
+
+  return (
+    <div className="main-body">
+      <div className={styles["title"]}>最近学习</div>
+      <div className={styles["list-box"]}>
+        {loading && (
+          <div
+            style={{ width: "100%", display: "flex", justifyContent: "center" }}
+          >
+            <SpinLoading color="primary" />
+          </div>
+        )}
+        {!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",
+                          }}
+                        />
+                      )}
+                    </div>
+                  </div>
+                </div>
+              )}
+            </div>
+          ))}
+      </div>
+      <TabBarFooter></TabBarFooter>
+    </div>
+  );
+};
+
+export default StudyPage;

src/routes/index.tsx

@@ -8,6 +8,7 @@ import IndexPage from "../pages/index/index";
 import LoginPage from "../pages/login";
 import MemberPage from "../pages/member/index";
 import ChangePasswordPage from "../pages/change-password/index";
+import StudyPage from "../pages/study/index";
 import PrivateRoute from "../components/private-route";
 
 let RootPage: any = null;
@@ -52,6 +53,10 @@ const routes: RouteObject[] = [
         path: "/change-password",
         element: <PrivateRoute Component={<ChangePasswordPage />} />,
       },
+      {
+        path: "/study",
+        element: <PrivateRoute Component={<StudyPage />} />,
+      },
     ],
   },
 ];