Skip to content

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

微官网新版需求

parent 94c145ba
Expand all Hide whitespace changes
Inline Side-by-side
Showing with 1183 additions and 313 deletions
src/common/api.js
View file @ ee0b95fa
......@@ -123,6 +123,8 @@ export default {
schoolIntroDel: `${dakaapi}member/website/intro/destroy`,
moduleSort: `${dakaapi}member/website/school/module_sort`,
clockList: `${dakaapi}common/clock`,
ads: `${dakaapi}member/website/ads`,
adsSave: `${dakaapi}member/website/ad/save`,
},
schedule: `${dakaapi}member/erp/schedules`,
scheduleMgt: {
......
src/models/officialweb.js
View file @ ee0b95fa
This diff is collapsed.
src/models/uploader.js
View file @ ee0b95fa
......@@ -171,6 +171,7 @@ export default {
});
const {
bannerImg, course, orgdescs,
adCarousel,
} = yield select(state => state.officialweb);
const {
cropperUrl, filename, uploadtype, orgType, orgIndex, imgIndex, action,
......@@ -243,6 +244,14 @@ export default {
goodImage: `${filename}?x-oss-process=${cropperUrl}`,
},
});
} else if (uploadtype == 'uploadAdBanner') {
adCarousel[imgIndex].cover = `${filename}?x-oss-process=${cropperUrl}`;
yield put({
type: 'officialweb/updateState',
payload: {
adCarousel: [...adCarousel],
},
});
}
},
* unloadstates({ payload }, { call, put }) { // 释放该页面存储的所有状态
......
src/pages/officialweb/editor.js
View file @ ee0b95fa
This diff is collapsed.
src/pages/officialweb/index.js
View file @ ee0b95fa
......@@ -14,6 +14,7 @@ import OrgdescEditor from './pagecomponent/OrgdescEditor';
import StudentClock from './pagecomponent/StudentClock';
import BtnPermission from '../../components/BtnPermission';
import AdCarousel from './pagecomponent/AdCarousel';
import ClassMoments from './pagecomponent/ClassMoments';
import Cropper from '../../components/Cropper';
class Officialweb extends React.Component {
componentDidMount() { // 挂载
......@@ -153,20 +154,6 @@ class Officialweb extends React.Component {
</div>
);
break;
case 'course':
renderDom = (ele.data.switch == 1 &&
<div className={pageStyle.box} key={ele.type}>
<div
className={`${pageStyle.ContentBox}`}
key={ele.type}
>
<Course
course={ele.data}
/>
</div>
</div>
);
break;
case 'clocklist':
renderDom = (
<div className={pageStyle.box} key={ele.type}>
......@@ -181,6 +168,20 @@ class Officialweb extends React.Component {
</div>
);
break;
case 'classmoments':
renderDom = (
<div className={pageStyle.box} key={ele.type}>
<div
className={`${pageStyle.ContentBox}`}
key={ele.type}
>
<ClassMoments
banner={ele.data}
/>
</div>
</div>
);
break;
case 'orgdesc':
renderDom = (
<div className={pageStyle.box} key={ele.type}>
......@@ -195,6 +196,20 @@ class Officialweb extends React.Component {
</div>
);
break;
case 'course':
renderDom = (ele.data.switch == 1 &&
<div className={pageStyle.box} key={ele.type}>
<div
className={`${pageStyle.ContentBox}`}
key={ele.type}
>
<Course
course={ele.data}
/>
</div>
</div>
);
break;
default:
break;
}
......
src/pages/officialweb/index.less
View file @ ee0b95fa
......@@ -12,7 +12,7 @@
height: auto;
background:#fff;
box-shadow:0px 0px 13px 0px rgba(0, 0, 0, 0.1);
padding-top: 75px;
padding-top: 25px;
position: relative;
padding-bottom: 80px;
}
......
src/pages/officialweb/pagecomponent/AdCarousel.js
View file @ ee0b95fa
......@@ -17,7 +17,7 @@ class adCarousel extends React.Component {
const { banner } = this.props;
return (
<div className={PageStyle.Bannercontainer}>
1111
广告轮播
</div>
);
}
......
src/pages/officialweb/pagecomponent/AdCarouselEditor.js
View file @ ee0b95fa
import React from 'react';
import { connect } from 'dva';
import { Form, Layout, Input, Button, Icon } from 'antd';
import { Form, Layout, Input, Button, Icon, DatePicker, Modal, Popconfirm } from 'antd';
import { videoPoster, imagify } from '../../../utils/index';
import PageStyle from './AdCarouselEditor.less';
const FormItem = Form.Item;
......@@ -55,70 +55,189 @@ class AdCarouselEditor extends React.Component {
},
});
}
uploadBannerVideo = (e) => {
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/queryvideosignature',
type: 'officialweb/delbannerimg',
payload: {
files: e.target,
uploadtype: 'banner',
index,
},
});
}
movebannerimg = (index, direction) => {
const { dispatch } = this.props;
dispatch({
type: 'officialweb/movebannerimg',
payload: {
index,
direction,
},
});
}
uploadImg = (e) => {
handleAdCarouselPlate = () => {
const { dispatch } = this.props;
dispatch({
type: 'officialweb/handleAdCarouselPlate',
});
setTimeout(() => {
const element = document.getElementById('listbox');
element.scrollTop = element.scrollHeight;
}, 200);
}
uploadAdBanner = (e, index) => {
const { dispatch } = this.props;
const { avatorUploader } = this.state;
dispatch({
type: 'uploader/queryimgsignature',
payload: {
files: e.target,
uploadtype: 'banner',
uploadtype: 'uploadAdBanner',
avatorUploader,
imgIndex: index,
},
});
}
delvideo = () => {
handleChangeAdText = (e, index, key) => {
const { dispatch } = this.props;
dispatch({
type: 'officialweb/delvideo',
type: 'officialweb/handleChangeAdText',
payload: {
value: e.target.value,
index,
key,
},
});
}
handleSubmit = (e) => {
deleteAdBanner = (index) => {
const { dispatch } = this.props;
e.preventDefault();
dispatch({
type: 'officialweb/bannersave',
type: 'officialweb/deleteAdBanner',
payload: {
index,
},
});
}
delbannerimg = (index) => {
deleteAdCarouselPlate = (index) => {
const { dispatch } = this.props;
dispatch({
type: 'officialweb/delbannerimg',
type: 'officialweb/deleteAdCarouselPlate',
payload: {
index,
},
});
}
movebannerimg = (index, direction) => {
moveAdCarouselPlate = (index, direction) => {
const { dispatch } = this.props;
dispatch({
type: 'officialweb/movebannerimg',
type: 'officialweb/moveAdCarouselPlate',
payload: {
index,
direction,
},
});
}
saveAdCarouselPlate = () => {
const { dispatch } = this.props;
dispatch({
type: 'officialweb/saveAdCarouselPlate',
payload: {
},
});
}
render() {
const {
bannerType, banner, bannerVideo, bannerImg, bannerPostStatus,
adCarousel,
adCarouselStatus,
} = this.props;
const formItemLayout = {
labelCol: {
xs: { span: 4 },
sm: { span: 4 },
},
wrapperCol: {
xs: { span: 20 },
sm: { span: 20 },
},
};
return (
<div className={`${PageStyle.SchoolInfoEditorcontainer} SchoolInfoEditorcontainer`}>
<div className={PageStyle.header}>品牌视频/轮播</div>
<Form className={PageStyle.FormBox} onSubmit={this.handleSubmit}>
111
</Form>
<div className={PageStyle.header}>广告轮播</div>
<div className={PageStyle.FormBox} id="listbox">
{
adCarousel.length > 0 && adCarousel.map((item, index) => {
return (
<div className={PageStyle.formItem}>
<div className={PageStyle.formLeft}>
{index == 0 && <div className={`${PageStyle.formItemIcon} ${PageStyle.formItemIconGray}`}><Icon className={PageStyle.itemIcon} type="arrow-up" /></div>}
{ index > 0 && <div className={PageStyle.formItemIcon} onClick={() => this.moveAdCarouselPlate(index, 'up')}><Icon className={PageStyle.itemIcon} type="arrow-up" /></div> }
{index == (adCarousel.length - 1) && <div className={`${PageStyle.formItemIcon} ${PageStyle.formItemIconGray}`}><Icon className={PageStyle.itemIcon} type="arrow-down" /></div>}
{index < (adCarousel.length - 1) && <div className={PageStyle.formItemIcon} onClick={() => this.moveAdCarouselPlate(index, 'down')}><Icon className={PageStyle.itemIcon} type="arrow-down" /></div>}
<Popconfirm
placement="topLeft"
title="确定删除？"
okText="确定"
cancelText="取消"
onConfirm={() => this.deleteAdCarouselPlate(index)}
>
<div className={PageStyle.formItemIcon}><Icon className={PageStyle.itemIcon} type="delete" /></div>
</Popconfirm>
</div>
<div className={PageStyle.formRight}>
<div className={PageStyle.formRightImg}>
{
item.cover ?
<React.Fragment>
<img src={imagify(item.cover)} alt="图片" />
<div className={PageStyle.closeAdIcon} onClick={() => this.deleteAdBanner(index)}>
<Icon type="close" />
</div>
</React.Fragment> :
<React.Fragment>
<input
type="file"
className={PageStyle.uploadInput}
accept="image/png, image/jpeg"
id="upload1"
onChange={(e) => { this.uploadAdBanner(e, index); }}
/>添加图片
</React.Fragment>
}
</div>
<div className={PageStyle.formRightItem}>
<FormItem {...formItemLayout} label="标题">
<Input value={item.title} onChange={e => this.handleChangeAdText(e, index, 'title')} placeholder="请输入标题" />
<span className="ant-form-text">此标题不在页面显示</span>
</FormItem>
<FormItem {...formItemLayout} label="跳转地址">
<Input value={item.location} onChange={e => this.handleChangeAdText(e, index, 'location')} placeholder="请输入跳转地址" />
<span className="ant-form-text">若不配地址，则为静态广告无跳转</span>
</FormItem>
</div>
</div>
</div>
);
})
}
</div>
<div className={PageStyle.addPlate} onClick={this.handleAdCarouselPlate}>
继续添加（{adCarousel.length}/20）
</div>
<div className={PageStyle.btnbox}>
<Button type="primary" htmlType="submit" className={PageStyle.SubmitBtn} loading={adCarouselStatus} onClick={this.saveAdCarouselPlate}>{adCarouselStatus ? '保存中...' : '保存'}</Button>
</div>
</div>
);
}
......@@ -128,16 +247,12 @@ AdCarouselEditor.propTypes = {
};
function mapStateToProps(state) {
const {
bannerType,
bannerVideo,
bannerImg,
bannerPostStatus,
adCarousel,
adCarouselStatus,
} = state.officialweb;
return {
bannerType,
bannerVideo,
bannerImg,
bannerPostStatus,
adCarousel,
adCarouselStatus,
};
}
export default connect(mapStateToProps)(AdCarouselEditor);
src/pages/officialweb/pagecomponent/AdCarouselEditor.less
View file @ ee0b95fa
......@@ -13,6 +13,94 @@
}
.FormBox {
padding-top: 30px;
padding-bottom: 30px;
max-height: 400px;
overflow-y: scroll;
.formItem {
display: flex;
margin-bottom: 15px;
}
.formLeft {
height: 104px;
width: 41px;
border-radius: 10px;
background-color: #fff;
margin-right: 24px;
display: flex;
flex-direction: column;
overflow: hidden;
margin-left: 12px;
.formItemIcon {
flex: 1;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
&:hover {
background-color: #19B5FE;
.itemIcon {
color: #fff;
}
}
&.formItemIconGray {
color: #E5E5E5;
&:hover {
cursor: no-drop;
background-color: #fff;
}
}
}
}
.formRight {
display: flex;
align-items: center;
width: 524px;
border: 1px solid #979797;
background-color: #fff;
padding: 15px 10px;
border-radius:5px;
.formRightItem {
width: 350px;
}
.formRightImg {
width: 128px;
height: 128px;
position: relative;
border: 1px solid #979797;
margin-right: 15px;
line-height: 128px;
color: #0091FF;
text-align: center;
font-size: 14px;
.uploadInput {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0;
z-index: 5;
}
.closeAdIcon {
width: 30px;
height: 30px;
position: absolute;
right: 0;
top: 0;
color: #fff;
font-size: 20px;
cursor: pointer;
background-color: rgba(0,0,0,0.8);
line-height: 30px;
}
&>img {
width: 100%;
height: 100%;
display: block;
}
}
}
}
.FormItemClass {
padding-left: 30px;
......@@ -20,191 +108,60 @@
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 {
.SubmitBtn {
height: 34px;
line-height: 34px;
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;
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;
}
}
}
.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;
.addPlate {
width: 524px;
height: 54px;
line-height: 54px;
text-align: center;
font-size:14px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(0,145,255,1);
margin: 20px auto 0;
background-color: #fff;
border:1px dashed rgba(151,151,151,1);
margin-left: 75px;
}
::-webkit-scrollbar {
width: 8px;
height: 10px;
background-color: rgba(0,0,0,0);
}
::-webkit-scrollbar-thumb {
border-radius: 6px;
background-color: rgba(0,0,0,.2);
transition: all .4s ease;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
}
src/pages/officialweb/pagecomponent/ClassMoments.js 0 → 100644
View file @ ee0b95fa
import React from 'react';
import { connect } from 'dva';
import { Carousel, Icon } from 'antd';
import PageStyle from './ClassMoments.less';
import { ossVideofy, imagify, videoPoster } from '../../../utils/index';
class ClassMoments extends React.Component {
constructor(props) {
super(props);
this.state = {
};
}
componentWillMount() {
}
componentWillUnmount() {
}
render() {
const { banner } = this.props;
return (
<div className={PageStyle.Bannercontainer}>
课堂瞬间
</div>
);
}
}
ClassMoments.propTypes = {
};
function mapStateToProps(state) {
const {
menus, defaultMenu, collapsed,
} = state.webapp;
return {
menus,
defaultMenu,
collapsed,
};
}
export default connect(mapStateToProps)(ClassMoments);
src/pages/officialweb/pagecomponent/ClassMomentsEditor.js 0 → 100644
View file @ ee0b95fa
import React from 'react';
import { connect } from 'dva';
import { Form, Layout, Input, Button, Icon, DatePicker, Modal, Popconfirm } from 'antd';
import { videoPoster, imagify } from '../../../utils/index';
import PageStyle from './ClassMomentsEditor.less';
const FormItem = Form.Item;
const { Sider } = Layout;
class ClassMomentsEditor 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,
},
});
}
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,
},
});
}
handleClassMomentPlate = (type) => {
const { dispatch } = this.props;
dispatch({
type: 'officialweb/handleClassMomentPlate',
payload: {
type,
},
});
setTimeout(() => {
const element = document.getElementById('listbox');
element.scrollTop = element.scrollHeight;
}, 200);
}
uploadAdBanner = (e, index) => {
const { dispatch } = this.props;
const { avatorUploader } = this.state;
dispatch({
type: 'uploader/queryimgsignature',
payload: {
files: e.target,
uploadtype: 'uploadAdBanner',
avatorUploader,
imgIndex: index,
},
});
}
handleChangeAdText = (e, index, key) => {
const { dispatch } = this.props;
dispatch({
type: 'officialweb/handleChangeAdText',
payload: {
value: e.target.value,
index,
key,
},
});
}
deleteAdBanner = (index) => {
const { dispatch } = this.props;
dispatch({
type: 'officialweb/deleteAdBanner',
payload: {
index,
},
});
}
deleteAdCarouselPlate = (index) => {
const { dispatch } = this.props;
dispatch({
type: 'officialweb/deleteAdCarouselPlate',
payload: {
index,
},
});
}
moveAdCarouselPlate = (index, direction) => {
const { dispatch } = this.props;
dispatch({
type: 'officialweb/moveAdCarouselPlate',
payload: {
index,
direction,
},
});
}
saveAdCarouselPlate = () => {
const { dispatch } = this.props;
dispatch({
type: 'officialweb/saveAdCarouselPlate',
payload: {
},
});
}
render() {
const {
classMoment,
classMomentStatus,
} = this.props;
const formItemLayout = {
labelCol: {
xs: { span: 4 },
sm: { span: 4 },
},
wrapperCol: {
xs: { span: 20 },
sm: { span: 20 },
},
};
return (
<div className={`${PageStyle.SchoolInfoEditorcontainer} SchoolInfoEditorcontainer`}>
<div className={PageStyle.header}><span>课堂瞬间 </span><p>支持上传图片或视频，前四个视频/图片将在微官网首页【课堂瞬间】展示</p></div>
<div className={PageStyle.FormBox} id="listbox">
{
classMoment.length > 0 && classMoment.map((item, index) => {
return (
<div className={PageStyle.formItem}>
<div className={PageStyle.formLeft}>
{index == 0 && <div className={`${PageStyle.formItemIcon} ${PageStyle.formItemIconGray}`}><Icon className={PageStyle.itemIcon} type="arrow-up" /></div>}
{ index > 0 && <div className={PageStyle.formItemIcon} onClick={() => this.moveAdCarouselPlate(index, 'up')}><Icon className={PageStyle.itemIcon} type="arrow-up" /></div> }
{index == (classMoment.length - 1) && <div className={`${PageStyle.formItemIcon} ${PageStyle.formItemIconGray}`}><Icon className={PageStyle.itemIcon} type="arrow-down" /></div>}
{index < (classMoment.length - 1) && <div className={PageStyle.formItemIcon} onClick={() => this.moveAdCarouselPlate(index, 'down')}><Icon className={PageStyle.itemIcon} type="arrow-down" /></div>}
<Popconfirm
placement="topLeft"
title="确定删除？"
okText="确定"
cancelText="取消"
onConfirm={() => this.deleteAdCarouselPlate(index)}
>
<div className={PageStyle.formItemIcon}><Icon className={PageStyle.itemIcon} type="delete" /></div>
</Popconfirm>
</div>
<div className={PageStyle.formRight}>
<div className={PageStyle.formRightImg}>
{
item.content.length > 0 && item.content.map((ele, i) => {
return (
<div className={PageStyle.imgList}>
<div className={PageStyle.imgItem}>
<img src={imagify(ele.value)} alt="图片" />
<div className={PageStyle.closeAdIcon} onClick={() => this.deleteAdBanner(index)}>
<Icon type="close" />
</div>
</div>
</div>
);
})
}
{
item.content.length <= 4 &&
<React.Fragment>
<input
type="file"
className={PageStyle.uploadInput}
accept="image/png, image/jpeg"
id="upload1"
onChange={(e) => { this.uploadAdBanner(e, index); }}
/>
<span>点击上传（{item.content.length}/4）</span>
</React.Fragment>
}
</div>
<div className={PageStyle.formRightItem}>
<FormItem {...formItemLayout} label="标题">
<Input value={item.title} onChange={e => this.handleChangeAdText(e, index, 'title')} placeholder="请输入课堂瞬间标题" />
</FormItem>
</div>
</div>
</div>
);
})
}
</div>
<div className={PageStyle.addPlate} >
发布课堂瞬间（{classMoment.length}/20）
<div className={PageStyle.AddFloatbox}>
<div className={`${PageStyle.AddItem} ${PageStyle.AddVideoItem}`} onClick={() => this.handleClassMomentPlate(1)}>添加视频</div>
<div className={`${PageStyle.AddItem} ${PageStyle.AddImgItem}`} onClick={() => this.handleClassMomentPlate(2)}>添加图片</div>
</div>
</div>
<div className={PageStyle.btnbox}>
<Button type="primary" htmlType="submit" className={PageStyle.SubmitBtn} loading={classMomentStatus} onClick={this.saveAdCarouselPlate}>{classMomentStatus ? '保存中...' : '保存'}</Button>
</div>
</div>
);
}
}
ClassMomentsEditor.propTypes = {
};
function mapStateToProps(state) {
const {
classMoment,
classMomentStatus,
} = state.officialweb;
return {
classMoment,
classMomentStatus,
};
}
export default connect(mapStateToProps)(ClassMomentsEditor);
src/pages/officialweb/pagecomponent/ClassMomentsEditor.less 0 → 100644
View file @ ee0b95fa
@import '../../../less/variables.less';
@images: '@{imagesroot}/webapp/';
.SchoolInfoEditorcontainer {
}
.header {
color: #000;
font-size: 14px;
&>span {
font-weight: 700;
line-height: 50px;
}
padding-left: 20px;
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.FormBox {
padding-top: 30px;
padding-bottom: 30px;
max-height: 400px;
overflow-y: scroll;
.formItem {
display: flex;
margin-bottom: 15px;
}
.formLeft {
height: 104px;
width: 41px;
border-radius: 10px;
background-color: #fff;
margin-right: 24px;
display: flex;
flex-direction: column;
overflow: hidden;
margin-left: 12px;
.formItemIcon {
flex: 1;
text-align: center;
display: flex;
align-items: center;
justify-content: center;
cursor: pointer;
&:hover {
background-color: #19B5FE;
.itemIcon {
color: #fff;
}
}
&.formItemIconGray {
color: #E5E5E5;
&:hover {
cursor: no-drop;
background-color: #fff;
}
}
}
}
.formRight {
//display: flex;
//align-items: center;
width: 524px;
border: 1px solid #979797;
background-color: #fff;
padding: 15px 10px;
border-radius:5px;
.formRightItem {
width: 350px;
}
.formRightImg {
width: 86px;
height: 86px;
position: relative;
border: 1px solid #979797;
margin-right: 15px;
display: flex;
align-items: center;
justify-content: center;
color: #0091FF;
text-align: center;
font-size: 14px;
.imgList {
width: 100%;
height: 100%;
margin-right: 10px;
.imgItem {
width: 100%;
height: 100%;
display: block;
}
}
.uploadInput {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
opacity: 0;
z-index: 5;
}
.closeAdIcon {
width: 30px;
height: 30px;
position: absolute;
right: 0;
top: 0;
color: #fff;
font-size: 20px;
cursor: pointer;
background-color: rgba(0,0,0,0.8);
line-height: 30px;
}
&>img {
width: 100%;
height: 100%;
display: block;
}
}
}
}
.FormItemClass {
padding-left: 30px;
margin-bottom: 8px;
display: flex;
align-items: center;
}
.btnbox {
text-align: right;
padding: 14px 35px 12px 0;
.SubmitBtn {
height: 34px;
line-height: 34px;
background-color: #FFFFFF;
color: #000000;
font-size: 14px;
border: 1px solid #ECECEC;
&: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;
}
}
}
.addPlate {
width: 524px;
height: 54px;
line-height: 54px;
text-align: center;
font-size:14px;
font-family:PingFangSC-Regular,PingFang SC;
font-weight:400;
color:rgba(0,145,255,1);
margin: 20px auto 0;
background-color: #fff;
border:1px dashed rgba(151,151,151,1);
margin-left: 75px;
&:hover {
.AddFloatbox {
display: block;
}
}
.AddFloatbox {
border-radius: 4px;
width: 152px;
height: 88px;
background-color: #fff;
box-shadow:0px 2px 10px 0px rgba(0, 0, 0, 0.14);
position: absolute;
left: 50%;
top: 75%;
display: none;
}
.AddVideoItem {
border-bottom: 1px solid rgba(0,0,0,0.05);
}
.AddItem {
line-height: 44px;
text-align: center;
font-size: 14px;
color: #000000;
cursor: pointer;
&:hover {
color: #19B5FE;
}
}
}
::-webkit-scrollbar {
width: 8px;
height: 10px;
background-color: rgba(0,0,0,0);
}
::-webkit-scrollbar-thumb {
border-radius: 6px;
background-color: rgba(0,0,0,.2);
transition: all .4s ease;
-moz-transition: all .4s ease;
-webkit-transition: all .4s ease;
-o-transition: all .4s ease;
}
src/pages/officialweb/pagecomponent/SchoolInfo.js
View file @ ee0b95fa
import React from 'react';
import { connect } from 'dva';
import { Menu, Icon, Layout } from 'antd';
import { Menu, Icon, Layout, Tag } from 'antd';
import PageStyle from './SchoolInfo.less';
const { Sider } = Layout;
function SchoolInfo(props) {
const { schoolinfo } = props;
console.log(schoolinfo, 'schoolinfo');
return (
<div className={PageStyle.SchoolInfocontainer}>
<div className={PageStyle.schoolinfo}>
<div className={PageStyle.schoolname}>
<div className={PageStyle.name}>{schoolinfo.title || ''}</div>
<div className={PageStyle.wantlearnstatic}>{schoolinfo.join_count || 0}人想学</div>
<div className={PageStyle.wantlearnstatic}>
{schoolinfo.tags && schoolinfo.tags.length > 0 && schoolinfo.tags.map((item, index) => {
return (<span>{index < 4 && <Tag>{item}</Tag>} {index > 4 && '...'}</span>);
})}
</div>
</div>
<div className={PageStyle.shareiconbox}>
<img className={PageStyle.shareicon} src={`${__IMGCDN__}shareicon.png`} alt="" />
</div>
</div>
{
schoolinfo.notice &&
<div className={PageStyle.soundBox}>
<Icon type="sound" />&nbsp;&nbsp;&nbsp;{schoolinfo.notice}
</div>
}
<div className={PageStyle.schoolocationbox}>
<img src={`${__IMGCDN__}locationicon.png`} className={PageStyle.locationicon} alt="" />
<span className={PageStyle.schoolocation}>{schoolinfo.location_address || ''}</span>
</div>
<p><span className={PageStyle.shareicon} style={{ display: 'inline-block' }}></span><span className={PageStyle.schooladdress}>{schoolinfo.address}</span></p>
<div className={PageStyle.schoolocationbox}>
<img src={`${__IMGCDN__}locationicon.png`} className={PageStyle.locationicon} alt="" />
<span className={PageStyle.schoolocation}>{schoolinfo.tel_phone || ''}</span>
</div>
</div>
);
}
......
src/pages/officialweb/pagecomponent/SchoolInfo.less
View file @ ee0b95fa
......@@ -29,10 +29,10 @@
}
.name {
font-size: 15px;
font-size: 18px;
color: #000000;
font-weight:500;
line-height: 1;
font-weight:600;
line-height: 1.3;
max-width: 200px;
overflow: hidden;
text-overflow: ellipsis;
......@@ -40,17 +40,12 @@
margin-bottom: 5px;
}
.wantlearnstatic {
height:15px;
background:rgba(255,209,70,0.1);
border-radius:8px;
font-size:11px;
font-family:PingFang-SC-Regular;
font-weight:400;
color:rgba(255,180,0,1);
line-height:15px;
text-align: center;
padding: 0 10px;
display: inline-block;
width: 80%;
:global {
.ant-tag {
margin-bottom: 10px;
}
}
}
.schoolocationbox {
display: flex;
......@@ -63,6 +58,21 @@
margin-right: 11px;
}
.schoolocation {
color: #888888;
font-size: 11px;
color: #000000;
font-size: 14px;
font-weight: 600;
}
.schooladdress {
color: #000000;
font-size: 14px;
}
.soundBox {
background:rgba(247,181,0,0.24);
height: 22px;
font-size: 12px;
color:rgba(0,0,0,0.65);
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-bottom: 10px;
}
src/pages/officialweb/pagecomponent/SchoolInfoEditor.js
View file @ ee0b95fa
......@@ -142,6 +142,7 @@ class SchoolInfoEditorForm extends React.Component {
labelCol: { span: 6 },
wrapperCol: { span: 18 },
};
console.log(schoolTags, 'schoolTags');
return (
<div className={`${PageStyle.SchoolInfoEditorcontainer} SchoolInfoEditorcontainer`}>
<div className={PageStyle.header}>机构信息</div>
......@@ -162,7 +163,7 @@ class SchoolInfoEditorForm extends React.Component {
</Form.Item>
<Form.Item label="特色标签" colon={false} className={PageStyle.FormItemClass} {...formItemLayout}>
<div>
{schoolTags.map((tag, index) => {
{schoolTags.length > 0 && schoolTags.map((tag, index) => {
const isLongTag = tag.length > 20;
const tagElem = (
<Tag key={tag} closable onClose={() => this.handleClose(tag)}>
......@@ -227,13 +228,13 @@ class SchoolInfoEditorForm extends React.Component {
{/* <span style={{ display: 'block' }}>展示在微官网主页效果为：（例）888人访问过</span> */}
{/* </Form.Item> */}
<Form.Item label="通知栏" colon={false} className={PageStyle.FormItemClass} {...formItemLayout}>
{getFieldDecorator('title', {
initialValue: schoolInfo.title || '',
{getFieldDecorator('notice', {
initialValue: schoolInfo.notice || '',
rules: [
{ max: 100, message: '通知栏字数不能超过100字！' },
{ max: 500, message: '通知栏字数不能超过500字！' },
],
})(
<Input onChange={e => this.schoolInfoChange(e, 'title')} className={PageStyle.FormItemInputClass} placeholder="请输入通知信息" />)}
<Input onChange={e => this.schoolInfoChange(e, 'notice')} className={PageStyle.FormItemInputClass} placeholder="请输入通知信息" />)}
<span className="ant-form-text">若通知栏信息为空，则不展示通知栏</span>
</Form.Item>
<Form.Item label="位置" className={PageStyle.FormItemClass} colon={false} {...formItemLayout}>
......@@ -242,13 +243,13 @@ class SchoolInfoEditorForm extends React.Component {
{/* <Input className={PageStyle.FormItemInputClass} placeholder="输入机构地址" disabled onClick={this.selectaddress} /> */}
</Form.Item>
<Form.Item label="备注地址（选填）" colon={false} className={PageStyle.FormItemClass} {...formItemLayout}>
{getFieldDecorator('title', {
initialValue: schoolInfo.title || '',
{getFieldDecorator('address', {
initialValue: schoolInfo.address || '',
rules: [
{ max: 100, message: '通知栏字数不能超过100字！' },
{ max: 300, message: '备注地址字数不能超过300字！' },
],
})(
<Input onChange={e => this.schoolInfoChange(e, 'title')} className={PageStyle.FormItemInputClass} placeholder="请输入备注地址" />)}
<Input onChange={e => this.schoolInfoChange(e, 'address')} className={PageStyle.FormItemInputClass} placeholder="请输入备注地址" />)}
<span className="ant-form-text">对详细地址进行辅助说明:(例)地铁一号线三坝站c出口向北100米</span>
</Form.Item>
<Form.Item label="联系电话" className={PageStyle.FormItemClass} colon={false} {...formItemLayout}>
......
src/services/officialweb.js
View file @ ee0b95fa
......@@ -104,4 +104,18 @@ export function clockList(params) {
method: 'GET',
});
}
export function adsList(params) {
const data = qs.stringify(params);
return request({
url: `${api.officaialweb.ads}?${data}`,
method: 'GET',
});
}
export function adsSave(params) {
const data = qs.stringify(params);
return request({
url: `${api.officaialweb.adsSave}`,
method: 'POST',
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