Skip to content

X
xiaomai-cloud-class-web
Commit 84e7111d by chenshu
Options

fix:修复管理端部分问题

parent fd9b2ba8
Showing with 213 additions and 107 deletions
src/modules/course-manage/offline-course/OfflineCourseData.jsx
import React from 'react'; import React from 'react';
import { Tooltip, Input, Radio, Table } from 'antd'; import { Tooltip, Input, Radio, Table, Checkbox } from 'antd';
import moment from 'moment'; import moment from 'moment';
import _ from 'underscore'; import _ from 'underscore';
import Breadcrumbs from "@/components/Breadcrumbs"; import Breadcrumbs from "@/components/Breadcrumbs";
...@@ -21,8 +21,6 @@ export default class OfflineCourseData extends React.Component { ...@@ -21,8 +21,6 @@ export default class OfflineCourseData extends React.Component {
current: 1, current: 1,
courseId, courseId,
storeId: User.getStoreId(), storeId: User.getStoreId(),
joinInState: 'YES',
joinOutState: 'YES',
}, },
loading: false, loading: false,
data: [], data: [],
...@@ -58,6 +56,8 @@ export default class OfflineCourseData extends React.Component { ...@@ -58,6 +56,8 @@ export default class OfflineCourseData extends React.Component {
calendarTime, calendarTime,
currentDate, currentDate,
offlineCourseType: result.offlineCourseType, offlineCourseType: result.offlineCourseType,
whetherSetSignIn: result.whetherSetSignIn,
whetherSetSignOut: result.whetherSetSignOut,
whetherSetSignInOut: result.whetherSetSignInOut, whetherSetSignInOut: result.whetherSetSignInOut,
whetherSetApply: result.whetherSetApply, whetherSetApply: result.whetherSetApply,
}, () => this.getDateDetail()); }, () => this.getDateDetail());
...@@ -89,6 +89,7 @@ export default class OfflineCourseData extends React.Component { ...@@ -89,6 +89,7 @@ export default class OfflineCourseData extends React.Component {
} }
getColumns = () => { getColumns = () => {
const { whetherSetSignIn, whetherSetSignOut } = this.state;
const columns = [ const columns = [
{ {
title: '用户姓名', title: '用户姓名',
...@@ -118,30 +119,45 @@ export default class OfflineCourseData extends React.Component { ...@@ -118,30 +119,45 @@ export default class OfflineCourseData extends React.Component {
return <div>{formatDate('YYYY-MM-DD H:i', item.joinTime)}</div> return <div>{formatDate('YYYY-MM-DD H:i', item.joinTime)}</div>
} }
}, },
{
title: '签到时间',
key: 'joinInTime',
dataIndex: 'joinInTime',
sorter: true,
render: (val) => {
return formatDate('YYYY-MM-DD H:i', val)
}
},
{
title: '签退时间',
key: 'joinOutTime',
dataIndex: 'joinOutTime',
sorter: true,
render: (val) => {
return formatDate('YYYY-MM-DD H:i', val)
}
},
]; ];
whetherSetSignIn === 'YES' && columns.push({
title: '签到时间',
key: 'joinInTime',
dataIndex: 'joinInTime',
sorter: true,
render: (val) => {
return val ? formatDate('YYYY-MM-DD H:i', val) : '-';
}
})
whetherSetSignOut === 'YES' && columns.push({
title: '签退时间',
key: 'joinOutTime',
dataIndex: 'joinOutTime',
sorter: true,
render: (val) => {
return val ? formatDate('YYYY-MM-DD H:i', val) : '-';
}
})
return columns; return columns;
} }
handleChangeTable = () => { handleChangeTable = () => {
const { columnKey, order } = sorter;
const { query } = this.props;
let orderEnum;
// 按创建时间升序排序
if (columnKey === 'joinInTime' && order === 'ascend') { orderEnum = 'JOIN_IN_DESC'; }
if (columnKey === 'joinOutTime' && order === 'ascend') { orderEnum = 'JOIN_IN_ASC'; }
// 按创建时间降序排序
if (columnKey === 'joinInTime' && order === 'descend') { orderEnum = 'JOIN_OUT_DESC';;}
if (columnKey === 'joinOutTime' && order === 'descend') { orderEnum = 'JOIN_OUT_ASC';;}
const _query = {
...query,
orderEnum,
};
this.setState({ query: _query }, () => {
this.getDateDetail(query.current);
})
} }
render() { render() {
...@@ -162,6 +178,8 @@ export default class OfflineCourseData extends React.Component { ...@@ -162,6 +178,8 @@ export default class OfflineCourseData extends React.Component {
joinOutNum, joinOutNum,
offlineCourseType, offlineCourseType,
whetherSetApply, whetherSetApply,
whetherSetSignIn,
whetherSetSignOut,
whetherSetSignInOut, whetherSetSignInOut,
} = this.state; } = this.state;
const calendarLength = calendarTime.length; const calendarLength = calendarTime.length;
...@@ -232,12 +250,12 @@ export default class OfflineCourseData extends React.Component { ...@@ -232,12 +250,12 @@ export default class OfflineCourseData extends React.Component {
<div className="detail-data"> <div className="detail-data">
{offlineCourseType !== 'ALL_DAY_OFFLINE' && <span className="icon iconfont">&#xe89f;</span>} {offlineCourseType !== 'ALL_DAY_OFFLINE' && <span className="icon iconfont">&#xe89f;</span>}
{offlineCourseType !== 'ALL_DAY_OFFLINE' && whetherSetApply === 'YES' && <span className="data-text">报名人数：{joinNum}</span>} {offlineCourseType !== 'ALL_DAY_OFFLINE' && whetherSetApply === 'YES' && <span className="data-text">报名人数：{joinNum}</span>}
<span className="icon iconfont">&#xe89e;</span> {whetherSetSignInOut === 'YES' && <span className="icon iconfont">&#xe89e;</span>}
<span className="data-text">完成考勤数<Tooltip title="当日在规定时间内完成签到和签退的用户数"><span className="icon iconfont">&#xe7c4;</span></Tooltip>：{fullJoinNum}</span> {whetherSetSignInOut === 'YES' && <span className="data-text">完成考勤数<Tooltip title="当日在规定时间内完成签到和签退的用户数"><span className="icon iconfont">&#xe7c4;</span></Tooltip>：{fullJoinNum}</span>}
<span className="icon iconfont">&#xe8a0;</span> {whetherSetSignIn === 'YES' && <span className="icon iconfont">&#xe8a0;</span>}
<span className="data-text">签到人数：{joinInNum}</span> {whetherSetSignIn === 'YES' && <span className="data-text">签到人数：{joinInNum}</span>}
<span className="icon iconfont">&#xe89d;</span> {whetherSetSignOut === 'YES' && <span className="icon iconfont">&#xe89d;</span>}
<span className="data-text">签退人数：{joinOutNum}</span> {whetherSetSignOut === 'YES' && <span className="data-text">签退人数：{joinOutNum}</span>}
</div> </div>
<div className="detail-filter"> <div className="detail-filter">
<Search <Search
...@@ -262,27 +280,53 @@ export default class OfflineCourseData extends React.Component { ...@@ -262,27 +280,53 @@ export default class OfflineCourseData extends React.Component {
/> />
<div className="filter-box"> <div className="filter-box">
<span className="label">签到情况：</span> <span className="label">签到情况：</span>
<Radio.Group <Checkbox
value={query.joinInState} checked={query.joinInState === 'YES'}
onChange={(e) => { onChange={(e) => {
this.setState({ query: { ...query, joinInState: e.target.value } }, () => this.getDateDetail()); if (e.target.checked) {
this.setState({ query: { ...query, joinInState: 'YES' } }, () => this.getDateDetail());
} else {
delete query.joinInState;
this.setState({ query }, () => this.getDateDetail())
}
}} }}
> >已签到</Checkbox>
<Radio value="YES">已签到</Radio> <Checkbox
<Radio value="NO">未签到</Radio> checked={query.joinInState === 'NO'}
</Radio.Group> onChange={(e) => {
if (e.target.checked) {
this.setState({ query: { ...query, joinInState: 'NO' } }, () => this.getDateDetail());
} else {
delete query.joinInState;
this.setState({ query }, () => this.getDateDetail())
}
}}
>未签到</Checkbox>
</div> </div>
<div className="filter-box"> <div className="filter-box">
<span className="label">签退情况：</span> <span className="label">签退情况：</span>
<Radio.Group <Checkbox
value={query.joinOutState} checked={query.joinOutState === 'YES'}
onChange={(e) => {
if (e.target.checked) {
this.setState({ query: { ...query, joinOutState: 'YES' } }, () => this.getDateDetail());
} else {
delete query.joinOutState;
this.setState({ query }, () => this.getDateDetail())
}
}}
>已签退</Checkbox>
<Checkbox
checked={query.joinOutState === 'NO'}
onChange={(e) => { onChange={(e) => {
this.setState({ query: { ...query, joinOutState: e.target.value } }, () => this.getDateDetail()); if (e.target.checked) {
this.setState({ query: { ...query, joinOutState: 'NO' } }, () => this.getDateDetail());
} else {
delete query.joinOutState;
this.setState({ query }, () => this.getDateDetail())
}
}} }}
> >未签退</Checkbox>
<Radio value="YES">已签退</Radio>
<Radio value="NO">未签退</Radio>
</Radio.Group>
</div> </div>
</div> </div>
<Table <Table
...@@ -300,7 +344,7 @@ export default class OfflineCourseData extends React.Component { ...@@ -300,7 +344,7 @@ export default class OfflineCourseData extends React.Component {
pageSize={query.size} pageSize={query.size}
total={total} total={total}
toPage={(page) => { toPage={(page) => {
this.getDateDetail(page); this.getDateDetail(page + 1);
}} }}
/> />
</div> </div>
......
src/modules/course-manage/offline-course/components/OfflineCourseList.jsx
...@@ -72,7 +72,7 @@ class OfflineCourseList extends React.Component { ...@@ -72,7 +72,7 @@ class OfflineCourseList extends React.Component {
return ( return (
<div className="record__item"> <div className="record__item">
<img className="course-cover" src={coverUrl || defaultCoverUrl} /> <img className="course-cover" src={coverUrl || defaultCoverUrl} />
<div style={{ width: 200 }}> <div style={{ width: 175 }}>
<Tooltip title={courseName}> <Tooltip title={courseName}>
<div className="course-name">{courseName}</div> <div className="course-name">{courseName}</div>
</Tooltip> </Tooltip>
...@@ -149,7 +149,21 @@ class OfflineCourseList extends React.Component { ...@@ -149,7 +149,21 @@ class OfflineCourseList extends React.Component {
dataIndex: 'apply', dataIndex: 'apply',
sorter: true, sorter: true,
render: (val, item) => { render: (val, item) => {
return item.startTimeApply ? `${formatDate('MM-DD H:i', item.startTimeApply)} ~ ${formatDate('MM-DD H:i', item.endTimeApply)}` : '-' return <div>
{item.startTimeApply ? `${formatDate('MM-DD H:i', item.startTimeApply)} ~ ${formatDate('MM-DD H:i', item.endTimeApply)}` : '-'}
{item.whetherApplyFull === 'YES' &&
<span
style={{
marginLeft: 4,
color: '#FF4F4F',
background: 'rgba(255, 79, 79, 0.1)',
padding: '0 8px',
fontSize: '12px',
height: '18px',
lineHeight: '18px',
}}>已报满</span>
}
</div>
} }
}, },
{ {
...@@ -233,7 +247,7 @@ class OfflineCourseList extends React.Component { ...@@ -233,7 +247,7 @@ class OfflineCourseList extends React.Component {
this.handleDeleteOfflineCourse(item.courseId); this.handleDeleteOfflineCourse(item.courseId);
}} }}
>取消课程</div>} >取消课程</div>}
{item.courseState === 'UN_START' && <div {item.courseState === 'UN_START' && window.ctx.xmState.storeUserPermissionList.includes('EditOfflineClass') && <div
className="operate__item" className="operate__item"
key="edit" key="edit"
onClick={() => { onClick={() => {
...@@ -249,7 +263,11 @@ class OfflineCourseList extends React.Component { ...@@ -249,7 +263,11 @@ class OfflineCourseList extends React.Component {
) )
} }
//改变上架状态 //改变上架状态
changeShelfState = (item) =>{ changeShelfState = (item) => {
if (!window.ctx.xmState.storeUserPermissionList.includes('EditOfflineClass')) {
message.warning('无【编辑线下课】权限，请联系管理员')
return;
}
let _shelfState = item.shelfState let _shelfState = item.shelfState
if(_shelfState==='NO'){ if(_shelfState==='NO'){
_shelfState = "YES"; _shelfState = "YES";
...@@ -321,7 +339,8 @@ class OfflineCourseList extends React.Component { ...@@ -321,7 +339,8 @@ class OfflineCourseList extends React.Component {
const _appId = appId; const _appId = appId;
const htmlUrl = `${LIVE_SHARE}offline_detail/${courseId}?id=${User.getStoreId()}`; const htmlUrl = `${LIVE_SHARE}offline_detail/${courseId}?id=${User.getStoreId()}`;
const longUrl = htmlUrl; const longUrl = htmlUrl;
const { coverUrl, courseName } = record; const { courseName, courseMediaVOS } = record;
const coverUrl = (_.find(courseMediaVOS, data => data.contentType === 'COVER') || {}).mediaUrl;
const shareData = { const shareData = {
longUrl, longUrl,
coverUrl, coverUrl,
......
src/modules/course-manage/offline-course/components/OfflineCourseList.less
...@@ -65,7 +65,6 @@ ...@@ -65,7 +65,6 @@
.course-name { .course-name {
color: #333; color: #333;
max-width: ~'calc(100% - 32px)';
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
...@@ -76,7 +75,6 @@ ...@@ -76,7 +75,6 @@
.course-text { .course-text {
color: #666; color: #666;
max-width: ~'calc(100% - 32px)';
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
white-space: nowrap; white-space: nowrap;
......
src/modules/course-manage/offline-course/modal/PreviewOfflineModal.jsx
...@@ -4,6 +4,7 @@ import moment from 'moment'; ...@@ -4,6 +4,7 @@ import moment from 'moment';
import $ from 'jquery'; import $ from 'jquery';
import Service from "@/common/js/service"; import Service from "@/common/js/service";
import './PreviewOfflineModal.less'; import './PreviewOfflineModal.less';
import ENUM from '@/modules/knowledge-base/ENUM';
const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png'; const defaultCoverUrl = 'https://image.xiaomaiketang.com/xm/YNfi45JwFA.png';
...@@ -64,6 +65,8 @@ class PreviewOfflineModal extends React.Component { ...@@ -64,6 +65,8 @@ class PreviewOfflineModal extends React.Component {
const { const {
coverUrl, coverUrl,
courseName, courseName,
teacherName,
courseState,
categoryName, categoryName,
introduce, introduce,
startTime, startTime,
...@@ -110,6 +113,8 @@ class PreviewOfflineModal extends React.Component { ...@@ -110,6 +113,8 @@ class PreviewOfflineModal extends React.Component {
<div className="container"> <div className="container">
<div className="container__header"> <div className="container__header">
<img src={coverUrl || defaultCoverUrl} className="course-cover" /> <img src={coverUrl || defaultCoverUrl} className="course-cover" />
<span className="cover-teacher">主讲人：{teacherName}</span>
<span className="cover-state" style={{ background: (ENUM.offlineStateShow[courseState] || {}).color }}>{(ENUM.offlineStateShow[courseState] || {}).title}</span>
</div> </div>
<div className="container__body"> <div className="container__body">
<div className="title__name">{courseName}</div> <div className="title__name">{courseName}</div>
......
src/modules/course-manage/offline-course/modal/PreviewOfflineModal.less
...@@ -15,11 +15,31 @@ ...@@ -15,11 +15,31 @@
.container { .container {
overflow: scroll; overflow: scroll;
height: 100%;; height: 100%;;
&__header {
.course-cover, .course-url { position: relative;
width: 100%; .course-cover, .course-url {
height: 141px; width: 100%;
background: #000; height: 141px;
background: #000;
}
.cover-teacher {
position: absolute;
bottom: 8px;
left: 16px;
font-size: 12px;
color: #fff;
}
.cover-state {
position: absolute;
bottom: 8px;
right: 16px;
font-size: 12px;
height: 18px;
line-height: 18px;
padding: 0 8px;
color: #fff;
border-radius: 9px;
}
} }
&__body { &__body {
......
src/modules/course-manage/offline-course/modal/QRCodeModal.jsx
...@@ -6,6 +6,7 @@ import { LIVE_SHARE } from "@/domains/course-domain/constants"; ...@@ -6,6 +6,7 @@ import { LIVE_SHARE } from "@/domains/course-domain/constants";
import QRCode from '../../../../libs/qrcode/qrcode'; import QRCode from '../../../../libs/qrcode/qrcode';
import User from '@/common/js/user'; import User from '@/common/js/user';
import Service from "@/common/js/service"; import Service from "@/common/js/service";
import ScanFileModal from '../../../resource-disk/modal/ScanFileModal';
import './QRCodeModal.less'; import './QRCodeModal.less';
const { Option } = Select; const { Option } = Select;
...@@ -16,60 +17,54 @@ export default class QRCodeModal extends React.Component { ...@@ -16,60 +17,54 @@ export default class QRCodeModal extends React.Component {
this.state = { this.state = {
selectedDate: '', selectedDate: '',
data: {}, data: {},
imgUrl1: '',
imgUrl2: '',
showPreviewModal: false,
} }
} }
componentWillReceiveProps(nextProps) { componentDidUpdate(preProps) {
const { visible } = this.props; const { visible } = this.props;
if (nextProps.visible && !visible) { if (!preProps.visible && visible) {
this.getCourseDetail(nextProps); this.getCourseDetail();
} }
} }
getQrcode = () => { getQrcode = () => {
const { selectedDate, data } = this.state; const { selectedDate, data } = this.state;
if (data.whetherSetSignIn === 'YES') { let list = [];
const qrcodeWrapDom = document.querySelector('#qrcodeWrap1'); const qrcodeWrapDom1 = document.querySelector('#qrcodeWrap1');
const qrcodeWrapDom2 = document.querySelector('#qrcodeWrap2');
if (data.whetherSetSignIn === 'YES') {
const htmlUrl = `${LIVE_SHARE}sign_in?id=${User.getStoreId()}&calendar=${selectedDate}&courseId=${data.courseId}&from=work_weixin`; const htmlUrl = `${LIVE_SHARE}sign_in?id=${User.getStoreId()}&calendar=${selectedDate}&courseId=${data.courseId}&from=work_weixin`;
Service.Sales('public/businessShow/convertShortUrls', { list.push(htmlUrl);
urls: [htmlUrl]
}).then((res) => {
const { result = [] } = res;
this.setState({
shareUrl: result[0].shortUrl
}, () => {
const qrcodeNode = new QRCode({
text: this.state.shareUrl,
size: 170,
})
qrcodeWrapDom.childNodes[0] && qrcodeWrapDom.removeChild(qrcodeWrapDom.childNodes[0]);
qrcodeWrapDom.appendChild(qrcodeNode);
})
})
} }
if (data.whetherSetSignIn === 'YES') { if (data.whetherSetSignIn === 'YES') {
const qrcodeWrapDom = document.querySelector('#qrcodeWrap2');
const htmlUrl = `${LIVE_SHARE}sign_out?id=${User.getStoreId()}&calendar=${selectedDate}&courseId=${data.courseId}&from=work_weixin`; const htmlUrl = `${LIVE_SHARE}sign_out?id=${User.getStoreId()}&calendar=${selectedDate}&courseId=${data.courseId}&from=work_weixin`;
Service.Sales('public/businessShow/convertShortUrls', { list.push(htmlUrl);
urls: [htmlUrl]
}).then((res) => {
const { result = [] } = res;
this.setState({
shareUrl: result[0].shortUrl
}, () => {
const qrcodeNode = new QRCode({
text: this.state.shareUrl,
size: 170,
})
qrcodeWrapDom.childNodes[0] && qrcodeWrapDom.removeChild(qrcodeWrapDom.childNodes[0]);
qrcodeWrapDom.appendChild(qrcodeNode);
})
})
} }
Service.Sales('public/businessShow/convertShortUrls', {
urls: list
}).then((res) => {
const { result = [] } = res;
const qrcodeNode1 = new QRCode({
text: result[0].shortUrl,
size: 170,
});
const qrcodeNode2 = result[1] && new QRCode({
text: result[1].shortUrl,
size: 170,
});
qrcodeWrapDom1 && qrcodeWrapDom1.childNodes[0] && qrcodeWrapDom1.removeChild(qrcodeWrapDom1.childNodes[0]);
qrcodeWrapDom1 && qrcodeWrapDom1.appendChild(qrcodeNode1);
qrcodeWrapDom2 && qrcodeWrapDom2.childNodes[0] && qrcodeWrapDom2.removeChild(qrcodeWrapDom2.childNodes[0]);
qrcodeWrapDom2 && qrcodeWrapDom2.appendChild(qrcodeNode2);
this.initQRCode();
})
} }
getCourseDetail = (props) => { getCourseDetail = () => {
const { courseId } = props.data; const { courseId } = this.props.data;
Service.Hades('public/hades/getOfflineCourseDetail',{ Service.Hades('public/hades/getOfflineCourseDetail',{
courseId courseId
}).then((res) => { }).then((res) => {
...@@ -79,27 +74,29 @@ export default class QRCodeModal extends React.Component { ...@@ -79,27 +74,29 @@ export default class QRCodeModal extends React.Component {
}); });
} }
downloadQRCode = () => { initQRCode = () => {
const domList = document.querySelectorAll('.image-box'); const domList = document.querySelectorAll('.image-box');
for (let index = 0; index < domList.length; index++) { for (let index = 0; index < domList.length; index++) {
const dom = domList[index]; const dom = domList[index];
html2canvas(dom, { html2canvas(dom, {
useCORS: true, useCORS: true,
}).then(canvas => { }).then(canvas => {
this.downloadImg(canvas, '二维码'); const dataUrl = canvas.toDataURL('image/png');
this.setState({ [`imgUrl${index + 1}`]: dataUrl });
}); });
} }
} }
downloadImg = (canvas, type) => { downloadImg = () => {
const dataUrl = canvas.toDataURL('image/png'); const { imgUrl1, imgUrl2 } = this.state;
const fileName = `${type}.png`; const fileName = '二维码.png';
window.downloadFile(dataUrl, fileName); imgUrl1 && window.downloadFile(imgUrl1, fileName);
imgUrl2 && window.downloadFile(imgUrl2, fileName);
} }
render() { render() {
const { visible, onCancel } = this.props; const { visible, onCancel } = this.props;
const { selectedDate, data = {} } = this.state; const { selectedDate, data = {}, imgUrl1, imgUrl2, imgUrl, showPreviewModal } = this.state;
const { courseName, whetherSetSignIn, whetherSetSignOut } = data; const { courseName, whetherSetSignIn, whetherSetSignOut } = data;
const date = moment(selectedDate).format('YYYY-MM-DD'); const date = moment(selectedDate).format('YYYY-MM-DD');
const unit = (data.signInTimeUnit || '').toLocaleLowerCase() + 's'; const unit = (data.signInTimeUnit || '').toLocaleLowerCase() + 's';
...@@ -142,24 +139,39 @@ export default class QRCodeModal extends React.Component { ...@@ -142,24 +139,39 @@ export default class QRCodeModal extends React.Component {
type="primary" type="primary"
style={{ marginLeft: 8 }} style={{ marginLeft: 8 }}
onClick={() => { onClick={() => {
this.downloadQRCode(); this.downloadImg();
}} }}
>下载二维码</Button> >下载二维码</Button>
</div> </div>
{whetherSetSignIn === 'YES' && <div className="image-box" key="1"> {whetherSetSignIn === 'YES' && <div
className="image-box"
key="1"
onClick={() => this.setState({ showPreviewModal: true, imgUrl: imgUrl1 })}
>
<img src="https://image.xiaomaiketang.com/xm/xYSpX2y6ri.png" className="image" /> <img src="https://image.xiaomaiketang.com/xm/xYSpX2y6ri.png" className="image" />
<div className="title">签到二维码</div> <div className="title">签到二维码</div>
<div className="name">{courseName}</div> <div className="name">{courseName}</div>
<div className="qrcodeWrap" id="qrcodeWrap1"></div> <div className="qrcodeWrap" id="qrcodeWrap1"></div>
<div className="time">签到时间：{signInTime}</div> <div className="time">签到时间：{signInTime}</div>
</div>} </div>}
{whetherSetSignOut === 'YES' && <div className="image-box" key="2"> {whetherSetSignOut === 'YES' && <div
className="image-box"
key="2"
onClick={() => this.setState({ showPreviewModal: true, imgUrl: imgUrl2 })}
>
<img src="https://image.xiaomaiketang.com/xm/xYSpX2y6ri.png" className="image" /> <img src="https://image.xiaomaiketang.com/xm/xYSpX2y6ri.png" className="image" />
<div className="title">签退二维码</div> <div className="title">签退二维码</div>
<div className="name">{courseName}</div> <div className="name">{courseName}</div>
<div className="qrcodeWrap" id="qrcodeWrap2"></div> <div className="qrcodeWrap" id="qrcodeWrap2"></div>
<div className="time">签退时间：{signOutTime}</div> <div className="time">签退时间：{signOutTime}</div>
</div>} </div>}
{showPreviewModal &&
<ScanFileModal
fileType="JPG"
item={{ ossUrl: imgUrl }}
close={() => this.setState({ showPreviewModal: false })}
/>
}
</Modal> </Modal>
) )
} }
......
src/modules/course-manage/offline-course/modal/QRCodeModal.less
...@@ -22,7 +22,7 @@ ...@@ -22,7 +22,7 @@
font-size: 14px; font-size: 14px;
color: #fff; color: #fff;
position: absolute; position: absolute;
top: 60px; top: 58px;
left: 50%; left: 50%;
transform: translateX(-50%); transform: translateX(-50%);
width: 286px; width: 286px;
......
src/modules/home/Home.jsx
...@@ -102,11 +102,13 @@ class Home extends React.Component { ...@@ -102,11 +102,13 @@ class Home extends React.Component {
incLiveCourseNum: res.result.incLiveCourseNum, incLiveCourseNum: res.result.incLiveCourseNum,
incVideoCourseNum: res.result.incVideoCourseNum, incVideoCourseNum: res.result.incVideoCourseNum,
incPictureCourseNum: res.result.incPictureCourseNum, incPictureCourseNum: res.result.incPictureCourseNum,
incOfflineCourseNum: res.result.incOfflineCourseNum,
incTrainingPlanNum: res.result.incTrainingPlanNum, incTrainingPlanNum: res.result.incTrainingPlanNum,
liveCourseNum: res.result.liveCourseNum, liveCourseNum: res.result.liveCourseNum,
totalCustomerNum: res.result.totalCustomerNum, totalCustomerNum: res.result.totalCustomerNum,
videoCourseNum: res.result.videoCourseNum, videoCourseNum: res.result.videoCourseNum,
pictureCourseNum: res.result.pictureCourseNum, pictureCourseNum: res.result.pictureCourseNum,
offlineCourseNum: res.result.offlineCourseNum,
trainingPlanNum: res.result.trainingPlanNum, trainingPlanNum: res.result.trainingPlanNum,
}) })
} }
...@@ -231,6 +233,8 @@ class Home extends React.Component { ...@@ -231,6 +233,8 @@ class Home extends React.Component {
unfinishedNum, unfinishedNum,
completeNum, completeNum,
planCustomerNum, planCustomerNum,
incOfflineCourseNum,
offlineCourseNum,
} = this.state; } = this.state;
const data = [ const data = [
{ {
...@@ -320,12 +324,12 @@ class Home extends React.Component { ...@@ -320,12 +324,12 @@ class Home extends React.Component {
<div className="course-item"> <div className="course-item">
<div className="course-title">线下课</div> <div className="course-title">线下课</div>
<div className="data"> <div className="data">
<span className="course-number">0</span> <span className="course-number">{offlineCourseNum}</span>
<span className="course-word">本月新增</span> <span className="course-word">本月新增</span>
{false && {incOfflineCourseNum > 0 &&
<span className="icon iconfont">&#xe635;</span> <span className="icon iconfont">&#xe635;</span>
} }
<span className="add-number">0</span> <span className="add-number">{incOfflineCourseNum}</span>
</div> </div>
</div> </div>
</div> </div>
......
src/modules/teach-tool/examination-manager/ExamShareModal.jsx
...@@ -52,6 +52,10 @@ class ExamShareModal extends React.Component { ...@@ -52,6 +52,10 @@ class ExamShareModal extends React.Component {
const dom = document.querySelector('#poster'); const dom = document.querySelector('#poster');
html2canvas(dom, { html2canvas(dom, {
useCORS: true, useCORS: true,
scale: 2,
logging: false,
background: '#FFF',
allowTaint: true,
}).then(canvas => { }).then(canvas => {
const downloadDOM = document.createElement('a'); const downloadDOM = document.createElement('a');
const { courseName } = this.props.data; const { courseName } = this.props.data;
......
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