feat:添加上课信息

8bc4f351 · maolipeng · b0efcce5 · 8bc4f351 · 8bc4f351 · 8bc4f351
Commit 8bc4f351 authored Aug 01, 2021 by maolipeng
5 changed files
--- a/src/modules/course-manage/components/AddLiveClass.jsx
+++ b/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,

--- a/src/modules/course-manage/components/AddLiveClassInfoWorkWX.jsx
+++ b/src/modules/course-manage/components/AddLiveClassInfoWorkWX.jsx
+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
--- a/src/modules/course-manage/components/AddLiveIntro.jsx
+++ b/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'>

--- a/src/modules/course-manage/components/CreateWorkWXCourse.tsx
+++ b/src/modules/course-manage/components/CreateWorkWXCourse.tsx
@@ -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 {
+// const defaultIntroInfo = {
-  teacherId: string;
+//   needRecord: 'YES',
-  teacherName: string;
+//   whetherVisitorsJoin: 'NO',
-  courseName: string;
+//   liveCourseWarmMedia: {},
-  startTime: number;
+//   // 讲师简介
-  endTime: number;
+//   liveCourseMediaRequests: [
-  courseMediaVOS: CourseMedia[];
+//     {
-  nickname?: string;
+//       contentType: 'INTRO',
-  needRecord: string,
+//       mediaType: 'TEXT',
-  whetherVisitorsJoin: string;
+//       mediaContent: '',
-  warmMedia?: string;
+//       key: Math.random(),
-  categoryId: string;
+//     },
-  categoryName: string;
+//   ],
-  admins: any[],
+// };
-  courseState: string;
-}
 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 [addLiveBasicInfo, setAddLiveBasicInfo] = useState(defaultBasicInfo)
-    const [addLiveClassInfo, setAddLiveClassInfo] = useState<any>()
+    const [addLiveClassInfo, setAddLiveClassInfo] = useState()
-    const [addLiveIntroInfo, setAddLiveIntroInfo] = useState<any>({})
+    const [addLiveIntroInfo, setAddLiveIntroInfo] = useState({})
-    const [previewLiveCourseModal, setPreviewLiveCourseModal] = useState<ReactElement|null>()
+    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;
+      } = res.result;
-      let coverId: string|undefined = '';
+      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) {
+  function handleChangeIntroInfo(field, value) {
-    let introinfo = {...addLiveIntroInfo}
-    introinfo[field] = value
-    setAddLiveIntroInfo(introinfo)
  };
  // 完成创建/编辑
@@ -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>

--- a/src/modules/course-manage/components/CreateWorkWXCourse.less
+++ b/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