feat:初始化

62f7ae6b · chenshu · b11a9005 · 62f7ae6b · 62f7ae6b · 62f7ae6b
Commit 62f7ae6b authored May 08, 2021 by chenshu
5 changed files
--- a/src/modules/course-manage/offline-course/AddGraphicsCourse.jsx
+++ b/src/modules/course-manage/offline-course/AddGraphicsCourse.jsx
@@ -3,7 +3,7 @@
 * @Date: 2020-08-05 10:07:47
 * @LastEditors: zhangleyuan
 * @LastEditTime: 2021-03-29 14:08:47
- * @Description: 图文课新增/编辑页
+ * @Description: 线下课新增/编辑页
 * @Copyright: 杭州杰竞科技有限公司 版权所有
 */
@@ -25,7 +25,7 @@ import { randomString } from '@/domains/basic-domain/utils';
 import User from '@/common/js/user';
 import _ from "underscore";
 import Upload from '@/core/upload';
-import './AddGraphicsCourse.less';
+import './AddOfflineCourse.less';
 const EDIT_BOX_KEY = Math.random();
 const fieldNames  = { label: 'categoryName', value: 'id', children: 'sonCategoryList' };
@@ -36,7 +36,7 @@ const whetherVisitorsJoin = 'NO'
 const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
 let cutFlag = false;
-class AddGraphicsCourse extends React.Component {
+class AddOfflineCourse extends React.Component {
  constructor(props) {
    super(props);
@@ -45,15 +45,15 @@ class AddGraphicsCourse extends React.Component {
    const pageType = getParameterByName("type");
    this.state = {
-      id,                        // 图文课ID,编辑的时候从URL上带过来
+      id,                        // 线下课ID,编辑的时候从URL上带过来
      pageType,                  // 页面类型: add->新建 edit->编辑
      imageFile: null,           // 需要被截取的图片
-      courseName: null,        // 图文课名称
+      courseName: null,        // 线下课名称
      courseMedia: '',
      introduce: '',
-      courseMediaId: null,     // 图文课链接
+      courseMediaId: null,     // 线下课链接
-      coverId: null,             // 图文封面的recourceId
+      coverId: null,             // 线下封面的recourceId
-      coverUrl: defaultCoverUrl,            // 图文课封面
+      coverUrl: defaultCoverUrl,            // 线下课封面
      studentList: [],           // 上课学员列表
      shelfState:'YES',          //是否开启学院展示
      diskList: [],              // 机构可见磁盘目录
@@ -78,13 +78,13 @@ class AddGraphicsCourse extends React.Component {
  }
  initBus = () => {
-    Bus.bind('graphicsEditorImage', this.uploadImage)
+    Bus.bind('offlineEditorImage', this.uploadImage)
-    Bus.bind('graphicsEditorVideo', this.uploadVideo)
+    Bus.bind('offlineEditorVideo', this.uploadVideo)
  }
  removeBus = () => {
-    Bus.unbind('graphicsEditorImage', this.uploadImage)
+    Bus.unbind('offlineEditorImage', this.uploadImage)
-    Bus.unbind('graphicsEditorVideo', this.uploadVideo)
+    Bus.unbind('offlineEditorVideo', this.uploadVideo)
  }
  uploadImage = () => {
@@ -118,7 +118,7 @@ class AddGraphicsCourse extends React.Component {
      break;    
    }
  }
-  // 获取图文课详情
+  // 获取线下课详情
  handleFetchScheudleDetail = (courseId) => {
    Service.Hades('public/hades/mediaCourseDetail',{
      courseId
@@ -207,13 +207,13 @@ class AddGraphicsCourse extends React.Component {
        icon: <span className="icon iconfont default-confirm-icon">&#xe6f4;</span>,
        onOk: () => {
          window.RCHistory.push({
-            pathname: `/graphics-course`,
+            pathname: `/offline-course`,
          });
        }
      });
    }else{
      window.RCHistory.push({
-        pathname: `/graphics-course`,
+        pathname: `/offline-course`,
      });
    }
  }
@@ -431,7 +431,7 @@ class AddGraphicsCourse extends React.Component {
      whetherVisitorsJoin,
      courseType: 'PICTURE',
    };
-    // 校验必填字段:课程名称, 课程图文
+    // 校验必填字段:课程名称, 课程线下
    this.handleValidate(courseName, courseMedia, categoryId).then((res) => {
      if (!res) return;
      Upload.uploadTextToOSS(courseMedia, `${randomString()}.txt`, (courseMediaId) => {
@@ -457,7 +457,7 @@ class AddGraphicsCourse extends React.Component {
        if (!res) return;
        message.success("新建成功");
        window.RCHistory.push({
-          pathname: `/graphics-course`,
+          pathname: `/offline-course`,
        });
      })
    } else {
@@ -469,7 +469,7 @@ class AddGraphicsCourse extends React.Component {
        if (!res) return;
        message.success("保存成功");
        window.RCHistory.push({
-          pathname: `/graphics-course`,
+          pathname: `/offline-course`,
        });
      });
    }
@@ -532,11 +532,12 @@ class AddGraphicsCourse extends React.Component {
    const hasSelectedStu = studentList.length;
    const courseWareIcon = FileVerifyMap[videoType] ? FileTypeIcon[FileVerifyMap[videoType].type] : FileTypeIcon[videoType];
+    const isDefaultCover = coverUrl === defaultCoverUrl;
    return (
-      <div className="page add-video-course-page">
+      <div className="page add-offline-course-page">
        <Breadcrumbs
-          navList={pageType === "add" ? "新建图文课" : "编辑图文课"}
+          navList={pageType === "add" ? "新建线下课" : "编辑线下课"}
          goBack={this.handleGoBack}
        />
@@ -546,31 +547,40 @@ class AddGraphicsCourse extends React.Component {
          </div>
          <div className="form">
+            <div className="basic-info__wrap">
+              <div className="title">基本信息</div>
              <div className="course-name required">
                <span className="label">课程名称：</span>
                <Input
                  value={courseName}
-                placeholder="请输入图文课的名称（40字以内）"
+                  placeholder="请输入线下课的名称（40字以内）"
                  maxLength={40}
                  style={{ width: 240 }}
                  onChange={(e) => { this.handleChangeForm('courseName', e.target.value)}}
                />
              </div>
+              <div className="course-cover">
+                <span className="label">封面图：</span>
+                <div className="course-cover__wrap">
-            <div className="cover-url flex mt16">
-              <div className="label">封面图：</div>
-              <div className="cover-url__wrap">
                  <div className="img-content">
+                  {
+                    isDefaultCover && <span className="tag">默认图</span>
+                  }
                    <img src={coverUrl} />
                  </div>
                  <div className="opt-btns">
                    <Button onClick={() => {
                      this.setState({
-                      showSelectCoverModal: true
+                        showSelectFileModal: true
-                    });
+                      })
-                  }}>{`${(pageType === 'add' && !coverUrl) ? '上传' : '修改'}封面`}</Button>
+                    }}>上传图片</Button>
-                  <div className="tips">建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div>
+                    <span
+                      className={`default-btn ${isDefaultCover ? 'disabled' : ''}`}
+                      onClick={this.handleResetCoverUrl}
+                    >使用默认图</span>
+                    <div className="tips">建议尺寸1280*720px，图片支持jpg、jpeg、png格式。</div>
                  </div>
                </div>
              </div>
@@ -583,19 +593,9 @@ class AddGraphicsCourse extends React.Component {
                  <Cascader defaultValue={[categoryName]} options={courseCatalogList} displayRender={	label => label.join('-')}  fieldNames={fieldNames} onChange={this.catalogChange} style={{ width: 240 }} placeholder="请选择课程分类" suffixIcon={<span className="icon iconfont" style={{fontSize:'12px',color:'#BFBFBF'}}>&#xe835;</span>}/>
                }
              </div>
+            </div>
            <div className="intro-info mt16">
-              <AddGraphicsIntro
-                data={{
-                  id,
-                  courseMedia,
-                  introduce,
-                  shelfState,
-                  whetherVisitorsJoin,
-                  loadcourseMedia,
-                  loadintroduce,
-                }}
-                onChange={this.handleChangeForm}
-              />
            </div>
          </div>
        </div>
@@ -686,4 +686,4 @@ class AddGraphicsCourse extends React.Component {
  }
 }
-export default AddGraphicsCourse;
+export default AddOfflineCourse;
--- a/src/modules/course-manage/offline-course/AddGraphicsCourse.less
+++ b/src/modules/course-manage/offline-course/AddGraphicsCourse.less
-.add-video-course-page {
+.add-offline-course-page {
  position:relative !important;
  .box{
    margin-bottom:66px !important;
@@ -28,6 +28,16 @@
  .form {
    margin-top: 16px;
    padding: 0 16px;
+    .basic-info__wrap {
+      .title {
+        font-size: 16px;
+        color: #333;
+        font-weight: 500;
+        line-height: 22px;
+        margin-bottom: 16px;
+        margin-left: -16px;
+      }
+    }
    .label{
      display:inline-block;
      text-align:right;
@@ -70,40 +80,67 @@
    .flex {
      display: flex;
    }
+    .course-cover {
+      display: flex;
+      margin-top: 16px;
+      &__wrap {
+        position: relative;
+        .tag {
+          border-radius: 2px;
+          background: #D6D6D6;
+          font-size: 12px;
+          height: 18px;
+          width: 52px;
+          text-align: center;
+          color: #FFF;
+          position: absolute;
+          top: 8px;
+          left: 8px;
+        }
+      }
+      .course-cover__wrap {
+        display: flex;
+        flex-direction: row;
+      }
-    .cover-url__wrap {
      .img-content {
-        width: 298px;
+        margin-right: 20px;
-        height: 172px;
+        width: 299px;
+        height: 169px;
        img {
          width: 100%;
          height: 100%;
          object-fit: contain;
+          border: 1px solid #E8e8e8;
        }
      }
-      .empty-img {
-        width: 298px;
-        height: 172px;
-        border: 1px dashed #EBEBEB;
-        border-radius: 4px;
-        padding: 12px;
-        color: #999;
-        padding: 52px 24px;
-        text-align: center;
-      }
      .opt-btns {
-        margin-top: 8px;
-        display: flex;
+        .default-btn {
-        align-items: center;
+          margin-left: 16px;
+          color: #5289FA;
+          cursor: pointer;
+          &.disabled {
+            color: #CCC;
+            cursor: not-allowed;
+          }
+        }
+        .ant-upload-list {
+          display: none;
+        }
+      }
      .tips {
-          margin-left: 12px;
+        margin-top: 8px;
        color: #999;
      }
    }
-    }
    .select-student {
      align-items: center;

--- a/src/modules/course-manage/offline-course/components/OfflineCourseOpt.jsx
+++ b/src/modules/course-manage/offline-course/components/OfflineCourseOpt.jsx
@@ -19,7 +19,7 @@ export default function OfflineCourseOpt() {
      <Button
        type="primary"
        onClick={() => {
-          RCHistory.push('/create-graphics-course?type=add');
+          RCHistory.push('/create-offline-course?type=add');
        }}
        className="mr12"
      >新建线下课</Button>

--- a/src/modules/course-manage/offline-course/index.jsx
+++ b/src/modules/course-manage/offline-course/index.jsx
@@ -14,20 +14,19 @@ class OfflineCoursePage extends React.Component {
      query: {
        size: 10,
        current: 1,
-        courseType: 'PICTURE',
        storeId:User.getStoreId()
      },
-      dataSource: [],    // 视频课列表
+      dataSource: [],    // 线下课列表
-      totalCount: 0,     // 视频课数据总条数
+      totalCount: 0,     // 线下课数据总条数
    }
  }
  componentWillMount() {
-    // 获取视频课列表
+    // 获取线下课列表
    this.handleFetchScheduleList();
  }
-  // 获取视频课列表
+  // 获取线下课列表
  handleFetchScheduleList = (_query = {}) => {
    const query = {
      ...this.state.query,
@@ -36,7 +35,7 @@ class OfflineCoursePage extends React.Component {
    // 更新请求参数
    this.setState({ query });
-    Service.Hades('public/hades/mediaCoursePage', query).then((res) => {
+    Service.Hades('public/hades/getOfflineCoursePage', query).then((res) => {
      const { result = {} } = res || {};
      const { records = [], total = 0 } = result;
      this.setState({
@@ -44,14 +43,6 @@ class OfflineCoursePage extends React.Component {
        totalCount: Number(total)
      });
    })
-    // CourseService.videoSchedulePage(query).then((res) => {
-    //   const { result = {} } = res || {};
-    //   const { records = [], total = 0 } = result;
-    //   this.setState({
-    //     dataSource: records,
-    //     totalCount: Number(total)
-    //   });
-    // });
  }
  render() {
@@ -69,7 +60,7 @@ class OfflineCoursePage extends React.Component {
          {/* 操作模块 */}
          <OfflineCourseOpt />
-          {/* 视频课列表模块 */}
+          {/* 线下课列表模块 */}
          <OfflineCourseList
            query={query}
            dataSource={dataSource}

--- a/src/routes/config/mainRoutes.tsx
+++ b/src/routes/config/mainRoutes.tsx
@@ -20,6 +20,7 @@ import GraphicsCoursePage from '@/modules/course-manage/graphics-course'
 import OfflineCoursePage from '@/modules/course-manage/offline-course'
 import AddVideoCoursePage from '@/modules/course-manage/video-course/AddVideoCourse'
 import AddGraphicsCoursePage from '@/modules/course-manage/graphics-course/AddGraphicsCourse'
+import AddOfflineCoursePage from '@/modules/course-manage/offline-course/AddOfflineCourse'
 // import DataList from '@/modules/course-manage/DataList/DataList';
 // import ClassBook from '@/modules/resource-disk';
 import ResourceDisk from '@/modules/resource-disk';
@@ -118,6 +119,11 @@ const mainRoutes = [
    name: "创建图文课",
  },
  {
+    path: "/create-offline-course",
+    component: AddOfflineCoursePage,
+    name: "创建线下课",
+  },
+  {
    path: "/resource-disk",
    component: ResourceDisk,
    name: "资料云盘",