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

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({
-      addLiveBasicInfo: {
-        ...this.state.addLiveBasicInfo,
-        [field]: value,
-      }
-    },()=>{console.log(this.state.addLiveBasicInfo)})
-  }
+// 修改基本信息
+handleChangeBasicInfo = (field, value) => {
+  const { coverUrl } = this.state.addLiveBasicInfo;
+  this.setState({
+    addLiveBasicInfo: {
+      ...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,
-        mediaType:'PICTURE'
+        mediaContent:coverId,
+        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') {

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",

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>