Skip to content

M
mr-julyedu
Commit fecd65b4 by FE
Options

blessing rule start

parent 07f904b4
Showing with 188 additions and 44 deletions
src/components/blessingPreheat/ReserveCourse/index.scss
.reserve-course-module { .reserve-course-module {
margin: 20px 15px 5px 20px; margin: 20px 15px 0 20px;
padding-bottom: 5px;
.course-list { .course-list {
ul { ul {
......
src/components/blessingPreheat/collectBlessing/index.js
...@@ -20,7 +20,7 @@ class CollectBlessing extends Component { ...@@ -20,7 +20,7 @@ class CollectBlessing extends Component {
} }
render() { render() {
const { handleToShowList } = this.props; const { handleToShowNotice, handleToShowList, handleToShowInvite } = this.props;
const { rules } = this.state; const { rules } = this.state;
return ( return (
<div className="collect-blessing"> <div className="collect-blessing">
...@@ -30,9 +30,44 @@ class CollectBlessing extends Component { ...@@ -30,9 +30,44 @@ class CollectBlessing extends Component {
<div className="collect-blessing__item" key={index}> <div className="collect-blessing__item" key={index}>
<i className="collect-blessing__num">{index+1}</i> <i className="collect-blessing__num">{index+1}</i>
<p className="collect-blessing__title">{item}</p> <p className="collect-blessing__title">{item}</p>
{
index === 0 &&
<a className="collect-blessing__content" onClick={handleToShowNotice}>
点击<br/>签到
</a>
}
{
index === 1 &&
<a className="collect-blessing__content" onClick={handleToShowNotice}>
关注<br/>二维码
</a>
}
{
index === 2 &&
<div className="collect-blessing__content" data-layout="column">
<p className="collect-blessing__label">去分享</p>
<div className="collect-blessing__share">
<a className="collect-blessing__share-button" data-type="qq"></a>
<a className="collect-blessing__share-button" data-type="wechat"></a>
</div>
</div>
}
{
index === 3 &&
<a className="collect-blessing__content" onClick={handleToShowList}> <a className="collect-blessing__content" onClick={handleToShowList}>
浏览课程<br/>详情页 浏览课程<br/>详情页
</a> </a>
}
{
index === 4 &&
<a className="collect-blessing__content" onClick={handleToShowInvite}>
邀请<br/>链接
</a>
}
{
index === 5 &&
<a className="collect-blessing__content">去选课</a>
}
</div> </div>
)) ))
} }
......
src/components/blessingPreheat/collectBlessing/index.scss
...@@ -51,4 +51,36 @@ ...@@ -51,4 +51,36 @@
color: #fff; color: #fff;
text-align: center; text-align: center;
background: linear-gradient(-40deg,rgba(255,75,240,1) 0%,rgba(162,0,255,1) 100%); background: linear-gradient(-40deg,rgba(255,75,240,1) 0%,rgba(162,0,255,1) 100%);
&[data-layout="column"] {
flex-direction: column;
}
}
.collect-blessing__label {
margin: 0 0 8px;
}
.collect-blessing__share {
display: flex;
align-items: center;
justify-content: center;
}
.collect-blessing__share-button {
display: inline-block;
width: 14px;
height: 11px;
margin: 0 4px;
background-size: auto 100%;
background-repeat: no-repeat;
background-position: center;
&[data-type="qq"] {
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/qq-icon.png');
}
&[data-type="wechat"] {
background-image: url('https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/wechat-icon.png');
}
} }
\ No newline at end of file
src/components/blessingPreheat/courseList/index.js
...@@ -312,7 +312,7 @@ class CourseList extends Component { ...@@ -312,7 +312,7 @@ class CourseList extends Component {
} }
{ {
(!isFormal && item.course_status === 2) && (isFormal === 0 && 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>
...@@ -322,7 +322,7 @@ class CourseList extends Component { ...@@ -322,7 +322,7 @@ class CourseList extends Component {
</a> </a>
} }
{ {
(isFormal && item.course_status === 2) && (isFormal === 1 && item.course_status === 2) &&
<Link to={`/detail?id=${item.course_id}`} className="coupon-course__button"> <Link to={`/detail?id=${item.course_id}`} className="coupon-course__button">
<span className="coupon-course__button-price"> <span className="coupon-course__button-price">
<em>¥{item.coupon}</em> <em>¥{item.coupon}</em>
...@@ -370,7 +370,7 @@ class CourseList extends Component { ...@@ -370,7 +370,7 @@ class CourseList extends Component {
item.course_status === 1 && item.course_status === 1 &&
<a <a
className={classnames("coupon-course__button", "coupon-course__button--receive")} className={classnames("coupon-course__button", "coupon-course__button--receive")}
onClick={() => this.toReceiveCoupon(item.course_id, 'training')} onClick={() => this.toReceiveCoupon(item.course_id, 'basic')}
> >
<span className="coupon-course__button-price"> <span className="coupon-course__button-price">
<em>¥{item.coupon}</em> <em>¥{item.coupon}</em>
...@@ -381,7 +381,7 @@ class CourseList extends Component { ...@@ -381,7 +381,7 @@ class CourseList extends Component {
} }
{ {
(!isFormal && item.course_status === 2) && (isFormal === 0 && 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>
...@@ -391,7 +391,7 @@ class CourseList extends Component { ...@@ -391,7 +391,7 @@ class CourseList extends Component {
</a> </a>
} }
{ {
(isFormal && item.course_status === 2) && (isFormal === 1 && item.course_status === 2) &&
<Link to={`/detail?id=${item.course_id}`} className="coupon-course__button"> <Link to={`/detail?id=${item.course_id}`} className="coupon-course__button">
<span className="coupon-course__button-price"> <span className="coupon-course__button-price">
<em>¥{item.coupon}</em> <em>¥{item.coupon}</em>
...@@ -452,7 +452,7 @@ class CourseList extends Component { ...@@ -452,7 +452,7 @@ class CourseList extends Component {
item.course_status === 1 && item.course_status === 1 &&
<a <a
className={classnames("coupon-course__button", "coupon-course__button--receive")} className={classnames("coupon-course__button", "coupon-course__button--receive")}
onClick={() => this.toReceiveCoupon(item.course_id, 'training')} onClick={() => this.toReceiveCoupon(item.course_id, 'advanced')}
> >
<span className="coupon-course__button-price"> <span className="coupon-course__button-price">
<em>¥{item.coupon}</em> <em>¥{item.coupon}</em>
...@@ -461,9 +461,8 @@ class CourseList extends Component { ...@@ -461,9 +461,8 @@ class CourseList extends Component {
<span className="coupon-course__button-label">立即领券</span> <span className="coupon-course__button-label">立即领券</span>
</a> </a>
} }
{ {
(!isFormal && item.course_status === 2) && (isFormal === 0 && 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>
...@@ -473,7 +472,7 @@ class CourseList extends Component { ...@@ -473,7 +472,7 @@ class CourseList extends Component {
</a> </a>
} }
{ {
(isFormal && item.course_status === 2) && (isFormal === 1 && item.course_status === 2) &&
<Link to={`/detail?id=${item.course_id}`} className="coupon-course__button"> <Link to={`/detail?id=${item.course_id}`} className="coupon-course__button">
<span className="coupon-course__button-price"> <span className="coupon-course__button-price">
<em>¥{item.coupon}</em> <em>¥{item.coupon}</em>
...@@ -534,7 +533,7 @@ class CourseList extends Component { ...@@ -534,7 +533,7 @@ class CourseList extends Component {
item.course_status === 1 && item.course_status === 1 &&
<a <a
className={classnames("coupon-course__button", "coupon-course__button--receive")} className={classnames("coupon-course__button", "coupon-course__button--receive")}
onClick={() => this.toReceiveCoupon(item.course_id, 'training')} onClick={() => this.toReceiveCoupon(item.course_id, 'higher')}
> >
<span className="coupon-course__button-price"> <span className="coupon-course__button-price">
<em>¥{item.coupon}</em> <em>¥{item.coupon}</em>
...@@ -543,9 +542,8 @@ class CourseList extends Component { ...@@ -543,9 +542,8 @@ class CourseList extends Component {
<span className="coupon-course__button-label">立即领券</span> <span className="coupon-course__button-label">立即领券</span>
</a> </a>
} }
{ {
(!isFormal && item.course_status === 2) && (isFormal === 0 && 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>
...@@ -555,7 +553,7 @@ class CourseList extends Component { ...@@ -555,7 +553,7 @@ class CourseList extends Component {
</a> </a>
} }
{ {
(isFormal && item.course_status === 2) && (isFormal === 1 && item.course_status === 2) &&
<Link to={`/detail?id=${item.course_id}`} className="coupon-course__button"> <Link to={`/detail?id=${item.course_id}`} className="coupon-course__button">
<span className="coupon-course__button-price"> <span className="coupon-course__button-price">
<em>¥{item.coupon}</em> <em>¥{item.coupon}</em>
...@@ -616,7 +614,7 @@ class CourseList extends Component { ...@@ -616,7 +614,7 @@ class CourseList extends Component {
item.course_status === 1 && item.course_status === 1 &&
<a <a
className={classnames("coupon-course__button", "coupon-course__button--receive")} className={classnames("coupon-course__button", "coupon-course__button--receive")}
onClick={() => this.toReceiveCoupon(item.course_id, 'training')} onClick={() => this.toReceiveCoupon(item.course_id, 'expand')}
> >
<span className="coupon-course__button-price"> <span className="coupon-course__button-price">
<em>¥{item.coupon}</em> <em>¥{item.coupon}</em>
...@@ -627,7 +625,7 @@ class CourseList extends Component { ...@@ -627,7 +625,7 @@ class CourseList extends Component {
} }
{ {
(!isFormal && item.course_status === 2) && (isFormal === 0 && 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>
...@@ -637,7 +635,7 @@ class CourseList extends Component { ...@@ -637,7 +635,7 @@ class CourseList extends Component {
</a> </a>
} }
{ {
(isFormal && item.course_status === 2) && (isFormal === 1 && item.course_status === 2) &&
<Link to={`/detail?id=${item.course_id}`} className="coupon-course__button"> <Link to={`/detail?id=${item.course_id}`} className="coupon-course__button">
<span className="coupon-course__button-price"> <span className="coupon-course__button-price">
<em>¥{item.coupon}</em> <em>¥{item.coupon}</em>
......
src/components/blessingPreheat/index.js
import React, { Component } from 'react'; import React, { Component } from 'react';
import QRCode from 'qrcode';
import { http } from '@/utils'; import { http } from '@/utils';
import RulePopup from './rulePopup/index' import RulePopup from './rulePopup/index'
import CoursePopup from './coursePopup/index' import CoursePopup from './coursePopup/index'
...@@ -21,11 +22,14 @@ class BlessingPreheat extends Component { ...@@ -21,11 +22,14 @@ class BlessingPreheat extends Component {
this.state = { this.state = {
isRule: false, isRule: false,
isCourse: false, isCourse: false,
inviteUrl: '',
inviteVisible: false, inviteVisible: false,
joinLotteryVisible: false, joinLotteryVisible: false,
timelineShareVisible: false, timelineShareVisible: false,
showRecordList: false, showRecordList: false,
isFormal: false, // 1正式 0 预热 isFormal: false, // 1正式 0 预热
isServer: false,
serverUrl: '',
} }
} }
...@@ -46,55 +50,96 @@ class BlessingPreheat extends Component { ...@@ -46,55 +50,96 @@ class BlessingPreheat extends Component {
handleToHide = (key) => { handleToHide = (key) => {
let obj = {} let obj = {}
obj[key] = false obj[key] = false;
this.setState({ this.setState({
...obj ...obj
}) })
} }
handleToShowList = () => { handleToShow = (key) => {
console.log(0); let obj = {};
obj[key] = true;
this.setState({ this.setState({
isCourse: true ...obj
}); });
} }
onCopy = () => { handleToShowInvite = () => {
Toast.info('复制成功', 2,null,false) QRCode.toDataURL('http://m.julyedu.com/invite', {
width: 120,
height: 120,
margin: 1
})
.then(url => {
this.setState({
inviteUrl: url,
inviteVisible: true
});
})
.catch(err => {
console.error(err)
});
} }
showRecordList = () => { handleToShowNotice = () => {
http.get(`${API['base-api']}/sys/activity/create_blessing_qrcode`).then(res => {
const {errno, data} = res.data;
if (errno === 200) {
QRCode.toDataURL(data.url, {
width: 120,
height: 120,
margin: 1
})
.then(url => {
this.setState({ this.setState({
showRecordList: true, isServer: true,
serverUrl: url,
});
})
.catch(err => {
console.error(err)
});
}else if(errno === 4030 || errno === 4040) {
location.href = `http://passport.julyedu.com/login?redirect=${encodeURI(document.URL)}`;
}
}); });
} }
onCopy = () => {
Toast.info('复制成功', 2,null,false)
}
render() { render() {
const {isRule, isCourse, inviteVisible, isFormal} = this.state const {isRule, isCourse, inviteUrl, inviteVisible, isFormal, isServer, serverUrl} = this.state
return ( return (
<div id={'blessing-preheat'}> <div id={'blessing-preheat'}>
{/* 积福气 */} {/* 积福气 */}
<ListHeader text="积福气，享受更多福利" styles={{margin: '0 0 15px'}} /> <ListHeader text="积福气，享受更多福利" styles={{margin: '0 0 15px'}} />
<CollectBlessing handleToShowList={this.handleToShowList} /> <CollectBlessing
handleToShowList={() => this.handleToShow('isCourse')}
handleToShowInvite={this.handleToShowInvite}
handleToShowNotice={this.handleToShowNotice}
/>
{/* 幸运大抽奖--预热 */} {/* 幸运大抽奖--预热 */}
<ListHeader text="幸运大抽奖" styles={{margin: '0 0 15px'}} /> <ListHeader text="幸运大抽奖" styles={{margin: '30px 0 10px'}} />
<p className="luck-draw__tip">- 将于11月11日10点开启 -</p> <p className="luck-draw__tip">- 将于11月11日10点开启 -</p>
<button className="luck-draw__button">活动规则></button> <button className="luck-draw__button" onClick={() => this.handleToShow('isRule')}>活动规则></button>
<LuckDraw /> <LuckDraw />
{/*定金--只在预热期间显示*/} {/*定金--只在预热期间显示*/}
{ {
isFormal && isFormal === 0 &&
<> <>
<ListHeader text="预付1元定金，最高可省100元" styles={{margin: '0 0 15px'}} /> <ListHeader text="预付1元定金，最高可省100元" styles={{margin: '30px 0 15px'}} />
<ReserveCourse/> <ReserveCourse />
</> </>
} }
{/* 精品课程特惠专区 */} {/* 精品课程特惠专区 */}
<ListHeader text="精品课程特惠专区" styles={{margin: '0 0 15px'}} /> <ListHeader text="精品课程特惠专区" styles={{margin: '30px 0 15px'}} />
<CourseList isFormal={isFormal} /> <CourseList isFormal={isFormal} />
{ {
isRule && isRule &&
<RulePopup handleToHide={() => this.handleToHide('isRule')}/> <RulePopup handleToHide={() => this.handleToHide('isRule')}/>
...@@ -103,18 +148,25 @@ class BlessingPreheat extends Component { ...@@ -103,18 +148,25 @@ class BlessingPreheat extends Component {
isCourse && isCourse &&
<CoursePopup handleToHide={() => this.handleToHide('isCourse')}/> <CoursePopup handleToHide={() => this.handleToHide('isCourse')}/>
} }
<Popup visible={inviteVisible} <Popup
visible={inviteVisible}
title={'扫码邀请好友注册+10点福气值'} title={'扫码邀请好友注册+10点福气值'}
className={'invite-popup'} className={'invite-popup'}
> >
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/tinypng-common/right_weixin.png" alt="" className="qr-code"/> <img src={inviteUrl} alt="barcode" className="qr-code"/>
<CopyToClipboard <CopyToClipboard text="http://m.julyedu.com/invite" onCopy={this.onCopy}>
text={'kkk'}
onCopy={this.onCopy}
>
<button>一键复制网址</button> <button>一键复制网址</button>
</CopyToClipboard> </CopyToClipboard>
</Popup> </Popup>
<Popup
visible={isServer}
title="扫码关注“七月在线”服务号"
className={'invite-popup'}
>
<img src={serverUrl} alt="barcode" className="qr-code"/>
</Popup>
<Popup visible={this.state.joinLotteryVisible} <Popup visible={this.state.joinLotteryVisible}
title={'你已成功参与本时段抽奖'} title={'你已成功参与本时段抽奖'}
className={'join-lottery'} className={'join-lottery'}
...@@ -136,8 +188,8 @@ class BlessingPreheat extends Component { ...@@ -136,8 +188,8 @@ class BlessingPreheat extends Component {
</Popup> </Popup>
<ListHeader text="全国AI工程师水平测试" styles={{margin: '0 0 15px'}} /> <ListHeader text="全国AI工程师水平测试" styles={{margin: '30px 0 15px'}} />
<div className="test__record" onClick={this.showRecordList}> <div className="test__record" onClick={() => this.handleToShow('showRecordList')}>
测试记录> 测试记录>
</div> </div>
<LevelTest></LevelTest> <LevelTest></LevelTest>
......
src/components/blessingPreheat/index.scss
...@@ -124,6 +124,22 @@ ...@@ -124,6 +124,22 @@
// 幸运大抽奖--预热 // 幸运大抽奖--预热
.luck-draw__tip { .luck-draw__tip {
margin: 0 0 10px;
font-size: 12px; font-size: 12px;
color: #FFF604; color: #FFF604;
text-align: center;
}
.luck-draw__button {
display: block;
width: 106px;
height: 26px;
margin: 0 auto 15px;
padding: 0;
border: 1px solid #FFF604;
border-radius: 13px;
box-sizing: border-box;
font-size: 13px;
color: #FFF604;
background-color: transparent;
} }
\ No newline at end of file
src/components/blessingPreheat/listHeader/index.scss
...@@ -40,4 +40,5 @@ ...@@ -40,4 +40,5 @@
font-size: 18px; font-size: 18px;
font-weight: 600; font-weight: 600;
color: #FFF604; color: #FFF604;
line-height: 1;
} }
\ No newline at end of file
src/components/blessingPreheat/luckDraw/index.scss
.am-tabs { .luck-draw__container {
.am-tabs {
width: 330px; width: 330px;
margin: 0 auto; margin: 0 auto;
color: #fff; color: #fff;
...@@ -41,6 +42,7 @@ ...@@ -41,6 +42,7 @@
} }
} }
} }
}
} }
.tab__body { .tab__body {
......
src/components/blessingPreheat/rulePopup/index.scss
...@@ -9,6 +9,7 @@ ...@@ -9,6 +9,7 @@
width: 100%; width: 100%;
height: 100%; height: 100%;
background-color: rgba(0, 0, 0, .5); background-color: rgba(0, 0, 0, .5);
z-index: 999;
.iconfont { .iconfont {
margin: 16px 0 0; margin: 16px 0 0;
......
src/components/detail/index.js
...@@ -468,6 +468,7 @@ class Detail extends Component { ...@@ -468,6 +468,7 @@ class Detail extends Component {
if (getParam('dist_code')) { if (getParam('dist_code')) {
href = '/' href = '/'
} }
let isCent = course_info.pdd_group_info && course_info.pdd_group_info.price != '0.01';
return ( return (
<div> <div>
<div className='detail-box'> <div className='detail-box'>
...@@ -641,10 +642,11 @@ class Detail extends Component { ...@@ -641,10 +642,11 @@ class Detail extends Component {
* 拼团 * 拼团
* is_aist: 是否AI特训营 * is_aist: 是否AI特训营
* group_status: 团状态，3：课程有小团 用户没参加小团；4：用户参加了小团 * group_status: 团状态，3：课程有小团 用户没参加小团；4：用户参加了小团
* 拼团价格为1分钱时，不允许参团
*/ */
} }
{ {
!course_info.is_aist && (course_info.group_status === 3 || course_info.group_status === 4) && isCent && !course_info.is_aist && (course_info.group_status === 3 || course_info.group_status === 4) &&
<Group <Group
courseInfo={course_info} courseInfo={course_info}
history={this.props.history} history={this.props.history}
......
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