Skip to content

M
mr-julyedu
Commit a4ed1bc9 by FE
Options

add luck-draw

parent c037c8c5
Showing with 358 additions and 33 deletions
src/components/blessingPreheat/courseList/index.js
import React, { Component } from 'react';
import classnames from 'classnames';
import { Link } from "react-router-dom";
import { http } from '@/utils';
import listFrame from './../listFrame/index';
import { Toast } from "antd-mobile";
import ListFrame from './../listFrame/index';
import CourseItem from './../courseItem/index';
import ListHeader from './../listHeader';
import './index.scss';
......@@ -188,10 +190,77 @@ class CourseList extends Component {
});
}
handleToMore = (key) => {
let data = {};
if(this.state[key]['isMore']) {
data[key] = {
isMore: !this.state[key]['isMore'],
course: this.state[key]['courseList'],
courseList: this.state[key]['courseList']
};
this.setState({
...data
});
}else {
if(key === 'group' || key === 'training') {
data[key] = {
isMore: !this.state[key]['isMore'],
course: this.state[key]['courseList'].filter((item, index) => index < 2),
courseList: this.state[key]['courseList']
};
}else {
data[key] = {
isMore: !this.state[key]['isMore'],
course: this.state[key]['courseList'].filter((item, index) => index < 4),
courseList: this.state[key]['courseList']
};
}
this.setState({
...data
});
}
}
toReceiveCoupon(id, key = '') {
http.post(`${API.home}/sys/activity/coupon/receive`, {
course_id: id
}).then(res => {
const { code, msg } = res.data;
if(code === 200) {
Toast.info('领取成功～', 2, null, false);
let obj = {};
obj[key] = {
isMore: this.state[key]['isMore'],
course: this.state[key]['course'].map(item => {
if(item.course_id === id) {
return Object.assign({}, item, {
course_status: 2
});
}
return item;
}),
courseList: this.state[key]['courseList'].map(item => {
if(item.course_id === id) {
return Object.assign({}, item, {
course_status: 2
});
}
return item;
}),
}
this.setState({
...obj
});
} else {
Toast.info(msg, 2, null, false);
}
});
}
render() {
const { basic, advanced, higher, expand, group, training } = this.state;
return (
<div>
<div className="boutique-course">
<ListHeader text="集训营、就业班" size="middle" styles={{margin: '20px 0 15px'}} />
{/* 集训营、就业班 */}
{
......@@ -202,13 +271,18 @@ class CourseList extends Component {
group.course.map(item => (
<CourseItem image={item.image_name} key={item.course_id}>
<div className="coupon-course__footer">
<a href="" className="course-button">立抢超低团购价</a>
<a href="https://q.url.cn/AB8aue?_type=wpa&qidian=true" className="course-button">立抢超低团购价</a>
</div>
</CourseItem>
))
}
</div>
<button className="more-button">展开更多</button>
{
(group.courseList && group.courseList.length > 2) &&
<button className="more-button" onClick={() => this.handleToMore('group')}>
{group.isMore? '展开更多' : '收起'}
</button>
}
</>
}
......@@ -222,23 +296,46 @@ class CourseList extends Component {
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>
{
item.course_status === 1 &&
<a
className={classnames("coupon-course__button", "coupon-course__button--receive")}
onClick={() => this.toReceiveCoupon(item.course_id, 'training')}
>
<span className="coupon-course__button-price">
<em>¥{item.coupon}</em>
<i>代金券</i>
</span>
<span className="coupon-course__button-label">立即领券</span>
</a>
}
{
item.course_status === 2 &&
<a className="coupon-course__button">
<span className="coupon-course__button-price">
<em>¥{item.coupon}</em>
<i>代金券</i>
</span>
<span className="coupon-course__button-label">11.11开始使用</span>
</a>
}
</div>
</CourseItem>
))
}
</div>
<button className="more-button">展开更多</button>
{
(training.courseList && training.courseList.length > 2) &&
<button className="more-button" onClick={() => this.handleToMore('training')}>
{training.isMore? '展开更多' : '收起'}
</button>
}
</>
}
{/* AI成长之路--基础 */}
<ListHeader text="AI成长之路" size="middle" styles={{margin: '0 0 15px'}} />
{
(basic.course && basic.course.length > 0) &&
<>
......@@ -262,14 +359,19 @@ class CourseList extends Component {
{
item.type === 1 &&
<div className="coupon-course__footer">
<a href="" className="course-button">1分钱开团</a>
<Link to={`/detail?id=${item.course_id}`} className="course-button">1分钱开团</Link>
</div>
}
</CourseItem>
))
}
</div>
<button className="more-button">展开更多</button>
{
(basic.courseList && basic.courseList.length > 4) &&
<button className="more-button" onClick={() => this.handleToMore('basic')}>
{basic.isMore? '展开更多' : '收起'}
</button>
}
</>
}
......@@ -297,14 +399,19 @@ class CourseList extends Component {
{
item.type === 1 &&
<div className="coupon-course__footer">
<a href="" className="course-button">1分钱开团</a>
<Link to={`/detail?id=${item.course_id}`} className="course-button">1分钱开团</Link>
</div>
}
</CourseItem>
))
}
</div>
<button className="more-button">展开更多</button>
{
(advanced.courseList && advanced.courseList.length > 4) &&
<button className="more-button" onClick={() => this.handleToMore('advanced')}>
{advanced.isMore? '展开更多' : '收起'}
</button>
}
</>
}
......@@ -332,14 +439,19 @@ class CourseList extends Component {
{
item.type === 1 &&
<div className="coupon-course__footer">
<a href="" className="course-button">1分钱开团</a>
<Link to={`/detail?id=${item.course_id}`} className="course-button">1分钱开团</Link>
</div>
}
</CourseItem>
))
}
</div>
<button className="more-button">展开更多</button>
{
(higher.courseList && higher.courseList.length > 4) &&
<button className="more-button" onClick={() => this.handleToMore('higher')}>
{higher.isMore? '展开更多' : '收起'}
</button>
}
</>
}
......@@ -367,27 +479,24 @@ class CourseList extends Component {
{
item.type === 1 &&
<div className="coupon-course__footer">
<a href="" className="course-button">1分钱开团</a>
<Link to={`/detail?id=${item.course_id}`} className="course-button">1分钱开团</Link>
</div>
}
</CourseItem>
))
}
</div>
<button className="more-button">展开更多</button>
{
(expand.courseList && expand.courseList.length > 4) &&
<button className="more-button" onClick={() => this.handleToMore('expand')}>
{expand.isMore? '展开更多' : '收起'}
</button>
}
</>
}
</div>
)
}
}
export default listFrame(CourseList);
\ No newline at end of file
export default ListFrame(CourseList);
\ No newline at end of file
src/components/blessingPreheat/courseList/index.scss
.boutique-course {
padding-bottom: 5px;
}
.group-course__footer {
padding: 10px 0;
}
......@@ -59,11 +63,13 @@
width: 100px;
height: 27px;
margin: 0 auto 15px;
padding: 0;
border: 1px solid #fff;
border-radius: 14px;
font-size: 13px;
font-weight: 300;
color: #fff;
line-height: 27px;
background-color: transparent;
cursor: pointer;
outline: none;
......
src/components/blessingPreheat/index.js
import React, { Component } from 'react'
import React, { Component } from 'react';
import { http } from '@/utils';
import RulePopup from './rulePopup/index'
import CoursePopup from './coursePopup/index'
import CourseList from './courseList/index';
import LuckDraw from './luckDraw/index';
import ListHeader from './listHeader/index';
import './index.scss'
import { Popup } from '@/common'
......@@ -17,10 +19,26 @@ class BlessingPreheat extends Component {
isCourse: false,
inviteVisible: false,
joinLotteryVisible: false,
timelineShareVisible: false
timelineShareVisible: false,
isFormal: false, // 1正式 0 预热
}
}
componentDidMount() {
this.fetchUserBlessing();
}
fetchUserBlessing() {
http.get(`${API.home}/sys/user/blessing`).then(res => {
const { code, data } = res.data;
if(code === 200) {
this.setState({
isFormal: data.is_activity
});
}
});
}
handleToHide = (key) => {
let obj = {}
obj[key] = false
......@@ -37,6 +55,9 @@ class BlessingPreheat extends Component {
const {isRule, isCourse, inviteVisible} = this.state
return (
<div id={'blessing-preheat'}>
{/* 幸运大抽奖--预热 */}
<ListHeader text="幸运大抽奖" styles={{margin: '0 0 15px'}} />
<LuckDraw></LuckDraw>
{/* 精品课程特惠专区 */}
......
src/components/blessingPreheat/listFrame/index.js
......@@ -9,7 +9,6 @@ function ListFrame(WrappedComponent) {
<div className="list-frame">
<div className="list-frame__content">
<WrappedComponent />
33333
</div>
</div>
)
......
src/components/blessingPreheat/luckDraw/index.js 0 → 100644
import React, { Component } from 'react';
import { http } from '@/utils';
import { Tabs } from 'antd-mobile';
import ListFrame from './../listFrame/index';
import './index.scss';
class LuckDraw extends Component {
constructor(props) {
super(props);
this.state = {
tabs: [],
prizes: []
};
}
componentDidMount() {
this.fetchActivityPrize();
}
fetchActivityPrize = () => {
http.get(`${API.home}/sys/activity/prize_data`).then(res => {
const { code , data: { list = [] } } = res.data;
if(code === 200) {
this.setState({
tabs: list.map(item => {
return {
title: item.date
}
}),
prizes: list
});
}
});
}
render() {
const { tabs, prizes } = this.state;
return (
<div className="luck-draw__container">
<Tabs
tabs={tabs}
tabBarBackgroundColor="transparent"
tabBarUnderlineStyle={{
display: 'none'
}}
>
{
prizes.map(({ son }, index) => {
return (
<div className="tab__body" key={index}>
{
son.map(val => (
<div key={val.id}>
<h2 className="prize__label">
<i className="prize__label-icon"></i>
<span>{val.time}</span>
</h2>
<div className="prize__content">
{
val.data.map((v, k) => (
<div className="prize__container" key={`${val.id}-${k}`}>
<div className="prize__image">
<img src={v.img} alt="image"/>
</div>
<p className="prize__desc">{v.name}</p>
<p className="prize__desc">（{v.num}数量）</p>
</div>
))
}
</div>
</div>
))
}
</div>
)
})
}
</Tabs>
</div>
)
}
}
export default ListFrame(LuckDraw);
\ No newline at end of file
src/components/blessingPreheat/luckDraw/index.scss 0 → 100644
.am-tabs {
width: 330px;
margin: 0 auto;
color: #fff;
.am-tabs-tab-bar-wrap {
height: 33px;
border: 1px solid rgba(255, 246, 4, 1);
border-radius: 0 0 6px 6px;
.am-tabs-default-bar {
.am-tabs-default-bar-tab:nth-of-type(3) {
&::after {
display: none;
}
}
.am-tabs-default-bar-tab {
height: auto;
line-height: 1;
&::after {
content: '';
display: block;
position: absolute;
right: 0;
left: unset;
top: 50%;
margin-top: -7px;
width: 1px !important;
height: 14px;
background: #FFF604;
transform: none;
}
}
.am-tabs-default-bar-tab-active {
background: #FFF604;
border-radius: 0 0 6px 6px;
}
}
}
}
.tab__body {
padding-bottom: 19px;
}
.prize__label {
display: flex;
align-items: center;
justify-content: center;
width: 125px;
height: 24px;
margin: 20px auto 0;
border-radius: 12px;
font-size: 12px;
font-weight: 500;
color: #fff;
background: linear-gradient(269deg,rgba(7,240,255,1) 0%,rgba(0,153,255,1) 100%);
}
.prize__label-icon {
width: 12px;
height: 14px;
margin-right: 7px;
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/icon-clock.png');
background-size: cover;
}
.prize__content {
display: flex;
flex-wrap: nowrap;
padding: 10px 7px 0;
overflow-y: auto;
}
.prize__image {
width: 100px;
height: 78px;
margin: 0 3px 10px;
padding: 2px;
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/prize-border.png');
background-size: cover;
overflow: hidden;
img {
display: block;
width: 100%;
height: 100%;
}
}
.prize__desc {
width: 100px;
font-size: 12px;
color: #fff;
white-space: nowrap;
text-overflow: ellipsis;
text-align: center;
line-height: 15px;
overflow: hidden;
}
\ 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