Skip to content

X
xiaomai-cloud-class-web
Commit 8bc4f351 by maolipeng
Options

feat:添加上课信息

parent b0efcce5
Showing with 260 additions and 98 deletions
src/modules/course-manage/components/AddLiveClass.jsx
......@@ -75,7 +75,7 @@ class AddLiveClass extends React.Component {
// 获取助教老师列表
getAssistantList = (current = 1, selectList) => {
const { assistantQuery,assistantList} = this.state;
const { assistantStoreUserId } = this.props.data;
const { assistantStoreUserId } = this.props.data ? this.props.data:[];
const idList = selectList ? selectList : assistantStoreUserId;
const _query = {
...assistantQuery,
......
src/modules/course-manage/components/AddLiveClassInfoWorkWX.jsx 0 → 100644
import React, { useEffect, useState } from "react";
import { DatePicker, Select } from 'antd';
import StoreService from "@/domains/store-domain/storeService";
import "./AddLiveClassInfoWorkWX.less";
import GraphicsEditor from "./GraphicsEditor";
const { Option } = Select;
const defaultTeacherQuery = {
size: 15,
current: 1,
nickName:null
}
export default function AddLiveClassInfoWorkWX(props) {
const [teacherQuery, setTeacherQuery] = useState(defaultTeacherQuery)
const [teacherList, setTeacherList] = useState([])
const [introduce, setIntroduce] = useState()
useEffect(()=> {
getTeacherList()
},[])
function onBeginTimeChange(date, dateString) {
props.onChange("beginTime",date.valueOf())
}
function onBeginTimeOK() {
}
function onDurationChange(value, option) {
}
function onRemindChange(value, option) {
}
function onChangeIntro(val) {
props.onChange("intro",val)
}
function getTeacherList(current = 1) {
const _query = {
...teacherQuery,
current,
size:15
};
StoreService.getStoreUserBasicPage( _query).then((res) => {
const { result = {} } = res;
const { records = [], total = 0, hasNext } = result;
const list = current > 1 ? teacherList.concat(records) : records;
setTeacherList(list)
setTeacherQuery({..._query,hasNext})
});
}
return (
<div className="AddLiveClassInfoWorkWX">
<div className="begin-time item">
<span className="label"><span className="require">*</span>开始时间：</span>
<DatePicker showTime onChange={onBeginTimeChange} onOk={onBeginTimeOK} />
</div>
<div className="duration-time item">
<span className="label"><span className="require">*</span>时长：</span>
<Select onChange={onDurationChange} defaultValue="60">
<Option value="30">0.5小时</Option>
<Option value="60">1.0小时</Option>
<Option value="120">2.0小时</Option>
<Option value="180">3.0小时</Option>
</Select>
</div>
<div className="teacher item">
<span className="label"><span className="require">*</span>讲师：</span>
<Select
onChange={onDurationChange}
style={{width:"240px"}}
placeholder="请选择讲师"
>
{
_.map(teacherList, (item, index) => {
return (
<Select.Option value={item.userId} key={item.userId}>{item.nickName}</Select.Option>
);
})
}
</Select>
</div>
<div className="remind-time item">
<span className="label"><span className="require">*</span>提醒时间：</span>
<Select onChange={onRemindChange} defaultValue="0" style={{width:"100px"}}>
<Option value="0">无</Option>
<Option value="5">5分钟前</Option>
<Option value="60">1小时前</Option>
<Option value="1440">1天前</Option>
</Select>
</div>
<div className="introduce item">
<span className="label">直播简介：</span>
<div className="intro-edit">
<GraphicsEditor
id='intro'
isIntro={true}
maxLimit={1000}
detail={{
content: introduce,
}}
onChange={(val) => {
onChangeIntro(val);
}}
></GraphicsEditor>
</div>
</div>
</div>
)
}
\ No newline at end of file
src/modules/course-manage/components/AddLiveIntro.jsx
......@@ -136,7 +136,7 @@ class AddLiveIntro extends React.Component {
<span className='label'>观看设置：</span>
<div className='content'>
<Switch checked={whetherVisitorsJoin === 'NO' ? true : false} onChange={this.whetherVisitorsJoinChange} />
<div class='instro-text'>{whetherVisitorsJoin === 'NO' ? '已开启，学员需绑定手机号才可观看' : '已关闭，学员无需绑定手机号即可观看'}</div>
<div className='instro-text'>{whetherVisitorsJoin === 'NO' ? '已开启，学员需绑定手机号才可观看' : '已关闭，学员无需绑定手机号即可观看'}</div>
</div>
</div>
<div className='warmup'>
......
src/modules/course-manage/components/CreateWorkWXCourse.tsx → src/modules/course-manage/components/CreateWorkWXCourse.jsx
......@@ -17,6 +17,7 @@ import Bus from '@/core/tbus';
import AddLiveBasic from './AddLiveBasic';
import AddLiveClass from './AddLiveClass';
import AddLiveIntro from './AddLiveIntro';
import AddLiveClassInfoWorkWX from './AddLiveClassInfoWorkWX';
import { randomString } from '@/domains/basic-domain/utils';
import Upload from '@/core/upload';
import PreviewCourseModal from '../modal/PreviewCourseModal';
......@@ -29,15 +30,9 @@ import $ from 'jquery';
import './CreateWorkWXCourse.less';
const defaultCover = 'https://image.xiaomaiketang.com/xm/Yip2YtFDwH.png';
interface BasicInfo {
[courseName: string]: string; // 课程名称
coverUrl: string;
coverId: string;
categoryId: string;
categoryName: string;
};
const defaultBasicInfo: BasicInfo = {
const defaultBasicInfo = {
courseName: '', // 课程名称
coverUrl: defaultCover,
coverId: '',
......@@ -45,24 +40,9 @@ const defaultBasicInfo: BasicInfo = {
categoryName: '',
}
interface ClassInfo {
teacherId: string; //讲师的Id
assistant: string[]; //助教
teacherName: string;
liveDate: number;
timeHorizonStart: number;
timeHorizonEnd: number;
calendarTime?: number[];
startTime: number;
endTime: number;
nickname?: string;
assistantStoreUserId?: string[];
assistantNames?: string[];
};
const defaultClassInfo: ClassInfo = {
const defaultClassInfo = {
teacherId: '', //讲师的Id
assistant: [], //助教
teacherName: '',
liveDate: 0,
timeHorizonStart: 0,
......@@ -71,54 +51,22 @@ const defaultClassInfo: ClassInfo = {
startTime: new Date().getTime() + 300000,
endTime: new Date().getTime() + 300000,
};
interface CourseMedia {
contentType?: string;
mediaContent?: string;
mediaType?: string;
mediaUrl?: string;
key?: number;
}
interface IntroInfo {
needRecord?: string,
whetherVisitorsJoin?: string,
liveCourseWarmMedia?: CourseMedia,
introduce?: string;
// 讲师简介
liveCourseMediaRequests?: CourseMedia[],
};
const defaultIntroInfo: IntroInfo = {
needRecord: 'YES',
whetherVisitorsJoin: 'NO',
liveCourseWarmMedia: {},
// 讲师简介
liveCourseMediaRequests: [
{
contentType: 'INTRO',
mediaType: 'TEXT',
mediaContent: '',
key: Math.random(),
},
],
};
interface CourseDetail {
teacherId: string;
teacherName: string;
courseName: string;
startTime: number;
endTime: number;
courseMediaVOS: CourseMedia[];
nickname?: string;
needRecord: string,
whetherVisitorsJoin: string;
warmMedia?: string;
categoryId: string;
categoryName: string;
admins: any[],
courseState: string;
}
// const defaultIntroInfo = {
// needRecord: 'YES',
// whetherVisitorsJoin: 'NO',
// liveCourseWarmMedia: {},
// // 讲师简介
// liveCourseMediaRequests: [
// {
// contentType: 'INTRO',
// mediaType: 'TEXT',
// mediaContent: '',
// key: Math.random(),
// },
// ],
// };
function CreateWorkWXCourse() {
const [id, setId] = useState(getParameterByName('id'))
......@@ -128,10 +76,10 @@ function CreateWorkWXCourse() {
const [courseState, setCourseState] = useState('UN_START')
const [editorTextLength, setEditorTextLength] = useState(0)
const [loadintroduce, setLoadintroduce] = useState(false)
const [addLiveBasicInfo, setAddLiveBasicInfo] = useState<BasicInfo>({courseName:'',coverUrl:'',coverId:'',categoryId:'',categoryName:''})
const [addLiveClassInfo, setAddLiveClassInfo] = useState<any>()
const [addLiveIntroInfo, setAddLiveIntroInfo] = useState<any>({})
const [previewLiveCourseModal, setPreviewLiveCourseModal] = useState<ReactElement|null>()
const [addLiveBasicInfo, setAddLiveBasicInfo] = useState(defaultBasicInfo)
const [addLiveClassInfo, setAddLiveClassInfo] = useState()
const [addLiveIntroInfo, setAddLiveIntroInfo] = useState({})
const [previewLiveCourseModal, setPreviewLiveCourseModal] = useState()
// this.state = {
// // 直播课基本信息
// addLiveBasicInfo: {
......@@ -172,7 +120,7 @@ function CreateWorkWXCourse() {
if (type === 'edit') {
getCourseDetail();
}
Bus.bind('editorLimit', (editorTextLength:number) => {
Bus.bind('editorLimit', (editorTextLength) => {
setEditorTextLength(editorTextLength)
});
},[])
......@@ -197,13 +145,13 @@ function CreateWorkWXCourse() {
categoryName,
admins,
courseState,
} = res.result as CourseDetail;
let coverId: string|undefined = '';
} = res.result;
let coverId;
let coverUrl;
let liveCourseMediaRequests: any[] = [];
let liveCourseMediaRequests = [];
let liveCourseWarmMedia;
let hasIntro = false;
courseMediaVOS.map((item:CourseMedia) => {
courseMediaVOS.map((item) => {
switch (item.contentType) {
case 'COVER':
coverId = item.mediaContent;
......@@ -223,7 +171,7 @@ function CreateWorkWXCourse() {
return item;
});
const addLiveBasicInfo: BasicInfo = {
const addLiveBasicInfo = {
courseName,
coverUrl: coverUrl || defaultCover,
coverId,
......@@ -237,7 +185,7 @@ function CreateWorkWXCourse() {
const assistant = _.pluck(admins, 'adminId');
const assistantStoreUserId = _.pluck(admins, 'adminStoreUserId'); //编辑时的选中的助教的查询用storeUserId查询
const assistantNames = _.pluck(admins, 'adminName');
const addLiveClassInfo: ClassInfo = {
const addLiveClassInfo = {
assistant,
liveDate,
nickname,
......@@ -251,7 +199,7 @@ function CreateWorkWXCourse() {
assistantStoreUserId,
};
const addLiveIntroInfo: IntroInfo = {
const addLiveIntroInfo = {
liveCourseWarmMedia,
needRecord,
whetherVisitorsJoin,
......@@ -271,7 +219,7 @@ function CreateWorkWXCourse() {
});
};
function getIntroduce(key: string, url: string|undefined) {
function getIntroduce(key, url) {
$.ajax({
data: {},
type: 'GET',
......@@ -291,14 +239,14 @@ function CreateWorkWXCourse() {
// 修改基本信息
// 修改基本信息
function handleChangeBasicInfo(field: string, value: string) {
function handleChangeBasicInfo(field, value) {
let binfo = {...addLiveBasicInfo}
binfo[field] = value
setAddLiveBasicInfo(binfo)
};
// 修改上课信息
function handleChangeClassInfo(field: string, value: any, type: any, optionValue: any) {
function handleChangeClassInfo(field, value, type, optionValue) {
const _value = value ? value.valueOf() : null;
const { teacherName, assistantNames, assistantStoreUserId } = addLiveClassInfo;
let _addLiveClassInfo = {
......@@ -311,11 +259,26 @@ function CreateWorkWXCourse() {
setAddLiveClassInfo(_addLiveClassInfo)
};
function onClassInfoChange(field, value) {
switch (field) {
case 'intro':
let introinfo = {...addLiveIntroInfo}
introinfo.introduce = value
setAddLiveIntroInfo(introinfo)
break;
case 'beginTime':
let classinfo = {...addLiveClassInfo}
classinfo.startTime = value
setAddLiveClassInfo(classinfo)
break;
default:
console.log("NULL")
}
}
// 修改简介
function handleChangeIntroInfo(field: string, value: any) {
let introinfo = {...addLiveIntroInfo}
introinfo[field] = value
setAddLiveIntroInfo(introinfo)
function handleChangeIntroInfo(field, value) {
};
// 完成创建/编辑
......@@ -351,7 +314,7 @@ function CreateWorkWXCourse() {
Upload.uploadTextToOSS(
addLiveIntroInfo.introduce,
`${randomString()}.txt`,
(introduceId:any) => {
(introduceId) => {
submitRemote({ introduceId, addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, id });
},
() => message.warning('上传课程简介失败')
......@@ -573,7 +536,7 @@ function CreateWorkWXCourse() {
// const { id, type, addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, isEdit, loadintroduce } = this.state;
return (
<div className='page add-live-page'>
<div className='page CreateWorkWXCourse'>
<Breadcrumbs navList={type == 'add' ? '新建直播课' : '编辑直播课'} goBack={handleGoBack} />
<div className='box'>
<div className='show-tips'>
......@@ -587,13 +550,10 @@ function CreateWorkWXCourse() {
<div className='class-info__wrap'>
<div className='title'>上课信息</div>
<AddLiveClass isEdit={isEdit} pageType={type} data={{ ...addLiveClassInfo, id }} onChange={handleChangeClassInfo} />
{/* <AddLiveClass isEdit={isEdit} pageType={type} data={{ ...addLiveClassInfo, id }} onChange={handleChangeClassInfo} /> */}
<AddLiveClassInfoWorkWX onChange={onClassInfoChange}/>
</div>
<div className='intro-info__wrap'>
<div className='title'>更多信息</div>
<AddLiveIntro isEdit={isEdit} data={{ ...addLiveIntroInfo, loadintroduce, id }} onChange={handleChangeIntroInfo} />
</div>
</div>
</div>
......
src/modules/course-manage/components/CreateWorkWXCourse.less
.CreateWorkWXCourse {
.box {
margin-bottom: 52px !important;
}
.add-live-page__form {
margin-top: 16px;
.title {
font-size: 16px;
color: #333;
font-weight: 500;
line-height: 22px;
margin-bottom:8px;
}
.add-live__class-info {
margin-left: 14px;
.student {
margin-bottom: 16px;
}
}
.add-live__basic-info {
.course-name {
margin-left: 14px;
}
}
.add-live__intro-info {
margin-left: 50px;
}
.class-info__wrap{
margin-top: 32px;
}
.intro-info__wrap {
margin-top: 32px;
margin-bottom:74px;
}
.add-live__intro-info {
margin-left: 0;
padding-left: 16px;
.label {
width: 100px;
text-align: right;
}
}
.basic-info__wrap, .class-info__wrap, .intro-info__wrap {
.title {
position: relative;
padding-left: 14px;
&::before {
content: "";
position: absolute;
left: 0px;
top: 50%;
transform: translateY(-50%);
width: 4px;
height: 10px;
background: #2966FF;
}
}
}
}
.footer {
position: fixed;
left: 196px;
bottom: 0;
height: 58px;
width: ~'calc(100% - 218px)';
display: flex;
align-items: center;
justify-content: flex-end;
padding-right: 72px;
background: #fff;
border-top: 1px solid #E8E8E8;
z-index: 9999;
.ant-btn {
margin-left: 10px;
}
}
}
\ No newline at end of file
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