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 ...@@ -35,6 +35,7 @@ const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategory
const defaultShelfState = 'YES'; const defaultShelfState = 'YES';
const whetherVisitorsJoin = 'NO' const whetherVisitorsJoin = 'NO'
const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'; const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
let cutFlag = false;
class AddGraphicsCourse extends React.Component { class AddGraphicsCourse extends React.Component {
...@@ -132,26 +133,29 @@ class AddGraphicsCourse extends React.Component { ...@@ -132,26 +133,29 @@ class AddGraphicsCourse extends React.Component {
categoryTwoName, categoryTwoName,
categoryId categoryId
} = result; } = result;
let coverId; let coverId;
let coverUrl = this.state.coverUrl; let coverUrl = this.state.coverUrl;
let hasIntro = false;
courseMediaVOS.map((item) => {
switch (item.contentType){ courseMediaVOS.map((item) => {
case "COVER": switch (item.contentType){
coverId = item.mediaContent; case "COVER":
coverUrl = item.mediaUrl; coverId = item.mediaContent;
coverUrl = item.mediaUrl;
break;
case "SCHEDULE":
this.getTextDetail('courseMedia', item.mediaUrl);
break; break;
case "SCHEDULE": case "INTRO":
this.getTextDetail('courseMedia', item.mediaUrl); hasIntro = true;
break; this.getTextDetail('introduce', item.mediaUrl);
case "INTRO": break;
this.getTextDetail('introduce', item.mediaUrl); default:
break; break;
default: }
break; return item;
} })
return item; !hasIntro && this.setState({ loadintroduce: true })
})
let categoryName; let categoryName;
if( categoryTwoName ){ if( categoryTwoName ){
...@@ -178,7 +182,7 @@ class AddGraphicsCourse extends React.Component { ...@@ -178,7 +182,7 @@ class AddGraphicsCourse extends React.Component {
url, url,
contentType:'application/x-www-form-urlencoded; charset=UTF-8', contentType:'application/x-www-form-urlencoded; charset=UTF-8',
success: (res) => { success: (res) => {
this.setState({ [key]: res }); this.setState({ [key]: res, [`load${key}`]: true });
} }
}) })
} }
...@@ -300,7 +304,7 @@ class AddGraphicsCourse extends React.Component { ...@@ -300,7 +304,7 @@ class AddGraphicsCourse extends React.Component {
}); });
} }
handleSelectCover = (file) => { handleSelectImage = (file) => {
this.setState({ this.setState({
showSelectImageModal: false showSelectImageModal: false
}) })
...@@ -311,15 +315,117 @@ class AddGraphicsCourse extends React.Component { ...@@ -311,15 +315,117 @@ class AddGraphicsCourse extends React.Component {
}); });
} }
// 上传封面图 handleSelectCover = (file)=> {
handleShowImgCutModal = (event) => { this.uploadImage(file);
const imageFile = event.target.files[0]; }
if (!imageFile) return;
this.setState({ //上传图片
imageFile, uploadImage = (imageFile) => {
showCutModal: true, 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 = () => { handleSubmit = () => {
const { const {
...@@ -432,6 +538,12 @@ class AddGraphicsCourse extends React.Component { ...@@ -432,6 +538,12 @@ class AddGraphicsCourse extends React.Component {
categoryName, categoryName,
courseCatalogList, courseCatalogList,
whetherVisitorsJoin, whetherVisitorsJoin,
loadcourseMedia,
loadintroduce,
showSelectCoverModal,
visible,
hasImgReady,
cutImageBlob,
} = this.state; } = this.state;
// 已选择的上课学员数量 // 已选择的上课学员数量
const hasSelectedStu = studentList.length; const hasSelectedStu = studentList.length;
...@@ -469,19 +581,11 @@ class AddGraphicsCourse extends React.Component { ...@@ -469,19 +581,11 @@ class AddGraphicsCourse extends React.Component {
<img src={coverUrl} /> <img src={coverUrl} />
</div> </div>
<div className="opt-btns"> <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={() => { <Button onClick={() => {
this.setState({ this.setState({
currentInputFile: this.refs.picInputFile showSelectCoverModal: true
}); });
this.refs.picInputFile.click()
}}>{`${(pageType === 'add' && !coverUrl) ? '上传' : '修改'}封面`}</Button> }}>{`${(pageType === 'add' && !coverUrl) ? '上传' : '修改'}封面`}</Button>
<div className="tips">建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div> <div className="tips">建议尺寸1280*720px或16:9。封面图最大5M，支持jpg、jpeg和png。</div>
</div> </div>
...@@ -504,7 +608,8 @@ class AddGraphicsCourse extends React.Component { ...@@ -504,7 +608,8 @@ class AddGraphicsCourse extends React.Component {
introduce, introduce,
shelfState, shelfState,
whetherVisitorsJoin, whetherVisitorsJoin,
label: '图文课简介' loadcourseMedia,
loadintroduce,
}} }}
onChange={this.handleChangeForm} onChange={this.handleChangeForm}
/> />
...@@ -550,27 +655,78 @@ class AddGraphicsCourse extends React.Component { ...@@ -550,27 +655,78 @@ class AddGraphicsCourse extends React.Component {
onClose={() => { onClose={() => {
this.setState({ showSelectImageModal: false }) 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} onSelect={this.handleSelectCover}
/> />
} }
<ImgCutModalNew <Modal
title="裁剪" title="设置图片"
width={550} width={1080}
cutWidth={500} visible={visible}
cutHeight={282} maskClosable={false}
cutContentWidth={500} closeIcon={<span className="icon iconfont modal-close-icon">&#xe6ef;</span>}
cutContentHeight={300} onCancel={() => {
visible={showCutModal} this.setState({ visible: false });
imageFile={imageFile}
bizCode='LIVE_COURSE_MEDIA'
onOk={(urlStr, resourceId) => {
this.setState({ showCutModal: false });
this.handleChangeForm('coverId', resourceId, urlStr)
this.state.currentInputFile.value = '';
}} }}
onClose={() => this.setState({ showCutModal: false })} zIndex={10001}
reUpload={() => { this.state.currentInputFile.click() }} 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 } { this.state.previewGraphicsModal }
</div> </div>
) )
......
src/modules/course-manage/graphics-course/components/AddGraphicsIntro.jsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-07-16 11:05:17 * @Date: 2020-07-16 11:05:17
* @Last Modified by: chenshu * @Last Modified by: chenshu
* @Last Modified time: 2021-03-19 15:44:56 * @Last Modified time: 2021-03-22 10:20:41
* @Description: 添加直播-简介 * @Description: 添加直播-简介
*/ */
...@@ -132,7 +132,7 @@ class AddGraphicsIntro extends React.Component { ...@@ -132,7 +132,7 @@ class AddGraphicsIntro extends React.Component {
} }
render() { 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; const { showSelectFileModal, selectType } = this.state;
return ( return (
<div className="add-video__intro-info"> <div className="add-video__intro-info">
...@@ -171,7 +171,7 @@ class AddGraphicsIntro extends React.Component { ...@@ -171,7 +171,7 @@ class AddGraphicsIntro extends React.Component {
<div className="content"> <div className="content">
<div className="intro-list"> <div className="intro-list">
<div className="intro-list__item content-editor"> <div className="intro-list__item content-editor">
{(!id || courseMedia) && {(!id || loadcourseMedia) &&
<GraphicsEditor <GraphicsEditor
id="content" id="content"
detail={{ detail={{
...@@ -189,7 +189,7 @@ class AddGraphicsIntro extends React.Component { ...@@ -189,7 +189,7 @@ class AddGraphicsIntro extends React.Component {
<div className="content"> <div className="content">
<div className="intro-list"> <div className="intro-list">
<div className="intro-list__item introduce-editor"> <div className="intro-list__item introduce-editor">
{(!id || introduce) && {(!id || loadintroduce) &&
<GraphicsEditor <GraphicsEditor
id="intro" id="intro"
isIntro={true} isIntro={true}
......
src/modules/home/Home.jsx
...@@ -71,9 +71,11 @@ class Home extends React.Component { ...@@ -71,9 +71,11 @@ class Home extends React.Component {
incCustomerNum: res.result.incCustomerNum, incCustomerNum: res.result.incCustomerNum,
incLiveCourseNum: res.result.incLiveCourseNum, incLiveCourseNum: res.result.incLiveCourseNum,
incVideoCourseNum: res.result.incVideoCourseNum, incVideoCourseNum: res.result.incVideoCourseNum,
incPictureCourseNum: res.result.incPictureCourseNum,
liveCourseNum: res.result.liveCourseNum, liveCourseNum: res.result.liveCourseNum,
totalCustomerNum: res.result.totalCustomerNum, totalCustomerNum: res.result.totalCustomerNum,
videoCourseNum: res.result.videoCourseNum, videoCourseNum: res.result.videoCourseNum,
pictureCourseNum: res.result.pictureCourseNum,
}) })
} }
}) })
...@@ -182,9 +184,11 @@ class Home extends React.Component { ...@@ -182,9 +184,11 @@ class Home extends React.Component {
incCustomerNum, incCustomerNum,
incLiveCourseNum, incLiveCourseNum,
incVideoCourseNum, incVideoCourseNum,
incPictureCourseNum,
liveCourseNum, liveCourseNum,
totalCustomerNum, totalCustomerNum,
videoCourseNum, videoCourseNum,
pictureCourseNum,
timeRange, timeRange,
scheduleType, scheduleType,
studyTimeRange, studyTimeRange,
...@@ -212,7 +216,7 @@ class Home extends React.Component { ...@@ -212,7 +216,7 @@ class Home extends React.Component {
<img className="header-icon" src="https://image.xiaomaiketang.com/xm/jPrRhw8EMF.png" /> <img className="header-icon" src="https://image.xiaomaiketang.com/xm/jPrRhw8EMF.png" />
<span className="header-word">课程总数 (个)</span> <span className="header-word">课程总数 (个)</span>
</div> </div>
<div className="data-number">{videoCourseNum + liveCourseNum}</div> <div className="data-number">{videoCourseNum + liveCourseNum + pictureCourseNum}</div>
<div className="course-box"> <div className="course-box">
<div className="course-item"> <div className="course-item">
<div className="course-title">直播课</div> <div className="course-title">直播课</div>
...@@ -239,12 +243,12 @@ class Home extends React.Component { ...@@ -239,12 +243,12 @@ class Home extends React.Component {
<div className="course-item"> <div className="course-item">
<div className="course-title">图文课</div> <div className="course-title">图文课</div>
<div className="data"> <div className="data">
<span className="course-number">0</span> <span className="course-number">{pictureCourseNum}</span>
<span className="course-word">本月新增</span> <span className="course-word">本月新增</span>
{false && {incPictureCourseNum > 0 &&
<span className="icon iconfont">&#xe635;</span> <span className="icon iconfont">&#xe635;</span>
} }
<span className="add-number">0</span> <span className="add-number">{incPictureCourseNum}</span>
</div> </div>
</div> </div>
<div className="course-item"> <div className="course-item">
...@@ -304,8 +308,8 @@ class Home extends React.Component { ...@@ -304,8 +308,8 @@ class Home extends React.Component {
onClick={() => this.setState({ scheduleType: 'VOICE' }, () => this.getHotCourse())} onClick={() => this.setState({ scheduleType: 'VOICE' }, () => this.getHotCourse())}
>视频课</span> >视频课</span>
<span <span
className={`tab${scheduleType === 'GRAPHICS' ? ' selected' : ''}`} className={`tab${scheduleType === 'PICTURE' ? ' selected' : ''}`}
onClick={() => this.setState({ scheduleType: 'GRAPHICS' }, () => this.getHotCourse())} onClick={() => this.setState({ scheduleType: 'PICTURE' }, () => this.getHotCourse())}
>图文课</span> >图文课</span>
</div> </div>
<div className="study-select"> <div className="study-select">
......
src/routes/config/menuList.tsx
...@@ -30,7 +30,7 @@ export const menuList: any = [ ...@@ -30,7 +30,7 @@ export const menuList: any = [
}, },
{ {
groupName: "图文课", groupName: "图文课",
groupCode: "CourseVideoClass", groupCode: "GraphicLesson",
link: '/graphics-course' 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