|
|
|
@ -1,19 +1,48 @@
|
|
|
|
|
import React,{ Component } from "react";
|
|
|
|
|
import { Modal , Form , Input , Spin } from 'antd';
|
|
|
|
|
import { Modal , Form , Input , Spin , Select , AutoComplete , DatePicker , InputNumber } from 'antd';
|
|
|
|
|
import locale from 'antd/lib/date-picker/locale/zh_CN';
|
|
|
|
|
import moment from 'moment';
|
|
|
|
|
import { handleDateString } from 'educoder';
|
|
|
|
|
|
|
|
|
|
import './video.css';
|
|
|
|
|
import axios from 'axios';
|
|
|
|
|
|
|
|
|
|
const { TextArea } = Input;
|
|
|
|
|
const { Option } = Select;
|
|
|
|
|
// ,'威佰通'
|
|
|
|
|
const array=['腾讯课堂','B站','斗鱼'];
|
|
|
|
|
|
|
|
|
|
function range(start, end) {
|
|
|
|
|
const result = [];
|
|
|
|
|
for (let i = start; i < end; i++) {
|
|
|
|
|
result.push(i);
|
|
|
|
|
}
|
|
|
|
|
return result;
|
|
|
|
|
}
|
|
|
|
|
function disabledDateTime() {
|
|
|
|
|
return {
|
|
|
|
|
disabledMinutes: () => range(1, 30).concat(range(31, 60)),
|
|
|
|
|
};
|
|
|
|
|
}
|
|
|
|
|
function disabledDate(current) {
|
|
|
|
|
return current && current < moment().endOf('day').subtract(1, 'days');
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
class LiveNew extends Component{
|
|
|
|
|
|
|
|
|
|
constructor(props){
|
|
|
|
|
super(props);
|
|
|
|
|
this.state={
|
|
|
|
|
isSpining:false
|
|
|
|
|
isSpining:false,
|
|
|
|
|
beginTime:undefined,
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidMount=()=>{
|
|
|
|
|
this.checkType();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidUpdate=(prevState)=>{
|
|
|
|
|
if(prevState && prevState.liveId !== this.props.liveId){
|
|
|
|
|
this.setState({
|
|
|
|
@ -25,7 +54,7 @@ class LiveNew extends Component{
|
|
|
|
|
|
|
|
|
|
checkType=()=>{
|
|
|
|
|
const { liveId } = this.props;
|
|
|
|
|
|
|
|
|
|
this.clearAll();
|
|
|
|
|
if(liveId){
|
|
|
|
|
const url =`/live_links/${liveId}/edit.json`;
|
|
|
|
|
axios.get(url).then(result=>{
|
|
|
|
@ -33,14 +62,15 @@ class LiveNew extends Component{
|
|
|
|
|
this.props.form.setFieldsValue({
|
|
|
|
|
url:result.data.url,
|
|
|
|
|
description:result.data.description,
|
|
|
|
|
platform:result.data.platform || "腾讯课堂",
|
|
|
|
|
duration:result.data.duration,
|
|
|
|
|
course_name:result.data.course_name
|
|
|
|
|
})
|
|
|
|
|
this.setState({
|
|
|
|
|
beginTime:result.data.live_time && moment(result.data.live_time,"YYYY-MM-DD HH:mm")
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
})
|
|
|
|
|
}else{
|
|
|
|
|
this.props.form.setFieldsValue({
|
|
|
|
|
url:undefined,
|
|
|
|
|
description:undefined
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
this.setState({
|
|
|
|
|
isSpining:false
|
|
|
|
@ -50,7 +80,9 @@ class LiveNew extends Component{
|
|
|
|
|
handleSubmit=()=>{
|
|
|
|
|
this.props.form.validateFields((err, values) => {
|
|
|
|
|
if(!err){
|
|
|
|
|
console.log("2")
|
|
|
|
|
this.setState({
|
|
|
|
|
isSpining:true
|
|
|
|
|
})
|
|
|
|
|
const { liveId } = this.props;
|
|
|
|
|
if(liveId){
|
|
|
|
|
// 修改
|
|
|
|
@ -64,15 +96,23 @@ class LiveNew extends Component{
|
|
|
|
|
// 修改
|
|
|
|
|
updateFunc=(id,values)=>{
|
|
|
|
|
const url = `/live_links/${id}.json`;
|
|
|
|
|
const { beginTime } = this.state;
|
|
|
|
|
axios.put(url,{
|
|
|
|
|
...values
|
|
|
|
|
...values,
|
|
|
|
|
live_time:beginTime
|
|
|
|
|
}).then(result=>{
|
|
|
|
|
if(result){
|
|
|
|
|
this.props.showNotification("修改成功!");
|
|
|
|
|
const { setliveVisibel } = this.props;
|
|
|
|
|
setliveVisibel && setliveVisibel(false,true);
|
|
|
|
|
}
|
|
|
|
|
this.setState({
|
|
|
|
|
isSpining:false
|
|
|
|
|
})
|
|
|
|
|
}).catch(error=>{
|
|
|
|
|
this.setState({
|
|
|
|
|
isSpining:false
|
|
|
|
|
})
|
|
|
|
|
console.log(error);
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
@ -81,15 +121,23 @@ class LiveNew extends Component{
|
|
|
|
|
creatFunc=(values)=>{
|
|
|
|
|
const CourseId=this.props.match.params.coursesId;
|
|
|
|
|
const url = `/courses/${CourseId}/live_links.json`;
|
|
|
|
|
const { beginTime } = this.state;
|
|
|
|
|
axios.post(url,{
|
|
|
|
|
...values
|
|
|
|
|
...values,
|
|
|
|
|
live_time:beginTime
|
|
|
|
|
}).then(result=>{
|
|
|
|
|
if(result){
|
|
|
|
|
this.props.showNotification("添加成功!");
|
|
|
|
|
const { setliveVisibel } = this.props;
|
|
|
|
|
setliveVisibel && setliveVisibel(false,true);
|
|
|
|
|
}
|
|
|
|
|
this.setState({
|
|
|
|
|
isSpining:false
|
|
|
|
|
})
|
|
|
|
|
}).catch(error=>{
|
|
|
|
|
this.setState({
|
|
|
|
|
isSpining:false
|
|
|
|
|
})
|
|
|
|
|
console.log(error);
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
@ -107,23 +155,44 @@ class LiveNew extends Component{
|
|
|
|
|
|
|
|
|
|
cancelNew=()=>{
|
|
|
|
|
const { setliveVisibel } = this.props;
|
|
|
|
|
this.clearAll();
|
|
|
|
|
setliveVisibel && setliveVisibel(false);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
clearAll=()=>{
|
|
|
|
|
this.props.form.setFieldsValue({
|
|
|
|
|
course_name:undefined,
|
|
|
|
|
platform:"腾讯课堂",
|
|
|
|
|
url:undefined,
|
|
|
|
|
description:undefined
|
|
|
|
|
description:undefined,
|
|
|
|
|
duration:undefined
|
|
|
|
|
})
|
|
|
|
|
this.setState({
|
|
|
|
|
beginTime:undefined
|
|
|
|
|
})
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
onChangeTime=(data,dateString)=>{
|
|
|
|
|
this.setState({
|
|
|
|
|
beginTime:handleDateString(dateString)
|
|
|
|
|
})
|
|
|
|
|
setliveVisibel && setliveVisibel(false);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
render(){
|
|
|
|
|
const { isSpining } = this.state;
|
|
|
|
|
const { isSpining , beginTime } = this.state;
|
|
|
|
|
const {getFieldDecorator} = this.props.form;
|
|
|
|
|
const { visible } = this.props;
|
|
|
|
|
|
|
|
|
|
const dataSource = array.map((item,key)=>{
|
|
|
|
|
return(
|
|
|
|
|
<Option value={item}>{item}</Option>
|
|
|
|
|
)
|
|
|
|
|
})
|
|
|
|
|
return(
|
|
|
|
|
<Modal
|
|
|
|
|
visible={visible}
|
|
|
|
|
width="560px"
|
|
|
|
|
title={'直播设置'}
|
|
|
|
|
title={'添加直播'}
|
|
|
|
|
footer={null}
|
|
|
|
|
closable={false}
|
|
|
|
|
className="liveModal"
|
|
|
|
@ -131,13 +200,58 @@ class LiveNew extends Component{
|
|
|
|
|
<Spin spinning={isSpining}>
|
|
|
|
|
<div className="task-popup-content">
|
|
|
|
|
<Form onSubmit={this.handleSubmit}>
|
|
|
|
|
<Form.Item label={`直播课程`}>
|
|
|
|
|
{getFieldDecorator('course_name', {
|
|
|
|
|
rules: [{required: true, message: "请输入课程名称"}],
|
|
|
|
|
})(
|
|
|
|
|
<Input placeholder="请输入课程名称" />
|
|
|
|
|
)}
|
|
|
|
|
</Form.Item>
|
|
|
|
|
<Form.Item label={`直播平台`}>
|
|
|
|
|
{getFieldDecorator('platform', {
|
|
|
|
|
rules: [{required: true, message: "请选择直播平台"}],
|
|
|
|
|
})(
|
|
|
|
|
<AutoComplete
|
|
|
|
|
placeholder="请选择或输入直播平台名称"
|
|
|
|
|
dataSource={dataSource}
|
|
|
|
|
>
|
|
|
|
|
</AutoComplete>
|
|
|
|
|
)}
|
|
|
|
|
</Form.Item>
|
|
|
|
|
<Form.Item label={`直播链接`}>
|
|
|
|
|
{getFieldDecorator('url', {
|
|
|
|
|
rules: [{required: true, message: "请输入第三方直播链接"}],
|
|
|
|
|
rules: [],
|
|
|
|
|
})(
|
|
|
|
|
<Input placeholder="请输入第三方直播链接,如:腾讯课堂播放链接等。" />
|
|
|
|
|
)}
|
|
|
|
|
</Form.Item>
|
|
|
|
|
<div className="flex-bottom">
|
|
|
|
|
<div className="flex1">
|
|
|
|
|
<p className="ant-col ant-form-item-label color-grey-3 font-16 setStyle">开播时间</p>
|
|
|
|
|
<DatePicker
|
|
|
|
|
dropdownClassName="hideDisable"
|
|
|
|
|
className="timeStyle mb20"
|
|
|
|
|
placeholder="如:2020/02/02 12:00"
|
|
|
|
|
style={{width:"220px"}}
|
|
|
|
|
showTime={{ format: 'HH:mm' }}
|
|
|
|
|
locale={locale}
|
|
|
|
|
format="YYYY-MM-DD HH:mm"
|
|
|
|
|
showToday={false}
|
|
|
|
|
disabledTime={disabledDateTime}
|
|
|
|
|
disabledDate={disabledDate}
|
|
|
|
|
value={beginTime && moment(beginTime,"YYYY-MM-DD HH:mm")}
|
|
|
|
|
onChange={this.onChangeTime}
|
|
|
|
|
></DatePicker>
|
|
|
|
|
</div>
|
|
|
|
|
<Form.Item label={`直播时长`}>
|
|
|
|
|
{getFieldDecorator('duration', {
|
|
|
|
|
rules: [],
|
|
|
|
|
})(
|
|
|
|
|
<InputNumber placeholder="请输入直播时长" style={{width:"220px"}}/>
|
|
|
|
|
)}
|
|
|
|
|
</Form.Item>
|
|
|
|
|
<span className="mb20 ml5">分钟</span>
|
|
|
|
|
</div>
|
|
|
|
|
<Form.Item label={`直播说明`}>
|
|
|
|
|
{getFieldDecorator('description', {
|
|
|
|
|
rules: [{
|
|
|
|
@ -147,10 +261,7 @@ class LiveNew extends Component{
|
|
|
|
|
<TextArea rows={4} placeholder="可在此介绍开播具体事项,如开播时间安排等。" />
|
|
|
|
|
)}
|
|
|
|
|
</Form.Item>
|
|
|
|
|
{/* <p className="flex-middle" style={{justifyContent:"space-between"}}>
|
|
|
|
|
<span>EduCoder推荐您使用<a href="https://ke.qq.com/" target="_blank" className="color-blue">腾讯课堂</a>进行直播</span>
|
|
|
|
|
<a href="https://pub.idqqimg.com/pc/misc/files/20200204/2e4cb765bef54f0c919c0ab8ab79d969.pdf" target="_blank" className="color-blue">操作指引</a>
|
|
|
|
|
</p> */}
|
|
|
|
|
|
|
|
|
|
</Form>
|
|
|
|
|
<div className="clearfix mt30 edu-txt-center">
|
|
|
|
|
<a onClick={this.cancelNew} className="task-btn mr30">取消</a>
|
|
|
|
|