Skip to content

X
xiaomai-cloud-class-web
Commit f59009c4 by erwin_shu
Options

feat:初始化

parent 8ef05917
Showing with 144 additions and 6 deletions
src/modules/common/DateRangePicker.jsx
...@@ -16,7 +16,6 @@ class DateRangePicker extends React.Component { ...@@ -16,7 +16,6 @@ class DateRangePicker extends React.Component {
const showTime = { showTime: false } const showTime = { showTime: false }
return ( return (
<RangePicker <RangePicker
{...this.props}
format={this.props.format || 'YYYY-MM-DD'} format={this.props.format || 'YYYY-MM-DD'}
allowClear={this.props.allowClear} allowClear={this.props.allowClear}
onChange={(date) => { onChange={(date) => {
...@@ -28,6 +27,7 @@ class DateRangePicker extends React.Component { ...@@ -28,6 +27,7 @@ class DateRangePicker extends React.Component {
}} }}
{...showTime} {...showTime}
suffixIcon={<span className="icon iconfont">&#xe838;</span>} suffixIcon={<span className="icon iconfont">&#xe838;</span>}
{...this.props}
/> />
) )
} }
......
src/modules/course-manage/offline-course/AddOfflineCourse.jsx
...@@ -950,6 +950,7 @@ class AddOfflineCourse extends React.Component { ...@@ -950,6 +950,7 @@ class AddOfflineCourse extends React.Component {
<span className="switch-label">报名日期：</span> <span className="switch-label">报名日期：</span>
<RangePicker <RangePicker
id="course_date_picker" id="course_date_picker"
showTime={true}
allowClear={false} allowClear={false}
value={startTimeApply ? [moment(startTimeApply), moment(endTimeApply)] : null } value={startTimeApply ? [moment(startTimeApply), moment(endTimeApply)] : null }
format={"YYYY-MM-DD"} format={"YYYY-MM-DD"}
......
src/modules/course-manage/offline-course/modal/QRCodeModal.jsx
import React from 'react'; import React from 'react';
import { Button, Modal, Select } from 'antd'; import { Button, Modal, Select } from 'antd';
import moment from 'moment';
import { LIVE_SHARE } from "@/domains/course-domain/constants";
import QRCode from '../../../../libs/qrcode/qrcode';
import User from '@/common/js/user';
import Service from "@/common/js/service";
import './QRCodeModal.less'; import './QRCodeModal.less';
const { Option } = Select; const { Option } = Select;
...@@ -8,10 +12,76 @@ const { Option } = Select; ...@@ -8,10 +12,76 @@ const { Option } = Select;
export default class QRCodeModal extends React.Component { export default class QRCodeModal extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = {
selectedDate: '',
data: {},
}
}
componentWillReceiveProps(nextProps) {
const { visible } = this.props;
if (nextProps.visible && !visible) {
this.getCourseDetail(nextProps);
}
}
getQrcode = () => {
const { selectedDate, data } = this.state;
if (data.whetherSetSignIn === 'YES') {
const qrcodeWrapDom = document.querySelector('#qrcodeWrap1');
const htmlUrl = `${LIVE_SHARE}sign_in?id=${User.getCustomerStoreId()||User.getStoreId()}&userId=${User.getUserId()}&from=work_weixin&calendar=${selectedDate}`;
Service.Sales('public/businessShow/convertShortUrls', {
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') {
const qrcodeWrapDom = document.querySelector('#qrcodeWrap2');
const htmlUrl = `${LIVE_SHARE}sign_out?id=${User.getCustomerStoreId()||User.getStoreId()}&userId=${User.getUserId()}&from=work_weixin&calendar=${selectedDate}`;
Service.Sales('public/businessShow/convertShortUrls', {
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);
})
})
}
}
getCourseDetail = (props) => {
const { courseId } = props.data;
Service.Hades('public/hades/getOfflineCourseDetail',{
courseId
}).then((res) => {
this.setState({ selectedDate: res.result.calendarTime[0], data: res.result }, () => {
this.getQrcode();
})
});
} }
render() { render() {
const { visible, onCancel } = this.props; const { visible, onCancel } = this.props;
const { selectedDate, data = {} } = this.state;
const { startTime, endTime, courseName, whetherSetSignIn, whetherSetSignOut } = data;
return ( return (
<Modal <Modal
title="考勤二维码" title="考勤二维码"
...@@ -25,18 +95,36 @@ export default class QRCodeModal extends React.Component { ...@@ -25,18 +95,36 @@ export default class QRCodeModal extends React.Component {
<Select <Select
style={{ width: 200 }} style={{ width: 200 }}
placeholder="请选择" placeholder="请选择"
value={selectedDate}
onChange={(value) => {
this.setState({ selectedDate: value }, () => {
this.getQrcode(this.props);
})
}}
> >
{(data.calendarTime || []).map(item => (
<Option value={item}>{moment(item).format('MM月DD日')}</Option>
))}
</Select> </Select>
<Button <Button
type="primary" type="primary"
style={{ marginLeft: 8 }} style={{ marginLeft: 8 }}
>下载二维码</Button> >下载二维码</Button>
</div> </div>
<div className="image-box"> {whetherSetSignIn === 'YES' && <div className="image-box">
<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> <div className="name">{courseName}</div>
<div className="qrcodeWrap" id="qrcodeWrap1"></div>
<div className="time">签到时间：{moment(selectedDate).format('YYYY-MM-DD')} {moment(startTime).format('HH:mm')} ~ {moment(selectedDate).format('YYYY-MM-DD')} {moment(endTime).format('HH:mm')}</div>
</div>}
{whetherSetSignOut === 'YES' && <div className="image-box">
<img src="https://image.xiaomaiketang.com/xm/xYSpX2y6ri.png" className="image" />
<div className="title">签退二维码</div>
<div className="name">{courseName}</div>
<div className="qrcodeWrap" id="qrcodeWrap2"></div>
<div className="time">签退时间：{moment(selectedDate).format('YYYY-MM-DD')} {moment(startTime).format('HH:mm')} ~ {moment(selectedDate).format('YYYY-MM-DD')} {moment(endTime).format('HH:mm')}</div>
</div>}
</Modal> </Modal>
) )
} }
......
src/modules/course-manage/offline-course/modal/QRCodeModal.less
...@@ -3,10 +3,58 @@ ...@@ -3,10 +3,58 @@
margin: 16px auto 0; margin: 16px auto 0;
width: 380px; width: 380px;
height: 350px; height: 350px;
position: relative;
.image { .image {
width: 100%; width: 100%;
height: 100%; height: 100%;
object-fit: cover; object-fit: cover;
} }
.title {
position: absolute;
font-size: 20px;
font-weight: 500;
top: 24px;
left: 50%;
transform: translateX(-50%);
color: #fff;
}
.name {
font-size: 14px;
color: #fff;
position: absolute;
top: 60px;
left: 50%;
transform: translateX(-50%);
width: 286px;
line-height: 20px;
text-align: center;
}
.qrcodeWrap {
width: 186px;
height: 186px;
left: 50%;
transform: translateX(-50%);
position: absolute;
top: 100px;
padding: 8px;
background: 8px;
border-radius: 4px;
background: #fff;
}
.time {
font-size: 12px;
color: #333;
padding: 0 8px;
position: absolute;
bottom: 24px;
left: 50%;
transform: translateX(-50%);
white-space: nowrap;
line-height: 30px;
height: 30px;
border-radius: 15px;
background: #fff;
text-align: center;
}
} }
} }
\ No newline at end of file
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