Skip to content

M
mr-julyedu
Commit 9382a577 by FE
Options

rule

parent 95559575
Showing with 345 additions and 26 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 {
}
render() {
const { isFormal } = this.props;
const { basic, advanced, higher, expand, group, training } = this.state;
return (
<div className="boutique-course">
......@@ -311,7 +312,7 @@ class CourseList extends Component {
}
{
item.course_status === 2 &&
(!isFormal && item.course_status === 2) &&
<a className="coupon-course__button">
<span className="coupon-course__button-price">
<em>¥{item.coupon}</em>
......@@ -320,6 +321,24 @@ class CourseList extends Component {
<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>
</CourseItem>
))
......@@ -347,19 +366,61 @@ class CourseList extends Component {
{
item.type === 0 &&
<div className="coupon-course__footer">
<a href="" className={classnames("coupon-course__button", "coupon-course__button--receive")}>
{
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>¥200</em>
<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>
}
{
item.type === 1 &&
<div className="coupon-course__footer">
<div className="cent-course__footer">
{
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>
}
</CourseItem>
......@@ -387,19 +448,61 @@ class CourseList extends Component {
{
item.type === 0 &&
<div className="coupon-course__footer">
<a href="" className={classnames("coupon-course__button", "coupon-course__button--receive")}>
{
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>¥200</em>
<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>
}
{
item.type === 1 &&
<div className="coupon-course__footer">
<div className="cent-course__footer">
{
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>
}
</CourseItem>
......@@ -427,19 +530,61 @@ class CourseList extends Component {
{
item.type === 0 &&
<div className="coupon-course__footer">
<a href="" className={classnames("coupon-course__button", "coupon-course__button--receive")}>
{
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>¥200</em>
<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>
}
{
item.type === 1 &&
<div className="coupon-course__footer">
<div className="cent-course__footer">
{
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>
}
</CourseItem>
......@@ -467,19 +612,61 @@ class CourseList extends Component {
{
item.type === 0 &&
<div className="coupon-course__footer">
<a href="" className={classnames("coupon-course__button", "coupon-course__button--receive")}>
{
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>¥200</em>
<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>
}
{
item.type === 1 &&
<div className="coupon-course__footer">
<div className="cent-course__footer">
{
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>
}
</CourseItem>
......
src/components/blessingPreheat/courseList/index.scss
......@@ -2,10 +2,6 @@
padding-bottom: 5px;
}
.group-course__footer {
padding: 10px 0;
}
.course-button {
display: block;
width: 138px;
......@@ -16,11 +12,23 @@
color: #fff;
text-align: center;
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 {
padding: 10px 0;
.course-button {
margin: 5px auto 0;
}
}
.cent-course__footer {
padding: 15px 0 10px;
}
.coupon-course__button {
......
src/components/blessingPreheat/index.js
......@@ -4,6 +4,7 @@ import RulePopup from './rulePopup/index'
import CoursePopup from './coursePopup/index'
import CourseList from './courseList/index';
import LuckDraw from './luckDraw/index';
import CollectBlessing from './collectBlessing/index';
import ReserveCourse from './ReserveCourse/index';
import ListHeader from './listHeader/index';
import './index.scss'
......@@ -48,26 +49,43 @@ class BlessingPreheat extends Component {
})
}
handleToShowList = () => {
console.log(0);
this.setState({
isCourse: true
});
}
onCopy = () => {
Toast.info('复制成功', 2,null,false)
}
render() {
const {isRule, isCourse, inviteVisible} = this.state
const {isRule, isCourse, inviteVisible, isFormal} = this.state
return (
<div id={'blessing-preheat'}>
{/* 积福气 */}
<ListHeader text="积福气，享受更多福利" styles={{margin: '0 0 15px'}} />
<CollectBlessing handleToShowList={this.handleToShowList} />
{/* 幸运大抽奖--预热 */}
<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 />
{/*定金--只在预热期间显示*/}
{
isFormal &&
<>
<ListHeader text="预付1元定金，最高可省100元" styles={{margin: '0 0 15px'}} />
<ReserveCourse/>
</>
}
{/* 精品课程特惠专区 */}
<ListHeader text="精品课程特惠专区" styles={{margin: '0 0 15px'}} />
<CourseList></CourseList>
<CourseList isFormal={isFormal} />
{
isRule &&
<RulePopup handleToHide={() => this.handleToHide('isRule')}/>
......
src/components/blessingPreheat/index.scss
......@@ -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) {
return (
<div className="list-frame">
<div className="list-frame__content">
<WrappedComponent />
<WrappedComponent {...this.props}/>
</div>
</div>
)
......
src/components/detail/deposit/index.scss
......@@ -13,7 +13,7 @@
width: 100%;
height: 70px;
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 {
width: 104px;
......
src/components/expand/share.js
......@@ -23,8 +23,8 @@ class ExpandShare extends Component {
this.getCourseList()
wxShare({
title: '七月在线4岁啦，80元红包等你来拿！',
desc: '重磅好课1元购，大奖、红包轰趴7天7夜',
title: 'AI充电节，预热来袭！80元红包送你，手要快！',
desc: '重磅好课1折秒，超10万元奖品来就送',
link: window.location.href,
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