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') {
api = 'https://wx.m.shangjiadao.cn/v2/api/';
dakaapi = 'https://qxapi.qingxiao.online/daka/v3/';
} 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/';
dakaapi = 'https:clock.wp53.cn/v3/';
}
......
src/models/officialweb.js
View file @ feef70f3
......@@ -310,6 +310,7 @@ export default {
cover: '',
remark: '',
id: 0,
switch: 2,
};
element.data = {
school_id: 0,
......@@ -317,6 +318,7 @@ export default {
cover: 'https://cdn.img.shangjiadao.cn/source/images/dakav4/banner/banner1.png',
remark: '体验课标注',
id: 0,
switch: 2,
};
}
});
......@@ -504,10 +506,10 @@ export default {
const {
sid, course, pageInfo, coursePostStatus,
} = yield select(state => state.officialweb);
if (!course.cover) {
message.error('请上传课程封面', 1);
return;
}
// if (!course.cover) {
// message.error('请上传课程封面', 1);
// return;
// }
if (coursePostStatus) {
return;
}
......@@ -522,17 +524,19 @@ export default {
if (course.id == 0) {
data = yield call(officialwebajax.courseInfoAdd, {
school_id: sid,
title: course.title,
remark: course.remark,
cover: course.cover,
switch: values.switch,
// title: course.title,
// remark: course.remark,
// cover: course.cover,
});
} else {
data = yield call(officialwebajax.courseInfoUpdate, {
school_id: sid,
title: course.title,
remark: course.remark,
// title: course.title,
// remark: course.remark,
id: course.id,
cover: course.cover,
switch: values.switch,
// cover: course.cover,
});
}
if (data.code == 200) {
......@@ -547,6 +551,7 @@ export default {
remark: course.remark,
id: data.data.id,
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 {
officialwebPostStatus,
previewQrcodeShow,
previewQrcode,
course,
} = this.props;
let renderDom;
const newPageInfo = pageInfo;
......@@ -104,6 +105,11 @@ class Officialweb extends React.Component {
return (
<div className={pageStyle.container}>
<div className={pageStyle.mobilecontainer}>
<div className={pageStyle.floatcoursebox}>
<Course
course={course}
/>
</div>
{
newPageInfo.map((ele, index) => {
switch (ele.type) {
......@@ -175,17 +181,18 @@ class Officialweb extends React.Component {
>
<Course
course={ele.data}
showStatus
/>
{dragoverindex == index && <div className={pageStyle.dropendbox}>松开鼠标，模块会放在这里</div>}
</div>
{moduleSelect == index &&
{/* moduleSelect == index &&
<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} 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}>
<CourseEditor />
......@@ -281,6 +288,7 @@ function mapStateToProps(state) {
officialwebPostStatus,
previewQrcodeShow,
previewQrcode,
course,
} = state.officialweb;
const {
cropperboxShow,
......@@ -296,6 +304,7 @@ function mapStateToProps(state) {
officialwebPostStatus,
previewQrcodeShow,
previewQrcode,
course,
};
}
export default connect(mapStateToProps)(Officialweb);
......
src/pages/officialweb/index.js
View file @ feef70f3
......@@ -86,12 +86,20 @@ class Officialweb extends React.Component {
dragoverindex,
moduleSelect,
cropperboxShow,
course,
} = this.props;
let renderDom;
const newPageInfo = pageInfo;
return (
<div className={pageStyle.container}>
<div className={pageStyle.mobilecontainer}>
{course.switch == 1 &&
<div className={pageStyle.floatcoursebox}>
<Course
course={course}
/>
</div>
}
{
newPageInfo.map((ele, index) => {
switch (ele.type) {
......@@ -124,7 +132,7 @@ class Officialweb extends React.Component {
);
break;
case 'course':
renderDom = (
renderDom = (ele.data.switch == 1 &&
<div className={pageStyle.box}>
<div
className={`${pageStyle.ContentBox}`}
......@@ -194,6 +202,7 @@ function mapStateToProps(state) {
const {
pageInfo,
moduleSelect,
course,
} = state.officialweb;
const {
cropperboxShow,
......@@ -206,6 +215,7 @@ function mapStateToProps(state) {
cropperboxShow,
avatorUploader,
uploadImgUrl,
course,
};
}
export default connect(mapStateToProps)(Officialweb);
......
src/pages/officialweb/index.less
View file @ feef70f3
......@@ -13,6 +13,7 @@
box-shadow:0px 0px 13px 0px rgba(0, 0, 0, 0.1);
padding-top: 75px;
position: relative;
padding-bottom: 80px;
}
.ContentBox {
// cursor: move;
......@@ -128,4 +129,12 @@
background-color: #19B5FE;
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';
import PageStyle from './Course.less';
import { imagify } from '../../../utils';
function Course(props) {
const { course } = props;
const { course, showStatus } = props;
return (
<div className={PageStyle.Coursecontainer}>
<div className={PageStyle.CourseBox}>
<img className={PageStyle.CourseImg} src={imagify(course.cover || '')} alt="" />
<div className={PageStyle.CourseInfo}>
<div className={PageStyle.CourseInfotop}>
<div className={PageStyle.CourseName}>{course.title || ''}</div>
<div className={PageStyle.CourseDesc}>{course.remark || ''}</div>
</div>
<div className={PageStyle.CourseBtn}>免费领取</div>
</div>
{showStatus && <div className={`${PageStyle.courseStatue} ${course.switch == 1 ? PageStyle.courseopen : PageStyle.courseclose}`}>{course.switch == 1 && '开启'}{course.switch == 2 && '关闭'}</div>}
<div className={PageStyle.Coursebox}>
<img className={PageStyle.clockicon} src={`${__IMGCDN__}floatclockicon.png`} alt="" />
<span>立即预约，免费领取试听课</span>
<img className={PageStyle.arrowright} src={`${__IMGCDN__}arrowright.png`} alt="" />
<img className={PageStyle.clockfloaticon} src={`${__IMGCDN__}clockicon.png`} alt="" />
</div>
</div>
);
......
src/pages/officialweb/pagecomponent/Course.less
View file @ feef70f3
......@@ -3,47 +3,60 @@
.Coursecontainer {
padding: 16px 12px 16px;
}
.CourseBox {
height: 125px;
background:rgba(255,255,255,1);
box-shadow:0px 0px 5px 0px rgba(0, 0, 0, 0.1);
border-radius:10px;
padding: 10px 17px 10px 10px;
.Coursebox {
width: 80%;
margin: 0 auto;
height: 46px;
border-radius: 23px;
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;
justify-content: space-between;
align-items: center;
justify-content: center;
letter-spacing: 1px;
position: relative;
line-height: 1;
overflow: hidden;
}
.CourseImg {
display: block;
width: 105px;
height: 105px;
.clockicon {
display: block;
border-radius: 5px;
margin-right: 17px;
width: 21px;
height: 20px;
margin-right: 13px;
}
.CourseInfo {
width: 200px;
height: 105px;
.arrowright {
display: flex;
flex-direction: column;
justify-content: space-between;
}
.CourseName {
color: #000000;
font-size: 14px;
font-weight: 700;
width: 6px;
height: 10px;
margin-left: 9px;
}
.CourseDesc {
color: #696969;
font-size: 11px;
.clockfloaticon {
width: 27px;
height: 22px;
position: absolute;
right: 0;
bottom: 0;
}
.CourseBtn {
text-align: center;
height: 31px;
line-height: 31px;
background-color: #FFD146;
border-radius: 5px;
color: #000;
.courseStatue {
position: absolute;
top: 50%;
transform: translateY(-50%);
right: 4px;
width: 40px;
height: 24px;
font-size: 12px;
letter-spacing: 2px;
font-weight: 700;
line-height: 24px;
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 { 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 { imagify } from '../../../utils/index';
const FormItem = Form.Item;
......@@ -9,28 +9,28 @@ class CourseEditorForm extends React.Component {
constructor(props) {
super(props);
this.state = {
avatorUploader: {
maxsize: 8192, // 奖品图片最大尺寸KBcropper: {
cropper: {
croppered_params: [], // 图片裁剪后的参数
config: {
dragMode: 'move',
viewMode: 1,
aspectRatio: 1,
autoCropArea: 0.8,
guides: !1,
center: !0,
highlight: !1,
dragCrop: !1,
cropBoxMovable: !1,
cropBoxResizable: !1,
zoom: -0.2,
checkImageOrigin: !0,
background: !1,
rotatable: !0,
},
},
},
// avatorUploader: {
// maxsize: 8192, // 奖品图片最大尺寸KBcropper: {
// cropper: {
// croppered_params: [], // 图片裁剪后的参数
// config: {
// dragMode: 'move',
// viewMode: 1,
// aspectRatio: 1,
// 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() {
......@@ -46,18 +46,18 @@ class CourseEditorForm extends React.Component {
payload: key,
});
}
uploadCourseCover = (e) => {
const { dispatch } = this.props;
const { avatorUploader } = this.state;
dispatch({
type: 'uploader/queryimgsignature',
payload: {
files: e.target,
uploadtype: 'coursecover',
avatorUploader,
},
});
}
// uploadCourseCover = (e) => {
// const { dispatch } = this.props;
// const { avatorUploader } = this.state;
// dispatch({
// type: 'uploader/queryimgsignature',
// payload: {
// files: e.target,
// uploadtype: 'coursecover',
// avatorUploader,
// },
// });
// }
handleSubmit = (e) => {
const { dispatch, course } = this.props;
e.preventDefault();
......@@ -67,7 +67,7 @@ class CourseEditorForm extends React.Component {
dispatch({
type: 'officialweb/courseinfopost',
payload: {
values: Object.assign(course, values),
values,
},
});
}
......@@ -90,51 +90,22 @@ class CourseEditorForm extends React.Component {
fontSize: '16px',
};
const formItemLayout = {
labelCol: { span: 5 },
labelCol: { span: 3 },
wrapperCol: { span: 19 },
};
return (
<div className={`${PageStyle.SchoolInfoEditorcontainer} SchoolInfoEditorcontainer`}>
<div className={PageStyle.header}>体验课设置</div>
<Form className={PageStyle.FormBox} onSubmit={this.handleSubmit} hideRequiredMark={() => true}>
<Form.Item label="体验课图片" colon={false} className={PageStyle.FormItemClass} {...formItemLayout}>
{course.cover == '' &&
<div className={PageStyle.fileuploadbox}>
<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字！' },
],
<Form.Item label="状态" className={PageStyle.FormItemClass} colon={false} {...formItemLayout}>
{getFieldDecorator('switch', {
initialValue: course.switch,
})(
<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>
<div className={PageStyle.divideLine} />
<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