mirror of
https://github.com/PlayEdu/frontend.git
synced 2025-06-28 13:22:49 +08:00
课程详情初步
This commit is contained in:
禺狨
parent
b24e4e09b1
commit
351e755fe2
@ -9,6 +9,7 @@ export const Footer: React.FC = () => {
|
||||
backgroundColor: "#333333",
|
||||
height: 90,
|
||||
textAlign: "center",
|
||||
marginTop: 80,
|
||||
}}
|
||||
>
|
||||
<i
|
||||
|
||||
@ -92,7 +92,7 @@ export const Header: React.FC = () => {
|
||||
<Button.Group className={styles["button-group"]}>
|
||||
<Dropdown menu={{ items, onClick }} placement="bottomRight">
|
||||
<div className="d-flex">
|
||||
{user.name && (
|
||||
{user && user.name && (
|
||||
<img
|
||||
style={{ width: 36, height: 36, borderRadius: "50%" }}
|
||||
src={user.avatar}
|
||||
|
||||
@ -217,6 +217,13 @@ h1 {
|
||||
color: $primaryColor;
|
||||
}
|
||||
|
||||
.container {
|
||||
width: 1200px;
|
||||
min-height: 671px;
|
||||
height: auto;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.login-box {
|
||||
.ant-btn {
|
||||
font-size: 18px !important;
|
||||
@ -247,6 +254,9 @@ h1 {
|
||||
|
||||
.ant-progress {
|
||||
margin-bottom: 0px;
|
||||
.ant-progress-text {
|
||||
color: #ff4d4f !important;
|
||||
}
|
||||
}
|
||||
|
||||
.ant-modal-confirm-btns > .ant-btn-default:hover {
|
||||
|
||||
67
src/pages/course/compenents/hour.module.scss
Normal file
67
src/pages/course/compenents/hour.module.scss
Normal file
@ -0,0 +1,67 @@
|
||||
.item {
|
||||
width: 100%;
|
||||
height: 56px;
|
||||
background: #ffffff;
|
||||
border-radius: 6px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
box-sizing: border-box;
|
||||
padding: 0 24px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
background: rgba(255, 77, 79, 0.05);
|
||||
}
|
||||
|
||||
.left-item {
|
||||
width: 900px;
|
||||
height: 20px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
i {
|
||||
color: rgba(0, 0, 0, 0.3);
|
||||
}
|
||||
.title {
|
||||
width: 850px;
|
||||
margin-left: 10px;
|
||||
height: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
line-height: 24px;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
text-align: left;
|
||||
}
|
||||
}
|
||||
|
||||
.record {
|
||||
height: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.45);
|
||||
line-height: 24px;
|
||||
margin-right: 24px;
|
||||
}
|
||||
|
||||
.link {
|
||||
height: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #ff4d4f;
|
||||
line-height: 24px;
|
||||
cursor: pointer;
|
||||
&:hover {
|
||||
opacity: 0.8;
|
||||
}
|
||||
}
|
||||
|
||||
.complete {
|
||||
height: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
65
src/pages/course/compenents/hour.tsx
Normal file
65
src/pages/course/compenents/hour.tsx
Normal file
@ -0,0 +1,65 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Image, Progress } from "antd";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import styles from "./hour.module.scss";
|
||||
import mediaIcon from "../../../assets/images/commen/icon-medal.png";
|
||||
import { Navigate } from "react-router-dom";
|
||||
import { durationFormat } from "../../../utils/index";
|
||||
|
||||
interface PropInterface {
|
||||
id: number;
|
||||
title: string;
|
||||
duration: number;
|
||||
record: any;
|
||||
progress: number;
|
||||
}
|
||||
|
||||
export const HourCompenent: React.FC<PropInterface> = ({
|
||||
id,
|
||||
title,
|
||||
duration,
|
||||
record,
|
||||
progress,
|
||||
}) => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<div className={styles["item"]}>
|
||||
<div className={styles["left-item"]}>
|
||||
<i className="iconfont icon-icon-video"></i>
|
||||
<div className={styles["title"]}>
|
||||
{title}({durationFormat(Number(duration))})
|
||||
</div>
|
||||
</div>
|
||||
<div className="d-flex">
|
||||
{progress >= 0 && progress < 100 && (
|
||||
<>
|
||||
<div className={styles["record"]}>
|
||||
上次学习到{durationFormat(Number(duration))}
|
||||
</div>
|
||||
{progress === 0 && (
|
||||
<div
|
||||
className={styles["link"]}
|
||||
onClick={() => {
|
||||
navigate(`/course/play/${id}`);
|
||||
}}
|
||||
>
|
||||
开始学习
|
||||
</div>
|
||||
)}
|
||||
{progress !== 0 && (
|
||||
<div
|
||||
className={styles["link"]}
|
||||
onClick={() => {
|
||||
navigate(`/course/play/${id}`);
|
||||
}}
|
||||
>
|
||||
继续学习
|
||||
</div>
|
||||
)}
|
||||
</>
|
||||
)}
|
||||
{progress === 100 && <div className={styles["complete"]}>已学完</div>}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
136
src/pages/course/index.module.scss
Normal file
136
src/pages/course/index.module.scss
Normal file
@ -0,0 +1,136 @@
|
||||
.top-cont {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.04);
|
||||
border-radius: 12px;
|
||||
margin-top: 30px;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
box-sizing: border-box;
|
||||
padding: 24px;
|
||||
.info {
|
||||
width: 720px;
|
||||
height: 90px;
|
||||
text-align: left;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
justify-content: space-between;
|
||||
margin-left: 24px;
|
||||
.title {
|
||||
width: 100%;
|
||||
height: 36px;
|
||||
font-size: 20px;
|
||||
font-weight: 600;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
text-overflow: ellipsis;
|
||||
line-height: 36px;
|
||||
white-space: nowrap;
|
||||
overflow: hidden;
|
||||
}
|
||||
.status {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
.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;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.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;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.success {
|
||||
height: 24px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
margin-left: 24px;
|
||||
span {
|
||||
height: 24px;
|
||||
font-size: 14px;
|
||||
font-weight: 400;
|
||||
color: #ff4d4f;
|
||||
line-height: 24px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
.desc {
|
||||
width: 100%;
|
||||
height: 112px;
|
||||
font-size: 16px;
|
||||
font-weight: 400;
|
||||
color: rgba(0, 0, 0, 0.6);
|
||||
line-height: 28px;
|
||||
text-align: left;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
display: -webkit-box;
|
||||
-webkit-line-clamp: 4;
|
||||
-webkit-box-orient: vertical;
|
||||
margin-top: 34px;
|
||||
}
|
||||
}
|
||||
|
||||
.chapters-hours-cont {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
background: #ffffff;
|
||||
box-shadow: 0px 2px 8px 4px rgba(0, 0, 0, 0.04);
|
||||
border-radius: 12px;
|
||||
margin-top: 30px;
|
||||
box-sizing: border-box;
|
||||
padding: 24px;
|
||||
.hours-list-box {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
display: flex;
|
||||
flex-direction: column;
|
||||
|
||||
.chapter-it {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 24px;
|
||||
&:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
.chapter-name {
|
||||
width: 100%;
|
||||
height: 24px;
|
||||
font-size: 16px;
|
||||
font-weight: 500;
|
||||
color: rgba(0, 0, 0, 0.88);
|
||||
line-height: 24px;
|
||||
text-align: left;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
}
|
||||
.hours-it {
|
||||
width: 100%;
|
||||
height: auto;
|
||||
margin-bottom: 8px;
|
||||
&:last-child {
|
||||
margin-bottom: 0px;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
129
src/pages/course/index.tsx
Normal file
129
src/pages/course/index.tsx
Normal file
@ -0,0 +1,129 @@
|
||||
import { useEffect, useState } from "react";
|
||||
import { Image, Progress } from "antd";
|
||||
import styles from "./index.module.scss";
|
||||
import { useParams } from "react-router-dom";
|
||||
import { course as Course } from "../../api/index";
|
||||
import mediaIcon from "../../assets/images/commen/icon-medal.png";
|
||||
import { HourCompenent } from "./compenents/hour";
|
||||
|
||||
const CoursePage = () => {
|
||||
const params = useParams();
|
||||
const [loading, setLoading] = useState<boolean>(false);
|
||||
const [course, setCourse] = useState<any>({});
|
||||
const [chapters, setChapters] = useState<any>([]);
|
||||
const [hours, setHours] = useState<any>({});
|
||||
const [learnRecord, setLearnRecord] = useState<any>({});
|
||||
const [learnHourRecord, setLearnHourRecord] = useState<any>({});
|
||||
const [progress, setprogresP] = useState(20);
|
||||
|
||||
useEffect(() => {
|
||||
getDetail();
|
||||
}, [params.courseId]);
|
||||
|
||||
const getDetail = () => {
|
||||
setLoading(true);
|
||||
Course.detail(Number(params.courseId)).then((res: any) => {
|
||||
setCourse(res.data.course);
|
||||
setChapters(res.data.chapters);
|
||||
setHours(res.data.hours);
|
||||
if (res.data.learn_record) {
|
||||
setLearnRecord(res.data.learn_record);
|
||||
}
|
||||
if (res.data.learn_hour_records) {
|
||||
setLearnHourRecord(res.data.learn_hour_records);
|
||||
}
|
||||
setLoading(false);
|
||||
});
|
||||
};
|
||||
|
||||
return (
|
||||
<div className="container">
|
||||
<div className={styles["top-cont"]}>
|
||||
<div className="j-b-flex">
|
||||
<div className="d-flex">
|
||||
<Image
|
||||
width={120}
|
||||
height={90}
|
||||
style={{ borderRadius: 10 }}
|
||||
preview={false}
|
||||
src={course.thumb}
|
||||
/>
|
||||
<div className={styles["info"]}>
|
||||
<div className={styles["title"]}>{course.title}</div>
|
||||
<div className={styles["status"]}>
|
||||
{course.is_required === 1 && (
|
||||
<div className={styles["type"]}>必修课</div>
|
||||
)}
|
||||
{course.is_required === 0 && (
|
||||
<div className={styles["active-type"]}>选修课</div>
|
||||
)}
|
||||
{progress === 100 && (
|
||||
<div className={styles["success"]}>
|
||||
<Image
|
||||
width={24}
|
||||
height={24}
|
||||
src={mediaIcon}
|
||||
preview={false}
|
||||
/>
|
||||
<span className="ml-8">恭喜你学完此套课程!</span>
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<Progress
|
||||
type="circle"
|
||||
strokeColor="#FF4D4F"
|
||||
trailColor="#F6F6F6"
|
||||
size={90}
|
||||
strokeWidth={8}
|
||||
percent={progress}
|
||||
format={(percent) => `${percent}%`}
|
||||
/>
|
||||
</div>
|
||||
{course.short_desc && (
|
||||
<div className={styles["desc"]}>{course.short_desc}</div>
|
||||
)}
|
||||
</div>
|
||||
<div className={styles["chapters-hours-cont"]}>
|
||||
{chapters.length === 0 && JSON.stringify(hours) !== "{}" && (
|
||||
<div className={styles["hours-list-box"]}>
|
||||
{hours[0].map((item: any) => (
|
||||
<div key={item.id} className={styles["hours-it"]}>
|
||||
<HourCompenent
|
||||
id={item.id}
|
||||
title={item.title}
|
||||
record={item.rid}
|
||||
duration={item.duration}
|
||||
progress={progress}
|
||||
></HourCompenent>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
{chapters.length > 0 && JSON.stringify(hours) !== "{}" && (
|
||||
<div className={styles["hours-list-box"]}>
|
||||
{chapters.map((item: any) => (
|
||||
<div key={item.id} className={styles["chapter-it"]}>
|
||||
<div className={styles["chapter-name"]}>{item.name}</div>
|
||||
{hours[item.id].map((it: any) => (
|
||||
<div key={it.id} className={styles["hours-it"]}>
|
||||
<HourCompenent
|
||||
id={it.id}
|
||||
title={it.title}
|
||||
record={it.rid}
|
||||
duration={it.duration}
|
||||
progress={0}
|
||||
></HourCompenent>
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
))}
|
||||
</div>
|
||||
)}
|
||||
</div>
|
||||
</div>
|
||||
);
|
||||
};
|
||||
|
||||
export default CoursePage;
|
||||
@ -1,9 +1,12 @@
|
||||
import React, { useState, useEffect } from "react";
|
||||
import { Image, Progress } from "antd";
|
||||
import { useNavigate } from "react-router-dom";
|
||||
import styles from "./courses-model.module.scss";
|
||||
import mediaIcon from "../../../assets/images/commen/icon-medal.png";
|
||||
import { Navigate } from "react-router-dom";
|
||||
|
||||
interface PropInterface {
|
||||
id: number;
|
||||
title: string;
|
||||
thumb: string;
|
||||
isRequired: number;
|
||||
@ -11,13 +14,20 @@ interface PropInterface {
|
||||
}
|
||||
|
||||
export const CoursesModel: React.FC<PropInterface> = ({
|
||||
id,
|
||||
title,
|
||||
thumb,
|
||||
isRequired,
|
||||
progress,
|
||||
}) => {
|
||||
const navigate = useNavigate();
|
||||
return (
|
||||
<div className={styles["item"]}>
|
||||
<div
|
||||
className={styles["item"]}
|
||||
onClick={() => {
|
||||
navigate(`/course/${id}`);
|
||||
}}
|
||||
>
|
||||
<div className={styles["top-content"]}>
|
||||
<Image
|
||||
width={120}
|
||||
|
||||
@ -79,7 +79,6 @@
|
||||
width: 1200px;
|
||||
margin: 0 auto;
|
||||
margin-top: 80px;
|
||||
margin-bottom: 80px;
|
||||
text-align: center;
|
||||
height: 40px;
|
||||
font-size: 16px;
|
||||
|
||||
@ -188,6 +188,7 @@ const IndexPage = () => {
|
||||
<div key={item.id}>
|
||||
{learnCourseRecords[item.id] && (
|
||||
<CoursesModel
|
||||
id={item.id}
|
||||
title={item.title}
|
||||
thumb={item.thumb}
|
||||
isRequired={item.is_required}
|
||||
@ -196,6 +197,7 @@ const IndexPage = () => {
|
||||
)}
|
||||
{!learnCourseRecords[item.id] && (
|
||||
<CoursesModel
|
||||
id={item.id}
|
||||
title={item.title}
|
||||
thumb={item.thumb}
|
||||
isRequired={item.is_required}
|
||||
|
||||
@ -32,6 +32,7 @@ const Init = lazy(async () => {
|
||||
// 懒加载
|
||||
const LoginPage = lazy(() => import("../pages/login"));
|
||||
const IndexPage = lazy(() => import("../pages/index"));
|
||||
const CoursePage = lazy(() => import("../pages/course"));
|
||||
|
||||
const routes: RouteObject[] = [
|
||||
{
|
||||
@ -46,6 +47,10 @@ const routes: RouteObject[] = [
|
||||
path: "/login",
|
||||
element: <LoginPage />,
|
||||
},
|
||||
{
|
||||
path: "/course/:courseId",
|
||||
element: <CoursePage />,
|
||||
},
|
||||
],
|
||||
},
|
||||
];
|
||||
|
||||
@ -1,13 +1,7 @@
|
||||
import { createSlice } from "@reduxjs/toolkit";
|
||||
|
||||
type UserInterface = {
|
||||
id: number;
|
||||
name: string;
|
||||
email: string;
|
||||
avatar: string;
|
||||
};
|
||||
type UserStoreInterface = {
|
||||
user: UserInterface | null;
|
||||
user: null;
|
||||
departments: string[];
|
||||
isLogin: boolean;
|
||||
};
|
||||
|
||||
@ -16,8 +16,17 @@ export function dateFormat(dateStr: string) {
|
||||
return moment(dateStr).format("YYYY-MM-DD HH:mm");
|
||||
}
|
||||
|
||||
export function durationFormat(dateStr: number) {
|
||||
var d = moment.duration(dateStr, "seconds");
|
||||
let hour = d.hours() === 0 ? "" : d.hours() + ":";
|
||||
let minute = d.minutes() >= 10 ? d.minutes() + ":" : "0" + d.minutes() + ":";
|
||||
let second = d.seconds() >= 10 ? d.seconds() : "0" + d.seconds();
|
||||
|
||||
return hour + minute + second;
|
||||
}
|
||||
|
||||
export function studyTimeFormat(dateStr: number) {
|
||||
var d = moment.duration(dateStr/1000, "seconds");
|
||||
var d = moment.duration(dateStr / 1000, "seconds");
|
||||
let value = [];
|
||||
value.push(Math.floor(d.asDays()));
|
||||
value.push(d.hours());
|
||||
|
||||
Loading…
x
Reference in New Issue
Block a user