|
|
|
|
@ -1,20 +1,50 @@
|
|
|
|
|
import React,{ Component } from "react";
|
|
|
|
|
import { Modal , Form , Input , Spin } from 'antd';
|
|
|
|
|
import { Modal , Form , Input , Spin , Select , 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;
|
|
|
|
|
|
|
|
|
|
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,
|
|
|
|
|
beginTimeFlag:false,
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidMount=()=>{
|
|
|
|
|
console.log("1",this.props.liveId)
|
|
|
|
|
this.checkType();
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
componentDidUpdate=(prevState)=>{
|
|
|
|
|
console.log("2",prevState.liveId);
|
|
|
|
|
if(prevState && prevState.liveId !== this.props.liveId){
|
|
|
|
|
this.setState({
|
|
|
|
|
isSpining:true
|
|
|
|
|
@ -25,7 +55,8 @@ class LiveNew extends Component{
|
|
|
|
|
|
|
|
|
|
checkType=()=>{
|
|
|
|
|
const { liveId } = this.props;
|
|
|
|
|
|
|
|
|
|
console.log("3",this.props.liveId);
|
|
|
|
|
this.clearAll();
|
|
|
|
|
if(liveId){
|
|
|
|
|
const url =`/live_links/${liveId}/edit.json`;
|
|
|
|
|
axios.get(url).then(result=>{
|
|
|
|
|
@ -33,14 +64,15 @@ class LiveNew extends Component{
|
|
|
|
|
this.props.form.setFieldsValue({
|
|
|
|
|
url:result.data.url,
|
|
|
|
|
description:result.data.description,
|
|
|
|
|
platform:result.data.platform || "tencent",
|
|
|
|
|
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 +82,13 @@ class LiveNew extends Component{
|
|
|
|
|
handleSubmit=()=>{
|
|
|
|
|
this.props.form.validateFields((err, values) => {
|
|
|
|
|
if(!err){
|
|
|
|
|
console.log("2")
|
|
|
|
|
const { beginTime } = this.state;
|
|
|
|
|
if(!beginTime){
|
|
|
|
|
this.setState({
|
|
|
|
|
beginTimeFlag:true
|
|
|
|
|
})
|
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
const { liveId } = this.props;
|
|
|
|
|
if(liveId){
|
|
|
|
|
// 修改
|
|
|
|
|
@ -64,8 +102,10 @@ 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("修改成功!");
|
|
|
|
|
@ -81,8 +121,10 @@ 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("添加成功!");
|
|
|
|
|
@ -107,15 +149,31 @@ class LiveNew extends Component{
|
|
|
|
|
|
|
|
|
|
cancelNew=()=>{
|
|
|
|
|
const { setliveVisibel } = this.props;
|
|
|
|
|
this.clearAll();
|
|
|
|
|
setliveVisibel && setliveVisibel(false);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
clearAll=()=>{
|
|
|
|
|
this.props.form.setFieldsValue({
|
|
|
|
|
course_name:undefined,
|
|
|
|
|
platform:"tencent",
|
|
|
|
|
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 , beginTimeFlag } = this.state;
|
|
|
|
|
const {getFieldDecorator} = this.props.form;
|
|
|
|
|
const { visible } = this.props;
|
|
|
|
|
|
|
|
|
|
@ -131,6 +189,24 @@ 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: "请选择直播平台"}],
|
|
|
|
|
})(
|
|
|
|
|
<Select>
|
|
|
|
|
<Option value="tencent">腾讯课堂</Option>
|
|
|
|
|
<Option value="douyu">斗鱼</Option>
|
|
|
|
|
<Option value="bilibili">B站</Option>
|
|
|
|
|
</Select>
|
|
|
|
|
)}
|
|
|
|
|
</Form.Item>
|
|
|
|
|
<Form.Item label={`直播链接`}>
|
|
|
|
|
{getFieldDecorator('url', {
|
|
|
|
|
rules: [{required: true, message: "请输入第三方直播链接"}],
|
|
|
|
|
@ -138,6 +214,38 @@ class LiveNew extends Component{
|
|
|
|
|
<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"><span className="color-red">*</span>开播时间</p>
|
|
|
|
|
<DatePicker
|
|
|
|
|
dropdownClassName="hideDisable"
|
|
|
|
|
className={beginTimeFlag ? "timeStyle borderRed":"timeStyle"}
|
|
|
|
|
placeholder="年/月/日"
|
|
|
|
|
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>
|
|
|
|
|
<p style={{height:"20px",lineHeight:"20px"}} className="pl10">
|
|
|
|
|
{
|
|
|
|
|
beginTimeFlag && <span className="color-red">请选择开播时间</span>
|
|
|
|
|
}
|
|
|
|
|
</p>
|
|
|
|
|
</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 +255,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>
|
|
|
|
|
|
