Merge pull request #1 from PlayEdu/dev

Dev

src/pages/course/index.tsx

@@ -4,6 +4,7 @@ import styles from "./index.module.scss";
 import { useNavigate, useParams } from "react-router-dom";
 import backIcon from "../../assets/images/commen/icon-back-n.png";
 import { course as vod } from "../../api/index";
+import { isEmptyObject } from "../../utils/index";
 import { Empty } from "../../components";
 import { HourCompenent } from "./compenents/hour";
 
@@ -66,7 +67,7 @@ const CoursePage = () => {
   useEffect(() => {
     if (learnRecord?.progress) {
       setUserCourseProgress(Math.floor(learnRecord.progress / 100));
-    } else if (learnHourRecord) {
+    } else if (learnHourRecord && !isEmptyObject(learnHourRecord)) {
       setUserCourseProgress(1);
     } else {
       setUserCourseProgress(0);
@@ -87,7 +88,7 @@ const CoursePage = () => {
         />
       </div>
       <div className={styles["top-content"]}>
-        <div className={styles["title"]}>{course?.title}</div>
+        <div className={styles["title"]}>{course?.title + ""}</div>
         <div className={styles["info-content"]}>
           <div className={styles["info"]}>
             <div className={styles["record"]}>

src/pages/course/video.tsx

@@ -44,7 +44,6 @@ const CoursePlayPage = () => {
   const totalRef = useRef(0);
 
   useEffect(() => {
-    window.player && window.player.destroy();
     getCourse();
     getDetail();
   }, [params.courseId, params.hourId]);
@@ -129,6 +128,7 @@ const CoursePlayPage = () => {
   const getVideoUrl = (data: any) => {
     Course.playUrl(Number(params.courseId), Number(params.hourId)).then(
       (res: any) => {
+        window.player && window.player.destroy();
         setPlayUrl(res.data.url);
         initDPlayer(res.data.url, 0, data);
       }
@@ -236,7 +236,6 @@ const CoursePlayPage = () => {
   };
 
   const playVideo = (cid: number, id: number) => {
-    window.player && window.player.destroy();
     navigate(`/course/${cid}/hour/${id}`, { replace: true });
   };
 

src/pages/index/index.tsx

@@ -7,6 +7,7 @@ import { useSelector } from "react-redux";
 import { useNavigate, useLocation } from "react-router-dom";
 import { Footer, TabBarFooter, Empty } from "../../components";
 import { CoursesModel } from "./compenents/courses-model";
+import { isEmptyObject } from "../../utils/index";
 
 type LocalUserLearnHourRecordModel = {
   [key: number]: UserLearnHourRecordModel;
@@ -74,7 +75,7 @@ const IndexPage = () => {
       return;
     }
     getData();
-  }, [tabKey, currentDepId, categoryId]);
+  }, [currentDepId, categoryId]);
 
   const getData = () => {
     setLoading(true);
@@ -127,7 +128,7 @@ const IndexPage = () => {
   const getParams = () => {
     user.coursesCategories().then((res: any) => {
       const categories = res.data.categories;
-      if (JSON.stringify(categories) !== "{}") {
+      if (!isEmptyObject(categories)) {
         const new_arr: any[] = checkArr(categories, 0);
         new_arr.unshift({
           key: 0,
@@ -204,9 +205,16 @@ const IndexPage = () => {
           activeKey={tabKey}
           onChange={(key: any) => {
             setTabKey(key);
-            navigate(
-              "/?cid=" + categoryId + "&catName=" + categoryText + "&tab=" + key
-            );
+            setTimeout(() => {
+              navigate(
+                "/?cid=" +
+                  categoryId +
+                  "&catName=" +
+                  categoryText +
+                  "&tab=" +
+                  key
+              );
+            }, 250);
           }}
           style={{
             "--fixed-active-line-width": "20px",

src/pages/study/compenents/courses-model.module.scss

@@ -4,6 +4,7 @@
   display: flex;
   flex-direction: row;
   align-items: center;
+  margin-bottom: 20px;
   .info {
     flex: 1;
     height: 75px;

src/pages/study/compenents/courses-model.tsx

@@ -91,7 +91,6 @@ export const CoursesModel: React.FC<PropInterface> = ({
           </div>
         </div>
       </div>
-      <div className="sp-line"></div>
     </>
   );
 };

src/pages/study/index.module.scss

@@ -13,14 +13,14 @@
   float: left;
   height: auto;
   box-sizing: border-box;
-  padding: 0px 20px 80px 20px;
+  padding: 0px 20px 60px 20px;
   text-align: left;
   overflow-x: hidden;
   overflow-y: auto;
   padding-bottom: calc(
     80px + constant(safe-area-inset-bottom)
   ); /* 兼容iOS 11.0 - 11.2 */
-  padding-bottom: calc(80px + env(safe-area-inset-bottom)); /* 兼容iOS 11.2+ */
+  padding-bottom: calc(60px + env(safe-area-inset-bottom)); /* 兼容iOS 11.2+ */
   .label {
     width: 100%;
     height: 40px;

src/pages/study/index.tsx

@@ -21,37 +21,41 @@ const StudyPage = () => {
   }, []);
 
   const getCourses = () => {
+    if (loading) {
+      return;
+    }
     setLoading(true);
-    course.latestLearn().then((res: any) => {
-      let data = res.data;
-      let today: CourseModel[] = [];
-      let yesterday: CourseModel[] = [];
-      let box: CourseModel[] = [];
-      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);
-    });
+    course
+      .latestLearn()
+      .then((res: any) => {
+        let data = res.data;
+        let today: CourseModel[] = [];
+        let yesterday: CourseModel[] = [];
+        let box: CourseModel[] = [];
+        if (data && data.length > 0) {
+          data.map((item: any) => {
+            let time = moment(item.hour_record.updated_at)
+              .utcOffset(0)
+              .format("YYYY-MM-DD HH:mm:ss");
+            if (moment(time).isSame(moment(), "day")) {
+              today.push(item);
+            } else if (
+              moment(time).isSame(moment().subtract(1, "day"), "day")
+            ) {
+              yesterday.push(item);
+            } else {
+              box.push(item);
+            }
+          });
+        }
+        setTodayCourses(today);
+        setYesterdayCourses(yesterday);
+        setCourses(box);
+        setLoading(false);
+      })
+      .catch((e) => {
+        setLoading(false);
+      });
   };
 
   return (
@@ -76,7 +80,10 @@ const StudyPage = () => {
               </div>
             </div>
           ))}
-        {!loading && courses.length === 0 && <Empty></Empty>}
+        {!loading &&
+          courses.length === 0 &&
+          todayCourses.length === 0 &&
+          yesterdayCourses.length === 0 && <Empty></Empty>}
         {!loading && (
           <>
             {todayCourses.length > 0 && (

src/utils/index.ts

@@ -13,7 +13,7 @@ export function clearToken() {
 }
 
 export function dateFormat(dateStr: string) {
-  return moment(dateStr).format("YYYY-MM-DD HH:mm");
+  return moment(dateStr).utcOffset(0).format("YYYY-MM-DD HH:mm");
 }
 
 export function getHost() {
@@ -76,3 +76,7 @@ export function isMobile() {
   );
   return flag;
 }
+
+export function isEmptyObject(obj: Object) {
+  return Object.keys(obj).length === 0;
+}