课程学习记录显示优化

src/api/course.ts

@@ -16,3 +16,8 @@ export function record(courseId: number, hourId: number, duration: number) {
     duration,
   });
 }
+
+//最近学习课程
+export function latestLearn() {
+  return client.get(`/api/v1/user/latest-learn`, {});
+}

src/pages/course/compenents/hour.tsx

@@ -74,7 +74,7 @@ export const HourCompenent: React.FC<PropInterface> = ({
             )}
           </>
         )}
-        {progress === 100 && <div className={styles["complete"]}>已学完</div>}
+        {progress >= 100 && <div className={styles["complete"]}>已学完</div>}
       </div>
     </div>
   );

src/pages/course/index.tsx

@@ -56,7 +56,7 @@ const CoursePage = () => {
                 {course.is_required === 0 && (
                   <div className={styles["active-type"]}>选修课</div>
                 )}
-                {learnRecord.progress === 100 && (
+                {learnRecord.progress / 100 === 100 && (
                   <div className={styles["success"]}>
                     <Image
                       width={24}
@@ -102,7 +102,7 @@ const CoursePage = () => {
                 trailColor="#F6F6F6"
                 size={90}
                 strokeWidth={8}
-                percent={learnRecord.progress}
+                percent={learnRecord.progress / 100}
                 format={(percent) => `${percent}%`}
               />
             )}

src/pages/latest-learn/index.module.scss

@@ -0,0 +1,19 @@
+.content {
+  width: 1200px;
+  min-height: 581px;
+  height: auto;
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding: 50px 0;
+}
+.extra {
+  width: 1200px;
+  margin: 0 auto;
+  margin-top: 80px;
+  text-align: center;
+  height: 40px;
+  font-size: 16px;
+  font-weight: 400;
+  color: rgba(0, 0, 0, 0.2);
+  line-height: 40px;
+}

src/pages/latest-learn/index.tsx

@@ -1,7 +1,43 @@
+import React, { useState, useEffect } from "react";
 import styles from "./index.module.scss";
+import { course } from "../../api/index";
+import { Row, Col, Empty, Spin, Image } from "antd";
 
 const LatestLearnPage = () => {
-  return <>最近学习</>;
+  const [loading, setLoading] = useState<boolean>(false);
+  const [courses, setCourses] = useState<any>([]);
+
+  useEffect(() => {
+    getCourses();
+  }, []);
+
+  const getCourses = () => {
+    setLoading(true);
+    course.latestLearn().then((res: any) => {
+      setCourses(res.data);
+      setLoading(false);
+    });
+  };
+
+  return (
+    <div>
+      <div className={styles["content"]}>
+        <Row style={{ width: 1200, margin: "0 auto", paddingTop: 50 }}>
+          {loading && (
+            <div className="float-left d-j-flex mt-50">
+              <Spin size="large" />
+            </div>
+          )}
+          {courses.length === 0 && (
+            <Col span={24}>
+              <Empty description="暂无记录" />
+            </Col>
+          )}
+        </Row>
+      </div>
+      <div className={styles["extra"]}>~莫道桑榆晚，为霞尚满天~</div>
+    </div>
+  );
 };
 
 export default LatestLearnPage;