Skip to content

B
biz.qingxiao.com
Commit feef70f3 authored by wangxuelai's avatar wangxuelai
Browse files
Options

'轻校微官网装修小修改'

parent 661ce904
Hide whitespace changes
Inline Side-by-side
Showing with 148 additions and 132 deletions
src/common/api.js
View file @ feef70f3
...@@ -9,6 +9,8 @@ if (ENVIRONMENT == 'pro') { ...@@ -9,6 +9,8 @@ if (ENVIRONMENT == 'pro') {
api = 'https://wx.m.shangjiadao.cn/v2/api/'; api = 'https://wx.m.shangjiadao.cn/v2/api/';
dakaapi = 'https://qxapi.qingxiao.online/daka/v3/'; dakaapi = 'https://qxapi.qingxiao.online/daka/v3/';
} else if (ENVIRONMENT == 'dev') { } else if (ENVIRONMENT == 'dev') {
// api = 'https://wx.m.shangjiadao.cn/v2/api/';
// dakaapi = 'https://qxapi.qingxiao.online/daka/v3/';
api = 'https://test.wp53.cn/v2/api/'; api = 'https://test.wp53.cn/v2/api/';
dakaapi = 'https:clock.wp53.cn/v3/'; dakaapi = 'https:clock.wp53.cn/v3/';
} }
......
src/models/officialweb.js
View file @ feef70f3
...@@ -310,6 +310,7 @@ export default { ...@@ -310,6 +310,7 @@ export default {
cover: '', cover: '',
remark: '', remark: '',
id: 0, id: 0,
switch: 2,
}; };
element.data = { element.data = {
school_id: 0, school_id: 0,
...@@ -317,6 +318,7 @@ export default { ...@@ -317,6 +318,7 @@ export default {
cover: 'https://cdn.img.shangjiadao.cn/source/images/dakav4/banner/banner1.png', cover: 'https://cdn.img.shangjiadao.cn/source/images/dakav4/banner/banner1.png',
remark: '体验课标注', remark: '体验课标注',
id: 0, id: 0,
switch: 2,
}; };
} }
}); });
...@@ -504,10 +506,10 @@ export default { ...@@ -504,10 +506,10 @@ export default {
const { const {
sid, course, pageInfo, coursePostStatus, sid, course, pageInfo, coursePostStatus,
} = yield select(state => state.officialweb); } = yield select(state => state.officialweb);
if (!course.cover) { // if (!course.cover) {
message.error('请上传课程封面', 1); // message.error('请上传课程封面', 1);
return; // return;
} // }
if (coursePostStatus) { if (coursePostStatus) {
return; return;
} }
...@@ -522,17 +524,19 @@ export default { ...@@ -522,17 +524,19 @@ export default {
if (course.id == 0) { if (course.id == 0) {
data = yield call(officialwebajax.courseInfoAdd, { data = yield call(officialwebajax.courseInfoAdd, {
school_id: sid, school_id: sid,
title: course.title, switch: values.switch,
remark: course.remark, // title: course.title,
cover: course.cover, // remark: course.remark,
// cover: course.cover,
}); });
} else { } else {
data = yield call(officialwebajax.courseInfoUpdate, { data = yield call(officialwebajax.courseInfoUpdate, {
school_id: sid, school_id: sid,
title: course.title, // title: course.title,
remark: course.remark, // remark: course.remark,
id: course.id, id: course.id,
cover: course.cover, switch: values.switch,
// cover: course.cover,
}); });
} }
if (data.code == 200) { if (data.code == 200) {
...@@ -547,6 +551,7 @@ export default { ...@@ -547,6 +551,7 @@ export default {
remark: course.remark, remark: course.remark,
id: data.data.id, id: data.data.id,
cover: course.cover, cover: course.cover,
switch: Number(data.data.switch),
}; };
} }
}); });
......
src/pages/officialweb/editor.js
View file @ feef70f3
...@@ -93,6 +93,7 @@ class Officialweb extends React.Component { ...@@ -93,6 +93,7 @@ class Officialweb extends React.Component {
officialwebPostStatus, officialwebPostStatus,
previewQrcodeShow, previewQrcodeShow,
previewQrcode, previewQrcode,
course,
} = this.props; } = this.props;
let renderDom; let renderDom;
const newPageInfo = pageInfo; const newPageInfo = pageInfo;
...@@ -104,6 +105,11 @@ class Officialweb extends React.Component { ...@@ -104,6 +105,11 @@ class Officialweb extends React.Component {
return ( return (
<div className={pageStyle.container}> <div className={pageStyle.container}>
<div className={pageStyle.mobilecontainer}> <div className={pageStyle.mobilecontainer}>
<div className={pageStyle.floatcoursebox}>
<Course
course={course}
/>
</div>
{ {
newPageInfo.map((ele, index) => { newPageInfo.map((ele, index) => {
switch (ele.type) { switch (ele.type) {
...@@ -175,17 +181,18 @@ class Officialweb extends React.Component { ...@@ -175,17 +181,18 @@ class Officialweb extends React.Component {
> >
<Course <Course
course={ele.data} course={ele.data}
showStatus
/> />
{dragoverindex == index && <div className={pageStyle.dropendbox}>松开鼠标，模块会放在这里</div>} {dragoverindex == index && <div className={pageStyle.dropendbox}>松开鼠标，模块会放在这里</div>}
</div> </div>
{moduleSelect == index && {/* moduleSelect == index &&
<div className={pageStyle.blockOperateBox}> <div className={pageStyle.blockOperateBox}>
{index == 2 && <div className={`${pageStyle.blockOperateItem} ${pageStyle.blockOperateItemGrey}`}><Icon className={pageStyle.blockOperateItemIcon} type="arrow-up" /></div>} {index == 2 && <div className={`${pageStyle.blockOperateItem} ${pageStyle.blockOperateItemGrey}`}><Icon className={pageStyle.blockOperateItemIcon} type="arrow-up" /></div>}
{index > 2 && <div className={pageStyle.blockOperateItem} onClick={() => this.pageBlockMove(index, 'up')}><Icon className={pageStyle.blockOperateItemIcon} type="arrow-up" /></div>} {index > 2 && <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} 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>} {index == (newPageInfo.length - 1) && <div className={`${pageStyle.blockOperateItem} ${pageStyle.blockOperateItemGrey}`}><Icon className={pageStyle.blockOperateItemIcon} type="arrow-down" /></div>}
</div> </div>
} */}
{moduleSelect == index && {moduleSelect == index &&
<div className={pageStyle.editbox}> <div className={pageStyle.editbox}>
<CourseEditor /> <CourseEditor />
...@@ -281,6 +288,7 @@ function mapStateToProps(state) { ...@@ -281,6 +288,7 @@ function mapStateToProps(state) {
officialwebPostStatus, officialwebPostStatus,
previewQrcodeShow, previewQrcodeShow,
previewQrcode, previewQrcode,
course,
} = state.officialweb; } = state.officialweb;
const { const {
cropperboxShow, cropperboxShow,
...@@ -296,6 +304,7 @@ function mapStateToProps(state) { ...@@ -296,6 +304,7 @@ function mapStateToProps(state) {
officialwebPostStatus, officialwebPostStatus,
previewQrcodeShow, previewQrcodeShow,
previewQrcode, previewQrcode,
course,
}; };
} }
export default connect(mapStateToProps)(Officialweb); export default connect(mapStateToProps)(Officialweb);
......
src/pages/officialweb/index.js
View file @ feef70f3
...@@ -86,12 +86,20 @@ class Officialweb extends React.Component { ...@@ -86,12 +86,20 @@ class Officialweb extends React.Component {
dragoverindex, dragoverindex,
moduleSelect, moduleSelect,
cropperboxShow, cropperboxShow,
course,
} = this.props; } = this.props;
let renderDom; let renderDom;
const newPageInfo = pageInfo; const newPageInfo = pageInfo;
return ( return (
<div className={pageStyle.container}> <div className={pageStyle.container}>
<div className={pageStyle.mobilecontainer}> <div className={pageStyle.mobilecontainer}>
{course.switch == 1 &&
<div className={pageStyle.floatcoursebox}>
<Course
course={course}
/>
</div>
}
{ {
newPageInfo.map((ele, index) => { newPageInfo.map((ele, index) => {
switch (ele.type) { switch (ele.type) {
...@@ -124,7 +132,7 @@ class Officialweb extends React.Component { ...@@ -124,7 +132,7 @@ class Officialweb extends React.Component {
); );
break; break;
case 'course': case 'course':
renderDom = ( renderDom = (ele.data.switch == 1 &&
<div className={pageStyle.box}> <div className={pageStyle.box}>
<div <div
className={`${pageStyle.ContentBox}`} className={`${pageStyle.ContentBox}`}
...@@ -194,6 +202,7 @@ function mapStateToProps(state) { ...@@ -194,6 +202,7 @@ function mapStateToProps(state) {
const { const {
pageInfo, pageInfo,
moduleSelect, moduleSelect,
course,
} = state.officialweb; } = state.officialweb;
const { const {
cropperboxShow, cropperboxShow,
...@@ -206,6 +215,7 @@ function mapStateToProps(state) { ...@@ -206,6 +215,7 @@ function mapStateToProps(state) {
cropperboxShow, cropperboxShow,
avatorUploader, avatorUploader,
uploadImgUrl, uploadImgUrl,
course,
}; };
} }
export default connect(mapStateToProps)(Officialweb); export default connect(mapStateToProps)(Officialweb);
......
src/pages/officialweb/index.less
View file @ feef70f3
...@@ -13,6 +13,7 @@ ...@@ -13,6 +13,7 @@
box-shadow:0px 0px 13px 0px rgba(0, 0, 0, 0.1); box-shadow:0px 0px 13px 0px rgba(0, 0, 0, 0.1);
padding-top: 75px; padding-top: 75px;
position: relative; position: relative;
padding-bottom: 80px;
} }
.ContentBox { .ContentBox {
// cursor: move; // cursor: move;
...@@ -128,4 +129,12 @@ ...@@ -128,4 +129,12 @@
background-color: #19B5FE; background-color: #19B5FE;
border: none; border: none;
} }
}
.floatcoursebox {
width: 100%;
position: absolute;
bottom: 0;
left: 0;
z-index: 2;
cursor: pointer;
} }
\ No newline at end of file
src/pages/officialweb/pagecomponent/Course.js
View file @ feef70f3
...@@ -4,18 +4,15 @@ import { Carousel } from 'antd'; ...@@ -4,18 +4,15 @@ import { Carousel } from 'antd';
import PageStyle from './Course.less'; import PageStyle from './Course.less';
import { imagify } from '../../../utils'; import { imagify } from '../../../utils';
function Course(props) { function Course(props) {
const { course } = props; const { course, showStatus } = props;
return ( return (
<div className={PageStyle.Coursecontainer}> <div className={PageStyle.Coursecontainer}>
<div className={PageStyle.CourseBox}> {showStatus && <div className={`${PageStyle.courseStatue} ${course.switch == 1 ? PageStyle.courseopen : PageStyle.courseclose}`}>{course.switch == 1 && '开启'}{course.switch == 2 && '关闭'}</div>}
<img className={PageStyle.CourseImg} src={imagify(course.cover || '')} alt="" /> <div className={PageStyle.Coursebox}>
<div className={PageStyle.CourseInfo}> <img className={PageStyle.clockicon} src={`${__IMGCDN__}floatclockicon.png`} alt="" />
<div className={PageStyle.CourseInfotop}> <span>立即预约，免费领取试听课</span>
<div className={PageStyle.CourseName}>{course.title || ''}</div> <img className={PageStyle.arrowright} src={`${__IMGCDN__}arrowright.png`} alt="" />
<div className={PageStyle.CourseDesc}>{course.remark || ''}</div> <img className={PageStyle.clockfloaticon} src={`${__IMGCDN__}clockicon.png`} alt="" />
</div>
<div className={PageStyle.CourseBtn}>免费领取</div>
</div>
</div> </div>
</div> </div>
); );
......
src/pages/officialweb/pagecomponent/Course.less
View file @ feef70f3
...@@ -3,47 +3,60 @@ ...@@ -3,47 +3,60 @@
.Coursecontainer { .Coursecontainer {
padding: 16px 12px 16px; padding: 16px 12px 16px;
} }
.CourseBox { .Coursebox {
height: 125px; width: 80%;
background:rgba(255,255,255,1); margin: 0 auto;
box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.1); height: 46px;
border-radius:10px; border-radius: 23px;
padding: 10px 17px 10px 10px; color: #FFFFFF;
font-weight: 700;
text-align: center;
background:linear-gradient(270deg,rgba(255,102,52,1) 0%,rgba(255,124,52,1) 100%);
background:-webkit-linear-gradient(270deg,rgba(255,102,52,1) 0%,rgba(255,124,52,1) 100%);
display: flex; display: flex;
justify-content: space-between; align-items: center;
justify-content: center;
letter-spacing: 1px;
position: relative;
line-height: 1;
overflow: hidden;
} }
.CourseImg { .clockicon {
display: block;
width: 105px;
height: 105px;
display: block; display: block;
border-radius: 5px; width: 21px;
margin-right: 17px; height: 20px;
margin-right: 13px;
} }
.CourseInfo { .arrowright {
width: 200px;
height: 105px;
display: flex; display: flex;
flex-direction: column; width: 6px;
justify-content: space-between; height: 10px;
} margin-left: 9px;
.CourseName {
color: #000000;
font-size: 14px;
font-weight: 700;
} }
.CourseDesc { .clockfloaticon {
color: #696969; width: 27px;
font-size: 11px; height: 22px;
position: absolute;
right: 0;
bottom: 0;
} }
.CourseBtn { .courseStatue {
text-align: center; position: absolute;
height: 31px; top: 50%;
line-height: 31px; transform: translateY(-50%);
background-color: #FFD146; right: 4px;
border-radius: 5px; width: 40px;
color: #000; height: 24px;
font-size: 12px; font-size: 12px;
letter-spacing: 2px; line-height: 24px;
font-weight: 700; border-radius: 4px;
text-align: center;
color: #fff;
}
.courseopen {
background-color: #19B5FE;
} }
.courseclose {
background-color: red;
}
\ No newline at end of file
src/pages/officialweb/pagecomponent/CourseEditor.js
View file @ feef70f3
import React from 'react'; import React from 'react';
import { connect } from 'dva'; import { connect } from 'dva';
import { Form, Layout, Input, Button, Icon } from 'antd'; import { Form, Layout, Radio, Button, Icon } from 'antd';
import PageStyle from './CourseEditor.less'; import PageStyle from './CourseEditor.less';
import { imagify } from '../../../utils/index'; import { imagify } from '../../../utils/index';
const FormItem = Form.Item; const FormItem = Form.Item;
...@@ -9,28 +9,28 @@ class CourseEditorForm extends React.Component { ...@@ -9,28 +9,28 @@ class CourseEditorForm extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
avatorUploader: { // avatorUploader: {
maxsize: 8192, // 奖品图片最大尺寸KBcropper: { // maxsize: 8192, // 奖品图片最大尺寸KBcropper: {
cropper: { // cropper: {
croppered_params: [], // 图片裁剪后的参数 // croppered_params: [], // 图片裁剪后的参数
config: { // config: {
dragMode: 'move', // dragMode: 'move',
viewMode: 1, // viewMode: 1,
aspectRatio: 1, // aspectRatio: 1,
autoCropArea: 0.8, // autoCropArea: 0.8,
guides: !1, // guides: !1,
center: !0, // center: !0,
highlight: !1, // highlight: !1,
dragCrop: !1, // dragCrop: !1,
cropBoxMovable: !1, // cropBoxMovable: !1,
cropBoxResizable: !1, // cropBoxResizable: !1,
zoom: -0.2, // zoom: -0.2,
checkImageOrigin: !0, // checkImageOrigin: !0,
background: !1, // background: !1,
rotatable: !0, // rotatable: !0,
}, // },
}, // },
}, // },
}; };
} }
componentWillMount() { componentWillMount() {
...@@ -46,18 +46,18 @@ class CourseEditorForm extends React.Component { ...@@ -46,18 +46,18 @@ class CourseEditorForm extends React.Component {
payload: key, payload: key,
}); });
} }
uploadCourseCover = (e) => { // uploadCourseCover = (e) => {
const { dispatch } = this.props; // const { dispatch } = this.props;
const { avatorUploader } = this.state; // const { avatorUploader } = this.state;
dispatch({ // dispatch({
type: 'uploader/queryimgsignature', // type: 'uploader/queryimgsignature',
payload: { // payload: {
files: e.target, // files: e.target,
uploadtype: 'coursecover', // uploadtype: 'coursecover',
avatorUploader, // avatorUploader,
}, // },
}); // });
} // }
handleSubmit = (e) => { handleSubmit = (e) => {
const { dispatch, course } = this.props; const { dispatch, course } = this.props;
e.preventDefault(); e.preventDefault();
...@@ -67,7 +67,7 @@ class CourseEditorForm extends React.Component { ...@@ -67,7 +67,7 @@ class CourseEditorForm extends React.Component {
dispatch({ dispatch({
type: 'officialweb/courseinfopost', type: 'officialweb/courseinfopost',
payload: { payload: {
values: Object.assign(course, values), values,
}, },
}); });
} }
...@@ -90,51 +90,22 @@ class CourseEditorForm extends React.Component { ...@@ -90,51 +90,22 @@ class CourseEditorForm extends React.Component {
fontSize: '16px', fontSize: '16px',
}; };
const formItemLayout = { const formItemLayout = {
labelCol: { span: 5 }, labelCol: { span: 3 },
wrapperCol: { span: 19 }, wrapperCol: { span: 19 },
}; };
return ( return (
<div className={`${PageStyle.SchoolInfoEditorcontainer} SchoolInfoEditorcontainer`}> <div className={`${PageStyle.SchoolInfoEditorcontainer} SchoolInfoEditorcontainer`}>
<div className={PageStyle.header}>体验课设置</div> <div className={PageStyle.header}>体验课设置</div>
<Form className={PageStyle.FormBox} onSubmit={this.handleSubmit} hideRequiredMark={() => true}> <Form className={PageStyle.FormBox} onSubmit={this.handleSubmit} hideRequiredMark={() => true}>
<Form.Item label="体验课图片" colon={false} className={PageStyle.FormItemClass} {...formItemLayout}> <Form.Item label="状态" className={PageStyle.FormItemClass} colon={false} {...formItemLayout}>
{course.cover == '' && {getFieldDecorator('switch', {
<div className={PageStyle.fileuploadbox}> initialValue: course.switch,
<input type="file" id="uploadinput" className={PageStyle.fileuploadinput} onChange={(e) => { this.uploadCourseCover(e); }} accept="image/*" />
<div className={PageStyle.fileuploadlayer}>
点击上传图片
</div>
</div>
}
{course.cover != '' &&
<div className={PageStyle.imgbox}>
<img alt="" className={PageStyle.img} src={imagify(course.cover)} />
<div className={PageStyle.imgdelandupdate}>
{/* <div className={PageStyle.imgdel} onClick={this.delvideo}>删除</div> */}
<div className={PageStyle.imgupdate}><input type="file" id="uploadinputa" className={PageStyle.fileuploadinput} onChange={(e) => { this.uploadCourseCover(e); }} accept="image/*" />修改</div>
</div>
</div>
}
</Form.Item>
<Form.Item label="体验课标题" className={PageStyle.FormItemClass} colon={false} {...formItemLayout}>
{getFieldDecorator('title', {
initialValue: course.title,
rules: [
{ required: true, message: '请输入课程标题!' },
{ max: 14, message: '体验课标题不能超过14字！' },
],
})(
<Input className={PageStyle.FormItemInputClass} onChange={e => this.courseInfoChange(e, 'title')} placeholder="输入课程标题" />)}
</Form.Item>
<Form.Item label="优势概述" className={PageStyle.FormItemClass} colon={false} {...formItemLayout}>
{getFieldDecorator('remark', {
initialValue: course.remark,
rules: [
{ required: true, message: '请输入概述!' },
{ max: 20, message: '体验概述不能超过20字！' },
],
})( })(
<Input className={PageStyle.FormItemInputClass} onChange={e => this.courseInfoChange(e, 'remark')} placeholder="输入概述" />)} <Radio.Group>
<Radio value={1}>开启</Radio>
<Radio value={2}>关闭</Radio>
</Radio.Group>,
)}
</Form.Item> </Form.Item>
<div className={PageStyle.divideLine} /> <div className={PageStyle.divideLine} />
<div className={PageStyle.btnbox}> <div className={PageStyle.btnbox}>
......
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