Skip to content

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

fix:修复管理端部分问题

parent 0dae0773
Showing with 230 additions and 73 deletions
src/modules/course-manage/offline-course/AddOfflineCourse.jsx
......@@ -226,7 +226,7 @@ class AddOfflineCourse extends React.Component {
signInType,
signOutType,
isEditDisablie: whetherHaveApply === 'YES',
}, () => this.handleShowPreviewModal());
});
})
}
......@@ -281,6 +281,19 @@ class AddOfflineCourse extends React.Component {
introduce,
categoryName,
offlinePlace,
whetherSetApply,
startTimeApply,
endTimeApply,
whetherSetSignIn,
whetherSetSignOut,
signInType,
signOutType,
signInTimeNum,
signInTimeUnit,
signOutStartTimeNum,
signOutStartTimeUnit,
signOutEndTimeNum,
signOutEndTimeUnit,
} = this.state;
const data = {
......@@ -291,6 +304,19 @@ class AddOfflineCourse extends React.Component {
categoryName,
introduce,
offlinePlace,
whetherSetApply,
startTimeApply,
endTimeApply,
whetherSetSignIn,
whetherSetSignOut,
signInType,
signOutType,
signInTimeNum,
signInTimeUnit,
signOutStartTimeNum,
signOutStartTimeUnit,
signOutEndTimeNum,
signOutEndTimeUnit,
}
const previewOfflineModal = (
<PreviewOfflineModal
......@@ -449,6 +475,7 @@ class AddOfflineCourse extends React.Component {
signOutStartTimeUnit,
signOutEndTimeNum,
signOutEndTimeUnit,
isMore,
} = this.state;
let coverObj ={
......@@ -476,6 +503,7 @@ class AddOfflineCourse extends React.Component {
startTime,
endTime,
calendarTime,
isMore,
};
if (whetherSetApply === 'YES') {
......@@ -581,6 +609,9 @@ class AddOfflineCourse extends React.Component {
} else if(data.whetherSetSignOut === 'YES' && ((data.signOutType === 'START_LATER' && !data.signOutStartTimeNum) || !data.signOutEndTimeNum)){
message.warning('请输入签退时间');
resolve(false);
} else if (data.isMore) {
message.warning('简介超过字数限定');
resolve(false);
} else {
resolve(true);
}
......@@ -633,8 +664,12 @@ class AddOfflineCourse extends React.Component {
});
}
changeIntro = (value) => {
this.setState({ introduce: value });
changeIntro = (value, textLength) => {
const isMore = textLength > 1000;
if (isMore) {
message.warning('内容过长，不能超过1000字');
}
this.setState({ introduce: value, isMore });
}
selectMultiDate = (calendarTime) => {
......@@ -874,7 +909,9 @@ class AddOfflineCourse extends React.Component {
detail={{
content: introduce
}}
onChange={(val) => { this.changeIntro(val) }}
onChange={(val, textLength) => {
this.changeIntro(val, textLength)
}}
/>
}
</div>
......@@ -960,7 +997,14 @@ class AddOfflineCourse extends React.Component {
<Switch
disabled={isEditDisablie}
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>
</div>
......@@ -1000,7 +1044,17 @@ class AddOfflineCourse extends React.Component {
<span className="label">考勤签到：</span>
<div className="switch-box">
<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>
</div>
{whetherSetSignIn === 'YES' && <div className="switch-item" key="2">
......@@ -1051,7 +1105,19 @@ class AddOfflineCourse extends React.Component {
<span className="label">考勤签退：</span>
<div className="switch-box">
<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>
</div>
{whetherSetSignOut === 'YES' && <div className="switch-item" key="2">
......
src/modules/course-manage/offline-course/components/OfflineCourseList.jsx
......@@ -195,44 +195,10 @@ class OfflineCourseList extends React.Component {
}
// 显示预览弹窗
handleShowPreviewModal = (query) => {
const {
courseName,
startTime,
endTime,
categoryName,
offlinePlace,
courseMediaVOS,
} = query;
let coverUrl = '';
courseMediaVOS.map((item) => {
switch (item.contentType){
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,
}
handleShowPreviewModal = (courseId) => {
const previewOfflineModal = (
<PreviewOfflineModal
data={data}
courseId={courseId}
close={() => {
this.setState({
previewOfflineModal: null
......@@ -241,19 +207,6 @@ class OfflineCourseList extends React.Component {
/>
);
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) => {
......@@ -270,7 +223,7 @@ class OfflineCourseList extends React.Component {
className="operate__item"
key="preview"
onClick={() => {
this.handleShowPreviewModal(item);
this.handleShowPreviewModal(item.courseId);
}}
>预览</div>
{(item.courseState === 'UN_START' || item.courseState === 'STARTING') && <div
......
src/modules/course-manage/offline-course/modal/PreviewOfflineModal.jsx
import React from 'react';
import { Modal } from 'antd';
import './PreviewOfflineModal.less';
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';
......@@ -9,10 +11,56 @@ class PreviewOfflineModal extends React.Component {
constructor(props) {
super(props);
this.state = {
}
}
render() {
componentDidMount() {
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 {
coverUrl,
courseName,
......@@ -21,7 +69,32 @@ class PreviewOfflineModal extends React.Component {
startTime,
endTime,
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 (
<Modal
title="预览"
......@@ -57,6 +130,23 @@ class PreviewOfflineModal extends React.Component {
<div className="container__introduction">
<div className="title">线下课简介</div>
<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
className="intro-item text"
dangerouslySetInnerHTML={{
......
src/modules/course-manage/offline-course/modal/PreviewOfflineModal.less
......@@ -33,6 +33,13 @@
.title__categery {
font-size: 12px;
color: #999999;
display: flex;
align-items: center;
.item-icon {
width: 12px;
height: 12px;
margin-right: 4px;
}
}
}
......@@ -49,6 +56,7 @@
background: #F4F6FA;
}
.title {
position: relative;
height: 24px;
display: flex;
align-items: center;
......@@ -56,29 +64,69 @@
font-size: 12px;
color: #333333;
padding: 0 10px;
border-bottom: 1px solid #E8E8E8;
.title-word {
position: relative;
margin-right: 15px;
cursor: pointer;
border: none !important;
&::before {
content: '';
position: absolute;
width: 12px;
height: 1px;
top: 12px;
left: 50%;
transform: translateX(-50px);
background: #ccc;
}
.selected {
color: #FFB714;
&::after {
content: '';
position: absolute;
bottom: -4px;
width: 20px;
width: 12px;
height: 1px;
background: #FFB714;
top: 12px;
left: 50%;
transform: translateX(-50%);
}
transform: translateX(36px);
background: #ccc;
}
}
&__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) {
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