feat:修改创建课程的上传封面图

2c8fe8f0 · zhangleyuan · 8b738ef6 · 2c8fe8f0
Commit 2c8fe8f0 authored Dec 26, 2020 by zhangleyuan
Hide whitespace changes
Inline Side-by-side

Showing with 56 additions and 51 deletions

src/modules/course-manage/components/AddLiveBasic.jsx
+56 -51

No files found.
--- a/src/modules/course-manage/components/AddLiveBasic.jsx
+++ b/src/modules/course-manage/components/AddLiveBasic.jsx
@@ -13,12 +13,14 @@ import { ImgCutModalNew } from '@/components';
 import StoreService from "@/domains/store-domain/storeService";
 import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepareFileModal';
 import Upload from '@/core/upload';
+import PhotoClip from 'photoclip'
 import './AddLiveBasic.less';
 const defaultCover = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
 const fieldNames  = { label: 'categoryName', value: 'id', children: 'sonCategoryList' };
 let cutFlag = false;
+let timer = null
 class AddLiveBasic extends React.Component {
  constructor(props) {
@@ -27,11 +29,13 @@ class AddLiveBasic extends React.Component {
      imageFile: null,
      showCutModal: false,
      courseCatalogList:[],
-      showSelectFileModal: false
+      showSelectFileModal: false,
+      cutImageBlob: null
    }
  }
  componentWillUnmount() {
  }
  componentDidMount(){
    this.getCourseCatalogList();
  }
@@ -83,26 +87,14 @@ class AddLiveBasic extends React.Component {
  }
  handleSelectCover = (file) => {
    this.uploadImage(file);
-    // this.setState({
-    //   showSelectFileModal: false
-    // })
-    // const { ossUrl, resourceId, folderName, folderFormat, folderSize } = file;
-    // const coverObj = {
-    //   contentType: 'COVER',
-    //   mediaType: 'PICTURE',
-    //   mediaContent: resourceId,
-    //   mediaUrl: ossUrl,
-    //   mediaName: folderName,
-    //   size: folderSize
-    // }
-    // this.props.onChange('coverObj', coverObj);
  }
-  //上传图片
-  uploadImage = (imageFile) => {
+   //上传图片
+   uploadImage = (imageFile) => {
    const { folderName } = imageFile;
    const fileName =
-      window.random_string(16) + folderName.slice(folderName.lastIndexOf("."));
+    window.random_string(16) + folderName.slice(folderName.lastIndexOf("."));
+    const self = this;
    this.setState(
      {
        visible: true,
@@ -110,59 +102,77 @@ class AddLiveBasic extends React.Component {
      () => {
        setTimeout(() => {
          const okBtnDom = document.querySelector("#headPicModal");
-          const viewImgDom = document.querySelector('#preview-url-box');
          const options = {
            size: [500, 282],
-            rotateFree: false,
            ok: okBtnDom,
-            view: viewImgDom,
            maxZoom: 3,
            style: {
              jpgFillColor: "transparent",
            },
-            done: (dataUrl) => {
+            done: function (dataUrl) {
-              const cutImage = this.convertBase64UrlToBlob(dataUrl);
+              clearTimeout(self.timer);
-              this.getSignature(cutImage, fileName);
+              self.timer = setTimeout(() => {
+                if ((self.state.rotate != this.rotate()) || (self.state.scale != this.scale())) {
+                  console.log(this.scale(), 'scale')
+                  const _dataUrl = this.clip()
+                  const cutImageBlob = self.convertBase64UrlToBlob(_dataUrl);
+                  self.setState({
+                    cutImageBlob,
+                    dataUrl: _dataUrl,
+                    rotate: this.rotate(),
+                    scale: this.scale()
+                  })
+                }
+              }, 500)
+              const cutImageBlob = self.convertBase64UrlToBlob(dataUrl);
+              self.setState({
+                cutImageBlob,
+                dataUrl
+              })
              setTimeout(() => {
                cutFlag = false;
              }, 2000);
            },
            fail: (failInfo) => {
+              message.error("图片上传失败了，请重新上传");
+            },
+            loadComplete: function (img) {
+              setTimeout(() => {
+                const _dataUrl = this.clip()
+                self.setState({
+                  dataUrl: _dataUrl,
+                })
+              }, 100)
            },
-            loadComplete:(img)=>{
-              this.refs.headPicModal.click();
-              setTimeout(()=>{
-                this.refs.headPicModal.click();
-              },100)
-              this.setState({
-                previewUrl: img.src
-              })
-            }
          };
          if (!this.state.photoclip) {
-            const photoclip = new PhotoClip("#headPicModal", options);
+            const _photoclip = new PhotoClip("#headPicModal", options);
-            photoclip.load(imageFile.ossUrl);
+            _photoclip.load(imageFile.ossUrl);
-            console.log("photoclip-222",photoclip);
            this.setState({
-              photoclip,
+              photoclip: _photoclip,
            });
          } else {
            this.state.photoclip.clear();
            this.state.photoclip.load(imageFile.ossUrl);
          }
-        },200);
+        }, 200);
      }
    );
  };
   //获取resourceId
  getSignature = (blob, fileName) => {
    const { choosedBannerId } = this.state;
    Upload.uploadBlobToOSS(blob, 'cover' + (new Date()).valueOf(),null,'signInfo').then((signInfo) => {
      this.setState({
        coverClicpPath:signInfo.fileUrl,
-        coverId:signInfo.resourceId
+        coverId:signInfo.resourceId,
-      })
+        visible: false
+      },()=>this.updateCover())
    });
  };
@@ -181,12 +191,6 @@ class AddLiveBasic extends React.Component {
    this.setState({
      showSelectFileModal: false
    })
-    // const coverObj = {
-    //   contentType: 'COVER',
-    //   mediaType: 'PICTURE',
-    //   mediaContent: coverClicpPath,
-    // }
-    // console.log("coverObj",coverObj);
    this.props.onChange('coverUrl', coverClicpPath);
    setTimeout(()=>{
      this.props.onChange('coverId', coverId);
@@ -194,7 +198,7 @@ class AddLiveBasic extends React.Component {
  }
  render() {
-    const { showCutModal, imageFile,courseCatalogList,showSelectFileModal,visible } = this.state;
+    const { showCutModal, imageFile,courseCatalogList,showSelectFileModal,visible,cutImageBlob} = this.state;
    const { data,pageType,isEdit} = this.props;
    const { courseName,categoryName,coverUrl} = data;
    const fileName = '';
@@ -313,8 +317,7 @@ class AddLiveBasic extends React.Component {
                  cutFlag = true;
                  this.refs.hiddenBtn.click();
                }
-                this.setState({ visible: false });
+                this.getSignature(cutImageBlob);
-                this.updateCover()
              }}
            >
              确定
@@ -335,7 +338,9 @@ class AddLiveBasic extends React.Component {
            <div className="preview-img">
              <div className="title">效果预览</div>
              {/* <img src={previewUrl} alt="图片预览" className="preview-url" /> */}
-              <div id="preview-url-box" style={{width:500,height:282}}></div>
+              <div id="preview-url-box" style={{width:500,height:282}}>
+                <img src={this.state.dataUrl} style={{ width: '100%' }} alt="" />
+              </div>
            </div>
          </div>
        </Modal>