From f862bd5b851209ca9a4a42a6f6076a2a12c63ff5 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E7=A6=BA=E7=8B=A8?= <18119604035@163.com> Date: Mon, 26 Jun 2023 14:50:10 +0800 Subject: [PATCH] =?UTF-8?q?=E6=9C=80=E8=BF=91=E5=AD=A6=E4=B9=A0=E9=A1=B5?= =?UTF-8?q?=E9=9D=A2?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- src/assets/images/commen/icon-medal.png | Bin 0 -> 2485 bytes src/components/empty/index.tsx | 2 +- src/main.scss | 4 + src/pages/loading/index.tsx | 8 +- src/pages/study/index.module.scss | 95 ++++++++++++++++++ src/pages/study/index.tsx | 128 ++++++++++++++++++++++++ src/routes/index.tsx | 5 + 7 files changed, 237 insertions(+), 5 deletions(-) create mode 100644 src/assets/images/commen/icon-medal.png create mode 100644 src/pages/study/index.module.scss create mode 100644 src/pages/study/index.tsx diff --git a/src/assets/images/commen/icon-medal.png b/src/assets/images/commen/icon-medal.png new file mode 100644 index 0000000000000000000000000000000000000000..978220715d6ac46c706181318495d8207b90c9c7 GIT binary patch literal 2485 zcmV;m2}<^fP)Px;Z%IT!RA@u(nrnHVSGeEHxOQoh76FW9)T7#iqXqh6l zp=q$1=$A%OkVv&r45ZdqK}|FYDbPVuY!j!Nz9>Tr)53sQTFavy7+@ZE=046jdzp3a z+?hMWow;Xb?j3GycXBgkrESw}1eqXz%q0zUG7A|CA4HiG@VEkm#)eYE#4@8rXt%rWw&@TsjUD>`lK z$B5{Mv{o2G+CL*PP|fCiP$v7ZkcrTIl|_f_N<{K)Jx2cWnd{ z87?iE+ENzn+Lb#iP6n{dad7K>y+%<9^U&Bd1}Ljy%v%^mS$P7aIb*E_*Z~q(0=V$c z01_7fiy8CYvLS1>*Sz@UOVsrAw27+g4VRBWWQ;>w8ecadeWU9R#-0@bX3mde*1RZK zDvIoR%CmwL;Yw=|iRTrjOO{Ss=fy8SNBj0RPB7e} z1ZoZd%>wLxjrQ-^T{OUaYF((atNqr>68Z;)qL3t&mu3Osv$gPJBF*j2XDI^~+Pr%ft7Qo7_T*6%XC=j>iU{ z_b}jG1gWSLAqGSbA{hTG%|G4cbAW-w@4G*@UB8UgoL^CC#bU%A6k63m!({Ui2RY{k zm#eS>V&*l#`Zg_i<6nLud@IZ+KRyetehDh{QP#7i81Oqs9{L%OeFh@!kfy{8It!TF zsQ!en(-Hr`ZFS!O;|WNuq^bd3l?M1PWwxGC9w>1TvD3a)gcm8*HKlZQn0Eus4Go$Amq#NkzaA3r2_( z2HZ0Y{eU$xewG6lt07W&>V?mt{19AY6*$jcFC%_dBxXcBrY~Y3-sF{h>0+6c} z1F%UF_-{4PuMAtOM^bIrGjNx7fxdDPD(qw1RSdvVBRDTt!8%X_IDUPzUrLMNG+czf zwQJD5M^m{dfTakGDe%EcSO=y7CUfZ-!Fo|y0Zu~)=+m9hB|g-Zp^61qY;mI+e6j@A zQ`3Q5$2^MREN=(Z^+A{CKJFcOY{dlZDb`^@JyQd9w0z`MhXJ#=2j-3rST(XHk0A^S z2HaY=9s#vstb0PYM}v0PLLDm`9k{+1yu2N{%E?(x4yY^7MZ(4AO>|?vOUqa5)f{l)LE&%Mvh-IBLQCd9(1iJoNF!WzityC@2FgCqNRlZRK+3wQNdSaYSs^Z_he<5))0Dj2ZXDxW5# zKTjCVHu1K%!?3o`26bC7AB(}<&;u;)PTloJIaF&o)Y~OMsRR4#=Mb15^9L-|sN}YE z3>Oqwj1`r0RYIb0w+5e%q)szylF-v^s9;KAd70*R1b_>nRMkDN54uV|bI75vfTp*| zlLqX$HUm1h`>%|859Rst)ooX!UY18!OL9T@kqtMCH-?mgN{lIw&c z*L81eC9fN^ob-6EL66X6wg@N0FSgM()Pid;3YOd6!YU67xd{q~Wur92fE z&VEc92jNb-x$QYWLylpE2e@U?Rv33J6aqtzdeSo~0z&@W+>ddds&ep=%+fn`lx9Qg z?R3+dYkiG3o*g$IUbGy>Jd7Ydi{uEeKrK-_wFHg3Nvz5`JN%$O?M*gb1Ys*JIlgl& zbBsyh^uXMFT^QA+4M>_lB0!ZMc(x`-S0Pzv#{fQ3tjhRu;OB4;G_OWid_R4D?5|tK z1)RyohZk;vYgR#_I;)#YI*s^na{-lD&E_>J_q_r|f1)MF*NsKd;e96z>?P2n^^0KB z17N-%7DZrZQB>6S+a`^8)Na{}2jy z)z62c9!CVXBbM>qWZKGsb3N}vv%##J&ErdyEJMw(^n+O3dWtB!|BUqk8?h!!B8Me$7K za^hPHUwdU%|A^|)uocj1~Hbjt~O z?NG2*aNq&(mL-)y><=(}JAibx7K2jFh+q{hJa)NYlo { return (
- +
); }; diff --git a/src/main.scss b/src/main.scss index 2ed221c..1d68176 100644 --- a/src/main.scss +++ b/src/main.scss @@ -78,3 +78,7 @@ code { color: #ff4d4f !important; } } + +.adm-progress-bar-text { + color: #ff4d4f !important; +} diff --git a/src/pages/loading/index.tsx b/src/pages/loading/index.tsx index ac2ba65..8589e9d 100644 --- a/src/pages/loading/index.tsx +++ b/src/pages/loading/index.tsx @@ -1,10 +1,10 @@ -import { DotLoading } from 'antd-mobile' +import { SpinLoading } from "antd-mobile"; const LoadingPage = () => { return ( - <> - - +
+ +
); }; diff --git a/src/pages/study/index.module.scss b/src/pages/study/index.module.scss new file mode 100644 index 0000000..b42ad87 --- /dev/null +++ b/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; + } + } + } + } +} diff --git a/src/pages/study/index.tsx b/src/pages/study/index.tsx new file mode 100644 index 0000000..cf1e831 --- /dev/null +++ b/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(false); + const [courses, setCourses] = useState([]); + + useEffect(() => { + document.title = "最近学习"; + }, []); + + useEffect(() => { + getCourses(); + }, []); + + const getCourses = () => { + setLoading(true); + course.latestLearn().then((res: any) => { + setCourses(res.data); + setLoading(false); + }); + }; + + return ( +
+
最近学习
+
+ {loading && ( +
+ +
+ )} + {!loading && courses.length === 0 && } + {/*
更早
*/} + {!loading && + courses.length > 0 && + courses.map((item: any, index: number) => ( +
+ {item.course && ( +
{ + navigate(`/course/${item.course.id}`); + }} + > + +
+
+ {item.course.title} +
+
+ {item.course.is_required === 1 && ( +
必修课
+ )} + {item.course.is_required === 0 && ( +
选修课
+ )} + {item.record && ( + <> + {item.record.progress < 10000 && ( + + )} + {item.record.progress >= 10000 && ( + <> + + + 恭喜你学完此套课程! + + + )} + + )} + {!item.record && ( + + )} +
+
+
+ )} +
+ ))} +
+ +
+ ); +}; + +export default StudyPage; diff --git a/src/routes/index.tsx b/src/routes/index.tsx index 4e7aaa3..082c3c4 100644 --- a/src/routes/index.tsx +++ b/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: } />, }, + { + path: "/study", + element: } />, + }, ], }, ];