Skip to content

M
mr-julyedu
Commit a9a3062b by FE
Options

course list start

parent 0add499d
Showing with 560 additions and 44 deletions
src/components/blessingPrehead/index.js deleted 100644 → 0
import React, { Component } from 'react';
import RulePopup from './rulePopup/index';
import CoursePopup from './coursePopup/index';
import './index.scss';
class BlessingPrehead extends Component {
constructor(props) {
super(props);
this.state = {
isRule: false,
isCourse: true
};
}
handleToHide = (key) => {
let obj = {};
obj[key] = false;
this.setState({
...obj
});
}
render() {
const { isRule, isCourse } = this.state;
return (
<div>
22222
{
isRule &&
<RulePopup handleToHide={() => this.handleToHide('isRule')} />
}
{
isCourse &&
<CoursePopup handleToHide={() => this.handleToHide('isCourse')} />
}
</div>
);
}
}
export default BlessingPrehead;
\ No newline at end of file
src/components/blessingPreheat/courseItem/index.js 0 → 100644
import React, { Component } from 'react';
import './index.scss';
class CourseItem extends Component {
render() {
const { image } = this.props;
return (
<div className="course-container">
<div className="course__cover">
<img src={image} alt="cover"/>
</div>
{this.props.children}
</div>
);
}
}
export default CourseItem;
\ No newline at end of file
src/components/blessingPreheat/courseItem/index.scss 0 → 100644
.course-container {
width: 168px;
// height: 156px;
margin: 0 4px 15px;
border-radius: 2px;
background-color: #fff;
}
.course__cover {
height: 108px;
padding: 4px 4px 0;
overflow: hidden;
img {
display: block;
width: 100%;
}
}
\ No newline at end of file
src/components/blessingPreheat/courseList/index.js 0 → 100644
import React, { Component } from 'react';
import classnames from 'classnames';
import { http } from '@/utils';
import listFrame from './../listFrame/index';
import CourseItem from './../courseItem/index';
import './index.scss';
class CourseList extends Component {
constructor(props) {
super(props);
this.state = {
basic: {
course: [],
courseList: [],
isMore: false,
},
advanced: {
course: [],
courseList: [],
isMore: false,
},
higher: {
course: [],
courseList: [],
isMore: false,
},
expand: {
course: [],
courseList: [],
isMore: false,
},
group: {
course: [],
courseList: [],
isMore: false,
},
training: {
course: [],
courseList: [],
isMore: false,
}
};
}
componentDidMount() {
// 精品课程-集训营、就业班/AI特训营
this.fetchCourseData();
// AI之路-基础
this.fetchAICourse('one');
// AI之路-进阶
this.fetchAICourse('two');
// AI之路-高阶
this.fetchAICourse('three');
// AI之路-拓展
this.fetchAICourse('four');
}
fetchAICourse = (key) => {
const { basic, advanced, higher, expand } = this.state;
http.get(`${API.home}/sys/ai_grow_up_courses/${key}`).then(res => {
const {code, data} = res.data;
if (code === 200) {
if (data.length > 4) {
if (key === 'one') {
this.setState({
basic: Object.assign({}, basic, {
isMore: true,
course: data.filter((item, index) => index < 4),
courseList: data,
})
});
}
if (key === 'two') {
this.setState({
advanced: Object.assign({}, advanced, {
isMore: true,
course: data.filter((item, index) => index < 4),
courseList: data,
})
});
}
if (key === 'three') {
this.setState({
higher: Object.assign({}, higher, {
isMore: true,
course: data.filter((item, index) => index < 4),
courseList: data,
})
});
}
if (key === 'four') {
this.setState({
expand: Object.assign({}, expand, {
isMore: true,
course: data.filter((item, index) => index < 4),
courseList: data,
})
});
}
} else {
if (key === 'one') {
this.setState({
basic: Object.assign({}, basic, {
isMore: false,
course: data,
courseList: data,
})
});
}
if (key === 'two') {
this.setState({
advanced: Object.assign({}, advanced, {
isMore: false,
course: data,
courseList: data,
})
});
}
if (key === 'three') {
this.setState({
higher: Object.assign({}, higher, {
isMore: false,
course: data,
courseList: data,
})
});
}
if (key === 'four') {
this.setState({
expand: Object.assign({}, expand, {
isMore: false,
course: data,
courseList: data,
})
});
}
}
}
});
}
fetchCourseData = () => {
const { group, training } = this.state;
http.get(`${API.home}/sys/preheat_data`).then(res => {
const {code, data} = res.data;
if (code === 200) {
if (data.excellent_course.length > 2) {
this.setState({
group: Object.assign({}, group, {
isMore: true,
course: data.excellent_course.filter((item, index) => index < 2),
courseList: data.excellent_course,
})
});
} else {
this.setState({
group: Object.assign({}, group, {
isMore: false,
course: data.excellent_course,
courseList: data.excellent_course,
})
});
}
if (data.ai_elite_courses.length > 2) {
this.setState({
training: Object.assign({}, training, {
isMore: true,
course: data.ai_elite_courses.filter((item, index) => index < 2),
courseList: data.ai_elite_courses,
})
});
} else {
this.setState({
training: Object.assign({}, training, {
isMore: false,
course: data.ai_elite_courses,
courseList: data.ai_elite_courses,
})
});
}
}
});
}
render() {
const { basic, advanced, higher, expand, group, training } = this.state;
return (
<div>
{/* 集训营、就业班 */}
{
(group.course && group.course.length > 0) &&
<>
<div data-layout="row">
{
group.course.map(item => (
<CourseItem image={item.image_name} key={item.course_id}>
<div className="coupon-course__footer">
<a href="" className="course-button">立抢超低团购价</a>
</div>
</CourseItem>
))
}
</div>
<button className="more-button">展开更多</button>
</>
}
{/* AI特训营 */}
{
(training.course && training.course.length > 0) &&
<>
<div data-layout="row">
{
training.course.map(item => (
<CourseItem image={item.image_name} key={item.course_id}>
<div className="coupon-course__footer">
<a href="" className={classnames("coupon-course__button", "coupon-course__button--receive")}>
<span className="coupon-course__button-price">
<em>¥200</em>
<i>代金券</i>
</span>
<span className="coupon-course__button-label">立即领券</span>
</a>
</div>
</CourseItem>
))
}
</div>
<button className="more-button">展开更多</button>
</>
}
{/* AI成长之路--基础 */}
{
(basic.course && basic.course.length > 0) &&
<>
<h4 className="ai-course__subtitle">基础</h4>
<div data-layout="row">
{
basic.course.map(item => (
<CourseItem image={item.image_name} key={item.course_id}>
{
item.type === 0 &&
<div className="coupon-course__footer">
<a href="" className={classnames("coupon-course__button", "coupon-course__button--receive")}>
<span className="coupon-course__button-price">
<em>¥200</em>
<i>代金券</i>
</span>
<span className="coupon-course__button-label">立即领券</span>
</a>
</div>
}
{
item.type === 1 &&
<div className="coupon-course__footer">
<a href="" className="course-button">1分钱开团</a>
</div>
}
</CourseItem>
))
}
</div>
<button className="more-button">展开更多</button>
</>
}
{/* AI成长之路--进阶 */}
{
(advanced.course && advanced.course.length > 0) &&
<>
<h4 className="ai-course__subtitle">进阶</h4>
<div data-layout="row">
{
advanced.course.map(item => (
<CourseItem image={item.image_name} key={item.course_id}>
{
item.type === 0 &&
<div className="coupon-course__footer">
<a href="" className={classnames("coupon-course__button", "coupon-course__button--receive")}>
<span className="coupon-course__button-price">
<em>¥200</em>
<i>代金券</i>
</span>
<span className="coupon-course__button-label">立即领券</span>
</a>
</div>
}
{
item.type === 1 &&
<div className="coupon-course__footer">
<a href="" className="course-button">1分钱开团</a>
</div>
}
</CourseItem>
))
}
</div>
<button className="more-button">展开更多</button>
</>
}
{/* AI成长之路--高阶 */}
{
(higher.course && higher.course.length > 0) &&
<>
<h4 className="ai-course__subtitle">高阶</h4>
<div data-layout="row">
{
higher.course.map(item => (
<CourseItem image={item.image_name} key={item.course_id}>
{
item.type === 0 &&
<div className="coupon-course__footer">
<a href="" className={classnames("coupon-course__button", "coupon-course__button--receive")}>
<span className="coupon-course__button-price">
<em>¥200</em>
<i>代金券</i>
</span>
<span className="coupon-course__button-label">立即领券</span>
</a>
</div>
}
{
item.type === 1 &&
<div className="coupon-course__footer">
<a href="" className="course-button">1分钱开团</a>
</div>
}
</CourseItem>
))
}
</div>
<button className="more-button">展开更多</button>
</>
}
{/* AI成长之路--扩展 */}
{
(expand.course && expand.course.length > 0) &&
<>
<h4 className="ai-course__subtitle">扩展</h4>
<div data-layout="row">
{
expand.course.map(item => (
<CourseItem image={item.image_name} key={item.course_id}>
{
item.type === 0 &&
<div className="coupon-course__footer">
<a href="" className={classnames("coupon-course__button", "coupon-course__button--receive")}>
<span className="coupon-course__button-price">
<em>¥200</em>
<i>代金券</i>
</span>
<span className="coupon-course__button-label">立即领券</span>
</a>
</div>
}
{
item.type === 1 &&
<div className="coupon-course__footer">
<a href="" className="course-button">1分钱开团</a>
</div>
}
</CourseItem>
))
}
</div>
<button className="more-button">展开更多</button>
</>
}
</div>
)
}
}
export default listFrame(CourseList);
\ No newline at end of file
src/components/blessingPreheat/courseList/index.scss 0 → 100644
.group-course__footer {
padding: 10px 0;
}
.course-button {
display: block;
width: 138px;
height: 24px;
margin: 0 auto;
border-radius: 2px;
font-size: 12px;
color: #fff;
text-align: center;
line-height: 24px;
background:linear-gradient(90deg,rgba(255,140,27,1) 0%,rgba(255,59,5,1) 100%);
}
.coupon-course__footer {
padding: 10px 0;
}
.coupon-course__button {
display: flex;
align-items: center;
width: 138px;
height: 34px;
margin: 0 auto;
font-size: 12px;
color: #fff;
text-align: center;
line-height: 1;
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/coupon-bg-0.png');
}
.coupon-course__button--receive {
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/coupon-bg-1.png');
}
.coupon-course__button-price {
flex: 1;
display: inline-flex;
flex-direction: column;
justify-content: center;
align-items: center;
i {
font-size: 8px;
font-style: normal;
}
}
.coupon-course__button-label {
width: 86px;
}
.more-button {
display: block;
width: 100px;
height: 27px;
margin: 0 auto 15px;
border: 1px solid #fff;
border-radius: 14px;
font-size: 13px;
font-weight: 300;
color: #fff;
background-color: transparent;
cursor: pointer;
outline: none;
}
.ai-course__subtitle {
width: 83px;
height: 24px;
margin: 0 auto 15px;
border-radius: 12px;
font-size: 14px;
font-weight: 500;
color: #fff;
text-align: center;
line-height: 24px;
background: linear-gradient(-90deg,rgba(46,206,240,1) 0%,rgba(45,86,240,1) 100%);
}
[data-layout="row"] {
display: flex;
flex-wrap: wrap;
}
\ No newline at end of file
src/components/blessingPreheat/index.js
import React, { Component } from 'react'
import RulePopup from './rulePopup/index'
import CoursePopup from './coursePopup/index'
import CourseList from './courseList/index';
import './index.scss'
import { Popup } from '@/common'
......@@ -10,7 +11,7 @@ class BlessingPreheat extends Component {
this.state = {
isRule: false,
isCourse: false,
inviteVisible: true
inviteVisible: false
}
}
......@@ -26,7 +27,10 @@ class BlessingPreheat extends Component {
const {isRule, isCourse, inviteVisible} = this.state
return (
<div id={'blessing-preheat'}>
22222
4444
<CourseList></CourseList>
{
isRule &&
<RulePopup handleToHide={() => this.handleToHide('isRule')}/>
......
src/components/blessingPreheat/listFrame/index.js 0 → 100644
import React, { Component } from 'react';
import './index.scss';
function ListFrame(WrappedComponent) {
return class extends Component {
render() {
return (
<div className="list-frame">
<div className="list-frame__content">
<WrappedComponent />
33333
</div>
</div>
)
}
};
}
export default ListFrame;
src/components/blessingPreheat/listFrame/index.scss 0 → 100644
.list-frame {
margin: 0 10px;
border: 1px solid #5970FF;
border-radius: 5px;
background-color: #3900C9;
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/frame-bg-top.png');
background-repeat: no-repeat;
}
.list-frame__content {
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/frame-bg-bottom.png');
background-repeat: no-repeat;
background-position: bottom right;
}
\ 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