Skip to content

X
xiaomai-cloud-class-web
Commit 4136b795 by wufan
Options

feat:添加资料云盘

parent dffb2d6d
Showing with 3241 additions and 24 deletions
package.json
...@@ -18,6 +18,8 @@ ...@@ -18,6 +18,8 @@
"@types/underscore": "^1.10.22", "@types/underscore": "^1.10.22",
"@typescript-eslint/eslint-plugin": "^2.10.0", "@typescript-eslint/eslint-plugin": "^2.10.0",
"@typescript-eslint/parser": "^2.10.0", "@typescript-eslint/parser": "^2.10.0",
"@types/ali-oss": "^6.0.5",
"ali-oss": "^6.12.0",
"antd": "^4.8.5", "antd": "^4.8.5",
"axios": "^0.20.0", "axios": "^0.20.0",
"babel-eslint": "10.1.0", "babel-eslint": "10.1.0",
...@@ -28,6 +30,7 @@ ...@@ -28,6 +30,7 @@
"babel-preset-react-app": "^9.1.2", "babel-preset-react-app": "^9.1.2",
"camelcase": "^5.3.1", "camelcase": "^5.3.1",
"case-sensitive-paths-webpack-plugin": "2.3.0", "case-sensitive-paths-webpack-plugin": "2.3.0",
"classnames": "^2.2.6",
"cropper": "^3.1.4", "cropper": "^3.1.4",
"cross-env": "^7.0.2", "cross-env": "^7.0.2",
"css-loader": "3.4.2", "css-loader": "3.4.2",
...@@ -46,6 +49,7 @@ ...@@ -46,6 +49,7 @@
"file-loader": "4.3.0", "file-loader": "4.3.0",
"fs-extra": "^8.1.0", "fs-extra": "^8.1.0",
"html-webpack-plugin": "4.0.0-beta.11", "html-webpack-plugin": "4.0.0-beta.11",
"html2canvas": "^1.0.0-rc.7",
"husky": "^4.2.5", "husky": "^4.2.5",
"identity-obj-proxy": "3.0.0", "identity-obj-proxy": "3.0.0",
"jest": "24.9.0", "jest": "24.9.0",
...@@ -53,9 +57,11 @@ ...@@ -53,9 +57,11 @@
"jest-resolve": "24.9.0", "jest-resolve": "24.9.0",
"jest-watch-typeahead": "0.4.2", "jest-watch-typeahead": "0.4.2",
"jquery": "^3.4.1", "jquery": "^3.4.1",
"less": "^3.12.2",
"less-loader": "^6.2.0", "less-loader": "^6.2.0",
"microevent": "^1.0.0", "microevent": "^1.0.0",
"mini-css-extract-plugin": "0.9.0", "mini-css-extract-plugin": "0.9.0",
"moment": "^2.27.0",
"optimize-css-assets-webpack-plugin": "5.0.3", "optimize-css-assets-webpack-plugin": "5.0.3",
"pnp-webpack-plugin": "1.6.4", "pnp-webpack-plugin": "1.6.4",
"postcss-flexbugs-fixes": "4.1.0", "postcss-flexbugs-fixes": "4.1.0",
...@@ -80,10 +86,13 @@ ...@@ -80,10 +86,13 @@
"typescript": "^4.0.2", "typescript": "^4.0.2",
"underscore": "^1.10.2", "underscore": "^1.10.2",
"url-loader": "2.3.0", "url-loader": "2.3.0",
"video-react": "^0.14.1",
"wangeditor": "^3.1.1",
"webpack": "4.42.0", "webpack": "4.42.0",
"webpack-dev-server": "3.11.0", "webpack-dev-server": "3.11.0",
"webpack-manifest-plugin": "2.2.0", "webpack-manifest-plugin": "2.2.0",
"workbox-webpack-plugin": "4.3.1" "workbox-webpack-plugin": "4.3.1",
"xiaomai-b-components": "1.4.4"
}, },
"scripts": { "scripts": {
"start": "node scripts/start.js", "start": "node scripts/start.js",
...@@ -116,8 +125,9 @@ ...@@ -116,8 +125,9 @@
"jsx-control-statements" "jsx-control-statements"
] ]
}, },
"devDependencies": { "devDependencies": {
"@types/jquery": "^3.5.4" "@types/ali-oss": "^6.0.5",
"@types/jquery": "^3.5.4",
"ali-oss": "^6.12.0"
} }
} }
src/bu-components/ChooseMembersModal.less 0 → 100644
.choose-container{
display: flex;
background-color: #fff !important;
.container-left{
width: 50%;
padding-right: 10px;
.container-left-header{
margin-bottom: 10px;
}
.container-left-body{
border: 1px solid #E9E9E9;
.search{
width: 250px;
padding: 7px 7px;
}
.container-left-body-table{
width: 252px;
height: 256px;
>table >thead >tr{
border-bottom:none;
}
.ant-table {
border: none;
min-height: 250px !important;
}
.ant-empty-normal {
margin: 100px 0 !important;
}
.avatar{
.avatar-img{
height: 23px;
width: 23px;
border-radius: 50%;
}
}
.ant-table-tbody{
>tr >td {
border-bottom:none;
}
}
.ant-table-row{
background-color: #fff !important;
}
.ant-table-row:hover{
background-color: #E9E9E9;
}
}
}
}
.container-right{
width: 50%;
height: 340px;
.span-left{
margin-left: 10px;
.span-left-l{
color: #FD9A6A;
cursor: pointer;
}
}
.span-right{
float: right;
margin-right: 10px;
.span-right-l{
color: #FD9A6A;
cursor: pointer;
}
}
.container-right-body{
margin: 10px;
.edit-img{
width: 16px;
height: 16px;
}
.ant-table {
min-height: 303px !important;
}
.ant-empty-normal {
margin: 100px 0 !important;
}
.ant-table-tbody{
>tr >td {
border-bottom:none;
}
>tr .ant-table-selection-column{
width: 30px !important;
}
.ant-table-row{
border: none !important;
background-color: #fff !important;
}
.ant-table-row:hover{
background-color: #e6e1e1;
}
}
}
}
}
\ No newline at end of file
src/bu-components/CopyFileModal.less 0 → 100644
.copy-header{
margin-left: 34%;
}
.copy-body{
.bread:hover{
color: #FD9A6A;
}
}
.folder-list{
margin-top: 10px;
height: 260px;
// overflow-y: scroll;
border-top: 1px solid #E8E8E8;
border-top-left-radius:4px;
border-top-right-radius:4px;
.enable{
cursor: pointer;
}
.disable{
cursor: not-allowed;
opacity: 0.5;
}
.information{
display: flex;
height: 50px;
border: 1px solid #E8E8E8;
border-top: none;
padding-top: 12px;
padding-left: 25px;
position: relative;
.folderName{
padding-left: 15px;
}
.file-item__expend-icon{
position: absolute;
right: 20px;
.iconfont {
color: #BFBFBF;
}
}
.file-item__size{
position: absolute;
right: 20px;
}
}
}
.lottie-icon{
margin: 100px 0;
}
\ No newline at end of file
src/bu-components/Introduction.jsx 0 → 100644
/*
* @Author: 吴文洁
* @Date: 2020-07-16 11:05:17
* @Last Modified by: 吴文洁
* @Last Modified time: 2020-07-17 16:17:10
* @Description: 添加直播-简介
*/
import React from 'react';
import { Input, message, Upload } from 'antd';
import _ from 'underscore';
import { randomString } from '@/domains/basic-domain/utils';
import Service from '@/common/js/service';
import EditorBox from '../components/EditorBox';
import './Introduction.less';
const { TextArea } = Input;
class Introduction extends React.Component {
constructor(props) {
super(props);
this.state = {
}
}
// 删除简介
handleDeleteIntro = (index) => {
const { liveCourseMediaRequests } = this.props.data;
liveCourseMediaRequests.splice(index, 1);
this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
}
// 上移简介
handleMoveUpIntro = (index) => {
const { liveCourseMediaRequests } = this.props.data;
const prevItem = liveCourseMediaRequests[index];
const nextItem = liveCourseMediaRequests[index + 1];
liveCourseMediaRequests.splice(index, 2, nextItem, prevItem);
this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
}
// 下移简介
handleMoveDownIntro = (index) => {
const { liveCourseMediaRequests } = this.props.data;
const prevItem = liveCourseMediaRequests[index - 1];
const nextItem = liveCourseMediaRequests[index];
liveCourseMediaRequests.splice(index - 1, 2, nextItem, prevItem);
this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
}
renderLittleIcon = (index) => {
const { liveCourseMediaRequests } = this.props.data;
return (
<div className="little-icon">
<span
className="icon iconfont close"
onClick={() => { this.handleDeleteIntro(index); }}
></span>
{
index > 0 &&
<span
className="icon iconfont"
onClick={() => { this.handleMoveDownIntro(index); }}
>&#xe6d1;</span>
}
{
index !== liveCourseMediaRequests.length - 1 &&
<span
className="icon iconfont"
onClick={() => { this.handleMoveUpIntro(index); }}
>&#xe6cf;</span>
}
</div>
)
}
handleChangeIntro = (index, value) => {
const { liveCourseMediaRequests } = this.props.data;
liveCourseMediaRequests[index].mediaContent = value;
this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
}
handleAddIntroText = () => {
const { liveCourseMediaRequests } = this.props.data;
liveCourseMediaRequests.push({
mediaType: 'TEXT',
mediaContent: '',
key: randomString(16)
});
this.props.onChange('liveCourseMediaRequests', liveCourseMediaRequests);
}
handleUpload = (Blob) => {
// 最多添加九图片
const { liveCourseMediaRequests } = this.props.data;
const list = _.filter(liveCourseMediaRequests, (item) => {
return item.mediaType === "PICTURE";
});
if (list.length > 8) {
message.warning("最多添加9张图片");
return;
}
const { instId } = window.currentUserInstInfo;
const { name, size } = Blob;
const resourceName = randomString(16) + name.slice(name.lastIndexOf('.'));
const params = {
resourceName,
accessTypeEnum: 'PUBLIC',
bizCode: 'LIVE_COURSE_MEDIA',
instId: instId,
}
Service.Apollo("public/apollo/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 })
});
}
componentWillUnmount() {
const { xhr } = this.state;
xhr && xhr.abort();
}
render() {
const {
iveScene,
data: {
introduction,
label = '直播课简介',
liveCourseMediaRequests = []
},
} = this.props;
// 是否是互动班课
const isInteractive = iveScene === 'interactive';
return (
<div className="add-live__intro-info">
<span className="lable">{label}：</span>
<div className="content">
{
isInteractive &&
<TextArea
value={introduction}
placeholder="简单介绍下这次课吧"
maxLength={200}
style={{ width: 480 }}
onChange={(e) => { this.props.onChange('introduction', e.target.value) }}
/>
}
<If condition={!isInteractive}>
<div className="intro-list">
{
liveCourseMediaRequests.map((item, index) => {
if (item.mediaType === 'TEXT') {
return (
<div className="intro-list__item" key={item.key}>
<EditorBox
detail={{
content: item.mediaContent
}}
onChange={(val) => { this.handleChangeIntro(index, val)}}
/>
{ this.renderLittleIcon(index) }
</div>
)
}
if (item.mediaType === 'PICTURE') {
return (
<div className="intro-list__item picture" key={index}>
<div className="img__wrap">
<img src={item.mediaUrl} alt="introImg" />
</div>
{ this.renderLittleIcon(index) }
</div>
)
}
return item;
})
}
</div>
<div className="operate">
<div className="operate__item" onClick={this.handleAddIntroText}>
<span className="icon iconfont">&#xe760;</span>
<span className="text">文字</span>
</div>
<Upload
fileList={[]}
accept="image/jpeg, image/png, image/jpg, image/gif"
beforeUpload={(Blob) => {
this.handleUpload(Blob);
return false;
}}
>
<div className="operate__item">
<span className="icon iconfont">&#xe74a;</span>
<span className="text">图片</span>
</div>
</Upload>
</div>,
<div className="tips">
• 图片支持jpeg、jpg、png、gif格式
</div>
</If>
</div>
</div>
)
}
}
export default Introduction;
src/bu-components/Introduction.less 0 → 100644
.add-live__intro-info {
display: flex ;
.label {
padding-top: 12px;
}
textarea.ant-input {
min-height: 80px;
}
.intro-list__item {
display: flex;
margin-bottom: 16px;
position: relative;
&.picture {
width: 550px;
padding: 16px;
border: 1px solid #EEE;
border-radius: 4px;
.img__wrap {
width: 299px;
height: 168px;
img {
width: 100%;
height: 100%;
object-fit: contain;
}
}
}
.little-icon {
display: flex;
flex-direction: column;
position: absolute;
top: 0;
right: -20px;
.iconfont {
width: 20px;
height: 20px;
line-height: 20px;
font-size: 20px;
color: #999;
margin-bottom: 4px;
cursor: pointer;
&.close {
margin-top: 8px;
background-image: url('https://image.xiaomaiketang.com/xm/eesMPhNP3e.png');
background-size: 100% 100%;
}
}
}
}
.operate {
display: flex;
align-items: center;
justify-content: center;
width: 550px;
height: 80px;
line-height: 80px;
padding: 16px;
margin-top: 16px;
border: 1px dashed #EBEBEB;
border-radius: 4px;
.ant-upload {
vertical-align: middle;
}
&__item {
display: flex;
flex-direction: column;
cursor: pointer;
&:not(:last-child) {
margin-right: 82px;
}
.iconfont {
font-size: 22px;
line-height: 22px;
color: #BFBFBF;
text-align: center;
}
.text {
color: #999;
line-height: 20px;
margin-top: 4px;
}
}
}
.tips {
color: #999;
margin-top: 16px;
}
}
\ No newline at end of file
src/bu-components/ManagingMembersModal.less 0 → 100644
.managing-header{
// width: 100%;
height: 30px;
.managing-left{
float: left;
margin-left: 10px;
.tool-tip-left{
cursor: pointer;
margin-left: 4px;
width: 14px;
height: 14px;
}
}
.managing-right{
float: right;
color: #FD9A6A;
margin-right: 10px;
cursor: pointer;
.tool-tip-right{
margin-right: 4px;
width: 14px;
height: 14px;
}
}
}
.managing-body{
height: 300px;
overflow: hidden;
border: 1px solid #E9E9E9;
border-radius: 10px;
.ant-table-tbody{
.ant-table-row{
background-color: #fff !important;
}
.ant-table-row:hover{
background-color: #E9E9E9;
}
}
.avatar{
.avatar-img{
height: 30px;
width: 30px;
border-radius: 50%;
}
}
.rights{
.img-type{
height: 18px;
width: 18px;
}
}
}
.menu-bottom{
font-size: 6px !important;
color: #AAAAAA !important;
}
.remove-modal{
font-size: 14px !important;
color: #AAAAAA !important;
height: 30px;
}
src/bu-components/NonCompliantFileModal.jsx 0 → 100644
/*
* @Author: 吴文洁
* @Date: 2020-06-16 11:41:43
* @Last Modified by: 吴文洁
* @Last Modified time: 2020-07-06 17:33:47
* @Description: 文件超出大小的限制
*/
import React from 'react';
import { Modal } from 'antd';
import { DEFAULT_SIZE_UNIT } from "@/domains/class-book/constants";
import './NonCompliantFileModal.less';
class NonCompliantFileModal extends React.Component {
constructor(props) {
super(props);
this.state = {}
}
render() {
const { isOpen, fileList } = this.props;
return (
<Modal
title="文件超出可上传的大小限制"
visible={isOpen}
okText="继续上传"
cancelText="放弃上传"
onCancel={this.props.onClose}
onOk={this.props.onOk}
className="prepare-lesson__non-compliant-file-modal"
>
<div className="file-list">
<div className="file-list__title">以下文件已超出上传限制，无法上传。</div>
<div className="file-list__content">
{
fileList.map((file, index) => {
let _size = `${(file.size / DEFAULT_SIZE_UNIT).toFixed(1)}M`;
if (file.size < 0.1 * DEFAULT_SIZE_UNIT) {
_size = `${(file.size / 1000).toFixed(1)}kb`;
}
return (
<div className="file-list__item" key={`file-list__item${index}`}>
<span className="file-name">{file.name}</span>
<span className="file-size">（{_size}）</span>
</div>
)
})
}
</div>
</div>
<div className="tips">
<span className="icon iconfont">&#xe6f2;</span>
<span className="tips__text">
支持上传 Word(100M以内)、Excel(10M以内)、PPT(100M以内)、PDF(100M以内)、图片(50M以内)、音频(50M以内)、视频(500M以内)。
</span>
</div>
</Modal>
)
}
}
export default NonCompliantFileModal;
src/bu-components/NonCompliantFileModal.less 0 → 100644
.prepare-lesson__non-compliant-file-modal {
.tips {
margin-top: 16px;
display: flex;
.iconfont {
margin-right: 4px;
font-size: 13px;
color: #FFB74C;
}
&__text {
color: #999;
}
}
.file-list {
&__title {
color: #666;
}
&__content {
max-height: 120px;
margin-top: 12px;
padding: 17px;
border: 1px solid #E8E8E8;
border-radius: 4px;
overflow: scroll;
.file-list__item span {
color: #333;
}
}
}
}
\ No newline at end of file
src/bu-components/PreviewCourseModal.jsx 0 → 100644
/*
* @Author: 吴文洁
* @Date: 2020-07-23 14:54:16
* @LastEditors: 吴文洁
* @LastEditTime: 2020-08-24 13:05:09
* @Description: 大班直播课预览弹窗
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
import React from 'react';
import { Modal } from 'antd';
import moment from 'moment';
import './PreviewCourseModal.less';
class PreviewCourseModal extends React.Component {
constructor(props) {
super(props);
this.state = {
}
}
dealWithTime = (startTime, endTime) => {
const startDate = new Date(Number(startTime));
const endDate = new Date(Number(endTime));
const year = startDate.getFullYear();
const month = (startDate.getMonth() + 1) < 10 ? `0${startDate.getMonth() + 1}` : startDate.getMonth() + 1;
const day = startDate.getDate() < 10 ? `0${startDate.getDate()}` : startDate.getDate();
const startHour = startDate.getHours() < 10 ? `0${startDate.getHours()}` : startDate.getHours();
const startMinute = startDate.getMinutes() < 10 ? `0${startDate.getMinutes()}` : startDate.getMinutes();
const endHour = endDate.getHours() < 10 ? `0${endDate.getHours()}` : endDate.getHours();
const endMinute = endDate.getMinutes() < 10 ? `0${endDate.getMinutes()}` : endDate.getMinutes();
const liveDateStr = `${year}-${month}-${day}`;
const startTimeStr = `${startHour}:${startMinute}`;
const endTimeStr = `${endHour}:${endMinute}`;
return {
liveDateStr,
startTimeStr,
endTimeStr,
};
}
render() {
const { courseBasinInfo, courseClassInfo = {}, courseIntroInfo, type } = this.props;
const { coverUrl, courseName, scheduleVideoUrl } = courseBasinInfo;
const { liveDate, timeHorizonStart, timeHorizonEnd, nickname } = courseClassInfo;
const { liveCourseMediaRequests } = courseIntroInfo;
let liveDateStr, startTimeStr, endTimeStr;
if (liveDate) {
const _liveDate = moment(liveDate).format("YYYY-MM-DD");
const _timeHorizonStart = moment(timeHorizonStart).format('HH:mm');
const _timeHorizonEnd = moment(timeHorizonEnd).format('HH:mm');
const startTime = moment(_liveDate + ' ' + _timeHorizonStart).format('x');
const endTime = moment(_liveDate + ' ' + _timeHorizonEnd).format('x');
const {
liveDateStr: _liveDateStr,
startTimeStr: _startTimeStr,
endTimeStr: _endTimeStr
} = this.dealWithTime(startTime, endTime);
liveDateStr = _liveDateStr;
startTimeStr = _startTimeStr;
endTimeStr = _endTimeStr;
}
return (
<Modal
title="预览"
visible={true}
width={680}
onCancel={this.props.close}
footer={null}
className="preview-live-course-modal"
>
<div className="container__wrap">
<div className="container">
<div className="container__header">
<Choose>
<When condition={type === 'videoCourse'}>
<video
controls
src={scheduleVideoUrl}
poster={coverUrl ? coverUrl : `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast`}
className="course-url"
/>
</When>
<Otherwise>
<img src={coverUrl} className="course-cover" alt="course-cover" />
</Otherwise>
</Choose>
</div>
<Choose>
<When condition={type === 'videoCourse'}>
<div className="container__body">
<div className="title__name">{courseName}</div>
<div className="title__inst-name">{window.currentUserInstInfo.name}</div>
</div>
</When>
<Otherwise>
<div className="container__body">
<div className="container__body__title">
<div className="title__name">{courseName}</div>
<div className="title__state">待开课</div>
</div>
<div className="container__body__time">
<span className="time__label">上课时间：</span>
<span className="time__value">
{
liveDate && timeHorizonStart && timeHorizonEnd &&
[
<span>{liveDateStr}&nbsp;</span>,
<span>{startTimeStr}~{endTimeStr }</span>
]
}
</span>
</div>
<div className="container__body__teacher">
<span className="teacher__label">上课老师：</span>
<span className="teacher__value">{nickname}</span>
</div>
</div>
</Otherwise>
</Choose>
<div className="container__introduction">
<div className="container__introduction__title">直播简介</div>
<div className="container__introduction__list editor-box">
{
liveCourseMediaRequests.map((item, index) => {
if (item.mediaType === 'TEXT') {
return (
<div
className="intro-item text"
dangerouslySetInnerHTML={{
__html: item.mediaContent
}}
/>
)
}
if (item.mediaType === 'PICTURE') {
return (
<div className="intro-item picture">
<img src={item.mediaUrl} alt="intro-item__picture" />
</div>
)
}
return item;
})
}
</div>
</div>
</div>
</div>
</Modal>
)
}
}
export default PreviewCourseModal;
src/bu-components/PreviewCourseModal.less 0 → 100644
.preview-live-course-modal {
.ant-modal-body {
background-image: url('https://image.xiaomaiketang.com/xm/xZWdziTCAf.png');
background-size: 100% 100%;
}
.container__wrap {
width: 340px;
height: 618px;
padding: 67px 46px 48px 47px;
margin: auto;
background-image: url('https://image.xiaomaiketang.com/xm/DHMzHiGc2E.png');
background-size: 100% 100%;
}
.container {
overflow: scroll;
height: 100%;;
.course-cover, .course-url {
width: 100%;
height: 141px;
background: #000;
}
&__body {
background-color: #FFF;
padding: 7px 0 11px 0;;
.title__name {
color: #000;
}
.title__inst-name {
color: #666;
font-size: 12px;
margin-top: 4px;
}
&__title {
display: flex;
justify-content: space-between;
.title__name {
line-height: 20px;
color: #000;
font-weight: 500;
}
.title__state {
min-width: 40px;
height: 17px;
padding: 0 2px;
margin-left: 6px;
font-size: 12px;
color: #FFF;
background-color: #34B88B;
}
}
&__time, &__teacher {
display: flex;
align-items: center;
margin-top: 8px;
color: #999;
line-height: 17px;
span {
font-size: 12px;
}
}
&__teacher {
margin-top: 4px;
}
}
&__introduction {
margin-top: 10px;
padding: 12px 0;
position: relative;
&::before {
content: '';
position: absolute;
top: -12px;
left: 0;
width: 100%;
height: 10px;
background-color: #F4F6FA;
}
&__title {
font-size: 12px;
color: #333;
text-align: center;
line-height: 17px;
position: relative;
&::before,
&::after {
position: absolute;
content: "";
top: 8px;
width: 13px;
height: 1px;
background-color: #ccc;
}
&::before {
left: 32%;
}
&::after {
right: 32%;
}
}
&__list {
margin-top: 12px;
.intro-item:not(:first-child) {
margin-top: 13px;
}
.text {
color: #666;
line-height: 17px;
p {
font-size: 12px;
}
}
.picture {
img {
width: 100%;
}
}
}
}
}
}
\ No newline at end of file
src/bu-components/README.md 0 → 100644
<!--
* @Author: 吴文洁
* @Date: 2020-04-29 16:54:52
* @LastEditors: 吴文洁
* @LastEditTime: 2020-04-29 17:15:16
* @Description:
-->
### 业务组件，比如某几个页面公用的组件，和实际业务相关
**本目录的引用别名是 @/bu-components**
\ No newline at end of file
src/bu-components/SelectPrepareFileModal.less 0 → 100644
.select-prepare-file-modal {
.ant-upload-list {
display: none;
}
.lottie-icon {
margin: 12px 0 0 0;
border: 1px solid #E8E8E8;
border-radius: 4px;
padding: 100px 0;
.desc {
color: #999;
.upload-btn {
color: #FF7519;
margin: 0 4px;
cursor: pointer;
}
}
}
.radio-buttons {
text-align: center;
margin-bottom: 16px;
}
.file-path {
display: inline-block;
color: #333;
position: relative;
margin-bottom: 12px;
margin-right: 12px;
&:last-child {
color: #999;
}
&:not(:last-child) {
cursor: pointer;
&:hover {
color: #FF8534;
}
&::before {
content: '/';
position: absolute;
color: #CCC;
right: -8px;
}
}
}
.file-list {
border: 1px solid #E8E8E8;
border-radius: 4px;
.file-item {
display: flex;
align-items: center;
justify-content: space-between;
height: 48px;
padding: 12px 25px;
&:not(:last-child) {
border-bottom: 1px solid #E8E8E8;
}
&.enable {
cursor: pointer;
}
&.disable {
cursor: not-allowed;
opacity: 0.5;
}
&__cover {
min-width: 320px;
img {
margin-right: 8px;
}
}
&__size {
margin-left: 40px;
}
.iconfont {
color: #BFBFBF;
}
}
}
.ant-modal-footer {
display: flex;
align-items: center;
justify-content: space-between;
.prepare-lesson-upload.hidden {
visibility: hidden;
}
.prepare-lesson-upload.visible {
visibility: visible;
}
.footer__left {
color: #FF7519;
cursor: pointer;
}
}
}
\ No newline at end of file
src/bu-components/ShareLiveModal.jsx 0 → 100644
/*
* @Author: 吴文洁
* @Date: 2020-07-20 19:12:49
* @Last Modified by: 吴文洁
* @Last Modified time: 2020-07-20 20:25:13
* @Description: 大班直播分享弹窗
*/
import React from 'react';
import { Modal, Button, message } from 'antd';
import html2canvas from 'html2canvas';
import QRCode from '@/lib/qrcode/qrcode';
import Service from '@/common/js/service';
import { copyText } from '@/domains/basic-domain/utils';
import './ShareLiveModal.less';
const { name } = window.currentUserInstInfo || {};
const DEFAULT_COVER = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
class ShareLiveModal extends React.Component {
constructor(props) {
super(props);
this.state = {
shareUrl: 'https://xiaomai5.com/liveShare?courseId=12'
}
}
componentDidMount() {
// 获取短链接
this.handleConvertShortUrl();
}
handleConvertShortUrl = () => {
const { longUrl } = this.props.data;
// 发请求
Service.Sales('public/businessShow/convertShortUrls', {
urls: [longUrl]
}).then((res) => {
const { result = [] } = res;
this.setState({
shareUrl: result[0].shortUrl
}, () => {
const qrcodeWrapDom = document.querySelector('#qrcodeWrap');
const qrcodeNode = new QRCode({
text: this.state.shareUrl,
size: 98,
})
qrcodeWrapDom.appendChild(qrcodeNode);
});
})
}
componentWillUnmount() {
// 页面销毁之前清空定时器
clearTimeout(this.timer);
}
// 下载海报
handleDownloadPoster = () => {
const dom = document.querySelector('#poster');
html2canvas(dom, {
useCORS: true,
}).then(canvas => {
const downloadDOM = document.createElement('a');
const { courseName } = this.props.data;
const dataUrl = canvas.toDataURL('image/png');
downloadDOM.href = dataUrl;
downloadDOM.download = `${courseName}.png`;
downloadDOM.click();
});
}
// 复制分享链接
handleCopy = () => {
const textContent = document.getElementById('shareUrl').innerText;
copyText(textContent);
message.success('复制成功!');
}
render() {
const { needStr, data, type } = this.props;
const { courseName, coverUrl = DEFAULT_COVER, scheduleVideoUrl } = data;
const { shareUrl } = this.state;
// 判断是否是默认图, 默认图不需要在URL后面增加字符串
const isDefaultCover = coverUrl === DEFAULT_COVER;
const coverImgSrc = type === 'videoClass'
? (
// 如果是默认图, 显示视频的第一帧, 否则显示上传的视频封面
isDefaultCover
? `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast&anystring`
: `${coverUrl}${!needStr ? '&anystring': ''}`
)
: `${coverUrl}${(!needStr && !isDefaultCover) ? '&anystring' : ''}`
return (
<Modal
title="分享直播课"
width={680}
visible={true}
footer={null}
className="share-live-modal"
onCancel={this.props.close}
>
<div className="left" id="poster">
<div
className="course-name"
>{`【${courseName}】开课啦，快来学习！`}</div>
<img
src={coverImgSrc}
crossOrigin="*"
className="course-cover"
alt="course-cover"
/>
<div className="qrcode-wrap">
<div className="qrcode-wrap__left">
<div className="text">长按识别二维码进入观看</div>
<img
className="finger"
alt="finger"
src="https://image.xiaomaiketang.com/xm/thpkWDwJsC.png"
/>
</div>
<div className="qrcode-wrap__right" id="qrcodeWrap">
</div>
</div>
<div className="inst-name">
<span className="icon iconfont">&#xe7b1;</span>
<span className="text">{name}</span>
</div>
</div>
<div className="right">
<div className="share-url right__item">
<div className="title">① 链接分享</div>
<div className="sub-title">家长可通过微信打开链接，报名观看直播</div>
<div className="content">
<div className="share-url" id="shareUrl">{shareUrl}</div>
<Button
type="primary"
onClick={this.handleCopy}
>复制</Button>
</div>
</div>
<div className="share-poster right__item">
<div className="title">② 海报分享</div>
<div className="sub-title">家长可通过微信识别二维码，报名观看直播</div>
<div className="content" onClick={this.handleDownloadPoster}>下载海报</div>
</div>
</div>
</Modal>
)
}
}
export default ShareLiveModal;
src/bu-components/ShareLiveModal.less 0 → 100644
.share-live-modal {
.ant-modal-body {
display: flex;
.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 {
color: #333;
font-size: 16px;
font-weight: 500;
line-height: 20px;
}
.course-cover {
width: 263px;
height: 143px;
border-radius: 6px;
margin-top: 8px;
}
.qrcode-wrap {
padding: 0 16px;
display: flex;
align-items: center;
margin: 24px 0 16px 0;
&__left {
width: 98px;
text-align: center;
margin-right: 22px;
.text {
line-height: 20px;
}
.finger {
width: 40px;
height: 40px;
margin-top: 8px;
}
}
&__right {
width: 110px;
height: 110px;
padding: 6px
}
}
.inst-name {
background-color: #FAFAFA;
min-height: 36px;
border-radius: 9px;
padding: 8px 16px;
display: flex;
align-items: center;
.iconfont {
color: #999;
margin-right: 4px;
}
.text {
font-size: 12px;
color: #999;
}
}
}
.right {
.title {
color: #333;
font-weight: 500;
}
.sub-title {
color: #999;
margin-top: 16px;
}
.content {
display: flex;
align-items: center;
margin-top: 8px;
.share-url {
width: 212px;
overflow: hidden;
height: 32px;
line-height: 32px;
border-radius: 4px 0 0 4px;
padding-left: 12px;
white-space: nowrap;
color: #999999;
background: #EFEFEF;
}
.ant-btn {
margin-left: -2px;
}
}
.share-poster {
margin-top: 40px;
.content {
color: #FF7519;
cursor: pointer;
}
}
}
}
}
\ No newline at end of file
src/bu-components/ShowTip.jsx 0 → 100644
import React from 'react'
import './ShowTip.less'
function ShowTips(props) {
return (
<div className={`xm-show-tip xm-type-${props.type || 'defulat'}`} >
<span className="icon iconfont">&#xe6f2;</span>
<p>{props.message}</p>
</div>
)
}
export default ShowTips
\ No newline at end of file
src/bu-components/ShowTip.less 0 → 100644
.xm-show-tip {
position: relative;
min-height:32px;
background:#FFF0E7;
border-radius:4px;
display: flex;
justify-content: flex-start;
align-items: center;
padding: 0 12px;
span.icon {
color:#FF8534;
line-height: 20px;
}
p {
color:#666666;
font-size: 14px;
line-height:20px;
margin-left: 12px;
}
}
.xm-type-default {
width: 100%;
}
.xm-type-info {
width: calc(~'100% - 190px');
}
\ No newline at end of file
src/bu-components/UploadProgressModal.less 0 → 100644
.prepare-lesson-upload-progress-modal {
width: 448px;
position: fixed;
bottom: 32px;
right: 0;
box-shadow: 0px 4px 12px 0px rgba(0,0,0,0.1);
border-radius: 6px;
right: 48px;
background-color: #FFF;
z-index: 10;
&:visible {
display: block;
}
&.hidden {
display: none;
}
.modal-header {
display: flex;
align-items: center;
justify-content: space-between;
height: 50px;
line-height: 50px;
background-color: #9A9DA7;
border-radius: 6px;
padding: 0 24px;
color: #FFF;
&.no-radius {
border-radius: 6px 6px 0 0;
}
.over-all-progress span {
font-size: 16px;
}
.iconfont {
cursor: pointer;
font-size: 12px;
margin-left: 24px;
}
}
.modal-body {
max-height: 290px;
overflow: scroll;
.file-item {
display: flex;
align-items: center;
height: 50px;
line-height: 50px;
padding: 0 24px;
position: relative;
&:not(:last-child) {
margin-bottom: 4px;
}
&__cover {
display: flex;
align-items: center;
img {
width: 24px;
margin-right: 8px;
}
.file-name {
min-width: 154px;
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
display: inline-block;
}
}
&__size {
margin: 0 24px;
min-width: 54px !important;
color:#999999;
}
&__status {
.iconfont {
color: #BFBFBF;
font-size: 12px;
&.succ {
color: #5DD333;
}
&.close, &.reupload {
position: absolute;
top: 1px;
right: 20px;
cursor: pointer;
}
&.fail {
color: #EC4B35;
}
}
}
&__progress {
height: 100%;
position: absolute;
height: 50px;
margin-left: -24px;
background-color: rgba(32,161,255,0.06);
}
}
}
}
\ No newline at end of file
src/common/js/axios.ts
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-31 09:34:31 * @Date: 2020-08-31 09:34:31
* @LastEditors: wufan * @LastEditors: wufan
* @LastEditTime: 2020-12-09 10:53:57 * @LastEditTime: 2020-12-09 19:07:53
* @Description: * @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -33,6 +33,7 @@ class Axios { ...@@ -33,6 +33,7 @@ class Axios {
options: FetchOptions = { requestType: 'json' } options: FetchOptions = { requestType: 'json' }
): Promise<any> { ): Promise<any> {
const _url = `${url}?storeId=${User.getStoreId()}&token=${User.getToken()}&storeUserId=${User.getStoreUserId()}&userId=${User.getUserId()}`; const _url = `${url}?storeId=${User.getStoreId()}&token=${User.getToken()}&storeUserId=${User.getStoreUserId()}&userId=${User.getUserId()}`;
// const _url = `${url}?storeId=${User.getStoreId()}&token=${User.getToken()}&storeUserId=${User.getStoreUserId()}&userId=${User.getUserId()}p=w&v=v5.4.8&userType=B&token=9f1609b2e7234afd8922a8676dbbf721&uid=920261769807528000&tid=1305385165390426114&aid=1305385165390426114`;
return new Promise((resolve, reject) => { return new Promise((resolve, reject) => {
const instance: AxiosInstance = axios.create({ const instance: AxiosInstance = axios.create({
...@@ -46,6 +47,44 @@ class Axios { ...@@ -46,6 +47,44 @@ class Axios {
product: "xmCloudClass", product: "xmCloudClass",
'Content-Type': options.requestType === 'form' ? 'application/x-www-form-urlencoded' : 'application/json; charset=UTF-8', 'Content-Type': options.requestType === 'form' ? 'application/x-www-form-urlencoded' : 'application/json; charset=UTF-8',
} }
// headers: {
// "content-length": "2",
// "referer": "https://dev.xiaomai5.com/",
// "x-b3-parentspanid": "e5e8fdfc471ed007",
// "sec-fetch-site": "same-site",
// "origin": "https://dev.xiaomai5.com",
// "x-b3-sampled": "1",
// "x-forwarded-port": "443",
// "project": "xmzj-web-b",
// "tid": "1305385165390426114",
// "uid": "920261769807528000",
// "instid": "1213001850820476929",
// "x-forwarded-host": "dev-heimdall.xiaomai5.com",
// "host": "dev-heimdall.xiaomai5.com",
// "content-type": "application/json; charset=UTF-8",
// "x-b3-flags": "0",
// "x-request-id": "0d7ad401ed447ff75c0de254563e76fd",
// "sec-fetch-mode": "cors",
// "x-forwarded-proto": "https",
// "accept-language": "zh-CN,zh;q=0.9,en;q=0.8",
// "usertype": "B",
// "xmversion": "5.0",
// "x-forwarded-for": "60.191.55.162",
// "accept": "application/json, text/plain, */*",
// "token": "9f1609b2e7234afd8922a8676dbbf721",
// "x-real-ip": "60.191.55.162",
// "p": "w",
// "x-b3-traceid": "12a41d862eb3e551",
// "x-b3-spanid": "08dc4d59580c4bee",
// "v": "VERSION",
// "vn": "v5.4.8",
// "x-scheme": "https",
// "bizaccountid": "1305385165390426114",
// "accept-encoding": "gzip, deflate, br",
// "user-agent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_15_7) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/87.0.4280.88 Safari/537.36",
// "cid": "940838898156699712",
// "sec-fetch-dest": "empty"
// },
}); });
if (method !== 'GET' && options.requestType === 'form') { if (method !== 'GET' && options.requestType === 'form') {
......
src/components/ClassSearchSelect.jsx 0 → 100644
/*
* @Author: sunbingqing
* @Date: 2019-08-05 11:05:00
* @Last Modified by: zhujian
* @Last Modified time: 2020-05-26 19:50:20
*/
import React from 'react';
import { Spin, Select } from 'antd';
import _ from 'underscore';
import Service from '@/common/js/service';
class ClassSearchSelect extends React.Component {
constructor(props) {
super(props);
this.state = {
query: {
size: 10,
current: 1,
classNameLike: null,
status: ['INIT', 'STUDYING', 'END'],
},
dataSet: [],
isAll: false
}
}
componentWillMount() {
this.handleFetchClassList();
}
handleFetchClassList = (current = 1) => {
const { courseId } = this.props;
const _query = _.clone(this.state.query);
_query.courseId = courseId;
_query.current = current;
Service.Business('public/class/digestList', _query)
.then((res) => {
const { result = {} } = res || {};
const { records = [], hasNext = false } = result;
_.map(records, (item) => {
item.formatName = item.name;
return item;
});
this.setState({
isAll: !hasNext,
dataSet: current === 1 ? records : [...this.state.data, ...records]
});
})
}
handleClassSelect = (classId) => {
const { query } = this.state;
if (query.classNameLike) {
query.classNameLike = null;
this.setState({ query }, this.handleFetchClassList);
}
this.props.onSelect(classId);
}
handleFetchMore = (e) => {
const { isAll } = this.state;
const ulDom = e.currentTarget.getElementsByTagName("ul")[0];
if (ulDom.length <= 0) return;
const { scrollTop, clientHeight, scrollHeight } = ulDom;
if (scrollTop + clientHeight > scrollHeight - 30 && !isAll) {
this.handleFetchClassList();
}
}
render() {
const { label, defaultValue, placeholder } = this.props;
const { query, isAll, dataSet } = this.state;
return (
<div className={"common-select staticSelect"}>
{
!!label && <div className='label'> {label}:</div>
}
<Select
showSearch
allowClear
onSearch={(value) => {
query.classNameLike = value;
this.setState({ query }, this.handleFetchClassList)
}}
onPopupScroll={this.handleFetchMore}
placeholder={placeholder}
value={defaultValue}
onChange={this.handleClassSelect}
filterOption={(input, option) => option}
>
{
_.map(dataSet, (item, index) => {
return (
<Select.Option
id={`class_select_item_${index}` }
key={item.classId}
value={item.classId}
title={item.name}
>
{item.name}
</Select.Option>
);
})
}
{!isAll &&
<Select.Option
disabled
tyle={{ textAlign: 'center' }}
value="spin"
>
<Spin size="small" />
</Select.Option>
}
</Select>
</div>
)
}
}
export default ClassSearchSelect;
src/components/CourseSearchSelect.jsx 0 → 100644
/*
* @Author: leehu
* @Date: 2017-09-04 11:52:25
* @Last Modified by: zhujian
* @Last Modified time: 2020-03-09 20:19:04
*/
import React from 'react';
import { Spin, Select } from 'antd';
import _ from 'underscore';
import classNames from 'classnames';
import Service from '@/common/js/service';
class CourseSelect extends React.Component {
constructor(props) {
super(props);
this.state = {
close: true,
dataSource: [],
query: {
current: 1,
size: 10000,
showNumber: 100,
courseNameLike: null,
},
dataSet: [],
visible: false,
loading: false,
selectedIds: [],
selected: props.selected || [],
}
}
componentWillMount() {
this.handleFetchCourseList();
}
handleQueryReset = () => {
this.setState({
query: {
current: 1,
size: 10000,
showNumber: 100,
courseNameLike: null,
}
}, () => {
this.handleFetchCourseList();
});
}
handleFetchCourseList(current = 1) {
this.setState({ loading: true });
let query = _.clone(this.state.query)
if (this.props.queryAll) {
delete query.status;
}
query.current = current;
Service.Business('public/course/digestList', query)
.then((res) => {
const { result = {} } = res || {};
let { records = [], total = 0, hasNext } = result;
records.map(function (item, index) {
item.title = item.name;
item.desc = item.name;
return item;
});
this.setState({
dataSet: current > 1 ? [...this.state.dataSet, ...records] : records,
isAll: !hasNext,
loading: false,
totalCount: Number(total),
});
}).finally((res) => {
this.setState({ loading: false });
});
}
handleCourseSelect = (course) => {
const { query } = this.state;
if (query.courseNameLike) {
query.courseNameLike = null;
this.setState({ query }, this.handleFetchCourseList);
}
this.props.onSelect(course);
}
render() {
const {
id,
style,
label,
defaultValue,
placeholder = '请选择'
} = this.props;
const { visible, query, dataSet, isAll } = this.state;
return (
<div
className={classNames("common-select staticSelect", {
'common-select-active': visible
})}
style={style}>
{
!!label && <div className='label'> {label}:</div>
}
<Select
id={id}
ref='course'
showSearch
allowClear
onSearch={(value) => {
query.courseNameLike = value
this.setState({ query }, this.handleFetchCourseList)
}}
onBlur={() => {
query.courseNameLike = null;
this.setState({ query }, this.handleFetchCourseList)
}}
placeholder={placeholder}
value={defaultValue}
onChange={this.handleCourseSelect}
filterOption={(input, option) => option}
>
{
_.map(dataSet, (item, index) => {
return <Select.Option id={'course_select_item_' + index} key={item.id} value={item.id} title={item.name}>
{item.name}
</Select.Option>
})
}
{!isAll &&
<Select.Option disabled style={{ textAlign: 'center' }} value="spin">
<Spin size="small" />
</Select.Option>
}
</Select>
</div>
)
}
}
export default CourseSelect;
\ No newline at end of file
src/components/EditorBox.jsx 0 → 100644
import React from 'react';
import E from 'wangeditor';
import { randomString } from '@/domains/basic-domain/utils';
import './EditorBox.less';
class EditorBox extends React.Component {
constructor(props) {
super(props)
this.state = {
editorId: randomString(16),
textLength: 0,
}
}
componentDidMount() {
this.renderEditor()
}
renderEditor() {
const { editorId } = this.state;
const { detail, onChange } = this.props;
const editorInt = new E(`#editor${editorId}`);
editorInt.customConfig.menus = [
'bold', // 粗体
'fontName', // 字体
'italic', // 斜体
'underline', // 下划线
'strikeThrough', // 删除线
'foreColor', // 文字颜色
'backColor', // 背景颜色
'list', // 列表
'justify', // 对齐方式
'emoticon', // 表情
]
editorInt.customConfig.emotions = [
{
title: 'emoji',
type: 'emoji',
content: ['😀', '😃', '😄', '😁', '😆', '😅', '😂', '😊', '🙂', '🙃', '😉', '😓', '😅', '😪', '🤔', '😬', '🤐']
}
]
editorInt.customConfig.zIndex = 999;
editorInt.customConfig.pasteFilterStyle = false;
editorInt.customConfig.pasteIgnoreImg = true;
// 自定义处理粘贴的文本内容
editorInt.customConfig.pasteTextHandle = function (content) {
if (content === '' && !content) return ''
var str = content
str = str.replace(/<xml>[\s\S]*?<\/xml>/ig, '')
str = str.replace(/<style>[\s\S]*?<\/style>/ig, '')
str = str.replace(/<\/?[^>]*>/g, '')
str = str.replace(/[ | ]*\n/g, '\n')
str = str.replace(/&nbsp;/ig, ' ')
return str
}
editorInt.customConfig.onchange = (html) => {
const textLength = editorInt.txt.text().replace(/&nbsp;/ig, ' ').length;
this.setState({ textLength }, () => {
onChange(html, this.state.textLength);
})
}
editorInt.create();
editorInt.txt.html(detail.content);
editorInt.change && editorInt.change();
}
render() {
const { editorId, textLength } = this.state;
const { limitLength = 1000 } = this.props;
return <div className="wang-editor-container ">
<div className="editor-box" id={`editor${editorId}`}></div>
{textLength > limitLength && <div className="editor-tips">超了{textLength - limitLength}个字</div>}
</div>
}
}
export default EditorBox;
src/components/EditorBox.less 0 → 100644
.wang-editor-container {
border: 1px solid #E8E8E8;
border-radius: 4px;
width: 552px;
position: relative;
.w-e-text p,
.w-e-text h1,
.w-e-text h2,
.w-e-text h3,
.w-e-text h4,
.w-e-text h5,
.w-e-text table,
.w-e-text pre {
margin: 0;
}
.w-e-toolbar {
background-color: #fff !important;
border: none !important;
border-bottom: 1px solid #E8E8E8 !important;
}
.w-e-text-container {
border: none !important;
height: 88px !important;
}
.editor-tips {
position: absolute;
top: 5px;
right: 8px;
color: #f5222d;
}
}
\ No newline at end of file
src/components/ImgCutModal.jsx 0 → 100644
import React from 'react';
import { Modal, Button } from 'antd';
import Service from '@/common/js/service';
import { randomString } from '@/domains/basic-domain/utils';
let cutFlag = false;
class ImgCutModal extends React.Component {
state = {
photoclip: null,
imgAddress: null
}
componentDidUpdate(prevProps) {
const {
visible,
cutWidth = 550,
cutHeight = 283,
imageFile,
bizCode = 'HOMEWORK_FILE'
} = this.props;
if (visible && imageFile) {
setTimeout(() => {
const { photoclip } = this.state;
const okBtnDom = document.querySelector('#clipBtn');
const options = {
size: [cutWidth, cutHeight],
rotateFree: false,
ok: okBtnDom,
maxZoom: 1,
style: {
jpgFillColor: 'transparent'
},
done: (dataUrl) => {
const { name } = imageFile;
const fileName = randomString(16) + name.slice(name.lastIndexOf('.'));
const { instId } = window.currentUserInstInfo;
const params = {
instId,
bizCode: bizCode,
accessTypeEnum: 'PUBLIC',
resourceName: fileName
}
const cutImage = this.convertBase64UrlToBlob(dataUrl);
Service.Apollo("public/apollo/commonOssAuthority", params).then((res) => {
const { resourceId, accessId, policy, callback, signature,key, host } = res.result;
const localUrl = URL.createObjectURL(cutImage);
// 构建上传的表单
const xhr = new XMLHttpRequest();
const formData = new FormData();
formData.append("OSSAccessKeyId", accessId);
formData.append("policy", policy);
formData.append("callback", callback);
formData.append("Signature", signature);
formData.append("key", key);
formData.append("file", cutImage);
formData.append("success_action_status", 200);
xhr.open("POST", host);
xhr.onload = () => {
this.props.onOk(localUrl, resourceId);
setTimeout(() => {
cutFlag = false;
}, 2000)
};
xhr.send(formData);
this.setState({ xhr })
})
}
};
if (!photoclip) {
const _photoclip = new window.PhotoClip('#imgCutModalNew', options);
_photoclip.load(imageFile);
this.setState({ photoclip: _photoclip });
} else {
photoclip.clear();
photoclip.load(imageFile);
}
}, 0);
}
}
// 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" });
}
handleImgCutDone = () => {
if (!cutFlag) {
cutFlag = true;
this.refs.hiddenBtn.click();
}
}
render() {
const {
title,
visible,
onClose,
reUpload,
cutContentWidth,
cutContentHeight,
width = 550,
needReUpload = false,
} = this.props;
return (
<Modal
title={title}
width={width}
visible={visible}
onCancel={onClose}
footer={[
<Choose>
<When condition={!needReUpload}>
<Button
key="back"
onClick={onClose}
>取消</Button>
</When>
<Otherwise>
<Button
key="back"
onClick={reUpload}
>重新上传</Button>
</Otherwise>
</Choose>,
<Button
key="submit"
type="primary"
onClick={this.handleImgCutDone}
>确定</Button>
]}>
<div
id="imgCutModalNew"
style={{
width: `${cutContentWidth || 620}px`,
height: `${cutContentHeight || 420}px`
}}
></div>
<div
id="clipBtn"
style={{ display: 'none' }}
ref="hiddenBtn"
/>
</Modal>
)
}
}
export default ImgCutModal;
\ No newline at end of file
src/data-source/base/request-apis.ts
/* /*
* @Author: wufan * @Author: wufan
* @Date: 2020-12-01 17:21:21 * @Date: 2020-12-01 17:21:21
* @LastEditors: zhangleyuan * @LastEditors: wufan
* @LastEditTime: 2020-12-08 10:38:04 * @LastEditTime: 2020-12-09 14:49:24
* @Description: Description * @Description: Description
* @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有 * @@Copyrigh: © 2020 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -34,4 +34,19 @@ export function sendNewPhoneAuthCode(params: object) { ...@@ -34,4 +34,19 @@ export function sendNewPhoneAuthCode(params: object) {
export function editUserPhone(params: object) { export function editUserPhone(params: object) {
return Service.Hades("public/hades/editUserPhone", params); return Service.Hades("public/hades/editUserPhone", params);
} }
export const getOssClient = (
data: object,
instId: string,
bizCode: string,
resourceName: string,
accessTypeEnum: string
) => {
return Service.postJSON('mfs/anon/mfs/multiPartUpload', {
data,
instId,
bizCode,
resourceName,
accessTypeEnum
});
}
src/data-source/basic/basic-apis.ts 0 → 100644
/*
* @Author: 吴文洁
* @Date: 2020-10-10 18:21:47
* @LastEditors: wufan
* @LastEditTime: 2020-12-09 16:05:24
* @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
import Service from '@/common/js/service';
export const getOssClient = (
data: object,
instId: string,
bizCode: string,
resourceName: string,
accessTypeEnum: string
) => {
return Service.postJSON('mfs/anon/mfs/multiPartUpload', {
data,
instId,
bizCode,
resourceName,
accessTypeEnum
});
}
\ No newline at end of file
src/domains/basic-domain/utils.ts
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-20 09:20:43 * @Date: 2020-08-20 09:20:43
* @LastEditors: 吴文洁 * @LastEditors: wufan
* @LastEditTime: 2020-08-21 09:02:36 * @LastEditTime: 2020-12-09 14:51:33
* @Description: * @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -16,6 +16,59 @@ const getEllipsText = (text: string, limitNum: number) => { ...@@ -16,6 +16,59 @@ const getEllipsText = (text: string, limitNum: number) => {
return limitText; return limitText;
} }
// 随机生成32位字符串
const randomString = (strLen: number = 32) => {
const chars: string = 'ABCDEFGHJKMNPQRSTWXYZabcdefhijkmnprstwxyz2345678'
const maxPos = chars.length;
let pwd: string = '';
for (let i: number = 0; i < strLen; i++) {
pwd += chars.charAt(Math.floor(Math.random() * maxPos))
}
return pwd;
}
const copyText = (textContent: string) => {
const inputDom = document.createElement('textarea')
inputDom.value = textContent
document.body.appendChild(inputDom)
inputDom.select()
document.execCommand('copy')
document.body.removeChild(inputDom)
}
const formatDate = (format: string, timestamp: string) => {
if (!timestamp) return;
const date = new Date(parseInt(timestamp))
let y: any = date.getFullYear(),
m: any = date.getMonth() + 1,
d: any = date.getDate(),
h: any = date.getHours(),
i: any = date.getMinutes(),
s: any = date.getSeconds(),
w: number = date.getDay(),
week: string[] = ['周日', '周一', '周二', '周三', '周四', '周五', '周六']
m = m < 10 ? '0' + m : m;
d = d < 10 ? '0' + d : d;
h = h < 10 ? '0' + h : h;
i = i < 10 ? '0' + i : i;
s = s < 10 ? '0' + s : s;
return format
.replace('YYYY', y)
.replace('MM', m)
.replace('DD', d)
.replace('H', h)
.replace('i', i)
.replace('s', s)
.replace('WW', week[w])
}
export { export {
getEllipsText getEllipsText,
randomString,
copyText,
formatDate
} }
\ No newline at end of file
src/domains/class-book/UploadFileService.ts 0 → 100644
/*
* @Author: 吴文洁
* @Date: 2020-10-10 18:19:34
* @LastEditors: 吴文洁
* @LastEditTime: 2020-10-13 18:09:39
* @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
import OSS from 'ali-oss';
import { UPLOAD_REGION } from '@/domains/class-book/constants';
import { getOssClient } from '@/data-source/basic/basic-apis.ts';
interface IMultiPartUpload {
data: object;
instId: string;
bizCode: string;
resourceName: string;
accessTypeEnum: string;
}
export default class UploadFileService {
static getOssClient(multiPartUploadParams: IMultiPartUpload) {
const { data, instId, bizCode, resourceName, accessTypeEnum } = multiPartUploadParams;
return new Promise(resolve => {
getOssClient(
data,
instId,
bizCode,
resourceName,
accessTypeEnum
).then((res) => {
const { result = {} } = res;
const {
bucket,
callBack,
resourceId,
accessKeyId,
securityToken,
accessKeySecret,
callbackBody,
ossUri
} = result;
const ossClient = new OSS({
bucket,
accessKeyId,
accessKeySecret,
region: UPLOAD_REGION,
stsToken: securityToken,
});
resolve({
ossClient,
resourceId,
callBack,
callbackBody,
ossUri
});
})
})
}
}
\ No newline at end of file
src/domains/class-book/constants.ts 0 → 100644
/*
* @Author: 吴文洁
* @Date: 2020-08-20 09:21:40
* @LastEditors: 吴文洁
* @LastEditTime: 2020-10-13 14:55:24
* @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
const DEFAULT_SIZE_UNIT: number = 1000 * 1000; // 将B转换成M
const SUFFIX_MAP: {
[key: string]: string
} = {
'doc': 'application/msword',
'docx': 'application/vnd.openxmlformats-officedocument.wordprocessingml.document',
'ppt': 'application/vnd.ms-powerpoint',
'pptx': 'application/vnd.openxmlformats-officedocument.presentationml.presentation',
'pdf': 'application/pdf',
'xlsx': 'application/vnd.openxmlformats-officedocument.spreadsheetml.sheet',
'xls': 'application/vnd.ms-excel'
}
const FILE_TYPE_ICON_MAP: {
[key: string]: string
} = {
word: "https://image.xiaomaiketang.com/xm/Cw44ekhNfR.png",
DOCX: "https://image.xiaomaiketang.com/xm/Cw44ekhNfR.png",
DOC: "https://image.xiaomaiketang.com/xm/Cw44ekhNfR.png",
// 第一期备后端返回的是长的文件类型，备课版改版之后后端返回的是短的文件类型，且大写，所以做个兼容，下面的EXCEl也是一样的
WORD: "https://image.xiaomaiketang.com/xm/Cw44ekhNfR.png",
Excel: "https://image.xiaomaiketang.com/xm/NTFMxcdQnd.png",
EXCEL: "https://image.xiaomaiketang.com/xm/NTFMxcdQnd.png",
PPT: "https://image.xiaomaiketang.com/xm/cDrBPi5TrH.png",
PPTX: "https://image.xiaomaiketang.com/xm/cDrBPi5TrH.png",
PDF: "https://image.xiaomaiketang.com/xm/7TAy7kbTZB.png",
MP3: "https://image.xiaomaiketang.com/xm/ykjnSWDyQ6.png",
MP4: "https://image.xiaomaiketang.com/xm/whSYMTdR57.png",
JPG: "https://image.xiaomaiketang.com/xm/XRkX8JBTPs.png",
PNG: "https://image.xiaomaiketang.com/xm/XRkX8JBTPs.png",
GIF: "https://image.xiaomaiketang.com/xm/XRkX8JBTPs.png",
BMP: "https://image.xiaomaiketang.com/xm/XRkX8JBTPs.png",
};
const SUPPORT_FILE_TYPE_MAP: string[] = [
"application/msword",
"text/csv",
"application/vnd.ms-excel",
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
"application/vnd.ms-powerpoint",
"application/pdf",
"image/jpeg",
"image/png",
"audio/mpeg",
"audio/mp4",
"video/mp4",
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
"application/vnd.openxmlformats-officedocument.presentationml.presentation",
"audio/mp3",
"application/wps-office.pdf",
"application/wps-office.xls"
];
const LOCAL_FILE_TYPE_MAP: string[] = [
"application/msword",
"application/vnd.ms-excel",
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet",
"application/vnd.ms-powerpoint",
"application/pdf",
"application/vnd.openxmlformats-officedocument.wordprocessingml.document",
"application/vnd.openxmlformats-officedocument.presentationml.presentation",
"application/wps-office.pdf",
"application/wps-office.xls"
];
const FILR_VERIFY_MAP = {
"application/msword": {
type: "word",
maxSize: 10
},
"application/vnd.openxmlformats-officedocument.wordprocessingml.document": {
type: "word",
maxSize: 10
},
"text/csv": {
type: "Excel",
maxSize: 10
},
"application/vnd.ms-excel": {
type: "Excel",
maxSize: 10
},
"application/vnd.openxmlformats-officedocument.spreadsheetml.sheet": {
type: "Excel",
maxSize: 10
},
"application/wps-office.xls": {
type: "Excel",
maxSize: 10
},
"application/vnd.ms-powerpoint": {
type: "PPT",
maxSize: 20
},
"application/vnd.openxmlformats-officedocument.presentationml.presentation": {
type: "PPT",
maxSize: 20
},
"application/pdf": {
type: "PDF",
maxSize: 50
},
"application/wps-office.pdf": {
type: "PDF",
maxSize: 50
},
"image/jpeg": {
type: "JPG",
maxSize: 10
},
"image/png": {
type: "JPG",
maxSize: 10
},
"image/jpg": {
type: "JPG",
maxSize: 10
},
"image/gif": {
type: "GIF",
maxSize: 10
},
"audio/mpeg": {
type: "MP3",
maxSize: 50
},
"audio/mp3": {
type: "MP3",
maxSize: 50
},
"audio/mp4": {
type: "MP4",
maxSize: 50
},
"video/mp4": {
type: "MP4",
maxSize: 50
}
};
const DISK_MAP: {
[key: string]: string
} = {
MYSELF: '我的文件',
COMMON: '公共文件',
EMPLOYEE: '员工文件'
};
const NON_COMPLIANT_FILE_MAP = {
'video': {
accept: 'video/mp4',
confirm: {
title: '文件过大，无法上传',
content: '为保障学员的观看体验，上传的视频大小不能超过100M',
},
tooltip: '格式支持mp4，大小不超过100M'
}
}
// 文件上传
const UPLOAD_REGION = 'oss-cn-hangzhou';
const UPLOAD_PART_SIZE = 1024 * 1024; // 每个分片大小(byte)
const UPLOAD_PARALLEL = 5; // 同时上传的分片数
export {
DEFAULT_SIZE_UNIT,
FILE_TYPE_ICON_MAP,
SUPPORT_FILE_TYPE_MAP,
LOCAL_FILE_TYPE_MAP,
FILR_VERIFY_MAP,
NON_COMPLIANT_FILE_MAP,
DISK_MAP,
SUFFIX_MAP,
UPLOAD_REGION,
UPLOAD_PART_SIZE,
UPLOAD_PARALLEL,
}
\ No newline at end of file
src/domains/class-book/utils.ts 0 → 100644
/*
* @Author: 吴文洁
* @Date: 2020-09-29 10:01:08
* @LastEditors: 吴文洁
* @LastEditTime: 2020-09-29 10:01:38
* @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有
*/
import { SUFFIX_MAP } from '@/domains/class-book/constants';
const getFileTypeByName = (name: string) => {
const nameArray: string[] = name.split(".");
const suffix: string = nameArray[nameArray.length - 1];
return SUFFIX_MAP[suffix];
}
export {
getFileTypeByName
};
\ No newline at end of file
src/modules/class-book/components/DiskList.jsx 0 → 100644
/*
* @Author: 吴文洁
* @Date: 2020-06-09 09:47:21
* @Last Modified by: 吴文洁
* @Last Modified time: 2020-06-23 14:54:14
* @Description: 网络磁盘（我的文件、公共文件、员工文件）
*/
import React from 'react';
function DiskList(props) {
const { diskList, currentRootDisk } = props;
return (
<div className="disk-list__wrap">
<div className="disk-list">
{
diskList.map((item) => {
const isActive = item.disk === currentRootDisk.disk;
return (
<div
key={item.disk}
className={`item ${isActive ? 'active' : ''}`}
onClick={() => { props.onChange(item)}}
>
{
item.disk === 'MYSELF' &&
<span className="icon iconfont">&#xe7a5;</span>
}
{
item.disk === 'COMMON' &&
<span className="icon iconfont">&#xe79d;</span>
}
{
item.disk === 'EMPLOYEE' &&
<span className="icon iconfont">&#xe7a3;</span>
}
<span className="disk-name">{ item.folderName }</span>
</div>
)
})
}
</div>
<a
className="guide-href"
href={window.NewVersion ? 'https://mp.weixin.qq.com/s/s0XN0Gk4Xul192SmTd6znw' : 'https://mp.weixin.qq.com/s/2EMWaaa3LQwkJd59bmy8pA'}
target="_blank"
rel="noopener noreferrer"
>
进一步了解资料云盘
</a>
</div>
)
};
export default DiskList;
\ No newline at end of file
src/modules/class-book/index.jsx 0 → 100644
import React from 'react';
import { Modal } from 'antd';
import Service from '@/common/js/service';
import { DISK_MAP } from '@/domains/class-book/constants';
import FolderManage from './components/FolderManage';
import DiskList from './components/DiskList';
import './index.less';
const { gmtCreate } = window.currentUserInstInfo || {};
// 判断是新用户还是老用户（gmtCreate小于上线日期的话就是老用户）
const onlineDate = +new Date('2020-07-17 00:00:00');
const isOldUser = gmtCreate <= onlineDate;
const defaultRootDisk = {
folderName: '我的文件',
disk: 'MYSELF',
uploadPower: false
}
class PrepareLessonPage extends React.Component {
constructor(props) {
super(props);
const prepareLessonTips = localStorage.getItem('prepare_lesson_tips');
this.state = {
prepareLessonTips,
diskList: [], // 可见磁盘目录
currentRootDisk: defaultRootDisk
}
}
componentWillMount() {
this.handleFetchDiskList();
}
handleFetchDiskList = async () => {
const res = await Service.Apollo('public/apollo/getUserDisk', {});
const { result = [] } = res;
const diskList = result.map((item) => {
return {
...item,
folderName: DISK_MAP[item.disk]
}
});
this.setState({
diskList,
currentRootDisk: diskList[0] || defaultRootDisk
});
}
handleChangeDisk = (disk) => {
this.setState({
currentRootDisk: disk
});
}
render() {
const { currentRootDisk, prepareLessonTips, diskList } = this.state;
return (
<div className="prepare-lesson-page page">
<div className="content-header">资料云盘</div>
<div className="box content-body">
<DiskList
diskList={diskList}
currentRootDisk={currentRootDisk}
onChange={this.handleChangeDisk}
/>
<FolderManage
currentRootDisk={currentRootDisk}
/>
</div>
{/* 老用户显示弹窗提示 */}
<Modal
title="备课本改版"
visible={!prepareLessonTips && isOldUser}
footer={null}
width={680}
maskClosable={false}
className="prepare-lesson-upgrade-modal"
onCancel={() => {
this.setState({
prepareLessonTips: true
})
}}
>
<div className="title">“备课本” 升级为 “资料云盘” 了！</div>
<div className="upgrade-list">
<div className="upgrade-list__item">
<img src="https://xiaomai-image.oss-cn-hangzhou.aliyuncs.com/1594780611301.png" alt=""/>
<div className="item-title">存储更便捷</div>
<div className="item-sub-title">讲次关联模式升级文件夹模式，存储不再受讲次限制</div>
</div>
<div className="upgrade-list__item">
<img src="https://xiaomai-image.oss-cn-hangzhou.aliyuncs.com/1594780629259.png" alt=""/>
<div className="item-title">结构更清晰</div>
<div className="item-sub-title">新增“我的文件”“公共文件”“员工文件”，满足机构存储需求</div>
</div>
<div className="upgrade-list__item">
<img src="https://xiaomai-image.oss-cn-hangzhou.aliyuncs.com/1594780641665.png" alt=""/>
<div className="item-title">同步更方便</div>
<div className="item-sub-title">支持主管直接查看员工文件，优质资料一目了然</div>
</div>
</div>
<div
className="footer"
onClick={() => {
this.setState({ prepareLessonTips: true });
localStorage.setItem('prepare_lesson_tips', true);
}}
>我知道了</div>
</Modal>
</div>
)
}
}
export default PrepareLessonPage;
\ No newline at end of file
src/modules/class-book/index.less 0 → 100644
.prepare-lesson-page {
.ant-upload-list {
display: none;
}
.ant-spin-nested-loading {
width: 100%;
}
table tr, table tr th {
background-color: #FFF !important;
}
table tr th.ant-table-column-has-actions.ant-table-column-has-sorters:hover {
background-color: #FFF !important;
}
.content-body {
display: flex;
}
.disk-list__wrap {
min-width: 200px;
border-right: 1px solid #EEE;
position: relative;
.item {
display: flex;
align-items: center;
height: 50px;
line-height: 50px;
margin-bottom: 8px;
padding-left: 32px;
text-align: center;
position: relative;
cursor: pointer;
&.hidden {
display: none;
}
&:hover {
background: rgba(255,133,52,0.06);
}
&.active {
background: rgba(255,133,52,0.06);
.iconfont, .disk-name {
font-weight: 500;
}
&::before {
content: '';
position: absolute;
top: 0;
right: 0;
width: 4px;
height: 100%;
background-color: #FF8534;
}
}
.iconfont, .disk-name {
color: #333;
}
.iconfont {
font-size: 20px;
margin-right: 8px;
}
.disk-name {
font-size: 16px;
}
}
.guide-href {
position: absolute;
left: 33px;
bottom: 24px;
color: #FF7519;
}
}
.folder-manage {
padding: 0 16px;
width: 100%;
.ant-upload-list {
display: none;
}
.tips {
border-radius: 4px;
margin-bottom: 16px;
height: 32px;
line-height: 32px;
padding: 0 16px;
background-color: #FFF0E7;
display: flex;
align-items: center;
justify-content: space-between;
.iconfont {
cursor: pointer;
font-size: 12px;
opacity: 0.45;
}
}
.operate-area {
position: relative;
&__opt {
width: fit-content;
&.visible {
display: block;
}
&.hidden {
display: none;
}
.ant-btn {
margin-right: 8px;
.iconfont {
margin-right: 4px;
}
}
}
&__search {
position: absolute;
top: 0;
right: 0;
}
&__bottom {
display: flex;
align-items: center;
justify-content: space-between;
margin: 16px 0;
.file-path {
display: inline-block;
color: #333;
position: relative;
margin-right: 12px;
&:last-child {
color: #999;
}
&:not(:last-child) {
cursor: pointer;
&:hover {
color: #FF8534;
}
&::before {
content: '/';
position: absolute;
color: #CCC;
right: -8px;
}
}
}
.load-count__inner {
color: #999;
}
}
}
.file-list {
height: ~'calc(100vh - 240px)';
overflow: scroll;
.file-name {
display: flex;
align-items: center;
cursor: pointer;
&__icon {
width: 24px;
margin-right: 4px;
color: #FBD140;
}
&__text:hover {
color: #FF7519;
}
}
.file-path {
cursor: pointer;
text-decoration: underline;
&:hover {
color: #FF7519;
}
}
.ant-dropdown-trigger {
cursor: pointer;
}
.lottie-icon {
&__title {
color: #999;
.upload-btn {
color: #FF7519;
margin: 0 4px;
cursor: pointer;
}
}
}
}
}
}
.prepare-lesson-upgrade-modal {
.ant-modal-header, .ant-modal-close-x {
display: none;
}
.title {
color: #333;
font-size: 24px;
font-weight: 500;
text-align: center;
margin-top: 16px;
}
.upgrade-list {
display: flex;
align-items: center;
justify-content: space-between;
margin-top: 40px;
padding: 0 26px;
&__item {
text-align: center;
max-width: 170px;
img {
width: 157px;
}
.item-title {
color: #333;
margin-top: 5px;
}
.item-sub-title {
color: #999;
font-size: 12px;
margin-top: 8px;
}
}
}
.footer {
width: 136px;
height: 40px;
line-height: 40px;
border-radius: 20px;
margin: auto;
margin-top: 46px;
margin-bottom: 8px;
text-align: center;
font-size: 16px;
color: #FFF;
background-color: #FC9C6B;
cursor: pointer;
}
}
.create-folder-modal .ant-modal-body {
min-height: 101px !important;
}
src/modules/class-book/modal/CreateFolderModal.jsx 0 → 100644
import React from 'react';
import { Modal, Input, Form, message } from 'antd';
import ShowTips from '@/bu-components/ShowTip';
import './CreateFolderModal.less';
class CreateFolderModal extends React.Component {
constructor(props) {
super(props);
this.state = {
validate: true,
warnText: null,
folderName: props.folderName
}
}
componentWillReceiveProps(nextProps) {
if (nextProps.isOpen) {
this.setState({
folderName: nextProps.folderName
});
}
}
componentDidUpdate(prevProps) {
// 输入框自动聚焦
this.refs.folderNameInput && this.refs.folderNameInput.focus();
}
handleChangeFolderName = (event) => {
const { value } = event.target;
// 是否超出了限制
const hasExceededLimit = value.length >= 50;
this.setState({
folderName: value,
validate: !hasExceededLimit,
warnText: hasExceededLimit && '名称不能超过50个字'
});
}
handleOk = () => {
this.props.form.validateFields((err) => {
const { folderName, validate } = this.state;
if (!folderName) {
this.setState({
validate: false,
warnText: '名称不能为空'
});
return;
};
if (!validate) return;
this.props.onOk(folderName).then((res) => {
// 防止新建和重命名的时候重复提示
if (!this.props.title) {
message.success('创建文件夹成功');
}
});
});
}
handleCancel = () => {
this.setState({
validate: true
});
this.props.onClose();
}
render() {
const { folderName, warnText, validate } = this.state;
const { isOpen, title = '新建文件夹', folderPathList } = this.props;
let showTip = null;
if (folderPathList) {
showTip = folderPathList.length < 2 ? true : false;
} else {
showTip = true;
}
return (
<Modal
title={title}
visible={isOpen}
onCancel={this.handleCancel}
onOk={this.handleOk}
width={448}
className="create-folder-modal"
>
<Form>
<Form.Item
required
help={ !validate && warnText}
validateStatus={!validate ? 'error' : null}
>
{
this.props.disk === 'COMMON' && window.NewVersion && showTip &&
<div className="show-tip">
<ShowTips message="创建后仅自己可以查看，如需其他成员查看请设置权限" />
</div>
}
<Input
value={folderName}
placeholder="请输入文件夹名称"
style={{width: '400px'}}
onChange={this.handleChangeFolderName}
maxlength="50"
ref="folderNameInput"
/>
</Form.Item>
</Form>
</Modal>
)
}
}
// export default Form.create()(CreateFolderModal);
export default CreateFolderModal;
\ No newline at end of file
src/modules/class-book/modal/ScanFileModal.jsx 0 → 100644
import React from 'react';
import { Modal } from "antd";
import { Player, BigPlayButton } from "video-react";
import "./ScanFileModal.less";
class ScanFileModal extends React.Component {
constructor(props) {
super(props);
this.state = {};
}
handleCancel = () => {
this.props.close();
};
render() {
const { fileType, item } = this.props;
return (
<Modal
visible={true}
onCancel={this.handleCancel}
title="查看文件"
footer={null}
width={680}
className="scan-file-modal"
>
<div className="scan-file-modal" style={{ width: 632 }}>
{(fileType === "JPG" || fileType === 'PNG') && (
<img
src={item.ossAddress || item.ossUrl}
alt="oss-address"
style={{ width: 632, objectFit: "cover" }}
/>
)}
{fileType === "MP4" && (
<div>
<Player
src={item.ossAddress || item.ossUrl}
fluid={false}
height={306}
width={"100%"}
>
<BigPlayButton position="center" />
</Player>
<video
style={{ display: "none" }}
ref="video"
src={item.ossAddress || item.ossUrl}
constrols="constrols"
id="video"
></video>
</div>
)}
{fileType === "MP3" && (
<div className="scan-file-modal__mp3">
<Player
src={item.ossAddress || item.ossUrl}
fluid={false}
height={306}
width={"100%"}
autoPlay={true}
>
<BigPlayButton position="center" />
</Player>
</div>
)}
</div>
</Modal>
);
}
}
export default ScanFileModal;
src/modules/class-book/modal/ScanFileModal.less 0 → 100644
.scan-file-modal {
z-index: 10;
&__mp3 {
.video-react-video {
background: #F1F3F6 url("https://image.xiaomaiketang.com/xm/3y8cRkJA5K.png") no-repeat center;
background-size: 60px 60px;
}
.mp3-img {
width: 60px;
height: 60px;
}
}
}
src/modules/root/App.tsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2019-07-10 10:30:49 * @Date: 2019-07-10 10:30:49
* @LastEditors: zhangleyuan * @LastEditors: wufan
* @LastEditTime: 2020-12-09 11:27:58 * @LastEditTime: 2020-12-09 16:50:18
* @Description: * @Description:
*/ */
import React, { useContext, useEffect, useState } from 'react'; import React, { useContext, useEffect, useState } from 'react';
...@@ -21,6 +21,7 @@ declare var window: any; ...@@ -21,6 +21,7 @@ declare var window: any;
const App: React.FC = (props: any) => { const App: React.FC = (props: any) => {
const ctx: any = useContext(XMContext); const ctx: any = useContext(XMContext);
const userId = User.getUserId(); const userId = User.getUserId();
window.currentUserInstInfo = {adminId: "1305385165390426114", adminName: "吴帆", gender: "UNKNOWN", parentId: "1305385165390426114", roleRemark: "", instId: "1213001850820476929" }
window.ctx = ctx; window.ctx = ctx;
useEffect(() => { useEffect(() => {
......
src/routes/config/mainRoutes.tsx
/* /*
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-04-29 10:26:32 * @Date: 2020-04-29 10:26:32
* @LastEditors: zhangleyuan * @LastEditors: wufan
* @LastEditTime: 2020-12-09 15:00:48 * @LastEditTime: 2020-12-09 19:06:51
* @Description: 内容线路由配置 * @Description: 内容线路由配置
*/ */
import EmployeesManagePage from '@/modules/store-manege/EmployeesManagePage'; import EmployeesManagePage from '@/modules/store-manege/EmployeesManagePage';
...@@ -11,6 +11,8 @@ import UserManagePage from '@/modules/store-manege/UserManagePage'; ...@@ -11,6 +11,8 @@ import UserManagePage from '@/modules/store-manege/UserManagePage';
import StoreDecorationPage from '@/modules/store-manege/StoreDecorationPage'; import StoreDecorationPage from '@/modules/store-manege/StoreDecorationPage';
import CourseCatalogPage from '@/modules/store-manege/CourseCatalogPage' import CourseCatalogPage from '@/modules/store-manege/CourseCatalogPage'
import LiveCoursePage from '@/modules/course-manage/LiveCoursePage' import LiveCoursePage from '@/modules/course-manage/LiveCoursePage'
import ClassBook from '@/modules/class-book';
const mainRoutes = [ const mainRoutes = [
{ {
path: '/employees-manage', path: '/employees-manage',
...@@ -42,6 +44,11 @@ const mainRoutes = [ ...@@ -42,6 +44,11 @@ const mainRoutes = [
component:LiveCoursePage, component:LiveCoursePage,
name: '课程分类' name: '课程分类'
}, },
{
path: '/resource-disk',
component:ClassBook,
name: '资料云盘'
},
] ]
export default mainRoutes; export default mainRoutes;
\ No newline at end of file
src/routes/config/menuList.tsx
...@@ -17,12 +17,12 @@ export const menuList: any = [ ...@@ -17,12 +17,12 @@ export const menuList: any = [
// ] // ]
// }, // },
// { {
// groupName: "资料云盘", groupName: "资料云盘",
// groupCode: "CloudDisk", groupCode: "CloudDisk",
// icon: '&#xe83b;', icon: '&#xe83b;',
// link: '/CloudDisk' link: '/resource-disk'
// }, },
{ {
groupName: "店铺管理", groupName: "店铺管理",
groupCode: "CloudShop", groupCode: "CloudShop",
...@@ -43,11 +43,11 @@ export const menuList: any = [ ...@@ -43,11 +43,11 @@ export const menuList: any = [
groupCode: "CourseCategory", groupCode: "CourseCategory",
link: '/course-catalog' link: '/course-catalog'
}, },
// { {
// groupName: "店铺装修", groupName: "店铺装修",
// groupCode: "ShopDecoration", groupCode: "ShopDecoration",
// link: '/store-decoration' link: '/store-decoration'
// } }
] ]
}, },
......
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