首页课程模块初步

src/App.scss

@@ -1,7 +1,7 @@
 #root {
   width: 100%;
   margin: 0 auto;
-  text-align: center;
+  // text-align: center;
 }
 
 .logo {

src/compenents/header/index.tsx

@@ -20,15 +20,15 @@ export const Header: React.FC = () => {
       navigate("/login");
     } else if (key === "change_password") {
       navigate("/change-password");
-    } else if (key === "user_center") {
+    } else if (key === "user_info") {
-      navigate("/user-center");
+      navigate("/user_info");
     }
   };
 
   const items: MenuProps["items"] = [
     {
-      label: "个人中心",
+      label: "个人信息",
-      key: "user_center",
+      key: "user_info",
       icon: (
         <i className="iconfont icon-icon-12 c-red" style={{ fontSize: 16 }} />
       ),

src/index.scss

@@ -263,3 +263,7 @@ button:focus-visible {
     opacity: 0.8;
   }
 }
+
+.ant-progress{
+  margin-bottom: 0px;
+}

src/pages/change-password/index.tsx

@@ -0,0 +1,64 @@
+import { Row, Col, Form, Input, Button, message } from "antd";
+import styles from "./index.module.scss";
+import { user } from "../../api/index";
+import { useNavigate } from "react-router-dom";
+
+const ChangePasswordPage = () => {
+  const navigate = useNavigate();
+  const [form] = Form.useForm();
+
+  const onFinish = (values: any) => {
+    user.password(values.old_password, values.new_password).then((res: any) => {
+      message.success("保存成功！");
+      navigate(-1);
+    });
+  };
+
+  const onFinishFailed = (errorInfo: any) => {
+    console.log("Failed:", errorInfo);
+  };
+
+  return (
+    <>
+      <Row className="playedu-main-body">
+        <Col>
+          <div className="float-left">
+            <Form
+              form={form}
+              name="basic"
+              labelCol={{ span: 8 }}
+              wrapperCol={{ span: 16 }}
+              style={{ width: 600 }}
+              initialValues={{ remember: true }}
+              onFinish={onFinish}
+              onFinishFailed={onFinishFailed}
+              autoComplete="off"
+            >
+              <Form.Item
+                label="原密码"
+                name="old_password"
+                rules={[{ required: true, message: "请输入原密码!" }]}
+              >
+                <Input.Password placeholder="请输入原密码" />
+              </Form.Item>
+              <Form.Item
+                label="新密码"
+                name="new_password"
+                rules={[{ required: true, message: "请输入新密码!" }]}
+              >
+                <Input.Password placeholder="请输入新密码" />
+              </Form.Item>
+              <Form.Item wrapperCol={{ offset: 8, span: 16 }}>
+                <Button type="primary" htmlType="submit">
+                  保存
+                </Button>
+              </Form.Item>
+            </Form>
+          </div>
+        </Col>
+      </Row>
+    </>
+  );
+};
+
+export default ChangePasswordPage;

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

@@ -0,0 +1,99 @@
+@keyframes scaleMarginTop {
+  0% {
+    margin-top: 0;
+  }
+
+  100% {
+    margin-top: -5px;
+  }
+}
+.item {
+  width: 100%;
+  height: 186px;
+  background: #ffffff;
+  border-radius: 12px;
+  border: 2px solid #f6f6f6;
+  box-sizing: border-box;
+  padding: 24px;
+  display: flex;
+  flex-direction: column;
+  cursor: pointer;
+  &:hover {
+    box-shadow: 0px 4px 16px 8px rgba(0, 0, 0, 0.04);
+    animation: scaleMarginTop 0.5s;
+  }
+  .top-content {
+    width: 100%;
+    height: 90px;
+    display: flex;
+    justify-content: space-between;
+    .info {
+      width: 192px;
+      height: 100%;
+      display: flex;
+      flex-direction: column;
+      justify-content: space-between;
+      .title {
+        width: 100%;
+        height: 48px;
+        font-size: 16px;
+        font-weight: 500;
+        color: rgba(0, 0, 0, 0.88);
+        line-height: 24px;
+        text-align: left;
+        overflow: hidden;
+        text-overflow: ellipsis;
+        display: -webkit-box;
+        -webkit-line-clamp: 2;
+        -webkit-box-orient: vertical;
+      }
+      .type {
+        width: 52px;
+        height: 24px;
+        background: rgba(255, 77, 79, 0.1);
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #ff4d4f;
+        line-height: 24px;
+      }
+      .active-type {
+        width: 52px;
+        height: 24px;
+        background: rgba(#ff9900, 0.1);
+        border-radius: 6px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #ff9900;
+        line-height: 24px;
+      }
+    }
+  }
+  .status-content {
+    width: 100%;
+    height: 24px;
+    margin-top: 22px;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    span {
+      height: 24px;
+      font-size: 14px;
+      font-weight: 400;
+      color: rgba(0, 0, 0, 0.45);
+      line-height: 24px;
+    }
+    .success {
+      width: 100%;
+      height: 24px;
+      display: flex;
+      span {
+        height: 24px;
+        font-size: 14px;
+        font-weight: 400;
+        color: #ff4d4f;
+        line-height: 24px;
+      }
+    }
+  }
+}

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

@@ -0,0 +1,66 @@
+import React, { useState, useEffect } from "react";
+import { Image, Progress } from "antd";
+import styles from "./courses-model.module.scss";
+import mediaIcon from "../../../assets/images/commen/icon-medal.png";
+
+interface PropInterface {
+  title: string;
+  thumb: string;
+  isRequired: number;
+  progress: number;
+}
+
+export const CoursesModel: React.FC<PropInterface> = ({
+  title,
+  thumb,
+  isRequired,
+  progress,
+}) => {
+  return (
+    <div className={styles["item"]}>
+      <div className={styles["top-content"]}>
+        <Image
+          width={120}
+          height={90}
+          style={{ borderRadius: 10 }}
+          src={thumb}
+          preview={false}
+        />
+        <div className={styles["info"]}>
+          <div className={styles["title"]}>{title}</div>
+          {isRequired === 1 && <div className={styles["type"]}>必修课</div>}
+          {isRequired === 0 && (
+            <div className={styles["active-type"]}>选修课</div>
+          )}
+        </div>
+      </div>
+      <div className={styles["status-content"]}>
+        {progress == 0 && (
+          <>
+            <Progress
+              style={{ width: 270 }}
+              percent={0}
+              strokeColor="#FF4D4F"
+              trailColor="#F6F6F6"
+              showInfo={false}
+            />
+            <span>未学习</span>
+          </>
+        )}
+        {progress > 0 && progress < 100 && (
+          <Progress
+            percent={progress}
+            strokeColor="#FF4D4F"
+            trailColor="#F6F6F6"
+          />
+        )}
+        {progress === 100 && (
+          <div className={styles["success"]}>
+            <Image width={24} height={24} src={mediaIcon} preview={false} />
+            <span className="ml-8">恭喜你学完此套课程!</span>
+          </div>
+        )}
+      </div>
+    </div>
+  );
+};

src/pages/index/index.module.scss

@@ -39,6 +39,36 @@
       height: 24px;
       display: flex;
       align-items: center;
+      .info-item {
+        width: 216px;
+        text-align: left;
+        font-size: 16px;
+        font-weight: 600;
+        color: rgba(0, 0, 0, 0.45);
+        line-height: 24px;
+        strong {
+          font-size: 20px;
+          color: rgba(0, 0, 0, 0.88);
+        }
+      }
     }
   }
 }
+.tabs {
+  width: 1200px;
+  height: auto;
+  margin: 0 auto;
+  margin-top: 50px;
+}
+
+.courses-list {
+  width: 1200px;
+  height: auto;
+  margin: 0 auto;
+  box-sizing: border-box;
+  padding-top: 14px;
+  display: grid;
+  gap: 24px;
+  grid-template-columns: repeat(3, minmax(0, 1fr));
+  position: relative;
+}

src/pages/index/index.tsx

@@ -1,8 +1,59 @@
+import { useEffect, useState } from "react";
+import { Tabs } from "antd";
+import type { TabsProps } from "antd";
+import { user } from "../../api/index";
 import styles from "./index.module.scss";
+import { AnyIfEmpty, useSelector } from "react-redux";
+import { CoursesModel } from "./compenents/courses-model";
 import myLesoon from "../../assets/images/commen/icon-mylesoon.png";
 import studyTime from "../../assets/images/commen/icon-studytime.png";
 
 const IndexPage = () => {
+  const [tabKey, setTabKey] = useState(0);
+  const [coursesList, setCoursesList] = useState<any>([]);
+
+  const departments = useSelector(
+    (state: any) => state.loginUser.value.departments
+  );
+
+  useEffect(() => {
+    getData();
+  }, [departments]);
+
+  const getData = () => {
+    user.courses(departments[0].id).then((res: any) => {
+      setCoursesList(res.data.courses);
+      console.log(res.data.courses);
+    });
+  };
+
+  const items: TabsProps["items"] = [
+    {
+      key: "0",
+      label: `全部`,
+    },
+    {
+      key: "1",
+      label: `必修课`,
+    },
+    {
+      key: "2",
+      label: `选修课`,
+    },
+    {
+      key: "3",
+      label: `已学完`,
+    },
+    {
+      key: "4",
+      label: `未学完`,
+    },
+  ];
+
+  const onChange = (key: string) => {
+    setTabKey(Number(key));
+  };
+
   return (
     <>
       <div className={styles["top-cont"]}>
@@ -11,17 +62,48 @@ const IndexPage = () => {
             <img className={styles["icon"]} src={myLesoon} />
             <span>我的课程</span>
           </div>
-          <div className={styles["info"]}></div>
+          <div className={styles["info"]}>
+            <div className={styles["info-item"]}>
+              必修课：已完成 <strong>3 </strong>/ 10
+            </div>
+            <div className={styles["info-item"]}>
+              选修课：已完成 <strong>3 </strong>/ 10
+            </div>
+          </div>
         </div>
         <div className={styles["top-item"]}>
           <div className={styles["title"]}>
             <img className={styles["icon"]} src={studyTime} />
             <span>学习时长</span>
           </div>
-          <div className={styles["info"]}></div>
+          <div className={styles["info"]}>
+            <div className={styles["info-item"]}>
+              今日：<strong>1</strong> 小时 <strong>23</strong> 分钟
+            </div>
+            <div className={styles["info-item"]}>
+              累计：<strong>24</strong> 小时 <strong>33</strong> 分钟
+            </div>
+          </div>
         </div>
       </div>
-      我是首页
+      <div className={styles["tabs"]}>
+        <Tabs defaultActiveKey="0" items={items} onChange={onChange} />
+      </div>
+      {coursesList.length === 0 && <span>暂无数据</span>}
+      {coursesList.length > 0 && (
+        <div className={styles["courses-list"]}>
+          {coursesList.map((item: any) => (
+            <div key={item.id}>
+              <CoursesModel
+                title={item.title}
+                thumb={item.thumb}
+                isRequired={item.isRequired}
+                progress={30}
+              ></CoursesModel>
+            </div>
+          ))}
+        </div>
+      )}
     </>
   );
 };

src/routes/index.tsx

@@ -32,6 +32,7 @@ const Init = lazy(async () => {
 // 懒加载
 const LoginPage = lazy(() => import("../pages/login"));
 const IndexPage = lazy(() => import("../pages/index"));
+const ChangePasswordPage = lazy(() => import("../pages/change-password"));
 
 const routes: RouteObject[] = [
   {
@@ -46,6 +47,10 @@ const routes: RouteObject[] = [
         path: "/login",
         element: <LoginPage />,
       },
+      {
+        path: "/change-password",
+        element: <ChangePasswordPage />,
+      },
     ],
   },
 ];

src/utils/index.ts

@@ -16,6 +16,22 @@ export function dateFormat(dateStr: string) {
   return moment(dateStr).format("YYYY-MM-DD HH:mm");
 }
 
+export function studyTimeFormat(dateStr: number) {
+  var d = moment.duration(dateStr, "seconds");
+  let value =
+    Math.floor(d.asDays()) + "天" + d.hours() + "时" + d.minutes() + "分";
+
+  if (Math.floor(d.asDays()) === 0) {
+    if (d.hours() === 0) {
+      value = d.minutes() + "分";
+    } else {
+      value = d.hours() + "时" + d.minutes() + "分";
+    }
+  }
+
+  return value;
+}
+
 export function generateUUID(): string {
   let guid = "";
   for (let i = 1; i <= 32; i++) {