Skip to content

X
xiaomai-cloud-class-web
Commit 3f1d8632 by zhangleyuan
Options

feat:修改创建课程和编辑课程的预览显示

parent 19b43bc6
Showing with 44 additions and 8 deletions
src/modules/course-manage/AddLive.jsx
...@@ -66,6 +66,7 @@ class AddLive extends React.Component { ...@@ -66,6 +66,7 @@ class AddLive extends React.Component {
type, type,
loading: false, loading: false,
isEdit: true, isEdit: true,
courseState:'UN_START',
// 直播课基本信息 // 直播课基本信息
addLiveBasicInfo: { addLiveBasicInfo: {
courseName: null, // 课程名称 courseName: null, // 课程名称
...@@ -128,7 +129,8 @@ class AddLive extends React.Component { ...@@ -128,7 +129,8 @@ class AddLive extends React.Component {
warmMedia, warmMedia,
categoryId, categoryId,
categoryName, categoryName,
admins admins,
courseState
} = res.result; } = res.result;
let coverId; let coverId;
let coverUrl; let coverUrl;
...@@ -195,6 +197,7 @@ class AddLive extends React.Component { ...@@ -195,6 +197,7 @@ class AddLive extends React.Component {
this.setState({ this.setState({
isEdit, isEdit,
loading: false, loading: false,
courseState,
addLiveIntroInfo, addLiveIntroInfo,
addLiveClassInfo, addLiveClassInfo,
addLiveBasicInfo, addLiveBasicInfo,
...@@ -474,13 +477,14 @@ handleChangeBasicInfo = (field, value) => { ...@@ -474,13 +477,14 @@ handleChangeBasicInfo = (field, value) => {
// 显示预览课程弹窗 // 显示预览课程弹窗
handleShowPreviewModal = () => { handleShowPreviewModal = () => {
const { addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo,type} = this.state; const { addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo,type,courseState} = this.state;
const previewLiveCourseModal = ( const previewLiveCourseModal = (
<PreviewCourseModal <PreviewCourseModal
courseBasicInfo={addLiveBasicInfo} courseBasicInfo={addLiveBasicInfo}
courseClassInfo={addLiveClassInfo} courseClassInfo={addLiveClassInfo}
courseIntroInfo={addLiveIntroInfo} courseIntroInfo={addLiveIntroInfo}
type={type} type={type}
courseState={courseState}
close={() => { close={() => {
this.setState({ this.setState({
previewLiveCourseModal: null previewLiveCourseModal: null
......
src/modules/course-manage/modal/PreviewCourseModal.jsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-07-23 14:54:16 * @Date: 2020-07-23 14:54:16
* @LastEditors: zhangleyuan * @LastEditors: zhangleyuan
* @LastEditTime: 2020-12-23 13:41:31 * @LastEditTime: 2020-12-23 14:05:00
* @Description: 大班直播课预览弹窗 * @Description: 大班直播课预览弹窗
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -12,6 +12,22 @@ import { Modal } from 'antd'; ...@@ -12,6 +12,22 @@ import { Modal } from 'antd';
import moment from 'moment'; import moment from 'moment';
import './PreviewCourseModal.less'; import './PreviewCourseModal.less';
const courseStateShow = {
UN_START: {
title: "待上课",
},
STARTING: {
title: "上课中",
},
FINISH: {
title: "已完成",
},
EXPIRED: {
code: 4,
title: "未成功开课",
color: "#CCCCCC",
},
};
class PreviewCourseModal extends React.Component { class PreviewCourseModal extends React.Component {
constructor(props) { constructor(props) {
...@@ -48,14 +64,30 @@ class PreviewCourseModal extends React.Component { ...@@ -48,14 +64,30 @@ class PreviewCourseModal extends React.Component {
render() { render() {
const { courseBasicInfo, courseClassInfo = {}, courseIntroInfo, type } = this.props; const { courseBasicInfo, courseClassInfo = {}, courseIntroInfo, type,courseState} = this.props;
const { coverUrl, courseName, scheduleVideoUrl } = courseBasicInfo; const { coverUrl, courseName, scheduleVideoUrl } = courseBasicInfo;
const { liveDate, calendarTime,timeHorizonStart, timeHorizonEnd, teacherName } = courseClassInfo; const { liveDate, calendarTime,startTime,endTime,timeHorizonStart, timeHorizonEnd, teacherName } = courseClassInfo;
const { liveCourseMediaRequests } = courseIntroInfo; const { liveCourseMediaRequests } = courseIntroInfo;
let liveDateStr, startTimeStr, endTimeStr; let liveDateStr, startTimeStr, endTimeStr;
if (liveDate) { if (type === 'add') {
const _liveDate = moment(calendarTime[0]).format("YYYY-MM-DD");
console.log("_liveDate",_liveDate);
const _timeHorizonStart = moment(startTime).format('HH:mm');
const _timeHorizonEnd = moment(endTime).format('HH:mm');
const _startTime = moment(_liveDate + ' ' + _timeHorizonStart).format('x');
const _endTime = moment(_liveDate + ' ' + _timeHorizonEnd).format('x');
const {
liveDateStr: _liveDateStr,
startTimeStr: _startTimeStr,
endTimeStr: _endTimeStr
} = this.dealWithTime(_startTime, _endTime);
liveDateStr = _liveDateStr;
startTimeStr = _startTimeStr;
endTimeStr = _endTimeStr;
}else{
const _liveDate = moment(liveDate).format("YYYY-MM-DD"); const _liveDate = moment(liveDate).format("YYYY-MM-DD");
const _timeHorizonStart = moment(timeHorizonStart).format('HH:mm'); const _timeHorizonStart = moment(timeHorizonStart).format('HH:mm');
const _timeHorizonEnd = moment(timeHorizonEnd).format('HH:mm'); const _timeHorizonEnd = moment(timeHorizonEnd).format('HH:mm');
...@@ -106,13 +138,13 @@ class PreviewCourseModal extends React.Component { ...@@ -106,13 +138,13 @@ class PreviewCourseModal extends React.Component {
<div className="container__body"> <div className="container__body">
<div className="container__body__title"> <div className="container__body__title">
<div className="title__name">{courseName}</div> <div className="title__name">{courseName}</div>
<div className="title__state">待开课</div> <div className="title__state">{courseStateShow[courseState].title}</div>
</div> </div>
<div className="container__body__time"> <div className="container__body__time">
<span className="time__label">上课时间：</span> <span className="time__label">上课时间：</span>
<span className="time__value"> <span className="time__value">
{ {
liveDate && timeHorizonStart && timeHorizonEnd &&
[ [
<span>{liveDateStr}&nbsp;</span>, <span>{liveDateStr}&nbsp;</span>,
<span>{startTimeStr}~{endTimeStr }</span> <span>{startTimeStr}~{endTimeStr }</span>
......
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