Skip to content

X
xiaomai-cloud-class-web
Commit 46c7272a by yuananting
Options

Merge branch 'dev' of https://xmgit.ixm5.cn/xiaomai-cloud-class/xiaomai-cloud-class-web into dev

parents f6115990 db9a4672
Showing with 226 additions and 66 deletions
src/modules/course-manage/graphics-course/AddGraphicsCourse.jsx
......@@ -35,6 +35,7 @@ const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategory
const defaultShelfState = 'YES';
const whetherVisitorsJoin = 'NO'
const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
let cutFlag = false;
class AddGraphicsCourse extends React.Component {
......@@ -132,26 +133,29 @@ class AddGraphicsCourse extends React.Component {
categoryTwoName,
categoryId
} = result;
let coverId;
let coverUrl = this.state.coverUrl;
courseMediaVOS.map((item) => {
switch (item.contentType){
case "COVER":
coverId = item.mediaContent;
coverUrl = item.mediaUrl;
let coverId;
let coverUrl = this.state.coverUrl;
let hasIntro = false;
courseMediaVOS.map((item) => {
switch (item.contentType){
case "COVER":
coverId = item.mediaContent;
coverUrl = item.mediaUrl;
break;
case "SCHEDULE":
this.getTextDetail('courseMedia', item.mediaUrl);
break;
case "SCHEDULE":
this.getTextDetail('courseMedia', item.mediaUrl);
break;
case "INTRO":
this.getTextDetail('introduce', item.mediaUrl);
break;
default:
break;
}
return item;
})
case "INTRO":
hasIntro = true;
this.getTextDetail('introduce', item.mediaUrl);
break;
default:
break;
}
return item;
})
!hasIntro && this.setState({ loadintroduce: true })
let categoryName;
if( categoryTwoName ){
......@@ -178,7 +182,7 @@ class AddGraphicsCourse extends React.Component {
url,
contentType:'application/x-www-form-urlencoded; charset=UTF-8',
success: (res) => {
this.setState({ [key]: res });
this.setState({ [key]: res, [`load${key}`]: true });
}
})
}
......@@ -300,7 +304,7 @@ class AddGraphicsCourse extends React.Component {
});
}
handleSelectCover = (file) => {
handleSelectImage = (file) => {
this.setState({
showSelectImageModal: false
})
......@@ -311,15 +315,117 @@ class AddGraphicsCourse extends React.Component {
});
}
// 上传封面图
handleShowImgCutModal = (event) => {
const imageFile = event.target.files[0];
if (!imageFile) return;
this.setState({
imageFile,
showCutModal: true,
handleSelectCover = (file)=> {
this.uploadImage(file);
}
//上传图片
uploadImage = (imageFile) => {
const { folderName } = imageFile;
const fileName = window.random_string(16) + folderName.slice(folderName.lastIndexOf("."));
const self = this;
this.setState(
{
visible: true,
},
() => {
setTimeout(() => {
const okBtnDom = document.querySelector("#headPicModal");
const options = {
size: [500, 282],
ok: okBtnDom,
maxZoom: 3,
style: {
jpgFillColor: "transparent",
},
done: function (dataUrl) {
clearTimeout(self.timer);
self.timer = setTimeout(() => {
if ((self.state.rotate != this.rotate()) || (self.state.scale != this.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,
hasImgReady: true
})
}, 100)
},
};
const imgUrl = `${imageFile.ossUrl}?${new Date().getTime()}`
if (!this.state.photoclip) {
const _photoclip = new PhotoClip("#headPicModal", options);
_photoclip.load(imgUrl);
this.setState({
photoclip: _photoclip,
});
} else {
this.state.photoclip.clear();
this.state.photoclip.load(imgUrl);
}
}, 200);
}
);
};
//获取resourceId
getSignature = (blob, fileName) => {
Upload.uploadBlobToOSS(blob, 'cover' + (new Date()).valueOf(),null,'signInfo').then((signInfo) => {
this.setState({
coverClicpPath:signInfo.fileUrl,
coverId:signInfo.resourceId,
visible: false
},()=>this.updateCover())
});
};
updateCover = () =>{
const {coverClicpPath,coverId} = this.state
this.setState({
showSelectCoverModal: false,
coverUrl:coverClicpPath,
coverId:coverId
})
}
// base64转换成blob
convertBase64UrlToBlob = (urlData) => {
const bytes = window.atob(urlData.split(",")[1]);
const ab = new ArrayBuffer(bytes.length);
const ia = new Uint8Array(ab);
for (let i = 0; i < bytes.length; i++) {
ia[i] = bytes.charCodeAt(i);
}
return new Blob([ab], { type: "image/png" });
};
// 保存
handleSubmit = () => {
const {
......@@ -432,6 +538,12 @@ class AddGraphicsCourse extends React.Component {
categoryName,
courseCatalogList,
whetherVisitorsJoin,
loadcourseMedia,
loadintroduce,
showSelectCoverModal,
visible,
hasImgReady,
cutImageBlob,
} = this.state;
// 已选择的上课学员数量
const hasSelectedStu = studentList.length;
......@@ -469,19 +581,11 @@ class AddGraphicsCourse extends React.Component {
<img src={coverUrl} />
</div>
<div className="opt-btns">
<input
type="file"
accept="image/png, image/jpeg, image/jpg"
ref="picInputFile"
style={{display: 'none'}}
onChange={(event) => { this.handleShowImgCutModal(event) }}
/>
<Button onClick={() => {
this.setState({
currentInputFile: this.refs.picInputFile
showSelectCoverModal: true
});
this.refs.picInputFile.click()
}}>{`${(pageType === 'add' && !coverUrl) ? '上传' : '修改'}封面`}</Button>
<div className="tips">建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div>
</div>
......@@ -504,7 +608,8 @@ class AddGraphicsCourse extends React.Component {
introduce,
shelfState,
whetherVisitorsJoin,
label: '图文课简介'
loadcourseMedia,
loadintroduce,
}}
onChange={this.handleChangeForm}
/>
......@@ -550,27 +655,78 @@ class AddGraphicsCourse extends React.Component {
onClose={() => {
this.setState({ showSelectImageModal: false })
}}
onSelect={this.handleSelectImage}
/>
}
{showSelectCoverModal &&
<SelectPrepareFileModal
key="basic"
operateType="select"
multiple={false}
accept="image/jpeg,image/png,image/jpg"
selectTypeList={['JPG', 'JPEG', 'PNG']}
tooltip='支持文件类型：jpg、jpeg、png'
isOpen={showSelectCoverModal}
onClose={() => {
this.setState({ showSelectCoverModal: false })
}}
onSelect={this.handleSelectCover}
/>
}
<ImgCutModalNew
title="裁剪"
width={550}
cutWidth={500}
cutHeight={282}
cutContentWidth={500}
cutContentHeight={300}
visible={showCutModal}
imageFile={imageFile}
bizCode='LIVE_COURSE_MEDIA'
onOk={(urlStr, resourceId) => {
this.setState({ showCutModal: false });
this.handleChangeForm('coverId', resourceId, urlStr)
this.state.currentInputFile.value = '';
<Modal
title="设置图片"
width={1080}
visible={visible}
maskClosable={false}
closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
onCancel={() => {
this.setState({ visible: false });
}}
onClose={() => this.setState({ showCutModal: false })}
reUpload={() => { this.state.currentInputFile.click() }}
/>
zIndex={10001}
footer={[
<Button
key="back"
onClick={() => {
this.setState({ visible: false });
}}
>
重新上传
</Button>,
<Button
key="submit"
type="primary"
disabled={!hasImgReady}
onClick={() => {
if (!cutFlag) {
cutFlag = true;
this.refs.hiddenBtn.click();
}
this.getSignature(cutImageBlob);
}}
>
确定
</Button>,
]}
>
<div className="clip-box">
<div
id="headPicModal"
ref="headPicModal"
style={{
width: "500px",
height: "430px",
marginBottom: 0,
}}
></div>
<div id="clipBtn" style={{ display: "none" }} ref="hiddenBtn"></div>
<div className="preview-img">
<div className="title">效果预览</div>
<div id="preview-url-box" style={{width:500,height:282}}>
<img src={this.state.dataUrl} style={{ width: '100%' }} alt="" />
</div>
</div>
</div>
</Modal>
{ this.state.previewGraphicsModal }
</div>
)
......
src/modules/course-manage/graphics-course/components/AddGraphicsIntro.jsx
......@@ -2,7 +2,7 @@
* @Author: 吴文洁
* @Date: 2020-07-16 11:05:17
* @Last Modified by: chenshu
* @Last Modified time: 2021-03-19 15:44:56
* @Last Modified time: 2021-03-22 10:20:41
* @Description: 添加直播-简介
*/
......@@ -132,7 +132,7 @@ class AddGraphicsIntro extends React.Component {
}
render() {
const {data: { id, whetherVisitorsJoin, courseMedia, introduce, shelfState } } = this.props;
const {data: { id, whetherVisitorsJoin, courseMedia, introduce, shelfState, loadcourseMedia, loadintroduce } } = this.props;
const { showSelectFileModal, selectType } = this.state;
return (
<div className="add-video__intro-info">
......@@ -171,7 +171,7 @@ class AddGraphicsIntro extends React.Component {
<div className="content">
<div className="intro-list">
<div className="intro-list__item content-editor">
{(!id || courseMedia) &&
{(!id || loadcourseMedia) &&
<GraphicsEditor
id="content"
detail={{
......@@ -189,7 +189,7 @@ class AddGraphicsIntro extends React.Component {
<div className="content">
<div className="intro-list">
<div className="intro-list__item introduce-editor">
{(!id || introduce) &&
{(!id || loadintroduce) &&
<GraphicsEditor
id="intro"
isIntro={true}
......
src/modules/home/Home.jsx
......@@ -71,9 +71,11 @@ class Home extends React.Component {
incCustomerNum: res.result.incCustomerNum,
incLiveCourseNum: res.result.incLiveCourseNum,
incVideoCourseNum: res.result.incVideoCourseNum,
incPictureCourseNum: res.result.incPictureCourseNum,
liveCourseNum: res.result.liveCourseNum,
totalCustomerNum: res.result.totalCustomerNum,
videoCourseNum: res.result.videoCourseNum,
pictureCourseNum: res.result.pictureCourseNum,
})
}
})
......@@ -182,9 +184,11 @@ class Home extends React.Component {
incCustomerNum,
incLiveCourseNum,
incVideoCourseNum,
incPictureCourseNum,
liveCourseNum,
totalCustomerNum,
videoCourseNum,
pictureCourseNum,
timeRange,
scheduleType,
studyTimeRange,
......@@ -212,7 +216,7 @@ class Home extends React.Component {
<img className="header-icon" src="https://image.xiaomaiketang.com/xm/jPrRhw8EMF.png" />
<span className="header-word">课程总数 (个)</span>
</div>
<div className="data-number">{videoCourseNum + liveCourseNum}</div>
<div className="data-number">{videoCourseNum + liveCourseNum + pictureCourseNum}</div>
<div className="course-box">
<div className="course-item">
<div className="course-title">直播课</div>
......@@ -239,12 +243,12 @@ class Home extends React.Component {
<div className="course-item">
<div className="course-title">图文课</div>
<div className="data">
<span className="course-number">0</span>
<span className="course-number">{pictureCourseNum}</span>
<span className="course-word">本月新增</span>
{false &&
{incPictureCourseNum > 0 &&
<span className="icon iconfont">&#xe635;</span>
}
<span className="add-number">0</span>
<span className="add-number">{incPictureCourseNum}</span>
</div>
</div>
<div className="course-item">
......@@ -304,8 +308,8 @@ class Home extends React.Component {
onClick={() => this.setState({ scheduleType: 'VOICE' }, () => this.getHotCourse())}
>视频课</span>
<span
className={`tab${scheduleType === 'GRAPHICS' ? ' selected' : ''}`}
onClick={() => this.setState({ scheduleType: 'GRAPHICS' }, () => this.getHotCourse())}
className={`tab${scheduleType === 'PICTURE' ? ' selected' : ''}`}
onClick={() => this.setState({ scheduleType: 'PICTURE' }, () => this.getHotCourse())}
>图文课</span>
</div>
<div className="study-select">
......
src/routes/config/menuList.tsx
......@@ -30,7 +30,7 @@ export const menuList: any = [
},
{
groupName: "图文课",
groupCode: "CourseVideoClass",
groupCode: "GraphicLesson",
link: '/graphics-course'
},
]
......
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment