feat:处理封面图相关的展示

6ba731e7 · zhangleyuan · 89929c93 · 6ba731e7 · 6ba731e7 · 6ba731e7
Commit 6ba731e7 authored Dec 22, 2020 by zhangleyuan
Hide whitespace changes
Inline Side-by-side

Showing with 59 additions and 21 deletions

src/modules/course-manage/AddLive.jsx
+30 -15

src/modules/course-manage/components/AddLiveBasic.jsx
+16 -5

src/modules/course-manage/components/LiveCourseList.jsx
+13 -1

No files found.
--- a/src/modules/course-manage/AddLive.jsx
+++ b/src/modules/course-manage/AddLive.jsx
@@ -27,6 +27,7 @@ const defaultCover = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
 const defaultBasicInfo = {
  courseName: null,  // 课程名称
  coverUrl: defaultCover,
+  coverId:null,
  categoryId:null,
  categoryName:null,
 };
@@ -69,6 +70,7 @@ class AddLive extends React.Component {
      addLiveBasicInfo: {
        courseName: null,  // 课程名称
        coverUrl: defaultCover,
+        coverId:null,
        categoryId:null,
        categoryName:null,
      },
@@ -127,13 +129,15 @@ class AddLive extends React.Component {
          categoryName,
          admins
        } = res.result;
+        let coverId;
        let coverUrl;
        let liveCourseMediaRequests = [];
        let liveCourseWarmMedia;
        courseMediaVOS.map((item) => {
          switch (item.contentType){
            case "COVER":
-              coverUrl = item.mediaContent;
+              coverId = item.mediaContent;
+              coverUrl = item.mediaUrl;
            break;
            case "WARMUP":
              liveCourseWarmMedia = item;
@@ -147,10 +151,11 @@ class AddLive extends React.Component {
          return item;
        })
        const addLiveBasicInfo = {
          courseName,
          coverUrl: coverUrl || defaultCover,
+          coverId,
          categoryId,
          categoryName
        };
@@ -196,14 +201,16 @@ class AddLive extends React.Component {
  }
  // 修改基本信息
-  handleChangeBasicInfo = (field, value) => {
+// 修改基本信息
-    this.setState({
+handleChangeBasicInfo = (field, value) => {
-      addLiveBasicInfo: {
+  const { coverUrl } = this.state.addLiveBasicInfo;
-        ...this.state.addLiveBasicInfo,
+  this.setState({
-        [field]: value,
+    addLiveBasicInfo: {
-      }
+      ...this.state.addLiveBasicInfo,
-    },()=>{console.log(this.state.addLiveBasicInfo)})
+      [field]: value,
-  }
+    }
+  })
+}
  // 修改上课信息
  handleChangeClassInfo = (field, value) => {
@@ -262,7 +269,7 @@ class AddLive extends React.Component {
    this.handleValidate(addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, isEdit).then((res)  => {
      if (!res) return;
      const { type } = this.state;
-      const { courseName, coverUrl,categoryId} = addLiveBasicInfo;
+      const { courseName,coverUrl,coverId,categoryId} = addLiveBasicInfo;
      const {
        liveDate,
        teacherId,
@@ -285,10 +292,18 @@ class AddLive extends React.Component {
        startTime = moment(_liveDate + ' ' + _timeHorizonStart).format('x');
        endTime = moment(_liveDate + ' ' + _timeHorizonEnd).format('x');
      }
-      const  coverObj ={
+      let coverObj ={
        contentType:'COVER',
-        mediaContent:coverUrl,
+        mediaContent:coverId,
-        mediaType:'PICTURE'
+        mediaType:'PICTURE',
+        mediaUrl: coverUrl,
+      }
+      let scheduleMediaRequests;
+      if(coverId){
+        scheduleMediaRequests = [coverObj,liveCourseWarmMedia,...liveCourseMediaRequests]
+      }else{
+        scheduleMediaRequests = [liveCourseWarmMedia,...liveCourseMediaRequests]
      }
      const commonParams = {
        adminIds:assistant,
@@ -301,7 +316,7 @@ class AddLive extends React.Component {
        storeId:User.getStoreId(),
        teacherId:teacherId,
        whetherVisitorsJoin,
-        scheduleMediaRequests:[coverObj,liveCourseWarmMedia,...liveCourseMediaRequests]
+        scheduleMediaRequests
      }
      if (type === 'add') {

--- a/src/modules/course-manage/components/AddLiveBasic.jsx
+++ b/src/modules/course-manage/components/AddLiveBasic.jsx
@@ -61,6 +61,9 @@ class AddLiveBasic extends React.Component {
    if (isDefaultCover) return;
    message.success('已替换为默认图');
    this.props.onChange('coverUrl',defaultCover);
+    setTimeout(()=>{
+      this.props.onChange('coverId', null);
+    },1000)
  }
  catalogChange= (value) => {
@@ -108,7 +111,7 @@ class AddLiveBasic extends React.Component {
          const viewImgDom = document.querySelector('#preview-url-box');
          const options = {
-            size: [500, 73],
+            size: [297, 169],
            rotateFree: false,
            ok: okBtnDom,
            view: viewImgDom,
@@ -126,6 +129,7 @@ class AddLiveBasic extends React.Component {
            fail: (failInfo) => {
            },
            loadComplete:(img)=>{
+              this.refs.headPicModal.click();
              this.setState({
                previewUrl: img.src
              })
@@ -147,12 +151,14 @@ class AddLiveBasic extends React.Component {
    );
  };
   //获取resourceId
-   getSignature = (blob, fileName) => {
+  getSignature = (blob, fileName) => {
    const { choosedBannerId } = this.state;
-    Upload.uploadBlobToOSS(blob, 'avatar' + (new Date()).valueOf()).then((coverClicpPath) => {
+    Upload.uploadBlobToOSS(blob, 'cover' + (new Date()).valueOf(),null,'signInfo').then((signInfo) => {
      this.setState({
-        coverClicpPath
+        coverClicpPath:signInfo.fileUrl,
+        coverId:signInfo.resourceId
      })
    });
  };
  // base64转换成blob
@@ -166,7 +172,7 @@ class AddLiveBasic extends React.Component {
    return new Blob([ab], { type: "image/png" });
  };
  updateCover = () =>{
-    const {coverClicpPath} = this.state
+    const {coverClicpPath,coverId} = this.state
    this.setState({
      showSelectFileModal: false
    })
@@ -177,6 +183,10 @@ class AddLiveBasic extends React.Component {
    // }
    // console.log("coverObj",coverObj);
    this.props.onChange('coverUrl', coverClicpPath);
+    setTimeout(()=>{
+      this.props.onChange('coverId', coverId);
+    },1000)
  }
  render() {
    const { showCutModal, imageFile,courseCatalogList,showSelectFileModal,visible } = this.state;
@@ -307,6 +317,7 @@ class AddLiveBasic extends React.Component {
          <div className="clip-box">
            <div
              id="headPicModal"
+              ref="headPicModal"
              style={{
                width: "500px",
                height: "430px",

--- a/src/modules/course-manage/components/LiveCourseList.jsx
+++ b/src/modules/course-manage/components/LiveCourseList.jsx
@@ -146,6 +146,7 @@ class LiveCourseList extends React.Component {
        </div>
      </div>
    );
    const columns = [
      {
        title: "直播课",
@@ -153,9 +154,20 @@ class LiveCourseList extends React.Component {
        key: "course",
        dataIndex: "courseName",
        render: (val, record) => {
+          let hasCover = false;
          return (
            <div className="record__item">
-              <img className="course-cover" src={'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'} />
+              { 
+                record.courseMediaVOS.map((item,index)=>{
+                  if( item.contentType === "COVER"){
+                    hasCover = true;
+                    return <img className="course-cover" src={item.mediaUrl} />
+                  }    
+                })
+              }
+              { !hasCover  && 
+                <img className="course-cover" src={'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'} />
+              }
              <div>
                 <div className="course-name">{record.courseName}</div>
                 <div>