Skip to content

X
xiaomai-cloud-class-web
Commit a0698067 by chenshu
Options

fix:修复管理端部分问题

parent 0dae0773
Showing with 245 additions and 88 deletions
src/modules/course-manage/offline-course/AddOfflineCourse.jsx
...@@ -226,7 +226,7 @@ class AddOfflineCourse extends React.Component { ...@@ -226,7 +226,7 @@ class AddOfflineCourse extends React.Component {
signInType, signInType,
signOutType, signOutType,
isEditDisablie: whetherHaveApply === 'YES', isEditDisablie: whetherHaveApply === 'YES',
}, () => this.handleShowPreviewModal()); });
}) })
} }
...@@ -281,6 +281,19 @@ class AddOfflineCourse extends React.Component { ...@@ -281,6 +281,19 @@ class AddOfflineCourse extends React.Component {
introduce, introduce,
categoryName, categoryName,
offlinePlace, offlinePlace,
whetherSetApply,
startTimeApply,
endTimeApply,
whetherSetSignIn,
whetherSetSignOut,
signInType,
signOutType,
signInTimeNum,
signInTimeUnit,
signOutStartTimeNum,
signOutStartTimeUnit,
signOutEndTimeNum,
signOutEndTimeUnit,
} = this.state; } = this.state;
const data = { const data = {
...@@ -291,6 +304,19 @@ class AddOfflineCourse extends React.Component { ...@@ -291,6 +304,19 @@ class AddOfflineCourse extends React.Component {
categoryName, categoryName,
introduce, introduce,
offlinePlace, offlinePlace,
whetherSetApply,
startTimeApply,
endTimeApply,
whetherSetSignIn,
whetherSetSignOut,
signInType,
signOutType,
signInTimeNum,
signInTimeUnit,
signOutStartTimeNum,
signOutStartTimeUnit,
signOutEndTimeNum,
signOutEndTimeUnit,
} }
const previewOfflineModal = ( const previewOfflineModal = (
<PreviewOfflineModal <PreviewOfflineModal
...@@ -449,6 +475,7 @@ class AddOfflineCourse extends React.Component { ...@@ -449,6 +475,7 @@ class AddOfflineCourse extends React.Component {
signOutStartTimeUnit, signOutStartTimeUnit,
signOutEndTimeNum, signOutEndTimeNum,
signOutEndTimeUnit, signOutEndTimeUnit,
isMore,
} = this.state; } = this.state;
let coverObj ={ let coverObj ={
...@@ -476,6 +503,7 @@ class AddOfflineCourse extends React.Component { ...@@ -476,6 +503,7 @@ class AddOfflineCourse extends React.Component {
startTime, startTime,
endTime, endTime,
calendarTime, calendarTime,
isMore,
}; };
if (whetherSetApply === 'YES') { if (whetherSetApply === 'YES') {
...@@ -581,6 +609,9 @@ class AddOfflineCourse extends React.Component { ...@@ -581,6 +609,9 @@ class AddOfflineCourse extends React.Component {
} else if(data.whetherSetSignOut === 'YES' && ((data.signOutType === 'START_LATER' && !data.signOutStartTimeNum) || !data.signOutEndTimeNum)){ } else if(data.whetherSetSignOut === 'YES' && ((data.signOutType === 'START_LATER' && !data.signOutStartTimeNum) || !data.signOutEndTimeNum)){
message.warning('请输入签退时间'); message.warning('请输入签退时间');
resolve(false); resolve(false);
} else if (data.isMore) {
message.warning('简介超过字数限定');
resolve(false);
} else { } else {
resolve(true); resolve(true);
} }
...@@ -633,8 +664,12 @@ class AddOfflineCourse extends React.Component { ...@@ -633,8 +664,12 @@ class AddOfflineCourse extends React.Component {
}); });
} }
changeIntro = (value) => { changeIntro = (value, textLength) => {
this.setState({ introduce: value }); const isMore = textLength > 1000;
if (isMore) {
message.warning('内容过长，不能超过1000字');
}
this.setState({ introduce: value, isMore });
} }
selectMultiDate = (calendarTime) => { selectMultiDate = (calendarTime) => {
...@@ -874,7 +909,9 @@ class AddOfflineCourse extends React.Component { ...@@ -874,7 +909,9 @@ class AddOfflineCourse extends React.Component {
detail={{ detail={{
content: introduce content: introduce
}} }}
onChange={(val) => { this.changeIntro(val) }} onChange={(val, textLength) => {
this.changeIntro(val, textLength)
}}
/> />
} }
</div> </div>
...@@ -960,7 +997,14 @@ class AddOfflineCourse extends React.Component { ...@@ -960,7 +997,14 @@ class AddOfflineCourse extends React.Component {
<Switch <Switch
disabled={isEditDisablie} disabled={isEditDisablie}
checked={whetherSetApply === 'YES'} checked={whetherSetApply === 'YES'}
onChange={(value) => this.setState({ whetherSetApply: value ? 'YES' : 'NO' })} onChange={(value) => {
this.setState({
whetherSetApply: value ? 'YES' : 'NO',
startTimeApply: undefined,
endTimeApply: undefined,
quota: null,
});
}}
/> />
<span className="switch-tip">开启后可设置课程报名时间，获取报名数据</span> <span className="switch-tip">开启后可设置课程报名时间，获取报名数据</span>
</div> </div>
...@@ -1000,7 +1044,17 @@ class AddOfflineCourse extends React.Component { ...@@ -1000,7 +1044,17 @@ class AddOfflineCourse extends React.Component {
<span className="label">考勤签到：</span> <span className="label">考勤签到：</span>
<div className="switch-box"> <div className="switch-box">
<div className="switch-item" key="1"> <div className="switch-item" key="1">
<Switch checked={whetherSetSignIn === 'YES'} onChange={(value) => this.setState({ whetherSetSignIn: value ? 'YES' : 'NO' })} /> <Switch
checked={whetherSetSignIn === 'YES'}
onChange={(value) => {
this.setState({
whetherSetSignIn: value ? 'YES' : 'NO',
signInType: 'START_AGO',
signInTimeNum: 1,
signInTimeUnit: 'MINUTE',
})
}}
/>
<span className="switch-tip">开启后可设置获取签到考勤数据</span> <span className="switch-tip">开启后可设置获取签到考勤数据</span>
</div> </div>
{whetherSetSignIn === 'YES' && <div className="switch-item" key="2"> {whetherSetSignIn === 'YES' && <div className="switch-item" key="2">
...@@ -1051,7 +1105,19 @@ class AddOfflineCourse extends React.Component { ...@@ -1051,7 +1105,19 @@ class AddOfflineCourse extends React.Component {
<span className="label">考勤签退：</span> <span className="label">考勤签退：</span>
<div className="switch-box"> <div className="switch-box">
<div className="switch-item" key="1"> <div className="switch-item" key="1">
<Switch checked={whetherSetSignOut === 'YES'} onChange={(value) => this.setState({ whetherSetSignOut: value ? 'YES' : 'NO' })} /> <Switch
checked={whetherSetSignOut === 'YES'}
onChange={(value) => {
this.setState({
whetherSetSignOut: value ? 'YES' : 'NO',
signOutType: 'START_LATER',
signOutStartTimeNum: 1,
signOutStartTimeUnit: 'MINUTE',
signOutEndTimeNum: 1,
signOutEndTimeUnit: 'MINUTE',
})
}}
/>
<span className="switch-tip">开启后可设置获取签退考勤数据</span> <span className="switch-tip">开启后可设置获取签退考勤数据</span>
</div> </div>
{whetherSetSignOut === 'YES' && <div className="switch-item" key="2"> {whetherSetSignOut === 'YES' && <div className="switch-item" key="2">
......
src/modules/course-manage/offline-course/components/OfflineCourseList.jsx
...@@ -195,65 +195,18 @@ class OfflineCourseList extends React.Component { ...@@ -195,65 +195,18 @@ class OfflineCourseList extends React.Component {
} }
// 显示预览弹窗 // 显示预览弹窗
handleShowPreviewModal = (query) => { handleShowPreviewModal = (courseId) => {
const { const previewOfflineModal = (
courseName, <PreviewOfflineModal
startTime, courseId={courseId}
endTime, close={() => {
categoryName, this.setState({
offlinePlace, previewOfflineModal: null
courseMediaVOS, })
} = query; }}
let coverUrl = ''; />
courseMediaVOS.map((item) => { );
switch (item.contentType){ this.setState({ previewOfflineModal });
case "COVER":
coverUrl = item.mediaUrl;
break;
case "INTRO":
this.getTextDetail('introduce', item.mediaUrl);
break;
default:
break;
}
return item;
})
setTimeout(() => {
const { introduce } = this.state;
const data = {
coverUrl,
courseName,
startTime,
endTime,
categoryName,
introduce,
offlinePlace,
}
const previewOfflineModal = (
<PreviewOfflineModal
data={data}
close={() => {
this.setState({
previewOfflineModal: null
})
}}
/>
);
this.setState({ previewOfflineModal });
}, 500)
}
getTextDetail = (key, url) => {
$.ajax({
data: {},
type: 'GET',
url,
contentType:'application/x-www-form-urlencoded; charset=UTF-8',
success: (res) => {
this.setState({ [key]: res, [`load${key}`]: true });
}
})
} }
renderMoreOperate = (item) => { renderMoreOperate = (item) => {
...@@ -270,7 +223,7 @@ class OfflineCourseList extends React.Component { ...@@ -270,7 +223,7 @@ class OfflineCourseList extends React.Component {
className="operate__item" className="operate__item"
key="preview" key="preview"
onClick={() => { onClick={() => {
this.handleShowPreviewModal(item); this.handleShowPreviewModal(item.courseId);
}} }}
>预览</div> >预览</div>
{(item.courseState === 'UN_START' || item.courseState === 'STARTING') && <div {(item.courseState === 'UN_START' || item.courseState === 'STARTING') && <div
......
src/modules/course-manage/offline-course/modal/PreviewOfflineModal.jsx
import React from 'react'; import React from 'react';
import { Modal } from 'antd'; import { Modal } from 'antd';
import './PreviewOfflineModal.less';
import moment from 'moment'; import moment from 'moment';
import $ from 'jquery';
import Service from "@/common/js/service";
import './PreviewOfflineModal.less';
const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'; const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
...@@ -9,10 +11,56 @@ class PreviewOfflineModal extends React.Component { ...@@ -9,10 +11,56 @@ class PreviewOfflineModal extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {
}
} }
render() { componentDidMount() {
const { data } = this.props; const { data } = this.props;
_.isEmpty(data) ? this.getCourseDetail() : this.setState({ ...data });
}
getCourseDetail = () => {
Service.Hades('public/hades/getOfflineCourseDetail', {
courseId: this.props.courseId,
}).then((res) => {
if (res.success) {
const { result } = res;
let coverUrl = '';
result.courseMediaVOS.map((item) => {
switch (item.contentType){
case "COVER":
coverUrl = item.mediaUrl;
break;
case "INTRO":
this.getTextDetail('introduce', item.mediaUrl);
break;
default:
break;
}
return item;
})
this.setState({
...result,
coverUrl,
})
}
})
}
getTextDetail = (key, url) => {
$.ajax({
data: {},
type: 'GET',
url,
contentType:'application/x-www-form-urlencoded; charset=UTF-8',
success: (res) => {
this.setState({ [key]: res, [`load${key}`]: true });
}
})
}
render() {
const { const {
coverUrl, coverUrl,
courseName, courseName,
...@@ -21,7 +69,32 @@ class PreviewOfflineModal extends React.Component { ...@@ -21,7 +69,32 @@ class PreviewOfflineModal extends React.Component {
startTime, startTime,
endTime, endTime,
offlinePlace, offlinePlace,
} = data; whetherSetApply,
startTimeApply,
endTimeApply,
whetherSetSignIn,
whetherSetSignOut,
signInType,
signOutType,
signInTimeNum,
signInTimeUnit,
signOutStartTimeNum,
signOutStartTimeUnit,
signOutEndTimeNum,
signOutEndTimeUnit,
} = this.state;
const unit = (signInTimeUnit || '').toLocaleLowerCase() + 's';
const time = moment(signInType == 'START_AGO' ? startTime : endTime).subtract(signInTimeNum, unit);
const signInTime = `${moment(time).format('HH:mm')} ~ ${moment(signInType == 'START_AGO' ? startTime : endTime).format('HH:mm')}`;
const endUnit = (signOutEndTimeUnit || '').toLocaleLowerCase() + 's';
const end = moment(endTime).add(signOutEndTimeNum, endUnit);
let startUnit = '';
let start = '';
if (signOutType === 'START_LATER') {
startUnit = (signOutStartTimeUnit || '').toLocaleLowerCase() + 's';
start = moment(startTime).add(signOutStartTimeNum, startUnit);
}
const signOutTime = signOutType === 'START_LATER' ? `${moment(start).format('HH:mm')} ~ ${moment(end).format('HH:mm')}` : `${moment(endTime).format('HH:mm')} ~ ${moment(end).format('HH:mm')}`;
return ( return (
<Modal <Modal
title="预览" title="预览"
...@@ -57,6 +130,23 @@ class PreviewOfflineModal extends React.Component { ...@@ -57,6 +130,23 @@ class PreviewOfflineModal extends React.Component {
<div className="container__introduction"> <div className="container__introduction">
<div className="title">线下课简介</div> <div className="title">线下课简介</div>
<div className="container__introduction__list editor-box"> <div className="container__introduction__list editor-box">
{whetherSetApply === 'YES' && <div className="course-time">
<div className="time-title">报名时间</div>
<div className="time-text">{moment(startTimeApply).format('MM-DD HH:mm')} ~ {moment(endTimeApply).format('MM-DD HH:mm')}</div>
</div>}
{(whetherSetSignIn === 'YES' || whetherSetSignOut === 'YES') && <div className="course-time">
<div className="time-title">考勤时间</div>
{whetherSetSignIn === 'YES' &&
<div className="time-text">
签到：{signInTime}
</div>
}
{whetherSetSignOut === 'YES' &&
<div className="time-text">
签退：{signOutTime}
</div>
}
</div>}
<div <div
className="intro-item text" className="intro-item text"
dangerouslySetInnerHTML={{ dangerouslySetInnerHTML={{
......
src/modules/course-manage/offline-course/modal/PreviewOfflineModal.less
...@@ -33,6 +33,13 @@ ...@@ -33,6 +33,13 @@
.title__categery { .title__categery {
font-size: 12px; font-size: 12px;
color: #999999; color: #999999;
display: flex;
align-items: center;
.item-icon {
width: 12px;
height: 12px;
margin-right: 4px;
}
} }
} }
...@@ -49,6 +56,7 @@ ...@@ -49,6 +56,7 @@
background: #F4F6FA; background: #F4F6FA;
} }
.title { .title {
position: relative;
height: 24px; height: 24px;
display: flex; display: flex;
align-items: center; align-items: center;
...@@ -56,29 +64,69 @@ ...@@ -56,29 +64,69 @@
font-size: 12px; font-size: 12px;
color: #333333; color: #333333;
padding: 0 10px; padding: 0 10px;
border-bottom: 1px solid #E8E8E8; border: none !important;
.title-word { &::before {
position: relative; content: '';
margin-right: 15px; position: absolute;
cursor: pointer; width: 12px;
height: 1px;
top: 12px;
left: 50%;
transform: translateX(-50px);
background: #ccc;
} }
.selected { &::after {
color: #FFB714; content: '';
&::after { position: absolute;
content: ''; width: 12px;
position: absolute; height: 1px;
bottom: -4px; top: 12px;
width: 20px; left: 50%;
height: 1px; transform: translateX(36px);
background: #FFB714; background: #ccc;
left: 50%;
transform: translateX(-50%);
}
} }
} }
&__list { &__list {
margin-top: 12px; margin-top: 8px;
.course-time {
margin: 0 16px 8px;
.time-title {
position: relative;
padding-left: 6px;
font-size: 12px;
color: #333;
line-height: 18px;
&::before {
position: absolute;
content: '';
width: 2px;
height: 14px;
background: #FFB714;
left: 0;
top: 2px;
}
}
.time-text {
padding-left: 6px;
font-size: 12px;
color: #999999;
line-height: 18px;
.time-tag {
padding: 0 8px;
font-size: 12px;
height: 18px;
border-radius: 2px;
background: rgba(32, 206, 205, 0.1);
color: #20CECD;
margin-left: 8px;
&.apply {
color: #FF4F4F;
background: rgba(255, 79, 79, 0.1);
}
}
}
}
.intro-item:not(:first-child) { .intro-item:not(:first-child) {
margin-top: 13px; margin-top: 13px;
} }
......
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