Skip to content

X
xiaomai-cloud-class-web
Commit fdf7e07d by zhangleyuan
Options

feat:增加视频课模块

parent 93970161
Showing with 785 additions and 230 deletions
src/modules/course-manage/video-course/AddVideoCourse.less 0 → 100644
.add-video-course-page {
.ant-radio-group {
display: flex;
flex-direction: column;
.radio-item {
margin-bottom: 12px;
.text {
color: #333;
}
.sub-text {
color: #999;
}
}
.ant-radio {
vertical-align: top;
padding-top: 2px;
}
}
.form {
margin-top: 16px;
padding: 0 16px;
.required {
position: relative;
&::before {
position: absolute;
content: '*';
color: red;
left: -10px;
top: 6px;
}
&.label::before {
top: 0;
}
}
.course-ware {
display: flex;
align-items: center;
margin-bottom: 4px;
&__img {
width: 24px;
margin-right: 4px;
}
&__name {
color: #333;
}
}
.flex {
display: flex;
}
.cover-url__wrap {
.img-content {
width: 298px;
height: 172px;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
.empty-img {
width: 298px;
height: 172px;
border: 1px dashed #EBEBEB;
border-radius: 4px;
padding: 12px;
color: #999;
padding: 52px 24px;
text-align: center;
}
.opt-btns {
margin-top: 8px;
display: flex;
align-items: center;
.tips {
margin-left: 12px;
color: #999;
}
}
}
.select-student {
align-items: center;
margin-left: 24px;
margin-top: 8px;
.has-selected {
margin-left: 12px;
color: #333;
}
}
.sub-content {
margin-left: 70px;
margin-top: 4px;
.tips {
margin-left: 16px;
color: #999;
}
}
}
.footer {
position: fixed;
bottom: 0;
height: 58px;
width: 100%;
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 252px;
background: #fff;
border-top: 1px solid #E8E8E8;
z-index: 999;
.ant-btn {
margin-left: 10px;
}
}
}
\ No newline at end of file
src/modules/course-manage/video-course/components/VideoCourseFilter.jsx 0 → 100644
/*
* @Author: 吴文洁
* @Date: 2020-08-05 10:11:57
* @LastEditors: zhangleyuan
* @LastEditTime: 2020-12-25 14:45:09
* @Description: 视频课-搜索模块
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
import React from 'react';
import { Row, Input, Select } from 'antd';
import RangePicker from "@/modules/common/DateRangePicker";
// import TeacherSelectV5 from '@/modules/classManage_V5/classDetail/TeacherSelectV5';
import './VideoCourseFilter.less';
const { Search } = Input;
const { Option } = Select;
const DEFAULT_QUERY = {
scheduleName: null, // 课程名称
teacherId: null, // 创建人
beginTime: null, // 开始日期
endTime: null, // 结束日期
}
class VideoCourseFilter extends React.Component {
constructor(props) {
super(props);
this.state = {
query: { ...DEFAULT_QUERY }, // 使用扩展运算符,避免浅拷贝
}
}
// 改变搜索条件
handleChangeQuery = (field, value) => {
this.setState({
query: {
...this.state.query,
[field]: value,
current: 1,
}
}, () => {
if (field === 'scheduleName') return;
this.props.onChange(this.state.query)
});
}
handleChangeDates = (dates) => {
const query = _.clone(this.state.query);
if (_.isEmpty(dates)) {
delete query.beginTime;
delete query.endTime;
} else {
query.beginTime = dates[0].valueOf();
query.endTime = dates[1].valueOf();
}
this.setState({
query,
current: 1,
}, () => {
this.props.onChange(this.state.query);
})
}
// 重置搜索条件
handleReset = () => {
this.setState({
query: DEFAULT_QUERY,
}, () => {
this.props.onChange(this.state.query);
})
}
render() {
const {
query: {
scheduleName,
operator,
beginTime,
endTime,
teacherId,
}
} = this.state;
return (
<div className="video-course-filter">
<Row type="flex" justify="space-between" align="top">
<div className="search-condition">
<div className="search-condition__item">
<span className="search-name">视频课：</span>
<Search
value={scheduleName}
placeholder="搜索视频课名称"
onChange={(e) => { this.handleChangeQuery('scheduleName', e.target.value)}}
onSearch={ () => { this.props.onChange(this.state.query) } }
style={{ width: "calc(100% - 70px)" }}
/>
</div>
<div className="search-condition__item">
{/* <TeacherSelectV5
ref="TeacherSelect"
showSearch={true}
allowClear={true}
style={{ width: "calc(100% - 70px)" }}
onSelect={(teacherId) => { this.handleChangeQuery('teacherId', teacherId)}}
placeholder='请选择创建人'
label='创建人'
defaultValue={teacherId}
/> */}
</div>
<div className="search-condition__item">
<span className="search-date">创建日期：</span>
<RangePicker
id="course_date_picker"
allowClear={false}
value={ beginTime ? [moment(beginTime), moment(endTime)] : null }
format={"YYYY-MM-DD"}
onChange={(dates) => { this.handleChangeDates(dates) }}
style={{ width: "calc(100% - 70px)" }}
/>
</div>
</div>
<span
className="icon iconfont"
onClick={this.handleReset}
>
&#xe6a3;
</span>
</Row>
</div>
)
}
}
export default VideoCourseFilter;
src/modules/course-manage/video-course/components/VideoCourseFilter.less 0 → 100644
.video-course-filter {
position: relative;
.search-condition {
width: 100%;
display: flex;
align-items: center;
flex-wrap: wrap;
&__item {
width: 30%;
margin-right: 3%;
}
}
.iconfont {
position: absolute;
right: 12px;
cursor: pointer;
}
}
\ No newline at end of file
src/modules/course-manage/video-course/components/VideoCourseList.jsx 0 → 100644
/*
* @Author: 吴文洁
* @Date: 2020-08-05 10:12:45
* @LastEditors: zhangleyuan
* @LastEditTime: 2020-12-25 14:54:53
* @Description: 视频课-列表模块
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
import React from 'react';
import { Table, Modal, message } from 'antd';
import { PageControl } from "@/components";
import { LIVE_SHARE_MAP } from '@/common/constants/academic/cloudClass';
import StudentListModal from '../modal/StudentListModal';
import ShareLiveModal from '@/modules/course-manage/modal/ShareLiveModal';
import './VideoCourseList.less';
const ENV = process.env.DEPLOY_ENV || 'dev';
class VideoCourseList extends React.Component {
constructor(props) {
super(props);
this.state = {
id: '', // 视频课ID
studentIds:[]
}
}
componentDidMount() {
const videoCourseItem = localStorage.getItem('videoCourseItem');
if (videoCourseItem) {
const _videoCourseItem = JSON.parse(videoCourseItem);
this.handleShowShareModal(_videoCourseItem, true);
}
}
// 请求表头
parseColumns = () => {
const columns = [
{
title: '视频课',
key: 'scheduleName',
dataIndex: 'scheduleName',
width: '25%',
render: (val, record) => {
const { coverUrl, scheduleVideoUrl } = record;
return (
<div className="record__item">
{/* 上传了封面的话就用上传的封面, 没有的话就取视频的第一帧 */}
<img className="course-cover" src={coverUrl || `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast`} />
<span className="course-name">{val}</span>
</div>
)
}
},
{
title: '学员人数',
key: "stuNum",
dataIndex: "stuNum",
render: (val, record) => {
return (
<span
className="operate-text"
onClick={() => this.handleShowStudentListModal(record)}
>
{val}
</span>
);
},
},
{
title: '创建人',
key: 'teacherName',
dataIndex: 'teacherName'
},
{
title: '创建时间',
key: 'createTime',
dataIndex: 'createTime',
sorter: true,
render: (val) => {
return formatDate('YYYY-MM-DD H:i', val)
}
},
{
title: '更新时间',
key: 'updateTime',
dataIndex: 'updateTime',
sorter: true,
render: (val) => {
return formatDate('YYYY-MM-DD H:i', val)
}
},
{
title: '操作',
key: 'operate',
dataIndex: 'operate',
render: (val, record) => {
return (
<div className="operate">
<div className="operate__item" onClick={() => this.handleShowShareModal(record)}>分享</div>
<span className="operate__item split"> | </span>
<div
className="operate__item"
onClick={() => {
RCHistory.push(`/cloudclass/video_course/create?type=edit&id=${record.id}`);
}}
>编辑</div>
<span className="operate__item split"> | </span>
<div
className="operate__item"
onClick={() => this.handleDeleteVideoCourse(record.id)}
>删除</div>
</div>
)
}
}
];
return columns;
}
// 删除视频课
handleDeleteVideoCourse = (scheduleId) => {
Modal.confirm({
title: '你确定要删除此视频课吗？',
content: '删除后，学员将不能进行观看。',
icon: <span className="icon iconfont default-confirm-icon">&#xe6f4;</span>,
onOk: () => {
window.axios.Apollo('public/apollo/removeLessonSchedule', {
scheduleId
}).then(() => {
message.success('删除成功');
this.props.onChange();
})
}
});
}
// 学员人数弹窗
handleShowStudentListModal = (record) => {
const { studentIds = [], id } = this.state;
if (id !== record.id) {
this.setState({
id : record.id
})
}
const studentListModal = (
<StudentListModal
type='videoCourseList'
close={(studentIds) =>
this.setState({
studentListModal: null,
studentIds
})
}
studentIds={studentIds}
data={record}
refresh={() => {
this.props.onChange();
}}
/>
);
this.setState({ studentListModal });
}
// 显示分享弹窗
handleShowShareModal = (record, needStr = false) => {
const appId = CONFIG.appId[ENV];
const shareUrl = CONFIG.shareUrl[ENV];
const { id, scheduleVideoUrl } = record;
const htmlUrl = `${LIVE_SHARE_MAP[ENV]}videoShare?id=${id}`;
const link = `${appId}&redirect_uri=${encodeURIComponent(htmlUrl)}%26appid%3D${appId}&response_type=code&scope=snsapi_base&state=state#wechat_redirect`;
const longUrl = `${shareUrl}${link}`;
const { coverUrl, scheduleName } = record;
const shareData = {
longUrl,
coverUrl,
scheduleVideoUrl,
courseName: scheduleName,
};
const shareLiveModal = (
<ShareLiveModal
needStr={needStr}
data={shareData}
type="videoClass"
close={() => {
this.setState({
shareLiveModal: null
});
localStorage.setItem('videoCourseItem', '');
}}
/>
);
this.setState({ shareLiveModal });
}
handleChangeTable = (pagination, filters, sorter) => {
const { columnKey, order } = sorter;
const { query } = this.props;
let { order: _order } =query;
// 按创建时间升序排序
if (columnKey === 'createTime' && order === 'ascend') { _order = 'CREATED_ASC'; }
// 按创建时间降序排序
if (columnKey === 'createTime' && order === 'descend') { _order = 'CREATED_DESC'; }
// 按更新时间升序排序
if (columnKey === 'updateTime' && order === 'ascend') { _order = 'UPDATED_ASC'; }
// 按更新时间降序排序
if (columnKey === 'updateTime' && order === 'descend') { _order = 'UPDATED_DESC'; }
const _query = {
...query,
order: _order
};
this.props.onChange(_query);
}
render() {
const { dataSource = [], totalCount, query } = this.props;
const { current, size } = query;
return (
<div className="video-course-list">
<Table
rowKey={record => record.id}
dataSource={dataSource}
columns={this.parseColumns()}
onChange={this.handleChangeTable}
pagination={false}
/>
<div className="box-footer">
<PageControl
current={current - 1}
pageSize={size}
total={totalCount}
toPage={(page) => {
const _query = {...query, current: page + 1};
this.props.onChange(_query)
}}
/>
</div>
{ this.state.shareLiveModal }
{ this.state.studentListModal }
</div>
)
}
}
export default VideoCourseList;
src/modules/course-manage/video-course/components/VideoCourseList.less 0 → 100644
.video-course-list {
margin-top: 12px;
.operate-text {
color: #FF8534;
cursor: pointer;
}
.operate {
display: flex;
&__item {
color: #FF8534;
cursor: pointer;
&.split {
margin: 0 8px;
color: #BFBFBF;
}
}
}
.record__item {
display: flex;
.course-cover {
min-width: 97px;
max-width: 97px;
height: 50px;
border-radius: 2px;
margin-right: 8px;
background-color: #666;
}
.course-name {
color: #666;
}
}
}
.video-course-more-menu {
background: white;
box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15);
border-radius: 4px;
div {
line-height: 30px;
padding: 0 15px;
cursor: pointer;
&:hover {
background: #f3f6fa;
}
}
}
\ No newline at end of file
src/modules/course-manage/video-course/components/VideoCourseOpt.less 0 → 100644
.video-course-opt {
margin-top: 16px;
.link {
color: #FF8534;
}
}
\ No newline at end of file
src/modules/course-manage/video-course/components/VieoCourseOpt.jsx 0 → 100644
/*
* @Author: 吴文洁
* @Date: 2020-08-05 10:12:15
* @LastEditors: zhangleyuan
* @LastEditTime: 2020-12-25 15:25:32
* @Description: 视频课-操作模块
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
import React from 'react';
import { Button } from 'antd';
import './VideoCourseOpt.less';
export default function VideoCourseOpt() {
return (
<div className="video-course-opt">
<Button
type="primary"
onClick={() => {
RCHistory.push('/create-video-course?type=add');
}}
className="mr12"
>新建视频课</Button>
<a
href="https://mp.weixin.qq.com/s/vTfGS8SeRzarrUnF9fkYbA"
className="link"
target="_blank"
>什么是视频课?</a>
</div>
);
}
src/modules/course-manage/video-course/index.jsx 0 → 100644
/*
* @Author: 吴文洁
* @Date: 2020-08-05 10:08:06
* @LastEditors: zhangleyuan
* @LastEditTime: 2020-12-25 15:06:21
* @Description: 云课堂-视频课入口页面
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
import React from 'react';
import VideoCourseFilter from './components/VideoCourseFilter';
import VideoCourseOpt from './components/VieoCourseOpt';
import VideoCourseList from './components/VideoCourseList';
class VideoCourse extends React.Component {
constructor(props) {
super(props);
const { instId } = window.currentUserInstInfo;
this.state = {
query: {
instId,
size: 10,
current: 1,
},
dataSource: [], // 视频课列表
totalCount: 0, // 视频课数据总条数
}
}
componentWillMount() {
// 获取视频课列表
this.handleFetchScheduleList();
}
// 获取视频课列表
handleFetchScheduleList = (_query = {}) => {
const query = {
...this.state.query,
..._query
};
// 更新请求参数
this.setState({ query });
// window.axios.Apollo('public/apollo/lessonScheduleListPage', query).then((res) => {
// const { result = {} } = res || {};
// const { records = [], total = 0 } = result;
// this.setState({
// dataSource: records,
// totalCount: Number(total)
// });
// });
}
render() {
const { dataSource, totalCount, query } = this.state;
return (
<div className="page video-course-page">
<div className="content-header">视频课</div>
<div className="box">
{/* 搜索模块 */}
<VideoCourseFilter
onChange={this.handleFetchScheduleList}
/>
{/* 操作模块 */}
<VideoCourseOpt />
{/* 视频课列表模块 */}
<VideoCourseList
query={query}
dataSource={dataSource}
totalCount={totalCount}
onChange={this.handleFetchScheduleList}
/>
</div>
</div>
)
}
}
export default VideoCourse;
src/modules/course-manage/video-course/modal/StudentListModal.less 0 → 100644
.video-course-student-list-modal {
&__operate {
position: relative;
margin-bottom: 16px;
.export-btn {
margin-left: 8px;
}
.search {
position: absolute;
right: 0;
}
}
.operate__item {
color: #FF8534;
cursor: pointer;
}
}
\ No newline at end of file
src/modules/store-manege/StoreDecorationPage.tsx deleted 100644 → 0
/*
* @Author: wufan
* @Date: 2020-11-30 10:47:38
* @LastEditors: wufan
* @LastEditTime: 2020-11-30 17:35:24
* @Description: 员工管理页面
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/
import React, { useEffect, useState } from "react";
import { withRouter } from "react-router-dom";
import _ from "underscore";
import PageControl from "@/components/PageControl";
import {
Table,
Modal,
message,
Row,
Col,
Input,
DatePicker,
Button,
} from "antd";
import { QuestionCircleOutlined } from "@ant-design/icons";
import StoreService from "@/domains/store-domain/storeService";
import "./StoreDecorationPage.less";
import moment from "moment";
const { confirm } = Modal;
const { Search } = Input;
const { RangePicker } = DatePicker;
declare var window: any;
interface RecordTypes {
storeUserId: string;
role: string;
}
function StoreDecorationPage() {
const [storeDecorationlist, setStoreDecorationlist] = useState([
{
name: "赵云",
phone: "18767118672",
role: "0",
storeUserId: "",
},
{
name: "吕布",
phone: "18767118672",
role: "0",
storeUserId: "",
},
]);
const [query, setQuery] = useState({
current: 0,
size: 10,
name: "",
phone: "",
identity: "ALL",
instId: "1837447" || window.currentUserInstInfo.instId,
registerStartDate: null,
registerEndDate: null,
});
const [total, setTotal] = useState(0);
const [model, setModel] = useState(null);
const [isModalOpen, setIsModalOpen] = useState(false);
const [isManager, setIsManager] = useState(true);
const [isNormal, setIsNormal] = useState(true);
const [choosedItem, setChooseItem] = useState({});
useEffect(() => {
// getStoreDecorationList();
}, [query]);
function getStoreDecorationList() {
let _query = _.clone(query);
_query.current = query.current + 1;
StoreService.getStoreDecorationList(_query).then((res: any) => {
console.log(res.result.records);
setStoreDecorationlist(res.result.records);
setTotal(res.result.total);
});
}
function handleReplaceDecoration(record: RecordTypes) {}
function handleDeleteDecoration(record: RecordTypes) {}
function handleDeleteDecorationConfirm(record: RecordTypes) {
return confirm({
title: "你确定要删除这个banner吗？",
icon: <span className="icon iconfont default-confirm-icon">&#xe839; </span>,
okText: "删除",
cancelText: "取消",
onOk: () => {
handleDeleteDecoration(record);
},
});
}
function parseColumn() {
return [
{
title: "用户姓名",
dataIndex: "name",
render: (val: string) => {
return (
<div className="coupon-info">
<span className="title">{val}</span>
</div>
);
},
},
{
title: "手机号",
dataIndex: "phone",
key: "phone",
render: (val: string) => {
return <div>{val}</div>;
},
},
{
title: "注册时间",
dataIndex: "registerDate",
key: "registerDate",
render: (val: string) => {
return <div>{moment(val).format("YYYY-MM-DD HH:mm:ss")}</div>;
},
},
{
title: "操作",
dataIndex: "operation",
render: (val: string, record: RecordTypes) => {
return record.role === "" || record.role === "1" ? (
<div className="no-operate">-</div>
) : (
<div className="operation">
<span
className="edit"
onClick={() => handleReplaceDecoration(record)}
>
替换
</span>
<span className="divider-line">{" | "}</span>
<span
className="delete"
onClick={() => handleDeleteDecoration(record)}
>
删除
</span>
</div>
);
},
},
];
}
function handleQuery(name: string, value: any) {
const _query = _.clone(query);
// _query[name] = value;
setQuery(_query);
}
function handleToAddStoreDecoration() {}
return (
<div className="page user-manage-page">
<div className="page-content">
<div className="content-header">店铺装修</div>
<div className="box">
<div className="box-header">
<div
style={{
display: "flex",
alignItems: "center",
justifyContent: "space-between",
padding: "15px 0 10px",
}}
>
<div style={{ flex: 1 }}>banner设置</div>
</div>
<Button
onClick={() => {
handleToAddStoreDecoration();
}}
type="primary"
className="add-show-btn"
>
添加Banner
</Button>
</div>
<div className="box-body">
<Table
size={"middle"}
pagination={false}
dataSource={storeDecorationlist}
columns={parseColumn()}
rowKey={(item: any) => item.id}
bordered
/>
</div>
<div className="box-footer">
<PageControl
current={query.current}
pageSize={query.size}
total={total}
toPage={(page) => {
const queryStates = _.clone(query);
queryStates.current = page;
setQuery(queryStates);
}}
/>
</div>
</div>
</div>
</div>
);
}
export default withRouter(StoreDecorationPage);
src/routes/config/mainRoutes.tsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-04-29 10:26:32 * @Date: 2020-04-29 10:26:32
* @LastEditors: wufan * @LastEditors: zhangleyuan
* @LastEditTime: 2020-12-16 16:39:03 * @LastEditTime: 2020-12-25 15:20:14
* @Description: 内容线路由配置 * @Description: 内容线路由配置
*/ */
import EmployeesManagePage from '@/modules/store-manage/EmployeesManagePage'; import EmployeesManagePage from '@/modules/store-manage/EmployeesManagePage';
...@@ -12,8 +12,9 @@ import StoreDecorationPage from '@/modules/store-manage/StoreDecorationPage'; ...@@ -12,8 +12,9 @@ import StoreDecorationPage from '@/modules/store-manage/StoreDecorationPage';
import CourseCatalogPage from '@/modules/store-manage/CourseCatalogPage'; import CourseCatalogPage from '@/modules/store-manage/CourseCatalogPage';
import LiveCoursePage from '@/modules/course-manage/LiveCoursePage'; import LiveCoursePage from '@/modules/course-manage/LiveCoursePage';
import AddLivePage from '@/modules/course-manage/AddLive' import AddLivePage from '@/modules/course-manage/AddLive'
import VideoCoursePage from '@/modules/course-manage/video-course'
import AddVideoCoursePage from '@/modules/course-manage/video-course/AddVideoCourse'
import DataList from '@/modules/course-manage/DataList/DataList'; import DataList from '@/modules/course-manage/DataList/DataList';
import ClassBook from '@/modules/resource-disk'; import ClassBook from '@/modules/resource-disk';
const mainRoutes = [ const mainRoutes = [
...@@ -45,7 +46,12 @@ const mainRoutes = [ ...@@ -45,7 +46,12 @@ const mainRoutes = [
{ {
path: '/live-course', path: '/live-course',
component:LiveCoursePage, component:LiveCoursePage,
name: '课程管理' name: '直播课'
},
{
path: '/video-course',
component:VideoCoursePage,
name: '视频课'
}, },
{ {
path: '/create-live-course', path: '/create-live-course',
...@@ -53,10 +59,16 @@ const mainRoutes = [ ...@@ -53,10 +59,16 @@ const mainRoutes = [
name: '创建直播课' name: '创建直播课'
}, },
{ {
path: '/create-video-course',
component:AddVideoCoursePage,
name: '创建视频课'
},
{
path: '/resource-disk', path: '/resource-disk',
component:ClassBook, component:ClassBook,
name: '资料云盘' name: '资料云盘'
}, },
] ]
export default mainRoutes; export default mainRoutes;
\ No newline at end of file
src/routes/config/menuList.tsx
...@@ -9,11 +9,11 @@ export const menuList: any = [ ...@@ -9,11 +9,11 @@ export const menuList: any = [
groupCode: "CourseLiveClass", groupCode: "CourseLiveClass",
link: '/live-course' link: '/live-course'
}, },
// { {
// groupName: "视频课", groupName: "视频课",
// groupCode: "CourseVideoClass", groupCode: "CourseVideoClass",
// link: '/CourseVideoClass' link: '/video-course'
// } }
] ]
}, },
{ {
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment