Skip to content

B
biz.qingxiao.com
Commit 94c145ba authored by baixian's avatar baixian
Browse files
Options

微官网

parents d6595693 57dbae1d
Hide whitespace changes
Inline Side-by-side
Showing with 623 additions and 19 deletions
index.html
View file @ 94c145ba
...@@ -11,12 +11,12 @@ ...@@ -11,12 +11,12 @@
<script src="js/console-polyfill.js"></script> <script src="js/console-polyfill.js"></script>
<![endif]--> <![endif]-->
<script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=XSZBZ-5LHCV-5I2P7-UQHPW-6456F-JBB3B"></script> <script charset="utf-8" src="https://map.qq.com/api/js?v=2.exp&key=XSZBZ-5LHCV-5I2P7-UQHPW-6456F-JBB3B"></script>
<script src="/js/ueeditor/ueditor.config.js?20200107" charset="utf-8"></script><script src="/js/ueeditor/ueditor.all.js?20200107" charset="utf-8"></script> <script src="/js/ueeditor/ueditor.config.js?20200107" charset="utf-8"></script><script src="/js/ueeditor/ueditor.all.js?20200107" charset="utf-8"></script>
<script src="js/console-polyfill.js?20200107" charset="utf-8"></script><script src="js/es6-shim.min.js?20200107" charset="utf-8"></script><script src="js/es5-shim.js?20200107" charset="utf-8"></script><script src="js/es5-sham.min.js?20200107" charset="utf-8"></script><script src="js/json3.min.js?20200107" charset="utf-8"></script><script src="js/html5shiv.min.js?20200107" charset="utf-8"></script><script src="js/polyfill.js?20200107" charset="utf-8"></script><script src="lib/vendor.dll.js?20200107" charset="utf-8"></script> <script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/js/console-polyfill.js?20200107" charset="utf-8"></script><script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/js/es6-shim.min.js?20200107" charset="utf-8"></script><script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/js/es5-shim.js?20200107" charset="utf-8"></script><script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/js/es5-sham.min.js?20200107" charset="utf-8"></script><script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/js/json3.min.js?20200107" charset="utf-8"></script><script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/js/html5shiv.min.js?20200107" charset="utf-8"></script><script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/js/polyfill.js?20200107" charset="utf-8"></script><script src="https://cdn.img.shangjiadao.cn/qingxiao/biz/lib/vendor.dll.js?20200107" charset="utf-8"></script>
</head> </head>
</head> </head>
<body> <body>
<div id="root"></div> <div id="root"></div>
<script type="text/javascript" src="/dist/main.31c1eb.js"></script></body> <script type="text/javascript" src="/dist/main.31c1eb.js"></script></body>
</html> </html>
\ No newline at end of file
src/models/classrecord.js
View file @ 94c145ba
...@@ -22,7 +22,7 @@ export default { ...@@ -22,7 +22,7 @@ export default {
recordParams: { recordParams: {
teacher_id: '', teacher_id: '',
start_time: '', start_time: '',
end_time: '', start_time_end: '',
class_id: '', class_id: '',
status: '', status: '',
course_id: '', course_id: '',
...@@ -88,7 +88,7 @@ export default { ...@@ -88,7 +88,7 @@ export default {
let newTotal = recordTotal; let newTotal = recordTotal;
const data = yield call(classRecordAjax.getRecordList, { const data = yield call(classRecordAjax.getRecordList, {
...newParams, ...newParams,
end_time: params.end_time ? params.end_time : moment().format('YYYY-MM-DD HH:mm:ss'), start_time_end: newParams.start_time_end ? newParams.start_time_end : moment().format('YYYY-MM-DD HH:mm:ss'),
}); });
setTimeout(loading); setTimeout(loading);
if (data.code == 200) { if (data.code == 200) {
...@@ -298,7 +298,7 @@ export default { ...@@ -298,7 +298,7 @@ export default {
recordParams: { recordParams: {
teacher_id: '', teacher_id: '',
start_time: '', start_time: '',
end_time: '', start_time_end: '',
class_id: '', class_id: '',
status: '', status: '',
course_id: '', course_id: '',
......
src/models/indexstaic.js
View file @ 94c145ba
...@@ -195,6 +195,7 @@ export default { ...@@ -195,6 +195,7 @@ export default {
* goCallStudent({ payload }, { call, put, select }) { * goCallStudent({ payload }, { call, put, select }) {
const { recordParams } = yield select(state => state.classrecord); const { recordParams } = yield select(state => state.classrecord);
recordParams.status = 2; recordParams.status = 2;
recordParams.start_time_end = moment().format('YYYY-MM-DD HH:mm:ss');
yield put({ yield put({
type: 'updateState', type: 'updateState',
payload: { payload: {
......
src/models/officialweb.js
View file @ 94c145ba
...@@ -50,6 +50,10 @@ export default { ...@@ -50,6 +50,10 @@ export default {
}, { }, {
name: 'banner', name: 'banner',
desc: 'banner图片或视频', desc: 'banner图片或视频',
},
{
name: 'adCarousel',
desc: '广告轮播',
}, { }, {
name: 'course', name: 'course',
desc: '体验课', desc: '体验课',
...@@ -74,6 +78,12 @@ export default { ...@@ -74,6 +78,12 @@ export default {
}, },
}, },
{
type: 'adCarousel',
data: {
},
},
{ {
type: 'course', type: 'course',
data: { data: {
...@@ -95,6 +105,11 @@ export default { ...@@ -95,6 +105,11 @@ export default {
], ],
previewQrcode: '', previewQrcode: '',
previewQrcodeShow: false, previewQrcodeShow: false,
schoolTags: [], // 标签
schoolVisible: false,
schoolTagValue: '',
adCarousel: [], // 广告轮播
adCarouselStatus: false, // 广告轮播保存状态
}, },
subscriptions: { subscriptions: {
setup({ dispatch, history }) { // eslint-disable-line setup({ dispatch, history }) { // eslint-disable-line
...@@ -145,6 +160,7 @@ export default { ...@@ -145,6 +160,7 @@ export default {
const { const {
index, index,
} = payload; } = payload;
console.log(index, 'index');
if (pageInfo[index].type != 'schoolinfo' && schoolInfo.id == 0) { if (pageInfo[index].type != 'schoolinfo' && schoolInfo.id == 0) {
message.error('请先编辑模块一【机构信息】', 1); message.error('请先编辑模块一【机构信息】', 1);
yield put({ yield put({
...@@ -1203,6 +1219,10 @@ export default { ...@@ -1203,6 +1219,10 @@ export default {
}, { }, {
name: 'banner', name: 'banner',
desc: 'banner图片或视频', desc: 'banner图片或视频',
},
{
name: 'adCarousel',
desc: '广告轮播',
}, { }, {
name: 'course', name: 'course',
desc: '体验课', desc: '体验课',
...@@ -1227,6 +1247,12 @@ export default { ...@@ -1227,6 +1247,12 @@ export default {
}, },
}, },
{
type: 'adCarousel',
data: {
},
},
{ {
type: 'course', type: 'course',
data: { data: {
...@@ -1247,6 +1273,11 @@ export default { ...@@ -1247,6 +1273,11 @@ export default {
], ],
previewQrcode: '', previewQrcode: '',
previewQrcodeShow: false, previewQrcodeShow: false,
schoolTags: [],
schoolVisible: false,
schoolTagValue: '',
adCarousel: [], // 广告轮播
adCarouselStatus: false, // 广告轮播保存状态
}, },
}); });
}, },
......
src/pages/classrecord/index.js
View file @ 94c145ba
...@@ -132,14 +132,14 @@ class StaticCenter extends React.Component { ...@@ -132,14 +132,14 @@ class StaticCenter extends React.Component {
searchTimeItemChange = (e, key) => { searchTimeItemChange = (e, key) => {
const { dispatch } = this.props; const { dispatch } = this.props;
const start_time = (e[0] && moment(e[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss')) || ''; const start_time = (e[0] && moment(e[0]).startOf('day').format('YYYY-MM-DD HH:mm:ss')) || '';
const end_time = (e[1] && moment(e[1]).format('YYYY-MM-DD HH:mm:ss')) || ''; const start_time_end = (e[1] && moment(e[1]).format('YYYY-MM-DD HH:mm:ss')) || '';
dispatch({ dispatch({
type: 'classrecord/selectRecord', type: 'classrecord/selectRecord',
payload: { payload: {
params: { params: {
page: 1, page: 1,
start_time, start_time,
end_time, start_time_end,
}, },
}, },
}); });
...@@ -155,11 +155,11 @@ class StaticCenter extends React.Component { ...@@ -155,11 +155,11 @@ class StaticCenter extends React.Component {
page: 1, page: 1,
teacher_id: '', teacher_id: '',
start_time: '', start_time: '',
end_time: '',
class_id: '', class_id: '',
status: '', status: '',
course_id: '', course_id: '',
class_room_id: '', class_room_id: '',
start_time_end: '',
}, },
}, },
}); });
...@@ -482,13 +482,14 @@ class StaticCenter extends React.Component { ...@@ -482,13 +482,14 @@ class StaticCenter extends React.Component {
<Col xs={{ span: 12 }} sm={{ span: 12 }} md={{ span: 12 }} lg={{ span: 8 }} xl={{ span: 8 }}> <Col xs={{ span: 12 }} sm={{ span: 12 }} md={{ span: 12 }} lg={{ span: 8 }} xl={{ span: 8 }}>
<FormItem {...formItemLayout} label="上课时间"> <FormItem {...formItemLayout} label="上课时间">
{getFieldDecorator('time', { {getFieldDecorator('time', {
initialValue: [recordParams.start_time == '' ? null : moment(recordParams.start_time), recordParams.end_time == '' ? null : moment(recordParams.end_time)], initialValue: [recordParams.start_time == '' ? null : moment(recordParams.start_time), recordParams.start_time_end == '' ? null : moment(recordParams.start_time_end)],
})( })(
<RangePicker <RangePicker
style={{ width: '100%' }} style={{ width: '100%' }}
format="YYYY-MM-DD" format="YYYY-MM-DD"
disabledDate={this.disabledDate} disabledDate={this.disabledDate}
onChange={e => this.searchTimeItemChange(e, 'time')} onChange={e => this.searchTimeItemChange(e, 'time')}
placeholder={['上课开始时间', '上课结束时间']}
/>, />,
)} )}
</FormItem> </FormItem>
......
src/pages/officialweb/editor.js
View file @ 94c145ba
...@@ -12,6 +12,8 @@ import CourseEditor from './pagecomponent/CourseEditor'; ...@@ -12,6 +12,8 @@ import CourseEditor from './pagecomponent/CourseEditor';
import Orgdesc from './pagecomponent/Orgdesc'; import Orgdesc from './pagecomponent/Orgdesc';
import OrgdescEditor from './pagecomponent/OrgdescEditor'; import OrgdescEditor from './pagecomponent/OrgdescEditor';
import StudentClock from './pagecomponent/StudentClock'; import StudentClock from './pagecomponent/StudentClock';
import AdCarousel from './pagecomponent/AdCarousel';
import AdCarouselEditor from './pagecomponent/AdCarouselEditor';
import Cropper from '../../components/Cropper'; import Cropper from '../../components/Cropper';
class Officialweb extends React.Component { class Officialweb extends React.Component {
componentDidMount() { // 挂载 componentDidMount() { // 挂载
...@@ -109,6 +111,7 @@ class Officialweb extends React.Component { ...@@ -109,6 +111,7 @@ class Officialweb extends React.Component {
} = this.props; } = this.props;
let renderDom; let renderDom;
const newPageInfo = pageInfo; const newPageInfo = pageInfo;
console.log(newPageInfo, 'newPageInfo');
const qrcodeBox = ( const qrcodeBox = (
<div> <div>
<img className={pageStyle.qrcodebox} src={imagify(previewQrcode)} alt="" /> <img className={pageStyle.qrcodebox} src={imagify(previewQrcode)} alt="" />
...@@ -185,6 +188,35 @@ class Officialweb extends React.Component { ...@@ -185,6 +188,35 @@ class Officialweb extends React.Component {
</div> </div>
); );
break; break;
case 'adCarousel':
renderDom = (
<div className={pageStyle.box} key={ele.type}>
<div
className={`${pageStyle.ContentBox} ${index == moduleSelect ? pageStyle.moduleSelect : ''}`}
key={ele.type}
onClick={event => this.moduleSelect(index, event)}
>
<AdCarousel
banner={ele.data}
/>
{dragoverindex == index && <div className={pageStyle.dropendbox}>松开鼠标，模块会放在这里</div>}
</div>
{/* moduleSelect == index &&
<div className={pageStyle.blockOperateBox}>
{index == 0 && <div className={`${pageStyle.blockOperateItem} ${pageStyle.blockOperateItemGrey}`}><Icon className={pageStyle.blockOperateItemIcon} type="arrow-up" /></div>}
{index > 0 && <div className={pageStyle.blockOperateItem} onClick={() => this.pageBlockMove(index, 'up')}><Icon className={pageStyle.blockOperateItemIcon} type="arrow-up" /></div>}
{index < (newPageInfo.length - 1) && <div className={pageStyle.blockOperateItem} onClick={() => this.pageBlockMove(index, 'down')}><Icon className={pageStyle.blockOperateItemIcon} type="arrow-down" /></div>}
{index == (newPageInfo.length - 1) && <div className={`${pageStyle.blockOperateItem} ${pageStyle.blockOperateItemGrey}`}><Icon className={pageStyle.blockOperateItemIcon} type="arrow-down" /></div>}
</div>
*/}
{moduleSelect == index &&
<div className={pageStyle.editbox}>
<AdCarouselEditor banner={ele.data} />
</div>
}
</div>
);
break;
case 'course': case 'course':
renderDom = ( renderDom = (
<div className={pageStyle.box} key={ele.type}> <div className={pageStyle.box} key={ele.type}>
......
src/pages/officialweb/index.js
View file @ 94c145ba
...@@ -13,6 +13,7 @@ import Orgdesc from './pagecomponent/Orgdesc'; ...@@ -13,6 +13,7 @@ import Orgdesc from './pagecomponent/Orgdesc';
import OrgdescEditor from './pagecomponent/OrgdescEditor'; import OrgdescEditor from './pagecomponent/OrgdescEditor';
import StudentClock from './pagecomponent/StudentClock'; import StudentClock from './pagecomponent/StudentClock';
import BtnPermission from '../../components/BtnPermission'; import BtnPermission from '../../components/BtnPermission';
import AdCarousel from './pagecomponent/AdCarousel';
import Cropper from '../../components/Cropper'; import Cropper from '../../components/Cropper';
class Officialweb extends React.Component { class Officialweb extends React.Component {
componentDidMount() { // 挂载 componentDidMount() { // 挂载
...@@ -88,7 +89,6 @@ class Officialweb extends React.Component { ...@@ -88,7 +89,6 @@ class Officialweb extends React.Component {
}); });
} }
render() { render() {
console.log(this.props, 'this.props');
const { const {
pageInfo, pageInfo,
dragoverindex, dragoverindex,
...@@ -139,6 +139,20 @@ class Officialweb extends React.Component { ...@@ -139,6 +139,20 @@ class Officialweb extends React.Component {
</div> </div>
); );
break; break;
case 'adCarousel':
renderDom = (
<div className={pageStyle.box} key={ele.type}>
<div
className={`${pageStyle.ContentBox}`}
key={ele.type}
>
<AdCarousel
banner={ele.data}
/>
</div>
</div>
);
break;
case 'course': case 'course':
renderDom = (ele.data.switch == 1 && renderDom = (ele.data.switch == 1 &&
<div className={pageStyle.box} key={ele.type}> <div className={pageStyle.box} key={ele.type}>
......
src/pages/officialweb/index.less
View file @ 94c145ba
...@@ -69,11 +69,11 @@ ...@@ -69,11 +69,11 @@
position: relative; position: relative;
} }
.editbox { .editbox {
width: 570px; width: 620px;
background-color: #F9F9F9; background-color: #F9F9F9;
border-radius: 10px; border-radius: 10px;
position: absolute; position: absolute;
right: -630px; right: -680px;
top: 0; top: 0;
border:1px solid rgba(235,235,235,1); border:1px solid rgba(235,235,235,1);
} }
......
src/pages/officialweb/pagecomponent/AdCarousel.js 0 → 100644
View file @ 94c145ba
import React from 'react';
import { connect } from 'dva';
import { Carousel, Icon } from 'antd';
import PageStyle from './AdCarousel.less';
import { ossVideofy, imagify, videoPoster } from '../../../utils/index';
class adCarousel extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
componentWillMount() {
}
componentWillUnmount() {
}
render() {
const { banner } = this.props;
return (
<div className={PageStyle.Bannercontainer}>
1111
</div>
);
}
}
adCarousel.propTypes = {
};
function mapStateToProps(state) {
const {
menus, defaultMenu, collapsed,
} = state.webapp;
return {
menus,
defaultMenu,
collapsed,
};
}
export default connect(mapStateToProps)(adCarousel);
src/pages/officialweb/pagecomponent/AdCarousel.less 0 → 100644
View file @ 94c145ba
@import '../../../less/variables.less';
@images: '@{imagesroot}/webapp/';
.Bannercontainer {
padding: 6px 12px 6px;
}
.videobox {
position: relative;
}
.videoPoster {
display: block;
position: relative;
z-index: 1;
width: 100%;
border-radius: 5px;
}
.playicon {
position: absolute;
width: 42px;
height: 49px;
left: 50%;
top: 50%;
margin-left: -21px;
margin-top: -24px;
z-index: 2;
}
.swiperbox {
}
.emptyBanner {
height: 200px;
text-align: center;
display: flex;
align-items: center;
background-color: #dedede;
justify-content: center;
}
\ No newline at end of file
src/pages/officialweb/pagecomponent/AdCarouselEditor.js 0 → 100644
View file @ 94c145ba
import React from 'react';
import { connect } from 'dva';
import { Form, Layout, Input, Button, Icon } from 'antd';
import { videoPoster, imagify } from '../../../utils/index';
import PageStyle from './AdCarouselEditor.less';
const FormItem = Form.Item;
const { Sider } = Layout;
class AdCarouselEditor extends React.Component {
constructor(props) {
super(props);
this.state = {
avatorUploader: {
maxsize: 8192, // 奖品图片最大尺寸KBcropper: {
cropper: {
croppered_params: [], // 图片裁剪后的参数
config: {
dragMode: 'move',
viewMode: 1,
aspectRatio: 0.875,
autoCropArea: 0.8,
guides: !1,
center: !0,
highlight: !1,
dragCrop: !1,
cropBoxMovable: !1,
cropBoxResizable: !1,
zoom: -0.2,
checkImageOrigin: !0,
background: !1,
rotatable: !0,
},
},
},
};
}
componentWillMount() {
}
componentWillUnmount() {
}
uploadAvator = (e) => {
}
selectedMenu = (key) => {
const { dispatch } = this.props;
dispatch({
type: 'webapp/menuselected',
payload: key,
});
}
bannerTypeChoose = (type) => {
const { dispatch } = this.props;
dispatch({
type: 'officialweb/bannertypechoose',
payload: {
type,
},
});
}
uploadBannerVideo = (e) => {
const { dispatch } = this.props;
dispatch({
type: 'officialweb/queryvideosignature',
payload: {
files: e.target,
uploadtype: 'banner',
},
});
}
uploadImg = (e) => {
const { dispatch } = this.props;
const { avatorUploader } = this.state;
dispatch({
type: 'uploader/queryimgsignature',
payload: {
files: e.target,
uploadtype: 'banner',
avatorUploader,
},
});
}
delvideo = () => {
const { dispatch } = this.props;
dispatch({
type: 'officialweb/delvideo',
});
}
handleSubmit = (e) => {
const { dispatch } = this.props;
e.preventDefault();
dispatch({
type: 'officialweb/bannersave',
});
}
delbannerimg = (index) => {
const { dispatch } = this.props;
dispatch({
type: 'officialweb/delbannerimg',
payload: {
index,
},
});
}
movebannerimg = (index, direction) => {
const { dispatch } = this.props;
dispatch({
type: 'officialweb/movebannerimg',
payload: {
index,
direction,
},
});
}
render() {
const {
bannerType, banner, bannerVideo, bannerImg, bannerPostStatus,
} = this.props;
return (
<div className={`${PageStyle.SchoolInfoEditorcontainer} SchoolInfoEditorcontainer`}>
<div className={PageStyle.header}>品牌视频/轮播</div>
<Form className={PageStyle.FormBox} onSubmit={this.handleSubmit}>
111
</Form>
</div>
);
}
}
AdCarouselEditor.propTypes = {
};
function mapStateToProps(state) {
const {
bannerType,
bannerVideo,
bannerImg,
bannerPostStatus,
} = state.officialweb;
return {
bannerType,
bannerVideo,
bannerImg,
bannerPostStatus,
};
}
export default connect(mapStateToProps)(AdCarouselEditor);
src/pages/officialweb/pagecomponent/AdCarouselEditor.less 0 → 100644
View file @ 94c145ba
@import '../../../less/variables.less';
@images: '@{imagesroot}/webapp/';
.SchoolInfoEditorcontainer {
}
.header {
color: #000;
font-size: 14px;
font-weight: 700;
line-height: 50px;
padding-left: 20px;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.FormBox {
padding-top: 30px;
}
.FormItemClass {
padding-left: 30px;
margin-bottom: 8px;
display: flex;
align-items: center;
}
.FormItemInputClass {
// height: 46px;
// line-height: 46px;
}
.divideLine {
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.btnbox {
text-align: right;
padding: 14px 35px 12px 0;
}
.SubmitBtn {
// background-color: #ECECEC;
// width: 70px;
height: 34px;
line-height: 34px;
background-color: #FFFFFF;
color: #000000;
font-size: 14px;
border: 1px solid #ECECEC;
height: 34px;
line-height: 34px;
&:hover {
background-color: #FFFFFF;
color: #000000;
font-size: 14px;
border: 1px solid #ECECEC;
}
&:active {
background-color: #FFFFFF;
color: #000000;
font-size: 14px;
border: 1px solid #ECECEC;
}
&:focus {
background-color: #FFFFFF;
color: #000000;
font-size: 14px;
border: 1px solid #ECECEC;
}
}
.operatebox {
padding: 24px 0 20px 30px;
}
.fileuploadbox {
width: 104px;
height: 104px;
position: relative;
background-color: #FFFFFF;
border-radius: 7px;
cursor: pointer;
border: 1px solid rgba(236,236,236,1);
}
.fileuploadinput{
// height: 32px;
width: 100%;
height: 100%;
opacity: 0;
z-index: 3;
position: absolute;
cursor: pointer;
}
.fileuploadlayer{
width: 100%;
height: 100%;
z-index: 2;
position: absolute;
line-height: 1;
display: flex;
align-items: center;
justify-content: center;
flex-direction: column;
text-align: center;
color: #19B5FE;
font-size: 14px;
cursor: pointer;
}
.uploadcount {
color: #A5A5A5;
font-size: 14px;
line-height: 1;
margin-top: 17px;
}
.selfradiabox {
display: flex;
align-items: center;
justify-content: space-around;
}
.selfradiaitem {
display: flex;
align-items: center;
cursor: pointer;
}
.selfradia {
width: 20px;
height: 20px;
border-radius: 50%;
border: 2px solid #9A9A9A;
}
.selfradiaitemactive {
.selfradia {
border: 6px solid #19B5FE;
}
}
.radianame {
color: #000;
font-size: 14px;
padding-left: 9px;
}
.operateitembox {
display: flex;
margin-bottom: 10px;
}
.imgbox {
width: 104px;
height: 104px;
border-radius: 10px;
overflow: hidden;
margin-right: 12px;
position: relative;
}
.img {
width: 104px;
height: 104px;
display: block;
}
.imgoperatebox {
height: 104px;
width: 41px;
border-radius: 10px;
background-color: #fff;
margin-right: 24px;
display: flex;
flex-direction: column;
overflow: hidden;
}
.blockOperateItem {
flex: 1;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
&:hover {
background-color: #19B5FE;
.blockOperateItemIcon {
color: #fff;
}
}
&.blockOperateItemGrey {
color: #E5E5E5;
&:hover {
cursor: no-drop;
background-color: #fff;
}
}
}
.imgbox:hover {
.imgdelandupdate {
bottom: 0;
}
}
.imgdelandupdate {
position: absolute;
bottom: -30px;
left: 0;
height: 30px;
background-color: rgba(0,0,0,0.5);
width: 100%;
color: #fff;
padding: 8px 0;
display: flex;
align-items: center;
line-height: 1;
font-size: 14px;
cursor: pointer;
transition: bottom 0.2s;
}
.imgdel {
border-right: 1px solid #fff;
flex: 1;
text-align: center;
}
.imgupdate {
flex: 1;
text-align: center;
}
src/pages/officialweb/pagecomponent/SchoolInfoEditor.js
View file @ 94c145ba
import fetchJsonp from 'fetch-jsonp'; import fetchJsonp from 'fetch-jsonp';
import React from 'react'; import React from 'react';
import { connect } from 'dva'; import { connect } from 'dva';
import { Form, Layout, Input, Button, Modal, Cascader, message } from 'antd'; import { Form, Layout, Input, Button, Modal, Tag, message, Tooltip, Icon } from 'antd';
import PageStyle from './SchoolInfoEditor.less'; import PageStyle from './SchoolInfoEditor.less';
import disData from '../../../common/dis.data'; import disData from '../../../common/dis.data';
import ChoosePosition from '../../schooledit/SelectPlace'; import ChoosePosition from '../../schooledit/SelectPlace';
...@@ -22,6 +22,8 @@ class SchoolInfoEditorForm extends React.Component { ...@@ -22,6 +22,8 @@ class SchoolInfoEditorForm extends React.Component {
district: '', district: '',
}; };
} }
componentDidMount() {
}
componentWillMount() { componentWillMount() {
} }
componentWillUnmount() { componentWillUnmount() {
...@@ -54,7 +56,6 @@ class SchoolInfoEditorForm extends React.Component { ...@@ -54,7 +56,6 @@ class SchoolInfoEditorForm extends React.Component {
e.preventDefault(); e.preventDefault();
this.props.form.validateFields((err, values) => { this.props.form.validateFields((err, values) => {
if (!err) { if (!err) {
const { dispatch } = this.props;
dispatch({ dispatch({
type: 'officialweb/schoolinfopost', type: 'officialweb/schoolinfopost',
payload: { payload: {
...@@ -74,8 +75,62 @@ class SchoolInfoEditorForm extends React.Component { ...@@ -74,8 +75,62 @@ class SchoolInfoEditorForm extends React.Component {
}, },
}); });
} }
handleClose = (removedTag) => {
const { dispatch } = this.props;
let { schoolTags } = this.props;
schoolTags = schoolTags.filter(tag => tag !== removedTag);
dispatch({
type: 'officialweb/updateState',
payload: {
schoolTags,
},
});
};
showInput = () => {
const { dispatch } = this.props;
dispatch({
type: 'officialweb/updateState',
payload: {
schoolVisible: true,
},
});
this.setState({ }, () => this.input.focus());
};
handleInputChange = (e) => {
const { dispatch } = this.props;
dispatch({
type: 'officialweb/updateState',
payload: {
schoolTagValue: e.target.value,
},
});
};
handleInputConfirm = () => {
const { dispatch, schoolTagValue } = this.props;
let { schoolTags } = this.props;
if (schoolTagValue && schoolTags.indexOf(schoolTagValue) === -1) {
schoolTags = [...schoolTags, schoolTagValue];
}
dispatch({
type: 'officialweb/updateState',
payload: {
schoolTagValue: '',
schoolTags,
schoolVisible: false,
},
});
};
// eslint-disable-next-line no-return-assign
saveInputRef = input => (this.input = input);
render() { render() {
const { schoolInfo, schoolInfoPostStatus } = this.props; const {
schoolInfo,
schoolInfoPostStatus,
schoolTags,
schoolVisible,
schoolTagValue,
} = this.props;
const { getFieldDecorator } = this.props.form; const { getFieldDecorator } = this.props.form;
const { const {
location, address, locationList, locationIndex, province, city, district, location, address, locationList, locationIndex, province, city, district,
...@@ -84,8 +139,8 @@ class SchoolInfoEditorForm extends React.Component { ...@@ -84,8 +139,8 @@ class SchoolInfoEditorForm extends React.Component {
fontSize: '16px', fontSize: '16px',
}; };
const formItemLayout = { const formItemLayout = {
labelCol: { span: 5 }, labelCol: { span: 6 },
wrapperCol: { span: 19 }, wrapperCol: { span: 18 },
}; };
return ( return (
<div className={`${PageStyle.SchoolInfoEditorcontainer} SchoolInfoEditorcontainer`}> <div className={`${PageStyle.SchoolInfoEditorcontainer} SchoolInfoEditorcontainer`}>
...@@ -105,6 +160,43 @@ class SchoolInfoEditorForm extends React.Component { ...@@ -105,6 +160,43 @@ class SchoolInfoEditorForm extends React.Component {
})( })(
<Input onChange={e => this.schoolInfoChange(e, 'title')} className={PageStyle.FormItemInputClass} placeholder="请输入学校名称" />)} <Input onChange={e => this.schoolInfoChange(e, 'title')} className={PageStyle.FormItemInputClass} placeholder="请输入学校名称" />)}
</Form.Item> </Form.Item>
<Form.Item label="特色标签" colon={false} className={PageStyle.FormItemClass} {...formItemLayout}>
<div>
{schoolTags.map((tag, index) => {
const isLongTag = tag.length > 20;
const tagElem = (
<Tag key={tag} closable onClose={() => this.handleClose(tag)}>
{isLongTag ? `${tag.slice(0, 20)}...` : tag}
</Tag>
);
return isLongTag ? (
<Tooltip title={tag} key={tag}>
{tagElem}
</Tooltip>
) : (
tagElem
);
})}
{schoolVisible && (
<Input
ref={this.saveInputRef}
type="text"
size="small"
style={{ width: 78 }}
value={schoolTagValue}
onChange={this.handleInputChange}
onBlur={this.handleInputConfirm}
onPressEnter={this.handleInputConfirm}
autoFocus
/>
)}
{!schoolVisible && (
<Tag onClick={this.showInput} style={{ background: '#fff', borderStyle: 'dashed', cursor: 'pointer' }}>
<Icon type="plus" />新增标签
</Tag>
)}
</div>
</Form.Item>
{/* <Form.Item label="多少人想学" className={PageStyle.FormItemClass} colon={false} {...formItemLayout}> */} {/* <Form.Item label="多少人想学" className={PageStyle.FormItemClass} colon={false} {...formItemLayout}> */}
{/* {getFieldDecorator('join_count', { */} {/* {getFieldDecorator('join_count', { */}
{/* initialValue: schoolInfo.join_count || 0, */} {/* initialValue: schoolInfo.join_count || 0, */}
...@@ -157,7 +249,7 @@ class SchoolInfoEditorForm extends React.Component { ...@@ -157,7 +249,7 @@ class SchoolInfoEditorForm extends React.Component {
], ],
})( })(
<Input onChange={e => this.schoolInfoChange(e, 'title')} className={PageStyle.FormItemInputClass} placeholder="请输入备注地址" />)} <Input onChange={e => this.schoolInfoChange(e, 'title')} className={PageStyle.FormItemInputClass} placeholder="请输入备注地址" />)}
<span className="ant-form-text">对详细地址进行辅助说明：（例）地铁一号线三坝站c出口向北100米</span> <span className="ant-form-text">对详细地址进行辅助说明:(例)地铁一号线三坝站c出口向北100米</span>
</Form.Item> </Form.Item>
<Form.Item label="联系电话" className={PageStyle.FormItemClass} colon={false} {...formItemLayout}> <Form.Item label="联系电话" className={PageStyle.FormItemClass} colon={false} {...formItemLayout}>
{getFieldDecorator('tel_phone', { {getFieldDecorator('tel_phone', {
...@@ -199,10 +291,16 @@ function mapStateToProps(state) { ...@@ -199,10 +291,16 @@ function mapStateToProps(state) {
const { const {
schoolInfo, schoolInfo,
schoolInfoPostStatus, schoolInfoPostStatus,
schoolTags,
schoolVisible,
schoolTagValue,
} = state.officialweb; } = state.officialweb;
return { return {
schoolInfo, schoolInfo,
schoolInfoPostStatus, schoolInfoPostStatus,
schoolTags,
schoolVisible,
schoolTagValue,
}; };
} }
export default connect(mapStateToProps)(SchoolInfoEditor); export default connect(mapStateToProps)(SchoolInfoEditor);
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