Skip to content

X
xiaomai-cloud-class-web
Commit 4b543d8d by wufan
Options

Merge branch 'feature/zhangleyuan/20200119/style-optimize' into 'master' 

Feature/zhangleyuan/20200119/style optimize

See merge request !3
parents d4330b87 8595031d
Showing with 394 additions and 360 deletions
package.json
...@@ -60,6 +60,7 @@ ...@@ -60,6 +60,7 @@
"jquery": "^3.4.1", "jquery": "^3.4.1",
"less": "^3.12.2", "less": "^3.12.2",
"less-loader": "^6.2.0", "less-loader": "^6.2.0",
"lottie-web": "^5.7.6",
"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", "moment": "^2.27.0",
......
src/bu-components/ChooseMembersModal.jsx
...@@ -203,8 +203,10 @@ class ChooseMembersModal extends React.Component { ...@@ -203,8 +203,10 @@ class ChooseMembersModal extends React.Component {
title: '全选', // 实际为头像，但在表格上这行要求显示为全选 title: '全选', // 实际为头像，但在表格上这行要求显示为全选
key: 'avatar', key: 'avatar',
dataIndex: 'avatar', dataIndex: 'avatar',
width: '30px', width: '40%',
render: (value, record) => { render: (value, record) => {
const { adminName } = record;
return ( return (
<div className='avatar'> <div className='avatar'>
{ {
...@@ -212,23 +214,12 @@ class ChooseMembersModal extends React.Component { ...@@ -212,23 +214,12 @@ class ChooseMembersModal extends React.Component {
[<img className='avatar-img' src={ value } key='avatar' alt=""/>] [<img className='avatar-img' src={ value } key='avatar' alt=""/>]
: [<img className='avatar-img' src='https://image.xiaomaiketang.com/xm/dEyxDRKwFw.png' key='avatar' alt=""/>] : [<img className='avatar-img' src='https://image.xiaomaiketang.com/xm/dEyxDRKwFw.png' key='avatar' alt=""/>]
} }
<span className='userImg'>
{ adminName }
</span>
</div> </div>
) )
} }
},{
title: '',
key: 'adminNameLeft',
dataIndex: 'adminName',
width: '30%',
align: 'left',
render: (value, record) => {
const { adminName } = record;
return (
<span className='userImg'>
{ adminName }
</span>
)
}
} }
] ]
return selectColumns return selectColumns
...@@ -309,7 +300,7 @@ class ChooseMembersModal extends React.Component { ...@@ -309,7 +300,7 @@ class ChooseMembersModal extends React.Component {
// bordered={true} // bordered={true}
size={'small'} size={'small'}
rowSelection={{ rowSelection={{
columnWidth : 30, columnWidth : 24,
selectedRowKeys, selectedRowKeys,
onChange : this.onChangeRow, onChange : this.onChangeRow,
getCheckboxProps : this.getCheckboxProps, getCheckboxProps : this.getCheckboxProps,
......
src/bu-components/ChooseMembersModal.less
...@@ -50,6 +50,7 @@ ...@@ -50,6 +50,7 @@
height: 23px; height: 23px;
width: 23px; width: 23px;
border-radius: 50%; border-radius: 50%;
margin-right: 8px;
} }
} }
} }
...@@ -68,9 +69,9 @@ ...@@ -68,9 +69,9 @@
.span-right{ .span-right{
float: right; float: right;
margin-right: 10px; margin-right: 10px;
color:#5289FA; color: #999;
.span-right-l{ .span-right-l{
color: #FD9A6A; color: #5289FA;
cursor: pointer; cursor: pointer;
} }
} }
......
src/bu-components/CopyFileModal.jsx
...@@ -251,12 +251,6 @@ class CopyFileModal extends React.Component { ...@@ -251,12 +251,6 @@ class CopyFileModal extends React.Component {
</Button> </Button>
]} ]}
> >
{/* <div className='copy-header'>
<Radio.Group>
<Radio.Button value={'MYSELF'} onClick={() => this.getFileList('MYSELF')}>我的文件</Radio.Button>
<Radio.Button onClick={() => this.getFileList('COMMON')}>公共文件</Radio.Button>
</Radio.Group>
</div> */}
<div className='copy-body'> <div className='copy-body'>
{/* 面包屑 */} {/* 面包屑 */}
<div className="bread-crumbs"> <div className="bread-crumbs">
......
src/bu-components/CopyFileModal.less
...@@ -59,6 +59,7 @@ ...@@ -59,6 +59,7 @@
.lottie-box { .lottie-box {
border:1px solid #E8E8E8; border:1px solid #E8E8E8;
border-radius:4px; border-radius:4px;
height: 320px;
} }
.lottie-icon{ .lottie-icon{
......
src/bu-components/ManagingMembersModal.jsx
...@@ -194,7 +194,7 @@ class ManagingMembersModal extends React.Component { ...@@ -194,7 +194,7 @@ class ManagingMembersModal extends React.Component {
title : '头像', title : '头像',
key : 'avatar', key : 'avatar',
dataIndex : 'avatar', dataIndex : 'avatar',
width : '20%', width : '8%',
align : 'right', align : 'right',
render : (value, record) => { render : (value, record) => {
return ( return (
...@@ -224,7 +224,7 @@ class ManagingMembersModal extends React.Component { ...@@ -224,7 +224,7 @@ class ManagingMembersModal extends React.Component {
title : '权限', title : '权限',
key : 'rights', key : 'rights',
dataIndex : 'rights', dataIndex : 'rights',
width : '40%', width : '50%',
align :'right', align :'right',
render : (value, record) => { render : (value, record) => {
const imgSrcList = ['https://image.xiaomaiketang.com/xm/Th5cKisf6f.png', 'https://image.xiaomaiketang.com/xm/nzAcc6ryTp.png']; const imgSrcList = ['https://image.xiaomaiketang.com/xm/Th5cKisf6f.png', 'https://image.xiaomaiketang.com/xm/nzAcc6ryTp.png'];
......
src/bu-components/ManagingMembersModal.less
...@@ -15,7 +15,7 @@ ...@@ -15,7 +15,7 @@
.managing-right{ .managing-right{
float: right; float: right;
color: #FFB714; color: #5289FA;
cursor: pointer; cursor: pointer;
.tool-tip-right{ .tool-tip-right{
margin-right: 4px; margin-right: 4px;
......
src/bu-components/SelectPrepareFileModal.less
...@@ -50,9 +50,14 @@ ...@@ -50,9 +50,14 @@
} }
.file-list { .file-list {
// border: 1px solid #E8E8E8;
// border-radius: 4px;
height: 100%;
border-top: 1px solid #E8E8E8;
border-top-left-radius: 4px;
border-top-right-radius: 4px;
border: 1px solid #E8E8E8; border: 1px solid #E8E8E8;
border-radius: 4px; overflow: auto;
.file-item { .file-item {
display: flex; display: flex;
align-items: center; align-items: center;
......
src/components/MultipleDatePicker.less
...@@ -55,7 +55,9 @@ ...@@ -55,7 +55,9 @@
cursor: pointer; cursor: pointer;
vertical-align: top; vertical-align: top;
&:hover { &:hover {
background: #e8e8e8; background: #FFB714;
opacity:0.2;
border-radius:4px;
} }
&.before-disabled { &.before-disabled {
color: #e8e8e8; color: #e8e8e8;
......
src/core/antd.less
...@@ -41,6 +41,8 @@ ...@@ -41,6 +41,8 @@
} }
.ant-btn-primary { .ant-btn-primary {
text-shadow: none !important;
box-shadow: none !important;
i { i {
color: #fff !important; color: #fff !important;
} }
...@@ -225,11 +227,7 @@ ...@@ -225,11 +227,7 @@
line-height:20px !important; line-height:20px !important;
font-weight: 400 !important; font-weight: 400 !important;
border: 1px solid #e8e8e8; border: 1px solid #e8e8e8;
&:focus, box-shadow: none !important;
:active {
border: 1px solid #ffb000 !important;
color: #ffb000 !important;
}
} }
.ant-input-search-button { .ant-input-search-button {
...@@ -382,13 +380,6 @@ mr0 { ...@@ -382,13 +380,6 @@ mr0 {
background-color: #fdb089 !important; background-color: #fdb089 !important;
border-color: #fdb089 !important; border-color: #fdb089 !important;
} }
&:focus,
:active {
border: 1px solid @xm-color-text-select-primary !important;
background-color: @xm-color-text-select-primary !important;
}
span { span {
color: #fff !important; color: #fff !important;
} }
...@@ -641,4 +632,13 @@ mr0 { ...@@ -641,4 +632,13 @@ mr0 {
.row-dragging .drag-visible { .row-dragging .drag-visible {
visibility: visible; visibility: visible;
}
.ant-select-dropdown .rc-virtual-list-scrollbar .rc-virtual-list-scrollbar-thumb{
background: #D6D6D6 !important;
}
.ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table > thead > tr > .ant-table-cell-fix-right-first::after,
.ant-table.ant-table-bordered > .ant-table-container > .ant-table-content > table > tbody > tr > .ant-table-cell-fix-right-first::after
{
border-right:none !important;
} }
\ No newline at end of file
src/domains/basic-domain/constants.ts
/* /*
* @Author: 陈剑宇 * @Author: 陈剑宇
* @Date: 2020-05-07 14:43:01 * @Date: 2020-05-07 14:43:01
* @LastEditTime: 2021-01-18 21:05:12 * @LastEditTime: 2021-01-25 20:05:28
* @LastEditors: zhangleyuan * @LastEditors: zhangleyuan
* @Description: * @Description:
* @FilePath: /wheat-web-demo/src/domains/basic-domain/constants.ts * @FilePath: /wheat-web-demo/src/domains/basic-domain/constants.ts
...@@ -9,7 +9,7 @@ ...@@ -9,7 +9,7 @@
import { MapInterface } from '@/domains/basic-domain/interface' import { MapInterface } from '@/domains/basic-domain/interface'
// 默认是 dev 环境 // 默认是 dev 环境
const ENV: string = process.env.DEPLOY_ENV || 'prod'; const ENV: string = process.env.DEPLOY_ENV || 'rc';
console.log("process.env.DEPLOY_ENV",process) console.log("process.env.DEPLOY_ENV",process)
const BASIC_HOST_MAP: MapInterface = { const BASIC_HOST_MAP: MapInterface = {
dev: 'https://dev-heimdall.xiaomai5.com/', dev: 'https://dev-heimdall.xiaomai5.com/',
......
src/domains/course-domain/constants.ts
...@@ -2,12 +2,12 @@ ...@@ -2,12 +2,12 @@
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-20 09:21:40 * @Date: 2020-08-20 09:21:40
* @LastEditors: zhangleyuan * @LastEditors: zhangleyuan
* @LastEditTime: 2021-01-18 21:05:31 * @LastEditTime: 2021-01-25 20:04:20
* @Description: * @Description:
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
import { MapInterface } from '@/domains/basic-domain/interface' import { MapInterface } from '@/domains/basic-domain/interface'
const ENV: string = process.env.DEPLOY_ENV || 'prod'; const ENV: string = process.env.DEPLOY_ENV || 'rc';
const appIdMap: MapInterface = { const appIdMap: MapInterface = {
dev: 'wx3ea60e78ddfa277e', dev: 'wx3ea60e78ddfa277e',
......
src/modules/common/DateRangePicker.jsx
...@@ -27,6 +27,7 @@ class DateRangePicker extends React.Component { ...@@ -27,6 +27,7 @@ class DateRangePicker extends React.Component {
this.props.onChange(date) this.props.onChange(date)
}} }}
{...showTime} {...showTime}
suffixIcon={<span class="icon iconfont">&#xe838;</span>}
/> />
) )
} }
......
src/modules/course-manage/DataList/CourseData.jsx
...@@ -219,7 +219,7 @@ class DataList extends React.Component { ...@@ -219,7 +219,7 @@ class DataList extends React.Component {
<Table <Table
columns={this.getVisiterColumns()} columns={this.getVisiterColumns()}
dataSource={this.state.teacherData.visitorInfoVOList} dataSource={this.state.teacherData.visitorInfoVOList}
scroll={{ y: 75 }} scroll={{ y: 80 }}
size={"small"} size={"small"}
style={{ width: 450 }} style={{ width: 450 }}
pagination={false} pagination={false}
......
src/modules/course-manage/components/LiveCourseFilter.jsx
...@@ -175,7 +175,6 @@ class LiveCourseFilter extends React.Component { ...@@ -175,7 +175,6 @@ class LiveCourseFilter extends React.Component {
format={"YYYY-MM-DD"} format={"YYYY-MM-DD"}
onChange={(dates) => { this.handleChangeDates(dates) }} onChange={(dates) => { this.handleChangeDates(dates) }}
style={{ width: "calc(100% - 70px)" }} style={{ width: "calc(100% - 70px)" }}
/> />
</div> </div>
{ User.getUserRole()!=="CloudLecturer" && { User.getUserRole()!=="CloudLecturer" &&
......
src/modules/course-manage/components/LiveCourseFilter.less
...@@ -36,6 +36,7 @@ ...@@ -36,6 +36,7 @@
line-height: 20px; line-height: 20px;
.fold-icon { .fold-icon {
font-size: 12px; font-size: 12px;
margin-left:4px;
} }
} }
} }
......
src/modules/course-manage/components/LiveCourseList.jsx
...@@ -32,7 +32,7 @@ const courseStateShow = { ...@@ -32,7 +32,7 @@ const courseStateShow = {
UN_START: { UN_START: {
code: 1, code: 1,
title: "待开课", title: "待开课",
color: "#FDBE31", color: "#FFB714",
}, },
STARTING: { STARTING: {
code: 2, code: 2,
...@@ -147,7 +147,7 @@ class LiveCourseList extends React.Component { ...@@ -147,7 +147,7 @@ class LiveCourseList extends React.Component {
columns = [ columns = [
{ {
title: "直播课", title: "直播课",
width: "25%", width: "23%",
key: "course", key: "course",
dataIndex: "courseName", dataIndex: "courseName",
render: (val, record) => { render: (val, record) => {
...@@ -259,9 +259,9 @@ class LiveCourseList extends React.Component { ...@@ -259,9 +259,9 @@ class LiveCourseList extends React.Component {
{ {
title: <span> title: <span>
<span>店铺展示</span> <span>店铺展示</span>
<Tooltip title={<div>开启后，用户可在店铺内查看到此课程。若课程“未成功开课”，则系统会自动“关闭”店铺展示。<br/>关闭后，店铺内不再展示此课程，但用户仍可通过分享的海报/链接查看此课程。</div>}><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf'}}>&#xe61d;</i></Tooltip> <Tooltip title={<div>开启后，用户可在店铺内查看到此课程。若课程“未成功开课”，则系统会自动“关闭”店铺展示。<br/>关闭后，店铺内不再展示此课程，但用户仍可通过分享的海报/链接查看此课程。</div>}><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px'}}>&#xe61d;</i></Tooltip>
</span>, </span>,
width: "7%", width: "9%",
dataIndex: "courseware", dataIndex: "courseware",
render: (val, item, index) => { render: (val, item, index) => {
return ( return (
......
src/modules/course-manage/modal/ManageCoursewareModal.jsx
...@@ -9,7 +9,7 @@ import { Modal, Button, Table, Progress, message, Tooltip, Spin, Popconfirm } fr ...@@ -9,7 +9,7 @@ import { Modal, Button, Table, Progress, message, Tooltip, Spin, Popconfirm } fr
import { QuestionCircleOutlined,LoadingOutlined} from "@ant-design/icons"; import { QuestionCircleOutlined,LoadingOutlined} from "@ant-design/icons";
import _ from 'underscore'; import _ from 'underscore';
import moment from 'moment'; import moment from 'moment';
// import User from '@/core/user'; import Lottie from "lottie-web";
import User from '@/common/js/user'; import User from '@/common/js/user';
import { suffixType, DEFAULT_SIZE_UNIT, SupportFileType } from '@/common/constants/academic/liveEnum'; import { suffixType, DEFAULT_SIZE_UNIT, SupportFileType } from '@/common/constants/academic/liveEnum';
import { FileVerifyMap, FileTypeIcon, DISK_MAP } from '@/common/constants/academic/lessonEnum'; import { FileVerifyMap, FileTypeIcon, DISK_MAP } from '@/common/constants/academic/lessonEnum';
...@@ -20,6 +20,7 @@ import './ManageCoursewareModal.less'; ...@@ -20,6 +20,7 @@ import './ManageCoursewareModal.less';
class ManageCoursewareModal extends React.Component { class ManageCoursewareModal extends React.Component {
constructor(props) { constructor(props) {
super(props) super(props)
...@@ -38,21 +39,17 @@ class ManageCoursewareModal extends React.Component { ...@@ -38,21 +39,17 @@ class ManageCoursewareModal extends React.Component {
componentDidMount() { componentDidMount() {
this.getCoursewareList(); this.getCoursewareList();
// this.handleFetchDiskList(); var animation = Lottie.loadAnimation({
// if (teacherId) { path: "https://image.xiaomaiketang.com/xm/MQwp2aJaxf.json",
// this.judgeLessonPermisson(); name: "test",
// } renderer: "svg",
loop: true,
autoplay: true,
container: document.getElementById("lottie-box")
});
} }
// 判断资料云盘权限
// judgeLessonPermisson = () => {
// const query = {
// permissionCode: "2001"
// };
// axios.Apollo("public/apollo/judgeLessonPermission", query).then(res => {
// this.setState({ isLessonPermission: res.result })
// });
// };
// 获取课件列表 // 获取课件列表
getCoursewareList(id) { getCoursewareList(id) {
...@@ -104,22 +101,7 @@ class ManageCoursewareModal extends React.Component { ...@@ -104,22 +101,7 @@ class ManageCoursewareModal extends React.Component {
}) })
} }
// 获取机构可见的磁盘目录
// handleFetchDiskList = () => {
// Service.Hades('public/apollo/getUserDisk', {}).then((res) => {
// const { result = [] } = res;
// const diskList = result.map((item) => {
// return {
// ...item,
// folderName: DISK_MAP[item.disk]
// }
// });
// this.setState({
// diskList,
// });
// });
// }
// 上传文件 // 上传文件
addFile() { addFile() {
// 判断是否早于开课前30分钟 // 判断是否早于开课前30分钟
...@@ -233,27 +215,6 @@ class ManageCoursewareModal extends React.Component { ...@@ -233,27 +215,6 @@ class ManageCoursewareModal extends React.Component {
} }
}; };
// 校验余额
// handleCheckBalance = async () => {
// const { type } = this.props;
// const balanceRes = await axios.Business("public/liveAssets/query", { });
// // 判断是否欠费，旗舰版用户不需要校验余额
// const ultimateRes = await axios.Business('public/inst/checkInstProduct', {
// productCodeList: ['ULTIMATESELL', 'PIP_TO_ULTIMATE', 'HIGH_TO_ULTIMATE']
// });
// const { result } = balanceRes;
// // balance小于0表示已经欠费
// if ((!result || result.balance <= 0) && !ultimateRes.result && type === 'interactive') {
// Modal.info({
// title: '无法继续操作',
// content: '直播服务已升级，请联系运营老师。',
// icon: <span className="icon iconfont default-confirm-icon">&#xe6f4;</span>
// })
// return false;
// }
// return true;
// };
render() { render() {
const columns = [ const columns = [
...@@ -351,7 +312,8 @@ class ManageCoursewareModal extends React.Component { ...@@ -351,7 +312,8 @@ class ManageCoursewareModal extends React.Component {
> >
{_.isEmpty(_list) ? {_.isEmpty(_list) ?
<div className="empty-body"> <div className="empty-body">
<img className="empty-image" src="https://image.xiaomaiketang.com/xm/s8xkAPCDex.png" alt="" /> {/* <img className="empty-image" src="https://image.xiaomaiketang.com/xm/s8xkAPCDex.png" alt="" /> */}
<div id="lottie-box" className="empty-image"></div>
<Button <Button
className="empty-button" className="empty-button"
type="primary" type="primary"
......
src/modules/course-manage/modal/ManageCoursewareModal.less
...@@ -8,6 +8,8 @@ ...@@ -8,6 +8,8 @@
.empty-image { .empty-image {
display: block; display: block;
margin: 24px auto 12px; margin: 24px auto 12px;
width:100px;
height:100px;
} }
.empty-button { .empty-button {
display: block; display: block;
...@@ -58,7 +60,7 @@ ...@@ -58,7 +60,7 @@
} }
&:hover { &:hover {
.name { .name {
color: #FF7519; color: #FFB714;
} }
} }
} }
......
src/modules/course-manage/modal/ShareLiveModal.jsx
...@@ -24,6 +24,7 @@ class ShareLiveModal extends React.Component { ...@@ -24,6 +24,7 @@ class ShareLiveModal extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
shareUrl: 'https://xiaomai5.com/liveShare?courseId=12' shareUrl: 'https://xiaomai5.com/liveShare?courseId=12'
} }
...@@ -32,6 +33,43 @@ class ShareLiveModal extends React.Component { ...@@ -32,6 +33,43 @@ class ShareLiveModal extends React.Component {
componentDidMount() { componentDidMount() {
// 获取短链接 // 获取短链接
this.handleConvertShortUrl(); this.handleConvertShortUrl();
// const { needStr, data, type } = this.props;
// const { courseName, coverUrl = DEFAULT_COVER, scheduleVideoUrl } = data;
// const { shareUrl ,time} = this.state;
// // 判断是否是默认图, 默认图不需要在URL后面增加字符串
// const isDefaultCover = coverUrl === DEFAULT_COVER;
// let coverImgSrc = coverUrl;
// if(type === 'videoClass'){
// if(!coverUrl || isDefaultCover){
// coverImgSrc = `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast&anystring=anystring`
// }
// }else{
// data.courseMediaVOS.map((item,index)=>{
// if( item.contentType === "COVER"){
// coverImgSrc = item.mediaUrl;
// }
// })
// }
// let image = new Image()
// image.src =coverImgSrc + '?v=' + Math.random()
// image.crossOrigin = "*"
// image.onload = ()=>{
// let imgData = getBase64Image(image)
// this.setState({imgData})
// }
// function getBase64Image (img) {
// let canvas = document.createElement("canvas")
// canvas.width = img.width
// canvas.height = img.height
// let ctx = canvas.getContext("2d")
// ctx.drawImage(img, 0, 0, img.width, img.height)
// let dataURL = canvas.toDataURL("image/png")
// return dataURL
// }
} }
handleConvertShortUrl = () => { handleConvertShortUrl = () => {
...@@ -42,6 +80,7 @@ class ShareLiveModal extends React.Component { ...@@ -42,6 +80,7 @@ class ShareLiveModal extends React.Component {
urls: [longUrl] urls: [longUrl]
}).then((res) => { }).then((res) => {
const { result = [] } = res; const { result = [] } = res;
this.setState({ this.setState({
shareUrl: result[0].shortUrl shareUrl: result[0].shortUrl
}, () => { }, () => {
...@@ -62,15 +101,24 @@ class ShareLiveModal extends React.Component { ...@@ -62,15 +101,24 @@ class ShareLiveModal extends React.Component {
// 下载海报 // 下载海报
handleDownloadPoster = () => { handleDownloadPoster = () => {
const dom = document.querySelector('#poster'); this.setState({
html2canvas(dom, { showImg:true,
useCORS: true, time:new Date().valueOf()
}).then(canvas => { },()=>{
const download = document.createElement('a'); this.setState({time:new Date().valueOf()},()=>{
const { courseName } = this.props.data; let node = document.getElementById('poster');
const dataUrl = canvas.toDataURL('image/png'); domtoimage.toPng(node)
$(download).attr('href', dataUrl).attr('download', `${courseName}.png`).get(0).click(); .then((imgData) => {
console.log(imgData)
const download = document.createElement('a');
const { courseName } = this.props.data;
$(download).attr('href', imgData).attr('download', `${courseName}.png`).get(0).click();
// this.props.close()
})
})
}) })
} }
// 复制分享链接 // 复制分享链接
...@@ -84,17 +132,23 @@ class ShareLiveModal extends React.Component { ...@@ -84,17 +132,23 @@ class ShareLiveModal extends React.Component {
render() { render() {
const { needStr, data, type } = this.props; const { needStr, data, type } = this.props;
const { courseName, coverUrl = DEFAULT_COVER, scheduleVideoUrl } = data; const { courseName, coverUrl = DEFAULT_COVER, scheduleVideoUrl } = data;
const { shareUrl } = this.state; const { shareUrl ,imgData,showImg,time} = this.state;
// 判断是否是默认图, 默认图不需要在URL后面增加字符串 // 判断是否是默认图, 默认图不需要在URL后面增加字符串
const isDefaultCover = coverUrl === DEFAULT_COVER; const isDefaultCover = coverUrl === DEFAULT_COVER;
const coverImgSrc = type === 'videoClass' let coverImgSrc = coverUrl;
// 如果是默认图, 显示视频的第一帧, 否则显示上传的视频封面 if(type === 'videoClass'){
? ((!coverUrl || isDefaultCover) if(!coverUrl || isDefaultCover){
? `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast&anystring=anystring` coverImgSrc = `${scheduleVideoUrl}?x-oss-process=video/snapshot,t_0,m_fast&anystring=anystring`
: `${coverUrl}`) }
: `${coverUrl}` }else{
data.courseMediaVOS.map((item,index)=>{
if( item.contentType === "COVER"){
coverImgSrc = item.mediaUrl;
}
})
}
return ( return (
...@@ -107,7 +161,8 @@ class ShareLiveModal extends React.Component { ...@@ -107,7 +161,8 @@ class ShareLiveModal extends React.Component {
className="share-live-modal" className="share-live-modal"
onCancel={this.props.close} onCancel={this.props.close}
> >
<div className="left" id="poster"> <div className="left">
<div id="poster">
<div className="store-name"> <div className="store-name">
<span className="text">{storeName}</span> <span className="text">{storeName}</span>
</div> </div>
...@@ -117,13 +172,16 @@ class ShareLiveModal extends React.Component { ...@@ -117,13 +172,16 @@ class ShareLiveModal extends React.Component {
type === "liveClass" && type === "liveClass" &&
<div class="live-couse-name">{courseName}</div> <div class="live-couse-name">{courseName}</div>
} }
{
showImg ? <img
<img crossOrigin='*'
src={coverImgSrc} src={coverImgSrc+`?=${time}`}
className="course-cover" className="course-cover"
/> />: <img
src={coverImgSrc+`?=${time}`}
className="course-cover"
/>
}
<div className="qrcode-wrap"> <div className="qrcode-wrap">
<div className="qrcode-wrap__left"> <div className="qrcode-wrap__left">
<div className="text">长按识别二维码进入观看</div> <div className="text">长按识别二维码进入观看</div>
...@@ -132,38 +190,35 @@ class ShareLiveModal extends React.Component { ...@@ -132,38 +190,35 @@ class ShareLiveModal extends React.Component {
<div className="qrcode-wrap__right" id="qrcodeWrap"> <div className="qrcode-wrap__right" id="qrcodeWrap">
</div> </div>
</div> </div>
</div> </div>
<div className="right"> </div>
<div className="share-poster right__item"> <div className="right">
<div className="title">① 海报分享</div> <div className="share-poster right__item">
{ type === "liveClass" && <div className="title">① 海报分享</div>
<div className="sub-title">用户可通过微信扫描海报二维码，观看直播</div> { type === "liveClass" &&
} <div className="sub-title">用户可通过微信扫描海报二维码，观看直播</div>
{ type === "videoClass" && }
<div className="sub-title">用户可通过微信识别二维码，报名观看视频</div> { type === "videoClass" &&
<div className="sub-title">用户可通过微信识别二维码，报名观看视频</div>
}
}
<div className="content" onClick={this.handleDownloadPoster}>下载海报</div> <div className="content" onClick={this.handleDownloadPoster}>下载海报</div>
</div> </div>
<div className="share-url right__item"> <div className="share-url right__item">
<div className="title">② 链接分享</div> <div className="title">② 链接分享</div>
{ type === "liveClass" && { type === "liveClass" &&
<div className="sub-title">用户可通过微信打开以下链接，观看直播</div> <div className="sub-title">用户可通过微信打开以下链接，观看直播</div>
} }
{ type === "videoClass" && { type === "videoClass" &&
<div className="sub-title">用户可通过打开链接，报名观看视频</div> <div className="sub-title">用户可通过打开链接，报名观看视频</div>
} }
<div className="content"> <div className="content">
<div className="share-url" id="shareUrl">{shareUrl}</div> <div className="share-url" id="shareUrl">{shareUrl}</div>
<Button type="primary" onClick={this.handleCopy}>复制</Button> <Button type="primary" onClick={this.handleCopy}>复制</Button>
</div>
</div> </div>
</div> </div>
</div>
</Modal> </Modal>
) )
} }
......
src/modules/course-manage/modal/ShareLiveModal.less
.share-live-modal { .share-live-modal {
.ant-modal-body { .ant-modal-body {
display: flex; display: flex;
#poster{
background: #FFF;
margin:0;
padding: 20px;
}
.left { .left {
width: 303px; width: 303px;
padding: 20px;
margin: 0 32px 0 16px; margin: 0 32px 0 16px;
box-shadow:0px 2px 10px 0px rgba(0,0,0,0.05); box-shadow:0px 2px 10px 0px rgba(0,0,0,0.05);
border-radius: 12px; border-radius: 12px;
.course-name-title { .course-name-title {
font-size: 14px; font-size: 14px;
color: #333; color: #333;
......
src/modules/course-manage/video-course/AddVideoCourse.jsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-05 10:07:47 * @Date: 2020-08-05 10:07:47
* @LastEditors: zhangleyuan * @LastEditors: zhangleyuan
* @LastEditTime: 2021-01-18 18:18:49 * @LastEditTime: 2021-01-25 13:46:13
* @Description: 视频课新增/编辑页 * @Description: 视频课新增/编辑页
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -540,24 +540,25 @@ class AddVideoCourse extends React.Component { ...@@ -540,24 +540,25 @@ class AddVideoCourse extends React.Component {
</div> </div>
{/* 选择备课文件弹窗 */} {/* 选择备课文件弹窗 */}
<SelectPrepareFileModal { showSelectFileModal &&
operateType="select" <SelectPrepareFileModal
selectTypeList={['MP4']} operateType="select"
accept="video/mp4" selectTypeList={['MP4']}
confirm={{ accept="video/mp4"
title: '文件过大，无法上传', confirm={{
content: '为保障学员的观看体验，上传的视频大小不能超过500M', title: '文件过大，无法上传',
}} content: '为保障学员的观看体验，上传的视频大小不能超过500M',
tooltip={'格式支持mp4，大小不超过500M'} }}
isOpen={showSelectFileModal} tooltip={'格式支持mp4，大小不超过500M'}
diskList={diskList} isOpen={showSelectFileModal}
addVideo={true} diskList={diskList}
onClose={() => { addVideo={true}
this.setState({ showSelectFileModal: false }) onClose={() => {
}} this.setState({ showSelectFileModal: false })
onSelect={this.handleSelectVideo} }}
/> onSelect={this.handleSelectVideo}
/>
}
<ImgCutModalNew <ImgCutModalNew
title="裁剪" title="裁剪"
width={550} width={550}
......
src/modules/course-manage/video-course/AddVideoCourse.less
.add-video-course-page { .add-video-course-page {
.box{
margin-bottom:16px !important;
}
.ant-radio-group { .ant-radio-group {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
...@@ -25,7 +27,11 @@ ...@@ -25,7 +27,11 @@
.form { .form {
margin-top: 16px; margin-top: 16px;
padding: 0 16px; padding: 0 16px;
.label{
display:inline-block;
text-align:right;
width:85px;
}
.required { .required {
position: relative; position: relative;
...@@ -33,7 +39,7 @@ ...@@ -33,7 +39,7 @@
position: absolute; position: absolute;
content: '*'; content: '*';
color: red; color: red;
left: -10px; left: 5px;
top: 6px; top: 6px;
} }
...@@ -110,7 +116,7 @@ ...@@ -110,7 +116,7 @@
} }
.sub-content { .sub-content {
margin-left: 70px; margin-left: 85px;
margin-top: 4px; margin-top: 4px;
.tips { .tips {
......
src/modules/course-manage/video-course/components/AddVideoIntro.jsx
...@@ -187,17 +187,15 @@ class AddVideoIntro extends React.Component { ...@@ -187,17 +187,15 @@ class AddVideoIntro extends React.Component {
<div className="allow-tourist-join"> <div className="allow-tourist-join">
<span className="label">观看设置：</span> <span className="label">观看设置：</span>
<div className="content"> <div className="content">
<Row> <div>
<Col span={3}> <Switch checked={whetherVisitorsJoin==="YES"? true:false} onChange={this.whetherVisitorsJoinChange}/>
<Switch checked={whetherVisitorsJoin==="YES"? true:false} onChange={this.whetherVisitorsJoinChange}/> </div>
</Col> <div>
<Col span={21}> <div className="desc">
<div className="desc"> <div>开启：允许未绑定手机号的用户进入直播间观看直播</div>
<div>开启：允许未绑定手机号的用户进入直播间观看直播</div> <div>关闭：仅限绑定了手机号的用户可以进入直播间观看直播</div>
<div>关闭：仅限绑定了手机号的用户可以进入直播间观看直播</div> </div>
</div> </div>
</Col>
</Row>
</div> </div>
</div> </div>
<div className="store-show"> <div className="store-show">
...@@ -217,7 +215,7 @@ class AddVideoIntro extends React.Component { ...@@ -217,7 +215,7 @@ class AddVideoIntro extends React.Component {
</div> </div>
</div> </div>
<div className="introduce"> <div className="introduce">
<span className="label">视频课简介:</span> <span className="label">视频课简介：</span>
<div className="content"> <div className="content">
<div className="intro-list"> <div className="intro-list">
{ {
...@@ -266,18 +264,19 @@ class AddVideoIntro extends React.Component { ...@@ -266,18 +264,19 @@ class AddVideoIntro extends React.Component {
</div> </div>
</div> </div>
{/* 选择暖场图文件弹窗 */} {/* 选择暖场图文件弹窗 */}
<SelectPrepareFileModal { showSelectFileModal &&
operateType="select" <SelectPrepareFileModal
accept={selectType==="INTRO"?"image/jpeg,image/png,image/jpg":"video/mp4,image/jpeg,image/png,image/jpg"} operateType="select"
selectTypeList={ selectType==="INTRO" ? ['JPG', 'JPEG', 'PNG']: ['MP4', 'JPG', 'JPEG', 'PNG'] } accept={selectType==="INTRO"?"image/jpeg,image/png,image/jpg":"video/mp4,image/jpeg,image/png,image/jpg"}
tooltip={ selectType==="INTRO"?'支持文件类型：jpg、jpeg、png':'支持文件类型：jpg、jpeg、png、mp4'} selectTypeList={ selectType==="INTRO" ? ['JPG', 'JPEG', 'PNG']: ['MP4', 'JPG', 'JPEG', 'PNG'] }
isOpen={showSelectFileModal} tooltip={ selectType==="INTRO"?'支持文件类型：jpg、jpeg、png':'支持文件类型：jpg、jpeg、png、mp4'}
onClose={() => { isOpen={showSelectFileModal}
this.setState({ showSelectFileModal: false }) onClose={() => {
}} this.setState({ showSelectFileModal: false })
onSelect={this.handleSelectVideo} }}
/> onSelect={this.handleSelectVideo}
/>
}
</div> </div>
) )
} }
......
src/modules/course-manage/video-course/components/AddVideoIntro.less
.add-video__intro-info { .add-video__intro-info {
.playback { .playback {
margin-bottom: 10px; margin-bottom: 10px;
.require { .require {
...@@ -9,7 +8,11 @@ ...@@ -9,7 +8,11 @@
color: #999; color: #999;
} }
} }
.label{
display:inline-block;
text-align:right;
width:85px;
}
.playback, .playback,
.introduce { .introduce {
display: flex; display: flex;
...@@ -17,10 +20,14 @@ ...@@ -17,10 +20,14 @@
} }
.allow-tourist-join{ .allow-tourist-join{
display:flex; display:flex;
.content{
display:flex;
}
.desc{ .desc{
margin-left:16px; margin-left:16px;
font-size:14px; font-size:14px;
color:#999; color:#999;
display:inline-block;
} }
} }
.store-show{ .store-show{
...@@ -31,6 +38,7 @@ ...@@ -31,6 +38,7 @@
margin-left:16px; margin-left:16px;
font-size:14px; font-size:14px;
color:#999; color:#999;
display:inline-block;
} }
} }
.radio { .radio {
......
src/modules/course-manage/video-course/components/VideoCourseFilter.less
...@@ -37,6 +37,7 @@ ...@@ -37,6 +37,7 @@
line-height: 20px; line-height: 20px;
.fold-icon { .fold-icon {
font-size: 12px; font-size: 12px;
margin-left:4px;
} }
} }
} }
......
src/modules/course-manage/video-course/components/VideoCourseList.jsx
...@@ -2,7 +2,7 @@ ...@@ -2,7 +2,7 @@
* @Author: 吴文洁 * @Author: 吴文洁
* @Date: 2020-08-05 10:12:45 * @Date: 2020-08-05 10:12:45
* @LastEditors: zhangleyuan * @LastEditors: zhangleyuan
* @LastEditTime: 2021-01-18 21:03:40 * @LastEditTime: 2021-01-25 20:12:47
* @Description: 视频课-列表模块 * @Description: 视频课-列表模块
* @Copyright: 杭州杰竞科技有限公司 版权所有 * @Copyright: 杭州杰竞科技有限公司 版权所有
*/ */
...@@ -23,7 +23,7 @@ import User from '@/common/js/user' ...@@ -23,7 +23,7 @@ import User from '@/common/js/user'
import './VideoCourseList.less'; import './VideoCourseList.less';
const ENV = process.env.DEPLOY_ENV || 'prod'; const ENV = process.env.DEPLOY_ENV || 'rc';
class VideoCourseList extends React.Component { class VideoCourseList extends React.Component {
...@@ -68,7 +68,8 @@ class VideoCourseList extends React.Component { ...@@ -68,7 +68,8 @@ class VideoCourseList extends React.Component {
title: '视频课', title: '视频课',
key: 'scheduleName', key: 'scheduleName',
dataIndex: 'scheduleName', dataIndex: 'scheduleName',
width:'15%', width:321,
fixed: 'left',
render: (val, record) => { render: (val, record) => {
const { coverUrl, scheduleVideoUrl } = record; const { coverUrl, scheduleVideoUrl } = record;
return ( return (
...@@ -90,7 +91,7 @@ class VideoCourseList extends React.Component { ...@@ -90,7 +91,7 @@ class VideoCourseList extends React.Component {
title: '课程分类', title: '课程分类',
key: 'categoryName', key: 'categoryName',
dataIndex: 'categoryName', dataIndex: 'categoryName',
width: '10%', width: '20%',
render: (val, record) => { render: (val, record) => {
return ( return (
<div className="record__item"> <div className="record__item">
...@@ -103,7 +104,7 @@ class VideoCourseList extends React.Component { ...@@ -103,7 +104,7 @@ class VideoCourseList extends React.Component {
title: '创建人', title: '创建人',
key: 'createName', key: 'createName',
dataIndex: 'createName', dataIndex: 'createName',
width: '8%', width: '10%',
render: (val) => { render: (val) => {
return ( return (
<div> <div>
...@@ -123,7 +124,7 @@ class VideoCourseList extends React.Component { ...@@ -123,7 +124,7 @@ class VideoCourseList extends React.Component {
{ {
title: <span> title: <span>
<span>店铺展示</span> <span>店铺展示</span>
<Tooltip title={<div>开启后，用户可在店铺内查看到此课程。若课程“未成功开课”，则系统会自动“关闭”店铺展示。<br/>关闭后，店铺内不再展示此课程，但用户仍可通过分享的海报/链接查看此课程。</div>}><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf'}}>&#xe61d;</i></Tooltip> <Tooltip title={<div>开启后，用户可在店铺内查看到此课程。若课程“未成功开课”，则系统会自动“关闭”店铺展示。<br/>关闭后，店铺内不再展示此课程，但用户仍可通过分享的海报/链接查看此课程。</div>}><i className="icon iconfont" style={{ marginLeft: '5px',cursor:'pointer',color:'#bfbfbf',fontSize:'14px'}}>&#xe61d;</i></Tooltip>
</span>, </span>,
width: '12%', width: '12%',
dataIndex: "courseware", dataIndex: "courseware",
...@@ -168,7 +169,8 @@ class VideoCourseList extends React.Component { ...@@ -168,7 +169,8 @@ class VideoCourseList extends React.Component {
title: '操作', title: '操作',
key: 'operate', key: 'operate',
dataIndex: 'operate', dataIndex: 'operate',
width: "20%", width: 256,
fixed: 'right',
render: (val, record) => { render: (val, record) => {
return ( return (
<div className="operate"> <div className="operate">
...@@ -325,6 +327,8 @@ class VideoCourseList extends React.Component { ...@@ -325,6 +327,8 @@ class VideoCourseList extends React.Component {
columns={this.parseColumns()} columns={this.parseColumns()}
onChange={this.handleChangeTable} onChange={this.handleChangeTable}
pagination={false} pagination={false}
scroll={{ x: 1500}}
bordered
/> />
<div className="box-footer"> <div className="box-footer">
......
src/modules/course-manage/video-course/components/VideoCourseOpt.less
.video-course-opt { .video-course-opt {
margin-top: 16px;
.link { .link {
color: #FF8534; color: #FF8534;
} }
......
src/modules/course-manage/video-course/modal/WatchDataModal.jsx
...@@ -119,7 +119,7 @@ class WatchDataModal extends React.Component { ...@@ -119,7 +119,7 @@ class WatchDataModal extends React.Component {
} }
render() { render() {
const { visible,size,dataSource,totalCount,query,current } = this.state; const { visible,size,dataSource,totalCount,query} = this.state;
return ( return (
<Modal <Modal
title="视频课观看数据" title="视频课观看数据"
...@@ -144,7 +144,7 @@ class WatchDataModal extends React.Component { ...@@ -144,7 +144,7 @@ class WatchDataModal extends React.Component {
{dataSource.length >0 && {dataSource.length >0 &&
<div className="box-footer"> <div className="box-footer">
<PageControl <PageControl
current={current - 1} current={query.current - 1}
pageSize={size} pageSize={size}
total={totalCount} total={totalCount}
toPage={(page) => { toPage={(page) => {
......
src/modules/root/Login.jsx
...@@ -122,7 +122,7 @@ function Login(props) { ...@@ -122,7 +122,7 @@ function Login(props) {
<div className="login-box"> <div className="login-box">
<div className="login"> <div className="login">
<div className="r"> <div className="r">
<Tabs defaultActiveKey="1" > <Tabs defaultActiveKey="1">
<TabPane tab="企业微信登录" key="1"> <TabPane tab="企业微信登录" key="1">
<WechatLogin></WechatLogin> <WechatLogin></WechatLogin>
</TabPane> </TabPane>
......
src/modules/root/Menu.less
...@@ -76,12 +76,6 @@ ...@@ -76,12 +76,6 @@
&.left-container-vertical { &.left-container-vertical {
width: 62px; width: 62px;
.left { .left {
// .ant-menu-item {
// text-align: center;
// }
// .icon {
// margin-right: 0px;
// }
.ant-menu-submenu-arrow{ .ant-menu-submenu-arrow{
display:none !important; display:none !important;
} }
...@@ -96,50 +90,50 @@ ...@@ -96,50 +90,50 @@
background: @menu-bakg !important; background: @menu-bakg !important;
} }
// .ant-menu-submenu-popup>.ant-menu { .ant-menu-submenu-popup>.ant-menu {
// background: @menu-bakg !important; background: @menu-bakg !important;
// color: #9A9DA7; color: #9A9DA7;
// padding-left: 15px; padding-left: 15px;
// width: 132px; width: 132px;
// min-width: auto; min-width: auto;
// li { li {
// padding-left: 22px; padding-left: 22px;
// padding-right: 0; padding-right: 0;
// width: 117px; width: 117px;
// } }
// .listType { .listType {
// width: 5px; width: 5px;
// height: 5px; height: 5px;
// background: #9A9DA7; background: #9A9DA7;
// border-radius: 50%; border-radius: 50%;
// top: 18px; top: 18px;
// left: 5px; left: 10px;
// position: absolute; position: absolute;
// } }
// .ant-menu-item-selected { .ant-menu-item-selected {
// background: @menu-bakg; background: @menu-bakg;
// color: #fff; color: #fff;
// .listType { .listType {
// background: @active-color; background: @active-color;
// } }
// } }
// &:hover { &:hover {
// .ant-menu-item-active { .ant-menu-item-active {
// color: #fff; color: #fff;
// .listType { .listType {
// background: #fff; background: #fff;
// } }
// } }
// .ant-menu-item-selected { .ant-menu-item-selected {
// .listType { .listType {
// background: @active-color; background: @active-color;
// } }
// } }
// } }
// } }
src/modules/root/WechatLogin.less
...@@ -7,7 +7,6 @@ ...@@ -7,7 +7,6 @@
margin-top: 12px; margin-top: 12px;
font-size: 14px; font-size: 14px;
font-family: PingFangSC-Regular, PingFang SC; font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #999999; color: #999999;
line-height: 20px; line-height: 20px;
} }
......
src/modules/root/WechatLogin.tsx
...@@ -26,7 +26,7 @@ export default function WechatLogin(props: any) { ...@@ -26,7 +26,7 @@ export default function WechatLogin(props: any) {
if (status === 0) { if (status === 0) {
Service.Hades("anon/hades/getTicket", {}).then((res: any) => { Service.Hades("anon/hades/getTicket", {}).then((res: any) => {
setTicket(res.result) setTicket(res.result)
const redirect = `${location.origin + location.pathname.replace('index.html', '') + 'h5.html'}?ticket=${res.result}&appTermEnum=XIAOMAI_CLOUD_CLASS_PC_WEB_ADMIN&env=${process.env.DEPLOY_ENV || 'dev'}` const redirect = `${location.origin + location.pathname.replace('index.html', '') + 'h5.html'}?ticket=${res.result}&appTermEnum=XIAOMAI_CLOUD_CLASS_PC_WEB_ADMIN&env=${process.env.DEPLOY_ENV || 'rc'}`
// console.log(redirect) // console.log(redirect)
// const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=ww409ccf9c6e31f19e&redirect_uri=${encodeURIComponent(redirect)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect` // const url = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=ww409ccf9c6e31f19e&redirect_uri=${encodeURIComponent(redirect)}&response_type=code&scope=snsapi_userinfo&state=STATE#wechat_redirect`
// console.log(url) // console.log(url)
......
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