Skip to content

M
mr-julyedu
Commit 9382a577 by FE
Options

rule

parent 95559575
Showing with 371 additions and 52 deletions
src/components/blessingPreheat/collectBlessing/index.js 0 → 100644
import React, { Component } from 'react';
import ListFrame from './../listFrame/index';
import ListHeader from './../listHeader';
import './index.scss';
class CollectBlessing extends Component {
constructor(props) {
super(props);
this.state = {
rules: [
'app、h5、pc端活动页签到+5点福气值（每天一次）',
'关注七月在线微信服务号+30点福气值（仅限一次）',
'分享活动页到朋友圈、qq，分别+2点福气值（每个平台每天一次）',
'浏览指定课程详情页，一门课程+2点福气值（每天一次）',
'邀请好友注册，+10点福气值/人（无上限）',
'活动期间每购买一门课程+20点福气值',
]
};
}
render() {
const { handleToShowList } = this.props;
const { rules } = this.state;
return (
<div className="collect-blessing">
<ListHeader text="福气值积攒规则" size="middle" styles={{}} />
{
rules.map((item, index) => (
<div className="collect-blessing__item" key={index}>
<i className="collect-blessing__num">{index+1}</i>
<p className="collect-blessing__title">{item}</p>
<a className="collect-blessing__content" onClick={handleToShowList}>
浏览课程<br/>详情页
</a>
</div>
))
}
</div>
)
}
}
export default ListFrame(CollectBlessing);
\ No newline at end of file
src/components/blessingPreheat/collectBlessing/index.scss 0 → 100644
.collect-blessing {
padding-bottom: 30px;
}
.collect-blessing__item {
display: flex;
align-items: center;
position: relative;
width: 335px;
height: 60px;
margin: 20px auto 0;
border-radius: 5px;
background-color: #fff;
}
.collect-blessing__num {
position: absolute;
top: 0;
left: 0;
width: 25px;
height: 25px;
padding-left: 6px;
box-sizing: border-box;
font-size: 12px;
font-style: normal;
font-weight: bold;
color: #FFFFFD;
line-height: 21px;
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/blessing-number-bg.png');
background-size: cover;
}
.collect-blessing__title {
flex: 1;
padding: 0 8px 0 24px;
font-size: 12px;
color: #333;
line-height: 18px;
}
.collect-blessing__content {
display: inline-flex;
align-items: center;
justify-content: center;
width: 64px;
height: 100%;
border-radius: 5px;
font-size: 12px;
color: #fff;
text-align: center;
background: linear-gradient(-40deg,rgba(255,75,240,1) 0%,rgba(162,0,255,1) 100%);
}
\ No newline at end of file
src/components/blessingPreheat/courseList/index.js
...@@ -258,6 +258,7 @@ class CourseList extends Component { ...@@ -258,6 +258,7 @@ class CourseList extends Component {
} }
render() { render() {
const { isFormal } = this.props;
const { basic, advanced, higher, expand, group, training } = this.state; const { basic, advanced, higher, expand, group, training } = this.state;
return ( return (
<div className="boutique-course"> <div className="boutique-course">
...@@ -311,7 +312,7 @@ class CourseList extends Component { ...@@ -311,7 +312,7 @@ class CourseList extends Component {
} }
{ {
item.course_status === 2 && (!isFormal && item.course_status === 2) &&
<a className="coupon-course__button"> <a className="coupon-course__button">
<span className="coupon-course__button-price"> <span className="coupon-course__button-price">
<em>¥{item.coupon}</em> <em>¥{item.coupon}</em>
...@@ -320,6 +321,24 @@ class CourseList extends Component { ...@@ -320,6 +321,24 @@ class CourseList extends Component {
<span className="coupon-course__button-label">11.11开始使用</span> <span className="coupon-course__button-label">11.11开始使用</span>
</a> </a>
} }
{
(isFormal && item.course_status === 2) &&
<Link to={`/detail?id=${item.course_id}`} className="coupon-course__button">
<span className="coupon-course__button-price">
<em>¥{item.coupon}</em>
<i>代金券</i>
</span>
<span className="coupon-course__button-label">开始使用</span>
</Link>
}
{
item.course_status === 3 &&
<Link
to={`/detail?id=${item.course_id}`}
className="course-button"
data-type="study"
>开始学习</Link>
}
</div> </div>
</CourseItem> </CourseItem>
)) ))
...@@ -347,19 +366,61 @@ class CourseList extends Component { ...@@ -347,19 +366,61 @@ class CourseList extends Component {
{ {
item.type === 0 && item.type === 0 &&
<div className="coupon-course__footer"> <div className="coupon-course__footer">
<a href="" className={classnames("coupon-course__button", "coupon-course__button--receive")}> {
<span className="coupon-course__button-price"> item.course_status === 1 &&
<em>¥200</em> <a
<i>代金券</i> className={classnames("coupon-course__button", "coupon-course__button--receive")}
</span> onClick={() => this.toReceiveCoupon(item.course_id, 'training')}
<span className="coupon-course__button-label">立即领券</span> >
</a> <span className="coupon-course__button-price">
<em>¥{item.coupon}</em>
<i>代金券</i>
</span>
<span className="coupon-course__button-label">立即领券</span>
</a>
}
{
(!isFormal && 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>
}
{
(isFormal && item.course_status === 2) &&
<Link to={`/detail?id=${item.course_id}`} className="coupon-course__button">
<span className="coupon-course__button-price">
<em>¥{item.coupon}</em>
<i>代金券</i>
</span>
<span className="coupon-course__button-label">开始使用</span>
</Link>
}
{
item.course_status === 3 &&
<Link
to={`/detail?id=${item.course_id}`}
className="course-button"
data-type="study"
>开始学习</Link>
}
</div> </div>
} }
{ {
item.type === 1 && item.type === 1 &&
<div className="coupon-course__footer"> <div className="cent-course__footer">
<Link to={`/detail?id=${item.course_id}`} className="course-button">1分钱开团</Link> {
item.course_status === 1 &&
<Link to={`/detail?id=${item.course_id}`} className="course-button">1分钱开团</Link>
}
{
item.course_status === 3 &&
<Link to={`/detail?id=${item.course_id}`} className="course-button" data-type="study">开始学习</Link>
}
</div> </div>
} }
</CourseItem> </CourseItem>
...@@ -387,19 +448,61 @@ class CourseList extends Component { ...@@ -387,19 +448,61 @@ class CourseList extends Component {
{ {
item.type === 0 && item.type === 0 &&
<div className="coupon-course__footer"> <div className="coupon-course__footer">
<a href="" className={classnames("coupon-course__button", "coupon-course__button--receive")}> {
<span className="coupon-course__button-price"> item.course_status === 1 &&
<em>¥200</em> <a
<i>代金券</i> className={classnames("coupon-course__button", "coupon-course__button--receive")}
</span> onClick={() => this.toReceiveCoupon(item.course_id, 'training')}
<span className="coupon-course__button-label">立即领券</span> >
</a> <span className="coupon-course__button-price">
<em>¥{item.coupon}</em>
<i>代金券</i>
</span>
<span className="coupon-course__button-label">立即领券</span>
</a>
}
{
(!isFormal && 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>
}
{
(isFormal && item.course_status === 2) &&
<Link to={`/detail?id=${item.course_id}`} className="coupon-course__button">
<span className="coupon-course__button-price">
<em>¥{item.coupon}</em>
<i>代金券</i>
</span>
<span className="coupon-course__button-label">开始使用</span>
</Link>
}
{
item.course_status === 3 &&
<Link
to={`/detail?id=${item.course_id}`}
className="course-button"
data-type="study"
>开始学习</Link>
}
</div> </div>
} }
{ {
item.type === 1 && item.type === 1 &&
<div className="coupon-course__footer"> <div className="cent-course__footer">
<Link to={`/detail?id=${item.course_id}`} className="course-button">1分钱开团</Link> {
item.course_status === 1 &&
<Link to={`/detail?id=${item.course_id}`} className="course-button">1分钱开团</Link>
}
{
item.course_status === 3 &&
<Link to={`/detail?id=${item.course_id}`} className="course-button" data-type="study">开始学习</Link>
}
</div> </div>
} }
</CourseItem> </CourseItem>
...@@ -427,19 +530,61 @@ class CourseList extends Component { ...@@ -427,19 +530,61 @@ class CourseList extends Component {
{ {
item.type === 0 && item.type === 0 &&
<div className="coupon-course__footer"> <div className="coupon-course__footer">
<a href="" className={classnames("coupon-course__button", "coupon-course__button--receive")}> {
<span className="coupon-course__button-price"> item.course_status === 1 &&
<em>¥200</em> <a
<i>代金券</i> className={classnames("coupon-course__button", "coupon-course__button--receive")}
</span> onClick={() => this.toReceiveCoupon(item.course_id, 'training')}
<span className="coupon-course__button-label">立即领券</span> >
</a> <span className="coupon-course__button-price">
<em>¥{item.coupon}</em>
<i>代金券</i>
</span>
<span className="coupon-course__button-label">立即领券</span>
</a>
}
{
(!isFormal && 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>
}
{
(isFormal && item.course_status === 2) &&
<Link to={`/detail?id=${item.course_id}`} className="coupon-course__button">
<span className="coupon-course__button-price">
<em>¥{item.coupon}</em>
<i>代金券</i>
</span>
<span className="coupon-course__button-label">开始使用</span>
</Link>
}
{
item.course_status === 3 &&
<Link
to={`/detail?id=${item.course_id}`}
className="course-button"
data-type="study"
>开始学习</Link>
}
</div> </div>
} }
{ {
item.type === 1 && item.type === 1 &&
<div className="coupon-course__footer"> <div className="cent-course__footer">
<Link to={`/detail?id=${item.course_id}`} className="course-button">1分钱开团</Link> {
item.course_status === 1 &&
<Link to={`/detail?id=${item.course_id}`} className="course-button">1分钱开团</Link>
}
{
item.course_status === 3 &&
<Link to={`/detail?id=${item.course_id}`} className="course-button" data-type="study">开始学习</Link>
}
</div> </div>
} }
</CourseItem> </CourseItem>
...@@ -467,19 +612,61 @@ class CourseList extends Component { ...@@ -467,19 +612,61 @@ class CourseList extends Component {
{ {
item.type === 0 && item.type === 0 &&
<div className="coupon-course__footer"> <div className="coupon-course__footer">
<a href="" className={classnames("coupon-course__button", "coupon-course__button--receive")}> {
<span className="coupon-course__button-price"> item.course_status === 1 &&
<em>¥200</em> <a
<i>代金券</i> className={classnames("coupon-course__button", "coupon-course__button--receive")}
</span> onClick={() => this.toReceiveCoupon(item.course_id, 'training')}
<span className="coupon-course__button-label">立即领券</span> >
</a> <span className="coupon-course__button-price">
<em>¥{item.coupon}</em>
<i>代金券</i>
</span>
<span className="coupon-course__button-label">立即领券</span>
</a>
}
{
(!isFormal && 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>
}
{
(isFormal && item.course_status === 2) &&
<Link to={`/detail?id=${item.course_id}`} className="coupon-course__button">
<span className="coupon-course__button-price">
<em>¥{item.coupon}</em>
<i>代金券</i>
</span>
<span className="coupon-course__button-label">开始使用</span>
</Link>
}
{
item.course_status === 3 &&
<Link
to={`/detail?id=${item.course_id}`}
className="course-button"
data-type="study"
>开始学习</Link>
}
</div> </div>
} }
{ {
item.type === 1 && item.type === 1 &&
<div className="coupon-course__footer"> <div className="cent-course__footer">
<Link to={`/detail?id=${item.course_id}`} className="course-button">1分钱开团</Link> {
item.course_status === 1 &&
<Link to={`/detail?id=${item.course_id}`} className="course-button">1分钱开团</Link>
}
{
item.course_status === 3 &&
<Link to={`/detail?id=${item.course_id}`} className="course-button" data-type="study">开始学习</Link>
}
</div> </div>
} }
</CourseItem> </CourseItem>
......
src/components/blessingPreheat/courseList/index.scss
...@@ -2,10 +2,6 @@ ...@@ -2,10 +2,6 @@
padding-bottom: 5px; padding-bottom: 5px;
} }
.group-course__footer {
padding: 10px 0;
}
.course-button { .course-button {
display: block; display: block;
width: 138px; width: 138px;
...@@ -16,11 +12,23 @@ ...@@ -16,11 +12,23 @@
color: #fff; color: #fff;
text-align: center; text-align: center;
line-height: 24px; line-height: 24px;
background:linear-gradient(90deg,rgba(255,140,27,1) 0%,rgba(255,59,5,1) 100%); background: linear-gradient(90deg,rgba(255,140,27,1) 0%,rgba(255,59,5,1) 100%);
&[data-type="study"] {
background: linear-gradient(269deg,rgba(7,240,255,1) 0%,rgba(0,153,255,1) 100%);
}
} }
.coupon-course__footer { .coupon-course__footer {
padding: 10px 0; padding: 10px 0;
.course-button {
margin: 5px auto 0;
}
}
.cent-course__footer {
padding: 15px 0 10px;
} }
.coupon-course__button { .coupon-course__button {
......
src/components/blessingPreheat/index.js
...@@ -4,6 +4,7 @@ import RulePopup from './rulePopup/index' ...@@ -4,6 +4,7 @@ import RulePopup from './rulePopup/index'
import CoursePopup from './coursePopup/index' import CoursePopup from './coursePopup/index'
import CourseList from './courseList/index'; import CourseList from './courseList/index';
import LuckDraw from './luckDraw/index'; import LuckDraw from './luckDraw/index';
import CollectBlessing from './collectBlessing/index';
import ReserveCourse from './ReserveCourse/index'; import ReserveCourse from './ReserveCourse/index';
import ListHeader from './listHeader/index'; import ListHeader from './listHeader/index';
import './index.scss' import './index.scss'
...@@ -48,26 +49,43 @@ class BlessingPreheat extends Component { ...@@ -48,26 +49,43 @@ class BlessingPreheat extends Component {
}) })
} }
handleToShowList = () => {
console.log(0);
this.setState({
isCourse: true
});
}
onCopy = () => { onCopy = () => {
Toast.info('复制成功', 2,null,false) Toast.info('复制成功', 2,null,false)
} }
render() { render() {
const {isRule, isCourse, inviteVisible} = this.state const {isRule, isCourse, inviteVisible, isFormal} = this.state
return ( return (
<div id={'blessing-preheat'}> <div id={'blessing-preheat'}>
{/* 积福气 */}
<ListHeader text="积福气，享受更多福利" styles={{margin: '0 0 15px'}} />
<CollectBlessing handleToShowList={this.handleToShowList} />
{/* 幸运大抽奖--预热 */} {/* 幸运大抽奖--预热 */}
<ListHeader text="幸运大抽奖" styles={{margin: '0 0 15px'}} /> <ListHeader text="幸运大抽奖" styles={{margin: '0 0 15px'}} />
<LuckDraw></LuckDraw> <p className="luck-draw__tip">- 将于11月11日10点开启 -</p>
<button className="luck-draw__button">活动规则></button>
<LuckDraw />
{/*定金--只在预热期间显示*/} {/*定金--只在预热期间显示*/}
<ListHeader text="预付1元定金，最高可省100元" styles={{margin: '0 0 15px'}} /> {
<ReserveCourse/> isFormal &&
<>
<ListHeader text="预付1元定金，最高可省100元" styles={{margin: '0 0 15px'}} />
<ReserveCourse/>
</>
}
{/* 精品课程特惠专区 */} {/* 精品课程特惠专区 */}
<ListHeader text="精品课程特惠专区" styles={{margin: '0 0 15px'}} /> <ListHeader text="精品课程特惠专区" styles={{margin: '0 0 15px'}} />
<CourseList></CourseList> <CourseList isFormal={isFormal} />
{ {
isRule && isRule &&
<RulePopup handleToHide={() => this.handleToHide('isRule')}/> <RulePopup handleToHide={() => this.handleToHide('isRule')}/>
......
src/components/blessingPreheat/index.scss
...@@ -99,3 +99,9 @@ ...@@ -99,3 +99,9 @@
} }
} }
} }
// 幸运大抽奖--预热
.luck-draw__tip {
font-size: 12px;
color: #FFF604;
}
src/components/blessingPreheat/listFrame/index.js
...@@ -8,7 +8,7 @@ function ListFrame(WrappedComponent) { ...@@ -8,7 +8,7 @@ function ListFrame(WrappedComponent) {
return ( return (
<div className="list-frame"> <div className="list-frame">
<div className="list-frame__content"> <div className="list-frame__content">
<WrappedComponent /> <WrappedComponent {...this.props}/>
</div> </div>
</div> </div>
) )
......
src/components/detail/deposit/index.scss
...@@ -13,7 +13,7 @@ ...@@ -13,7 +13,7 @@
width: 100%; width: 100%;
height: 70px; height: 70px;
background-size: cover; background-size: cover;
background-image: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/detail-expand-bg.png"); background-image: url("https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/detail-expand-bg.png");
.four-year { .four-year {
width: 104px; width: 104px;
......
src/components/expand/share.js
...@@ -23,8 +23,8 @@ class ExpandShare extends Component { ...@@ -23,8 +23,8 @@ class ExpandShare extends Component {
this.getCourseList() this.getCourseList()
wxShare({ wxShare({
title: '七月在线4岁啦，80元红包等你来拿！', title: 'AI充电节，预热来袭！80元红包送你，手要快！',
desc: '重磅好课1元购，大奖、红包轰趴7天7夜', desc: '重磅好课1折秒，超10万元奖品来就送',
link: window.location.href, link: window.location.href,
imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/717/shareimg.png', imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_717/m/717/shareimg.png',
}) })
......
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