登录页面和我的页面初步

src/components/empty/index.module.scss

@@ -1,4 +1,6 @@
 .img-box {
   width: 100%;
   height: auto;
+  display: flex;
+  justify-content: center;
 }

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={400} height={400} />
+      <Image src={empty} width={250} height={250} />
     </div>
   );
 };

src/pages/member/index.module.scss

@@ -1,11 +1,152 @@
-.support-box {
+.main-body {
   position: fixed;
-  bottom: 90px;
+  bottom: 0;
   left: 0;
   right: 0;
-  font-size: 12px;
+  top: 0;
-  font-weight: 400;
+  background-image: url("../../assets//images/login/bg.png");
-  color: rgba(0, 0, 0, 0.3);
+  background-size: 100% 100%;
-  line-height: 12px;
+  .support-box {
-  margin-top: 200px;
+    position: fixed;
+    bottom: 90px;
+    left: 0;
+    right: 0;
+    font-size: 12px;
+    font-weight: 400;
+    color: rgba(0, 0, 0, 0.3);
+    line-height: 12px;
+    margin-top: 200px;
+  }
+  .content-box {
+    width: 100%;
+    float: left;
+    height: auto;
+    box-sizing: border-box;
+    padding: 20px 20px;
+    .top-content {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      justify-content: space-between;
+      .user-info {
+        flex: 1;
+        display: flex;
+        flex-direction: row;
+        .other-cont {
+          flex: 1;
+          text-align: left;
+          display: flex;
+          flex-direction: column;
+          .name {
+            width: 100%;
+            height: 24px;
+            font-size: 24px;
+            font-weight: 600;
+            color: rgba(0, 0, 0, 0.88);
+            line-height: 24px;
+            margin-top: 15px;
+          }
+          .departments {
+            width: 100%;
+            float: left;
+            height: auto;
+            margin-top: 20px;
+            .department-name {
+              display: inline-block;
+              width: auto;
+              height: auto;
+              background: rgba(255, 77, 79, 0.1);
+              border-radius: 4px;
+              font-size: 14px;
+              font-weight: 400;
+              color: #ff4d4f;
+              line-height: 24px;
+              box-sizing: border-box;
+              padding: 0px 5px;
+            }
+          }
+        }
+      }
+      .more-button {
+        width: 30px;
+        height: 30px;
+        background: #ffffff;
+        border-radius: 8px;
+        margin-top: 13px;
+      }
+    }
+
+    .stats-content {
+      width: 100%;
+      display: flex;
+      flex-direction: row;
+      margin-top: 50px;
+      .stat-item {
+        width: auto;
+        text-align: left;
+        display: flex;
+        flex-direction: column;
+        margin-right: 34px;
+        .time {
+          height: 20px;
+          font-size: 15px;
+          font-weight: 600;
+          color: rgba(0, 0, 0, 0.88);
+          line-height: 20px;
+          strong {
+            font-size: 20px;
+          }
+        }
+        .tit {
+          height: 12px;
+          font-size: 12px;
+          font-weight: 400;
+          color: rgba(0, 0, 0, 0.45);
+          line-height: 12px;
+          margin-top: 20px;
+        }
+      }
+    }
+
+    .records-content {
+      width: 100%;
+      display: grid;
+      gap: 11px;
+      margin-top: 50px;
+      grid-template-columns: repeat(2, minmax(0, 1fr));
+      position: relative;
+      .record-item {
+        display: flex;
+        flex-direction: column;
+        text-align: left;
+        height: 92px;
+        background: #ffffff;
+        border-radius: 8px;
+        box-sizing: border-box;
+        padding: 20px 15px;
+        .name {
+          width: 100%;
+          height: 12px;
+          font-size: 12px;
+          font-weight: 400;
+          color: rgba(0, 0, 0, 0.45);
+          line-height: 12px;
+        }
+        .value {
+          width: 100%;
+          height: 20px;
+          font-size: 15px;
+          font-weight: 400;
+          color: rgba(0, 0, 0, 0.88);
+          line-height: 20px;
+          margin-top: 20px;
+          strong {
+            font-size: 18px;
+            font-weight: 600;
+            color: #ff4d4f;
+          }
+        }
+      }
+    }
+  }
 }

src/pages/member/index.tsx

@@ -1,5 +1,12 @@
 import { useEffect, useState } from "react";
-import { user } from "../../api/index";
+import { Button, Toast, SpinLoading, Input, Image } from "antd-mobile";
+import { user as member } from "../../api/index";
+import {
+  setDepKey,
+  setDepName,
+  getDepName,
+  studyTimeFormat,
+} from "../../utils/index";
 import styles from "./index.module.scss";
 import { useSelector } from "react-redux";
 import { TabBarFooter } from "../../components";
@@ -9,6 +16,12 @@ const MemberPage = () => {
   const systemConfig = useSelector((state: any) => state.systemConfig.value);
   const [loading, setLoading] = useState<boolean>(false);
   const [tabKey, setTabKey] = useState(0);
+  const [departmentsMenu, setDepartmentsMenu] = useState<any>([]);
+  const [currentDepartment, setCurrentDepartment] = useState<string>("");
+  const [learnCourseRecords, setLearnCourseRecords] = useState<any>({});
+  const [learnCourseHourCount, setLearnCourseHourCount] = useState<any>({});
+  const [stats, setStats] = useState<any>({});
+  const user = useSelector((state: any) => state.loginUser.value.user);
   const departments = useSelector(
     (state: any) => state.loginUser.value.departments
   );
@@ -20,9 +33,202 @@ const MemberPage = () => {
     document.title = "我的";
   }, []);
 
+  useEffect(() => {
+    if (departments.length > 0) {
+      setCurrentDepartment(getDepName() || departments[0].name);
+      const arr: any = [
+        {
+          key: "1",
+          type: "group",
+          label: "部门",
+          children: [],
+        },
+      ];
+      departments.map((item: any) => {
+        arr[0].children.push({
+          key: item.id,
+          label: item.name,
+          disabled: item.name === currentDepartment,
+        });
+      });
+      setDepartmentsMenu(arr);
+    }
+  }, [departments]);
+
+  useEffect(() => {
+    if (currentDepId === 0) {
+      return;
+    }
+    getData();
+  }, [tabKey, currentDepId]);
+
+  const getData = () => {
+    setLoading(true);
+    member.courses(currentDepId, 0).then((res: any) => {
+      const records = res.data.learn_course_records;
+      setStats(res.data.stats);
+      setLearnCourseRecords(records);
+      setLearnCourseHourCount(res.data.user_course_hour_count);
+
+      setLoading(false);
+    });
+  };
+
+  const setClick = () => {};
+
+  const getTotal = (num1: number, num2: number) => {
+    let value = 0;
+    if (num1) {
+      value = value + num1;
+    }
+    if (num2 && num2 > 0) {
+      value = value + num2;
+    }
+
+    return value;
+  };
+
   return (
-    <div className="main-body">
+    <div className={styles["main-body"]}>
-      <div className={styles["content-box"]}>我的</div>
+      <div className={styles["content-box"]}>
+        <div className={styles["top-content"]}>
+          <div className={styles["user-info"]}>
+            {user && user.name && (
+              <>
+                <Image
+                  loading="lazy"
+                  style={{
+                    width: 100,
+                    height: 100,
+                    borderRadius: "50%",
+                    marginRight: 20,
+                  }}
+                  src={user.avatar}
+                />
+                <div className={styles["other-cont"]}>
+                  <div className={styles["name"]}>{user.name}</div>
+                  <div className={styles["departments"]}>
+                    <div className={styles["department-name"]}>
+                      {currentDepartment}
+                    </div>
+                  </div>
+                </div>
+              </>
+            )}
+          </div>
+          <Image
+            className={styles["more-button"]}
+            onClick={() => setClick()}
+            src={moreIcon}
+          />
+        </div>
+        <div className={styles["stats-content"]}>
+          <div className={styles["stat-item"]}>
+            <span className={styles["time"]}>
+              {studyTimeFormat(stats.today_learn_duration)[0] !== 0 && (
+                <>
+                  <strong>
+                    {studyTimeFormat(stats.today_learn_duration)[0] || 0}{" "}
+                  </strong>
+                  天
+                </>
+              )}
+              {studyTimeFormat(stats.today_learn_duration)[1] !== 0 && (
+                <>
+                  <strong>
+                    {" "}
+                    {studyTimeFormat(stats.today_learn_duration)[1] || 0}{" "}
+                  </strong>
+                  时
+                </>
+              )}
+              <strong>
+                {" "}
+                {studyTimeFormat(stats.today_learn_duration)[2] || 0}{" "}
+              </strong>
+              分
+              <strong>
+                {" "}
+                {studyTimeFormat(stats.today_learn_duration)[3] || 0}{" "}
+              </strong>
+              秒
+            </span>
+            <span className={styles["tit"]}>今日学习</span>
+          </div>
+          <div className={styles["stat-item"]}>
+            <span className={styles["time"]}>
+              {studyTimeFormat(stats.learn_duration || 0)[0] !== 0 && (
+                <>
+                  <strong>
+                    {studyTimeFormat(stats.learn_duration || 0)[0] || 0}{" "}
+                  </strong>
+                  天
+                </>
+              )}
+              {studyTimeFormat(stats.learn_duration || 0)[1] !== 0 && (
+                <>
+                  <strong>
+                    {" "}
+                    {studyTimeFormat(stats.learn_duration || 0)[1] || 0}{" "}
+                  </strong>
+                  时
+                </>
+              )}
+              <strong>
+                {" "}
+                {studyTimeFormat(stats.learn_duration || 0)[2] || 0}{" "}
+              </strong>
+              分
+              <strong>
+                {" "}
+                {studyTimeFormat(stats.learn_duration || 0)[3] || 0}{" "}
+              </strong>
+              秒
+            </span>
+            <span className={styles["tit"]}>累计学习</span>
+          </div>
+        </div>
+        <div className={styles["records-content"]}>
+          <div className={styles["record-item"]}>
+            <div className={styles["name"]}>所在部门</div>
+            <div className={styles["value"]}>{currentDepartment}</div>
+          </div>
+          <div className={styles["record-item"]}>
+            <div className={styles["name"]}>课时总进度</div>
+            <div className={styles["value"]}>
+              <strong>
+                {getTotal(
+                  stats.required_finished_course_count,
+                  stats.nun_required_finished_course_count
+                )}{" "}
+              </strong>
+              /{" "}
+              {getTotal(
+                stats.required_course_count,
+                stats.nun_required_course_count
+              )}
+            </div>
+          </div>
+          <div className={styles["record-item"]}>
+            <div className={styles["name"]}>必修课</div>
+            <div className={styles["value"]}>
+              <strong>{stats.required_finished_course_count || 0} </strong>/{" "}
+              {stats.required_course_count || 0}
+            </div>
+          </div>
+          {stats.nun_required_course_count > 0 && (
+            <div className={styles["record-item"]}>
+              <div className={styles["name"]}>选修课</div>
+              <div className={styles["value"]}>
+                <strong>
+                  {stats.nun_required_finished_course_count || 0}{" "}
+                </strong>
+                / {stats.nun_required_course_count || 0}
+              </div>
+            </div>
+          )}
+        </div>
+      </div>
       <div className={styles["support-box"]}>「PlayEdu提供技术支持」</div>
       <TabBarFooter></TabBarFooter>
     </div>

src/utils/index.ts

@@ -50,3 +50,13 @@ export function changeAppUrl(str: string) {
     return str + "/";
   }
 }
+
+export function studyTimeFormat(dateStr: number) {
+  var d = moment.duration(dateStr / 1000, "seconds");
+  let value = [];
+  value.push(Math.floor(d.asDays()));
+  value.push(d.hours());
+  value.push(d.minutes());
+  value.push(d.seconds());
+  return value;
+}