Skip to content

X
xiaomai-cloud-class-web
Commit 8349d5fb by zhangleyuan
Options

feat:修改课程里的添加图片相关

parent f802bc34
Showing with 310 additions and 119 deletions
src/modules/common/TeacherSearchSelect.jsx
......@@ -9,7 +9,6 @@ import { Tooltip, Input, Spin, Select, Avatar, Row, Col } from 'antd';
import _ from 'underscore';
import "./CommonSelect.less";
import "./TeacherSearchSelect.less";
import classNames from 'classNames'
const baseImg ='https://image.xiaomaiketang.com/xm/rJeQaZxtc7.png'
class TeacherSearchSelect extends React.Component {
......
src/modules/course-manage/AddLive.jsx
......@@ -26,12 +26,9 @@ import './AddLive.less';
const defaultCover = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
const defaultBasicInfo = {
courseName: null, // 课程名称
coverId: null,
coverUrl: defaultCover,
parentCatalogId:null,
sonCatalogId:null,
categoryId:null,
categoryName:null
categoryName:null,
};
const defaultClassInfo = {
......@@ -71,12 +68,9 @@ class AddLive extends React.Component {
// 直播课基本信息
addLiveBasicInfo: {
courseName: null, // 课程名称
coverId: null,
coverUrl: defaultCover,
parentCatalogId:null,
sonCatalogId:null,
categoryId:null,
categoryName:null
categoryName:null,
},
// 直播课上课信息
......@@ -122,8 +116,6 @@ class AddLive extends React.Component {
const {
teacherId,
courseName,
coverUrl,
coverId,
startTime,
endTime,
courseMediaVOS,
......@@ -135,15 +127,29 @@ class AddLive extends React.Component {
categoryName,
admins
} = res.result;
let coverUrl;
let liveCourseMediaRequests = [];
let liveCourseWarmMedia;
courseMediaVOS.map((item) => {
item.key = window.random_string(16);
switch (item.contentType){
case "COVER":
coverUrl = item.mediaContent;
break;
case "WARMUP":
liveCourseWarmMedia = item;
break;
case "INTRO":
liveCourseMediaRequests = [...liveCourseMediaRequests,item]
break;
default:
break;
}
return item;
})
const addLiveBasicInfo = {
courseName,
coverId,
coverUrl: coverUrl || defaultCover,
categoryId,
categoryName
......@@ -153,7 +159,6 @@ class AddLive extends React.Component {
const timeHorizonStart = startTime;
const timeHorizonEnd = endTime;
const assistant = _.pluck(admins, "adminId");
console.log('assistant',assistant);
const addLiveClassInfo = {
assistant,
liveDate,
......@@ -165,12 +170,12 @@ class AddLive extends React.Component {
endTime,
}
const liveCourseMediaRequests = courseMediaVOS.length
? [...courseMediaVOS]
: [{ contentType:"INTRO",mediaType: 'TEXT', mediaContent: '', key: window.random_string(16) }, ...courseMediaVOS];
liveCourseMediaRequests = liveCourseMediaRequests.length
? [...liveCourseMediaRequests]
: [{ contentType:"INTRO",mediaType: 'TEXT', mediaContent: '', key: window.random_string(16) }, ...liveCourseMediaRequests];
const addLiveIntroInfo = {
liveCourseWarmMedia: warmMedia,
liveCourseWarmMedia,
needRecord,
whetherVisitorsJoin,
liveCourseMediaRequests,
......@@ -191,13 +196,11 @@ class AddLive extends React.Component {
}
// 修改基本信息
handleChangeBasicInfo = (field, value, _coverUrl) => {
const { coverUrl } = this.state.addLiveBasicInfo;
handleChangeBasicInfo = (field, value) => {
this.setState({
addLiveBasicInfo: {
...this.state.addLiveBasicInfo,
[field]: value,
coverUrl: _coverUrl ? _coverUrl : coverUrl,
}
},()=>{console.log(this.state.addLiveBasicInfo)})
}
......@@ -259,7 +262,7 @@ class AddLive extends React.Component {
this.handleValidate(addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, isEdit).then((res) => {
if (!res) return;
const { type } = this.state;
const { courseName, coverId, coverUrl,parentCatalogId,sonCatalogId,categoryId} = addLiveBasicInfo;
const { courseName, coverUrl,categoryId} = addLiveBasicInfo;
const {
liveDate,
teacherId,
......@@ -282,6 +285,11 @@ class AddLive extends React.Component {
startTime = moment(_liveDate + ' ' + _timeHorizonStart).format('x');
endTime = moment(_liveDate + ' ' + _timeHorizonEnd).format('x');
}
const coverObj ={
contentType:'COVER',
mediaContent:coverUrl,
mediaType:'PICTURE'
}
const commonParams = {
adminIds:assistant,
calendarTime,
......@@ -293,7 +301,7 @@ class AddLive extends React.Component {
storeId:User.getStoreId(),
teacherId:teacherId,
whetherVisitorsJoin,
// scheduleMediaRequests:[...liveCourseMediaRequests]
scheduleMediaRequests:[coverObj,liveCourseWarmMedia,...liveCourseMediaRequests]
}
if (type === 'add') {
......@@ -330,7 +338,7 @@ class AddLive extends React.Component {
handleValidate = (addLiveBasicInfo, addLiveClassInfo, addLiveIntroInfo, isEdit) => {
return new Promise((resolve) => {
const { type } = this.state;
const { courseName,parentCatalogId,categoryId} = addLiveBasicInfo;
const { courseName,categoryId} = addLiveBasicInfo;
const {
liveDate, timeHorizonStart, timeHorizonEnd, teacherId, calendarTime
} = addLiveClassInfo;
......
src/modules/course-manage/components/AddLiveBasic.jsx
......@@ -7,14 +7,18 @@
*/
import React from 'react';
import { Input, Button, message ,Cascader } from 'antd';
import { Input, Button, message ,Cascader,Modal} from 'antd';
import UploadOss from "@/core/upload";
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 './AddLiveBasic.less';
const defaultCover = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
const fieldNames = { label: 'categoryName', value: 'id', children: 'sonCategoryList' };
let cutFlag = false;
class AddLiveBasic extends React.Component {
constructor(props) {
......@@ -22,7 +26,8 @@ class AddLiveBasic extends React.Component {
this.state = {
imageFile: null,
showCutModal: false,
courseCatalogList:[]
courseCatalogList:[],
showSelectFileModal: false
}
}
componentWillUnmount() {
......@@ -55,7 +60,7 @@ class AddLiveBasic extends React.Component {
// 如果已经是默认图的话，不做任何任何处理
if (isDefaultCover) return;
message.success('已替换为默认图');
this.props.onChange('coverId', null, defaultCover);
this.props.onChange('coverUrl',defaultCover);
}
catalogChange= (value) => {
......@@ -71,16 +76,115 @@ class AddLiveBasic extends React.Component {
break;
}
}
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) => {
const { folderName } = imageFile;
const fileName =
window.random_string(16) + folderName.slice(folderName.lastIndexOf("."));
this.setState(
{
visible: true,
},
() => {
setTimeout(() => {
const okBtnDom = document.querySelector("#headPicModal");
const viewImgDom = document.querySelector('#preview-url-box');
const options = {
size: [500, 73],
rotateFree: false,
ok: okBtnDom,
view: viewImgDom,
maxZoom: 3,
style: {
jpgFillColor: "transparent",
},
done: (dataUrl) => {
const cutImage = this.convertBase64UrlToBlob(dataUrl);
this.getSignature(cutImage, fileName);
setTimeout(() => {
cutFlag = false;
}, 2000);
},
fail: (failInfo) => {
},
loadComplete:(img)=>{
this.setState({
previewUrl: img.src
})
}
};
if (!this.state.photoclip) {
const photoclip = new PhotoClip("#headPicModal", options);
photoclip.load(imageFile.ossUrl);
console.log("photoclip-222",photoclip);
this.setState({
photoclip,
});
} else {
this.state.photoclip.clear();
this.state.photoclip.load(imageFile.ossUrl);
}
},200);
}
);
};
//获取resourceId
getSignature = (blob, fileName) => {
const { choosedBannerId } = this.state;
Upload.uploadBlobToOSS(blob, 'avatar' + (new Date()).valueOf()).then((coverClicpPath) => {
this.setState({
coverClicpPath
})
});
};
// 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" });
};
updateCover = () =>{
const {coverClicpPath} = this.state
this.setState({
showSelectFileModal: false
})
// const coverObj = {
// contentType: 'COVER',
// mediaType: 'PICTURE',
// mediaContent: coverClicpPath,
// }
// console.log("coverObj",coverObj);
this.props.onChange('coverUrl', coverClicpPath);
}
render() {
const { showCutModal, imageFile,courseCatalogList} = this.state;
const { showCutModal, imageFile,courseCatalogList,showSelectFileModal,visible } = this.state;
const { data,pageType,isEdit} = this.props;
const { courseName, coverUrl,categoryName} = data;
console.log('categoryName',categoryName);
const { courseName,categoryName,coverUrl} = data;
const fileName = '';
// 当前是否使用的是默认图片
const isDefaultCover = coverUrl === defaultCover;
return (
<div className="add-live__basic-info">
<div className="course-name">
......@@ -105,20 +209,21 @@ class AddLiveBasic extends React.Component {
<img src={coverUrl} />
</div>
<div className="opt-btns">
<input
{/* <input
type="file"
value={fileName} // 避免选择同一文件 value不改变 不触发onChange事件
accept="image/png, image/jpeg, image/bmp, image/jpg"
ref="stagePicInputFile"
style={{display: 'none'}}
onChange={(event) => { this.handleShowImgCutModal(event) }}
/>
onChange={() => { this.setState({
showSelectFileModal: true
}) }}
/> */}
<Button onClick={() => {
this.setState({
currentInputFile: this.refs.stagePicInputFile
});
this.refs.stagePicInputFile.click();
showSelectFileModal: true
})
}}>上传图片</Button>
<span
className={`default-btn ${isDefaultCover ? 'disabled' : ''}`}
......@@ -155,6 +260,67 @@ class AddLiveBasic extends React.Component {
onClose={() => this.setState({ showCutModal: false })}
reUpload={() => { this.state.currentInputFile.click() }}
/>
<SelectPrepareFileModal
operateType="select"
accept="video/mp4,image/jpeg,image/png,image/jpg"
selectTypeList={['MP4', 'JPG', 'JPEG', 'PNG']}
tooltip='支持文件类型：jpg、jpeg、png、mp4'
isOpen={showSelectFileModal}
onClose={() => {
this.setState({ showSelectFileModal: false })
}}
onSelect={this.handleSelectCover}
/>
<Modal
title="设置图片"
width={1080}
visible={visible}
onCancel={() => {
this.setState({ visible: false });
}}
footer={[
<Button
key="back"
onClick={() => {
this.setState({ visible: false });
}}
>
重新上传
</Button>,
<Button
key="submit"
type="primary"
onClick={() => {
if (!cutFlag) {
cutFlag = true;
this.refs.hiddenBtn.click();
}
this.setState({ visible: false });
this.updateCover()
}}
>
确定
</Button>,
]}
>
<div className="clip-box">
<div
id="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>
{/* <img src={previewUrl} alt="图片预览" className="preview-url" /> */}
<div id="preview-url-box"></div>
</div>
</div>
</Modal>
</div>
)
}
......
src/modules/course-manage/components/AddLiveIntro.jsx
......@@ -17,6 +17,7 @@ import SelectPrepareFileModal from '@/modules/prepare-lesson/modal/SelectPrepare
import { DISK_MAP } from '@/common/constants/academic/lessonEnum';
import { ImgCutModalNew } from '@/components';
const { TextArea } = Input;
const defaultCover = 'https://xiaomai-image.oss-cn-hangzhou.aliyuncs.com/1599635741526.png';
class AddLiveIntro extends React.Component {
......@@ -27,6 +28,7 @@ class AddLiveIntro extends React.Component {
warmUrl: defaultCover,
showSelectFileModal: false,
diskList: [],
selectType:null
}
}
......@@ -39,36 +41,56 @@ class AddLiveIntro extends React.Component {
showCutModal: true,
});
}
// 选择暖场资源
handleSelectVideo = (file) => {
const { selectType } = this.state;
this.setState({
showSelectFileModal: false
})
const { ossUrl, resourceId, folderName, folderFormat, folderSize } = file;
const liveCourseWarmMedia = {
contentType: 'WARMUP',
mediaType: folderFormat === 'MP4' ? 'VIDEO' : 'PICTURE',
mediaContent: resourceId,
mediaUrl: ossUrl,
mediaName: folderName,
size: folderSize
if(selectType === 'WARMUP'){
const liveCourseWarmMedia = {
contentType: 'WARMUP',
mediaType: folderFormat === 'MP4' ? 'VIDEO' : 'PICTURE',
mediaContent: resourceId,
mediaUrl: ossUrl,
mediaName: folderName,
size: folderSize
}
this.props.onChange('liveCourseWarmMedia', liveCourseWarmMedia);
}else{
// 最多添加九图片
const { liveCourseMediaRequests } = this.props.data;
if (liveCourseMediaRequests.length > 8) {
message.warning("最多添加9张图片");
return;
}
liveCourseMediaRequests.push({
contentType: 'INTRO',
size: folderSize,
mediaName: folderName,
mediaContent: resourceId,
mediaType: 'PICTURE',
mediaUrl: ossUrl,
});
this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
}
console.log('liveCourseWarmMedia',liveCourseWarmMedia);
this.props.onChange('liveCourseWarmMedia', liveCourseWarmMedia);
}
// 获取机构可见的磁盘
handleFetchDiskList = () => {
// axios.Apollo('public/apollo/getUserDisk', {}).then((res) => {
// const { result = [] } = res;
// const diskList = result.map((item) => {
// return {
// ...item,
// folderName: DISK_MAP[item.disk]
// }
// });
// this.setState({ diskList });
// });
}
// handleFetchDiskList = () => {
// axios.Apollo('public/apollo/getUserDisk', {}).then((res) => {
// const { result = [] } = res;
// const diskList = result.map((item) => {
// return {
// ...item,
// folderName: DISK_MAP[item.disk]
// }
// });
// this.setState({ diskList });
// });
// }
// 删除简介
handleDeleteIntro = (index) => {
......@@ -145,66 +167,60 @@ class AddLiveIntro extends React.Component {
}
handleUpload = (Blob) => {
this.setState({
showSelectFileModal: true,
selectType:'INTRO'
})
// 最多添加九图片
const { liveCourseMediaRequests } = this.props.data;
const list = _.filter(liveCourseMediaRequests, (item) => {
return item.mediaType == "PICTURE";
});
// const { liveCourseMediaRequests } = this.props.data;
// const list = _.filter(liveCourseMediaRequests, (item) => {
// return item.mediaType == "PICTURE";
// });
if (list.length > 8) {
message.warning("最多添加9张图片");
return;
}
// if (list.length > 8) {
// message.warning("最多添加9张图片");
// return;
// }
const { instId } = window.currentUserInstInfo;
const { name, size } = Blob;
const resourceName = window.random_string(16) + name.slice(name.lastIndexOf('.'));
// UploadOss.uploadBlobToOSS(Blob, 'avatar' + (new Date()).valueOf(),'', 'id').then((imgAddress) => {
// const { instId } = window.currentUserInstInfo;
// const { name, size } = Blob;
// const resourceName = window.random_string(16) + name.slice(name.lastIndexOf('.'));
// const params = {
// resourceName,
// accessTypeEnum: 'PUBLIC',
// bizCode: 'LIVE_COURSE_MEDIA',
// instId:User.getStoreId(),
// }
// Service.Hades("public/hades/commonOssAuthority", params).then((res) => {
// const { resourceId } = res.result;
// const signInfo = res.result;
// // 构建上传的表单
// const xhr = new XMLHttpRequest();
// const formData = new FormData();
// formData.append("OSSAccessKeyId", signInfo.accessId);
// formData.append("policy", signInfo.policy);
// formData.append("callback", signInfo.callback);
// formData.append("Signature", signInfo.signature);
// formData.append("key", signInfo.key);
// formData.append("file", Blob);
// formData.append("success_action_status", 200);
// xhr.open("POST", signInfo.host);
// xhr.onload = () => {
// liveCourseMediaRequests.push({
// contentType:"INTRO",
// size,
// mediaName: name,
// mediaContent: imgAddress.resourceId,
// mediaContent: resourceId,
// mediaType: 'PICTURE',
// mediaUrl: window.URL.createObjectURL(Blob),
// });
// this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
// };
// xhr.onerror = () => {
// xhr.abort();
// };
// xhr.send(formData);
// this.setState({ xhr })
// });
const params = {
resourceName,
accessTypeEnum: 'PUBLIC',
bizCode: 'LIVE_COURSE_MEDIA',
instId:User.getStoreId(),
}
Service.Hades("public/hades/commonOssAuthority", params).then((res) => {
const { resourceId } = res.result;
const signInfo = res.result;
// 构建上传的表单
const xhr = new XMLHttpRequest();
const formData = new FormData();
formData.append("OSSAccessKeyId", signInfo.accessId);
formData.append("policy", signInfo.policy);
formData.append("callback", signInfo.callback);
formData.append("Signature", signInfo.signature);
formData.append("key", signInfo.key);
formData.append("file", Blob);
formData.append("success_action_status", 200);
xhr.open("POST", signInfo.host);
xhr.onload = () => {
liveCourseMediaRequests.push({
size,
mediaName: name,
mediaContent: resourceId,
mediaType: 'PICTURE',
mediaUrl: window.URL.createObjectURL(Blob),
});
this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
};
xhr.onerror = () => {
xhr.abort();
};
xhr.send(formData);
this.setState({ xhr })
});
}
whetherVisitorsJoinChange = ()=>{
if(this.props.data.whetherVisitorsJoin==="NO"){
......@@ -214,7 +230,7 @@ class AddLiveIntro extends React.Component {
}
}
componentWillMount() {
this.handleFetchDiskList();
// this.handleFetchDiskList();
}
// componentWillUnmount() {
// const { xhr } = this.state;
......@@ -288,7 +304,8 @@ class AddLiveIntro extends React.Component {
disabled={!isEdit}
onClick={() => {
this.setState({
showSelectFileModal: true
showSelectFileModal: true,
selectType:'WARMUP'
})
}}>上传图片/视频</Button>
......@@ -346,8 +363,11 @@ class AddLiveIntro extends React.Component {
<span className="icon iconfont">&#xe639;</span>
<span className="text">文字</span>
</div>
<Upload
<div className="operate__item" onClick={this.handleUpload}>
<span className="icon iconfont">&#xe63b;</span>
<span className="text">图片</span>
</div>
{/* <Upload
fileList={[]}
accept="image/jpeg, image/png, image/jpg, image/gif"
beforeUpload={(Blob) => {
......@@ -359,7 +379,7 @@ class AddLiveIntro extends React.Component {
<span className="icon iconfont">&#xe63b;</span>
<span className="text">图片</span>
</div>
</Upload>
</Upload> */}
</div>
<div className="tips">
• 图片支持jpeg、jpg、png、gif格式
......@@ -374,12 +394,12 @@ class AddLiveIntro extends React.Component {
selectTypeList={['MP4', 'JPG', 'JPEG', 'PNG']}
tooltip='支持文件类型：jpg、jpeg、png、mp4'
isOpen={showSelectFileModal}
diskList={diskList}
onClose={() => {
this.setState({ showSelectFileModal: false })
}}
onSelect={this.handleSelectVideo}
/>
</div>
)
}
......
src/modules/prepare-lesson/modal/SelectPrepareFileModal.jsx
......@@ -97,8 +97,6 @@ class SelectPrepareFileModal extends React.Component {
// 根据当前根节点获取文件列表
const { selectTypeList } = this.props;
const { query, folderList, currentRootDisk } = this.state;
const { instId } = window.currentUserInstInfo;
const _params = {
...query,
...params,
......
src/modules/prepare-lesson/modal/UploadProgressModal.jsx
......@@ -128,7 +128,6 @@ class UploadProgressModal extends React.Component {
}).then(url => {
file.status = 'success';
this.setState({ fileList });
console.log('fileList',fileList);
this.props.onUpload(fileContent, resourceId);
}).catch(err => {
file.status = 'fail';
......@@ -150,6 +149,7 @@ class UploadProgressModal extends React.Component {
if (size > 100 * 1024) {
file.checkpoints[checkpoint.uploadId] = checkpoint;
}
}
// 断点续传
......
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