feat:修改海报不显示的问题

b6807c33 · zhangleyuan · e14bd165 · b6807c33 · b6807c33 · b6807c33
Commit b6807c33 authored Jan 25, 2021 by zhangleyuan
10 changed files
--- a/src/core/antd.less
+++ b/src/core/antd.less
@@ -637,3 +637,8 @@ mr0 {
 .ant-select-dropdown .rc-virtual-list-scrollbar .rc-virtual-list-scrollbar-thumb{
  background: #D6D6D6 !important;
 }
+.ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table > thead > tr > .ant-table-cell-fix-right-first::after,
+.ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table > tbody > tr > .ant-table-cell-fix-right-first::after
+{
+  border-right:none !important;
+}
\ No newline at end of file
--- a/src/domains/basic-domain/constants.ts
+++ b/src/domains/basic-domain/constants.ts
 /*
 * @Author: 陈剑宇
 * @Date: 2020-05-07 14:43:01
- * @LastEditTime: 2021-01-19 14:32:47
+ * @LastEditTime: 2021-01-25 13:58:01
 * @LastEditors: zhangleyuan
 * @Description: 
 * @FilePath: /wheat-web-demo/src/domains/basic-domain/constants.ts

--- a/src/domains/course-domain/constants.ts
+++ b/src/domains/course-domain/constants.ts
@@ -2,7 +2,7 @@
 * @Author: 吴文洁
 * @Date: 2020-08-20 09:21:40
 * @LastEditors: zhangleyuan
- * @LastEditTime: 2021-01-18 21:05:31
+ * @LastEditTime: 2021-01-25 13:53:13
 * @Description: 
 * @Copyright: 杭州杰竞科技有限公司 版权所有
 */

--- a/src/modules/course-manage/modal/ShareLiveModal.jsx
+++ b/src/modules/course-manage/modal/ShareLiveModal.jsx
@@ -24,6 +24,7 @@ class ShareLiveModal extends React.Component {
  constructor(props) {
    super(props);
    this.state = {
      shareUrl: 'https://xiaomai5.com/liveShare?courseId=12'
    }
@@ -32,6 +33,43 @@ class ShareLiveModal extends React.Component {
  componentDidMount() {
    // 获取短链接
    this.handleConvertShortUrl();
+  //   const { needStr, data, type } = this.props;
+  //   const { courseName, coverUrl = DEFAULT_COVER, scheduleVideoUrl } = data;
+  //   const { shareUrl ,time} = this.state;
+  //   // 判断是否是默认图, 默认图不需要在URL后面增加字符串
+  //   const isDefaultCover = coverUrl === DEFAULT_COVER;
+  //   let coverImgSrc = coverUrl;
+  //   if(type === 'videoClass'){
+  //     if(!coverUrl || isDefaultCover){
+  //       coverImgSrc = `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast&anystring=anystring`
+  //     }
+  //   }else{
+  //     data.courseMediaVOS.map((item,index)=>{
+  //       if( item.contentType === "COVER"){
+  //         coverImgSrc = item.mediaUrl;
+  //       }    
+  //     })
+  //   }
+  //   let image = new Image()
+  //   image.src =coverImgSrc + '?v=' + Math.random()
+  //   image.crossOrigin = "*"
+  //   image.onload = ()=>{
+  //     let imgData = getBase64Image(image)
+  //    this.setState({imgData}) 
+  //   }
+  //  function getBase64Image (img) {
+  //     let canvas = document.createElement("canvas")
+  //     canvas.width = img.width
+  //     canvas.height = img.height
+  //     let ctx = canvas.getContext("2d")
+  //     ctx.drawImage(img, 0, 0, img.width, img.height)
+  //     let dataURL = canvas.toDataURL("image/png")
+  //     return dataURL
+  //   }
  }
  handleConvertShortUrl = () => {
@@ -42,6 +80,7 @@ class ShareLiveModal extends React.Component {
      urls: [longUrl]
    }).then((res) => {
      const { result = [] } = res;
      this.setState({
        shareUrl: result[0].shortUrl
      }, () => { 
@@ -62,15 +101,24 @@ class ShareLiveModal extends React.Component {
  // 下载海报
  handleDownloadPoster = () => {
-    const dom = document.querySelector('#poster');
+    this.setState({
-    html2canvas(dom, {
+      showImg:true,
-      useCORS: true,
+      time:new Date().valueOf()
-    }).then(canvas => {
+    },()=>{
+      this.setState({time:new Date().valueOf()},()=>{
+        let node = document.getElementById('poster');
+        domtoimage.toPng(node)
+          .then((imgData) => {
+            console.log(imgData)
            const download = document.createElement('a');
            const { courseName } = this.props.data;
-      const dataUrl = canvas.toDataURL('image/png');
+            $(download).attr('href', imgData).attr('download', `${courseName}.png`).get(0).click();
-      $(download).attr('href', dataUrl).attr('download', `${courseName}.png`).get(0).click();
+            // this.props.close()
+          })
+      })
    })
  }
  // 复制分享链接
@@ -84,17 +132,23 @@ class ShareLiveModal extends React.Component {
  render() {
    const { needStr, data, type } = this.props;
    const { courseName, coverUrl = DEFAULT_COVER, scheduleVideoUrl } = data;
-    const { shareUrl } = this.state;
+    const { shareUrl ,imgData,showImg,time} = this.state;
    // 判断是否是默认图, 默认图不需要在URL后面增加字符串
    const isDefaultCover = coverUrl === DEFAULT_COVER;
-    const coverImgSrc = type === 'videoClass'
+    let coverImgSrc = coverUrl;
-      // 如果是默认图, 显示视频的第一帧, 否则显示上传的视频封面
+    if(type === 'videoClass'){
-      ? ((!coverUrl || isDefaultCover)
+      if(!coverUrl || isDefaultCover){
-        ? `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast&anystring=anystring`
+        coverImgSrc = `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast&anystring=anystring`
-        : `${coverUrl}`)
+      }
-      : `${coverUrl}`
+    }else{
+      data.courseMediaVOS.map((item,index)=>{
+        if( item.contentType === "COVER"){
+          coverImgSrc = item.mediaUrl;
+        }    
+      })
+    }
    return (
@@ -107,7 +161,8 @@ class ShareLiveModal extends React.Component {
        className="share-live-modal"
        onCancel={this.props.close}
      >
-        <div className="left" id="poster">
+      <div className="left">
+        <div id="poster">
          <div className="store-name">
            <span className="text">{storeName}</span>
          </div>
@@ -117,13 +172,16 @@ class ShareLiveModal extends React.Component {
            type === "liveClass" && 
            <div class="live-couse-name">{courseName}</div>
          }
+          {
+           showImg ?  <img
-          <img
+              crossOrigin='*'
-            src={coverImgSrc}
+              src={coverImgSrc+`?=${time}`}
+              className="course-cover"
+            />:  <img
+              src={coverImgSrc+`?=${time}`}
              className="course-cover"
            />
+          }
          <div className="qrcode-wrap">
            <div className="qrcode-wrap__left">
              <div className="text">长按识别二维码进入观看</div>
@@ -132,7 +190,7 @@ class ShareLiveModal extends React.Component {
            <div className="qrcode-wrap__right" id="qrcodeWrap">
            </div>
          </div>
+        </div>
      </div>
      <div className="right">
        <div className="share-poster right__item">
@@ -142,8 +200,6 @@ class ShareLiveModal extends React.Component {
          }
          { type === "videoClass" && 
            <div className="sub-title">用户可通过微信识别二维码，报名观看视频</div>
          }
          <div className="content" onClick={this.handleDownloadPoster}>下载海报</div>
@@ -162,7 +218,6 @@ class ShareLiveModal extends React.Component {
            <Button type="primary" onClick={this.handleCopy}>复制</Button>
          </div>
        </div>
      </div>
      </Modal>
    )

--- a/src/modules/course-manage/modal/ShareLiveModal.less
+++ b/src/modules/course-manage/modal/ShareLiveModal.less
 .share-live-modal {
  .ant-modal-body {
    display: flex;
+    #poster{
+      background: #FFF;
+      margin:0;
+      padding: 20px;
+    }
    .left {
      width: 303px;
-      padding: 20px;
      margin: 0 32px 0 16px;
      box-shadow:0px 2px 10px 0px rgba(0,0,0,0.05);
      border-radius: 12px;
    .course-name-title {
      font-size: 14px;
      color: #333;

--- a/src/modules/course-manage/video-course/AddVideoCourse.jsx
+++ b/src/modules/course-manage/video-course/AddVideoCourse.jsx
@@ -2,7 +2,7 @@
 * @Author: 吴文洁
 * @Date: 2020-08-05 10:07:47
 * @LastEditors: zhangleyuan
- * @LastEditTime: 2021-01-18 18:18:49
+ * @LastEditTime: 2021-01-25 13:46:13
 * @Description: 视频课新增/编辑页
 * @Copyright: 杭州杰竞科技有限公司 版权所有
 */
@@ -540,6 +540,7 @@ class AddVideoCourse extends React.Component {
        </div>
        {/* 选择备课文件弹窗 */}
+        { showSelectFileModal &&
          <SelectPrepareFileModal
            operateType="select"
            selectTypeList={['MP4']}
@@ -557,7 +558,7 @@ class AddVideoCourse extends React.Component {
            }}
            onSelect={this.handleSelectVideo}
          />
+        }
        <ImgCutModalNew
          title="裁剪"
          width={550}

--- a/src/modules/course-manage/video-course/AddVideoCourse.less
+++ b/src/modules/course-manage/video-course/AddVideoCourse.less
 .add-video-course-page {
+  .box{
+    margin-bottom:16px !important;
+  }
  .ant-radio-group {
    display: flex;
    flex-direction: column;
@@ -25,7 +27,11 @@
  .form {
    margin-top: 16px;
    padding: 0 16px;
+    .label{
+      display:inline-block;
+      text-align:right;
+      width:85px;
+    }
    .required {
      position: relative;
@@ -33,7 +39,7 @@
        position: absolute;
        content: '*';
        color: red;
-        left: -10px;
+        left: 5px;
        top: 6px;
      }
@@ -110,7 +116,7 @@
    }
    .sub-content {
-      margin-left: 70px;
+      margin-left: 85px;
      margin-top: 4px;
      .tips {

--- a/src/modules/course-manage/video-course/components/AddVideoIntro.jsx
+++ b/src/modules/course-manage/video-course/components/AddVideoIntro.jsx
@@ -264,6 +264,7 @@ class AddVideoIntro extends React.Component {
          </div>
        </div>
        {/* 选择暖场图文件弹窗 */}
+        { showSelectFileModal &&
          <SelectPrepareFileModal
            operateType="select"
            accept={selectType==="INTRO"?"image/jpeg,image/png,image/jpg":"video/mp4,image/jpeg,image/png,image/jpg"}
@@ -275,7 +276,7 @@ class AddVideoIntro extends React.Component {
            }}
            onSelect={this.handleSelectVideo}
          />
+        }
      </div>
    )
  }

--- a/src/modules/course-manage/video-course/components/AddVideoIntro.less
+++ b/src/modules/course-manage/video-course/components/AddVideoIntro.less
@@ -8,7 +8,11 @@
        color: #999;
      }
    }
+    .label{
+      display:inline-block;
+      text-align:right;
+      width:85px;
+    }
    .playback,
    .introduce {
      display: flex;

--- a/src/modules/course-manage/video-course/components/VideoCourseList.jsx
+++ b/src/modules/course-manage/video-course/components/VideoCourseList.jsx
@@ -2,7 +2,7 @@
 * @Author: 吴文洁
 * @Date: 2020-08-05 10:12:45
 * @LastEditors: zhangleyuan
- * @LastEditTime: 2021-01-22 16:25:06
+ * @LastEditTime: 2021-01-25 13:58:13
 * @Description: 视频课-列表模块
 * @Copyright: 杭州杰竞科技有限公司 版权所有
 */