Skip to content

M
mr-julyedu
Commit b6786289 by xuzhenghua
Options

app

parent 2bdf9ba2
Showing with 320 additions and 295 deletions
src/components/blessingPreheat/collectBlessing/index.js
import React, { Component } from 'react'; import React, {Component} from 'react';
import { connect } from 'react-redux'; import {connect} from 'react-redux';
import { Link } from 'react-router-dom'; import {Link} from 'react-router-dom';
import { http, getParam, SendMessageToApp } from '@/utils'; import {http, getParam, SendMessageToApp} from '@/utils';
import { Toast } from "antd-mobile"; import {Toast} from "antd-mobile";
import ListFrame from './../listFrame/index'; import ListFrame from './../listFrame/index';
import ListHeader from './../listHeader'; import ListHeader from './../listHeader';
import './index.scss'; import './index.scss';
@connect(({user})=> ({ @connect(({user}) => ({
uid: user.data.uid || '' uid: user && user.data && user.data.uid ? user.data.uid :''
})) }))
class CollectBlessing extends Component { class CollectBlessing extends Component {
constructor(props) { constructor(props) {
super(props); super(props);
this.state = { this.state = {
rules: [ rules: [
'app/h5/pc端活动页签到+5点福气值（每天一次）', 'app/h5/pc端活动页签到+5点福气值（每天一次）',
'关注七月在线微信服务号+30点福气值（仅限一次）', '关注七月在线微信服务号+30点福气值（仅限一次）',
'分享活动页到朋友圈、qq，分别+2点福气值（每个平台每天一次）', '分享活动页到朋友圈、qq，分别+2点福气值（每个平台每天一次）',
'浏览指定课程详情页，一门课程+2点福气值（每天一次）', '浏览指定课程详情页，一门课程+2点福气值（每天一次）',
'邀请好友注册，+10点福气值/人（无上限）', '邀请好友注册，+10点福气值/人（无上限）',
'活动期间每购买一门课程+20点福气值', '活动期间每购买一门课程+20点福气值',
], ],
welfareRuleList: [ welfareRuleList: [
{ {
range: '50~100', range: '50~100',
rules: [ rules: [
{id: 1, text: '1.每天一次抽奖机会；'}, {id: 1, text: '1.每天一次抽奖机会；'},
{id: 2, text: '2.中奖概率翻2倍', des: '（热力值越高，中奖概率越大）；'}, {id: 2, text: '2.中奖概率翻2倍', des: '（热力值越高，中奖概率越大）；'},
{id: 3, text: '3.满111减11、满1111减111。'}, {id: 3, text: '3.满111减11、满1111减111。'},
] ]
}, },
{ {
range: '101~190', range: '101~190',
rules: [ rules: [
{id: 1, text: '1.每天两次抽奖机会；'}, {id: 1, text: '1.每天两次抽奖机会；'},
{id: 2, text: '2.中奖概率翻3倍', des: '（热力值越高，中奖概率越大）；'}, {id: 2, text: '2.中奖概率翻3倍', des: '（热力值越高，中奖概率越大）；'},
{id: 3, text: '3.满111减31、满1111减211；'}, {id: 3, text: '3.满111减31、满1111减211；'},
{id: 4, text: '4.AI水平测试增加1次。'}, {id: 4, text: '4.AI水平测试增加1次。'},
] ]
}, },
{ {
range: '>190', range: '>190',
rules: [ rules: [
{id: 1, text: '1.每天三次抽奖机会；'}, {id: 1, text: '1.每天三次抽奖机会；'},
{id: 2, text: '2.中奖概率翻4倍', des: '（热力值越高，中奖概率越大）；'}, {id: 2, text: '2.中奖概率翻4倍', des: '（热力值越高，中奖概率越大）；'},
{id: 3, text: '3.满111减51、满1111减411；'}, {id: 3, text: '3.满111减51、满1111减411；'},
{id: 4, text: '4.AI水平测试增加2次。'}, {id: 4, text: '4.AI水平测试增加2次。'},
] ]
}
],
seconds: 5,
};
}
qqToShare = () => {
const {uid, history} = this.props;
if (getParam('version')) {
if (!uid) {
SendMessageToApp("toLogin");
} else {
SendMessageToApp("QQshare", {
title: 'AI充电节，积福气享1折秒课，超10万元奖品来就送！！',
desc: '把这门超5万人报名的【Python基础入门 升级版】课程送给你，附200元红包，请笑纳！--七月在线',
link: 'https://m.julyedu.com/blessingPreheat',
imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/index-share-img.png',
});
}
} else {
if (!uid) {
history.push('/passport');
} else {
history.push('/blessingPreheat?utm_source=qq&utm_medium=11&utm_campaign=QQ11&utm_content=11&utm_term=11')
this.fetchUserBlessing(3, () => {
this.handleToAddBlessing(3);
});
}
} }
], }
seconds: 5,
};
}
qqToShare = () => { wechatToShare = () => {
const { uid, history } = this.props; const {uid, history} = this.props;
if(getParam('version')) { if (getParam('version')) {
if(!uid) { if (!uid) {
SendMessageToApp("toLogin"); SendMessageToApp("toLogin");
}else { } else {
SendMessageToApp("QQshare", { SendMessageToApp("WXshare", {
title: 'AI充电节，积福气享1折秒课，超10万元奖品来就送！！', title: 'AI充电节，积福气享1折秒课，超10万元奖品来就送！！',
desc: '把这门超5万人报名的【Python基础入门 升级版】课程送给你，附200元红包，请笑纳！--七月在线', desc: '把这门超5万人报名的【Python基础入门 升级版】课程送给你，附200元红包，请笑纳！--七月在线',
link: 'https://m.julyedu.com/blessingPreheat', link: 'https://m.julyedu.com/blessingPreheat',
imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/index-share-img.png', imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/index-share-img.png',
}); });
} }
}else { } else {
if(!uid) { if (!uid) {
history.push('/passport'); history.push('/passport');
}else { } else {
history.push('/blessingPreheat?utm_source=qq&utm_medium=11&utm_campaign=QQ11&utm_content=11&utm_term=11') history.push('/blessingPreheat?utm_source=1&utm_medium=1&utm_campaign=11&utm_content=1&utm_term=1');
this.fetchUserBlessing(3, () => { this.fetchUserBlessing(1, () => {
this.handleToAddBlessing(3); this.handleToAddBlessing(1);
}); });
} }
}
} }
}
wechatToShare = () => { weiboToShare = () => {
const { uid, history } = this.props; const {uid, history} = this.props;
if(getParam('version')) { if (getParam('version')) {
if(!uid) { if (!uid) {
SendMessageToApp("toLogin"); SendMessageToApp("toLogin");
}else { } else {
SendMessageToApp("WXshare", { SendMessageToApp("WBshare", {
title: 'AI充电节，积福气享1折秒课，超10万元奖品来就送！！', title: 'AI充电节，积福气享1折秒课，超10万元奖品来就送！！',
desc: '把这门超5万人报名的【Python基础入门 升级版】课程送给你，附200元红包，请笑纳！--七月在线', desc: '把这门超5万人报名的【Python基础入门 升级版】课程送给你，附200元红包，请笑纳！--七月在线',
link: 'https://m.julyedu.com/blessingPreheat', link: 'https://m.julyedu.com/blessingPreheat',
imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/index-share-img.png', imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/index-share-img.png',
}); });
} }
}else { } else {
if(!uid) { if (!uid) {
history.push('/passport'); history.push('/passport');
}else { } else {
history.push('/blessingPreheat?utm_source=1&utm_medium=1&utm_campaign=11&utm_content=1&utm_term=1'); history.push('/blessingPreheat?utm_source=sina&utm_medium=11&utm_campaign=sina11&utm_content=1&utm_term=11');
this.fetchUserBlessing(1, () => { this.fetchUserBlessing(2, () => {
this.handleToAddBlessing(1); this.handleToAddBlessing(2);
}); });
} }
}
} }
}
weiboToShare = () => { fetchUserBlessing(key, cb) {
const { uid, history } = this.props; const {handleToShowShare, handleToHideShare} = this.props;
if(getParam('version')) { let {seconds} = this.state;
if(!uid) { http.get(`${API.home}/sys/user/blessing`).then(res => {
SendMessageToApp("toLogin"); const {code, data} = res.data;
}else { if (code === 200) {
SendMessageToApp("WBshare", { if (data.today_shared_platforms.some(item => item === key)) {
title: 'AI充电节，积福气享1折秒课，超10万元奖品来就送！！', Toast.info('今日已分享，记得明天来~', 2, null, false);
desc: '把这门超5万人报名的【Python基础入门 升级版】课程送给你，附200元红包，请笑纳！--七月在线', } else {
link: 'https://m.julyedu.com/blessingPreheat', handleToShowShare();
imgUrl: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/active19_1111/m/index-share-img.png', this.shareTimer = setInterval(() => {
this.setState(
{
seconds: (--seconds)
},
() => {
if (seconds === 0) {
typeof cb === 'function' && cb();
handleToHideShare();
clearInterval(this.shareTimer);
}
}
);
}, 1000);
}
}
}); });
} }
}else {
if(!uid) { handleToAddBlessing = (key) => {
history.push('/passport'); http.post(`${API.home}/sys/add/blessing`, {
}else { share_platform: key, // 1 朋友圈 2 微博 3 qq
history.push('/blessingPreheat?utm_source=sina&utm_medium=11&utm_campaign=sina11&utm_content=1&utm_term=11'); type: 3 // 1：签到；3：分享；4：浏览课程；
this.fetchUserBlessing(2, () => { }).then(res => {
this.handleToAddBlessing(2); const {code} = res.data;
if (code === 200) {
Toast.info('+2点福气值~', 2, null, false);
}
}); });
}
} }
}
fetchUserBlessing(key, cb) { render() {
const { handleToShowShare, handleToHideShare } = this.props; const {
let { seconds } = this.state; isSign,
http.get(`${API.home}/sys/user/blessing`).then(res => { userInfo: {blessingVal = 0, buyBlessing = 0, inviteBlessing = 0},
const { code, data } = res.data; isLogin,
if(code === 200) { handleToShowNotice,
if(data.today_shared_platforms.some(item => item === key)) { handleToShowList,
Toast.info('今日已分享，记得明天来~', 2, null, false); handleToShowInvite,
}else { handleToShow,
handleToShowShare(); toLogin,
this.shareTimer = setInterval(() => { toSection
this.setState( } = this.props;
{ const {rules, welfareRuleList, seconds} = this.state;
seconds: (--seconds) return (
}, <div className="collect-blessing">
() => { {
if (seconds === 0) { isLogin
typeof cb === 'function' && cb(); ? (
handleToHideShare(); <ListHeader text={`我的福气值： ${blessingVal}分`} size="middle" styles={{margin: '20px 0 0 0'}}/>
clearInterval(this.shareTimer); )
: (
<ListHeader size="middle" styles={{margin: '20px 0 0 0'}}>
<span className="text_nologin">我的福气值：</span>
<span onClick={toLogin} className="login__btn">登录</span>
</ListHeader>
)
} }
} <p className='activity__over'>活动结束前福气榜前50名可获奖品一份</p>
);
}, 1000);
}
}
});
}
handleToAddBlessing = (key) => {
http.post(`${API.home}/sys/add/blessing`, {
share_platform: key, // 1 朋友圈 2 微博 3 qq
type: 3 // 1：签到；3：分享；4：浏览课程；
}).then(res => {
const {code } = res.data;
if (code === 200) {
Toast.info('+2点福气值~', 2, null, false);
}
});
}
render() {
const {
isSign,
userInfo: {blessingVal = 0, buyBlessing = 0, inviteBlessing = 0 },
isLogin,
handleToShowNotice,
handleToShowList,
handleToShowInvite,
handleToShow,
toLogin,
toSection
} = this.props;
const { rules, welfareRuleList, seconds } = this.state;
return (
<div className="collect-blessing">
{
isLogin
? (
<ListHeader text={`我的福气值： ${blessingVal}分`} size="middle" styles={{margin: '20px 0 0 0'}} />
)
: (
<ListHeader size="middle" styles={{margin: '20px 0 0 0'}} >
<span className="text_nologin">我的福气值：</span>
<span onClick={toLogin} className="login__btn">登录</span>
</ListHeader>
)
}
<p className='activity__over'>活动结束前福气榜前50名可获奖品一份</p>
{
welfareRuleList.map((item, index) => (
<div className="rules__item" key={index}>
<div className="item__left">
<div className='tip__bubble'>
<div className="tip__text">福气值</div>
<div className='tip__style'></div>
</div>
<div className='range__number'>{item.range}</div>
</div>
<div className="item__right">
{ {
item.rules.map(item => { welfareRuleList.map((item, index) => (
return ( <div className="rules__item" key={index}>
<p key={item.id}> <div className="item__left">
{item.text} <div className='tip__bubble'>
<span>{item.des}</span> <div className="tip__text">福气值</div>
</p> <div className='tip__style'></div>
) </div>
}) <div className='range__number'>{item.range}</div>
</div>
<div className="item__right">
{
item.rules.map(item => {
return (
<p key={item.id}>
{item.text}
<span>{item.des}</span>
</p>
)
})
}
</div>
</div>
))
} }
</div> <ListHeader text="福气值积攒规则" size="middle" styles={{margin: '30px 0 0'}}/>
</div> {
)) rules.map((item, index) => (
} <div className="collect-blessing__item" key={index}>
<ListHeader text="福气值积攒规则" size="middle" styles={{margin: '30px 0 0'}} /> <i className="collect-blessing__num">{index + 1}</i>
{ <p className="collect-blessing__title">{item}</p>
rules.map((item, index) => ( {
<div className="collect-blessing__item" key={index}> index === 0 &&
<i className="collect-blessing__num">{index+1}</i> <>
<p className="collect-blessing__title">{item}</p> {
{ (isLogin && isSign)
index === 0 && ? (
<> <a className="collect-blessing__content" data-status="done">
{ +5点<br/>福气值
(isLogin && isSign) </a>
? ( )
<a className="collect-blessing__content" data-status="done"> : (
+5点<br/>福气值 <span onClick={toLogin} className="collect-blessing__content">
</a>
)
: (
<span onClick={toLogin} className="collect-blessing__content">
点击<br/>签到 点击<br/>签到
</span> </span>
) )
} }
</> </>
} }
{ {
index === 1 && index === 1 &&
<a className="collect-blessing__content" onClick={handleToShowNotice}> <a className="collect-blessing__content" onClick={handleToShowNotice}>
关注<br/>二维码 关注<br/>二维码
</a> </a>
} }
{ {
index === 2 && index === 2 &&
<div className="collect-blessing__content" data-layout="column"> <div className="collect-blessing__content" data-layout="column">
<p className="collect-blessing__label">去分享</p> <p className="collect-blessing__label">去分享</p>
<div className="collect-blessing__share"> <div className="collect-blessing__share">
<a <a
className="collect-blessing__share-button" className="collect-blessing__share-button"
data-type="qq" data-type="qq"
onClick={this.qqToShare} onClick={this.qqToShare}
></a> ></a>
<a <a
className="collect-blessing__share-button" className="collect-blessing__share-button"
data-type="wechat" data-type="wechat"
onClick={this.wechatToShare} onClick={this.wechatToShare}
></a> ></a>
<a <a
className="collect-blessing__share-button" className="collect-blessing__share-button"
data-type="weibo" data-type="weibo"
onClick={this.weiboToShare} onClick={this.weiboToShare}
></a> ></a>
</div> </div>
</div> </div>
} }
{ {
index === 3 && index === 3 &&
<a className="collect-blessing__content" onClick={handleToShowList}> <a className="collect-blessing__content" onClick={handleToShowList}>
浏览课程<br/>详情页 浏览课程<br/>详情页
</a> </a>
} }
{ {
index === 4 && index === 4 &&
<a className="collect-blessing__content" onClick={handleToShowInvite}> <a className="collect-blessing__content" onClick={handleToShowInvite}>
<span>邀请链接</span> <span>邀请链接</span>
{ {
inviteBlessing > 0 && <i>已加{inviteBlessing}点</i> inviteBlessing > 0 && <i>已加{inviteBlessing}点</i>
} }
</a> </a>
} }
{ {
index === 5 && index === 5 &&
<a <a
className="collect-blessing__content" className="collect-blessing__content"
onClick={toSection}> onClick={toSection}>
<span>去选课</span> <span>去选课</span>
{ {
buyBlessing > 0 && <i>已加{buyBlessing}点</i> buyBlessing > 0 && <i>已加{buyBlessing}点</i>
} }
</a> </a>
} }
</div>
))
}
</div> </div>
)) )
} }
</div>
)
}
} }
export default ListFrame(CollectBlessing); export default ListFrame(CollectBlessing);
\ No newline at end of file
src/components/blessingPreheat/courseList/index.js
...@@ -62,6 +62,27 @@ class CourseList extends Component { ...@@ -62,6 +62,27 @@ class CourseList extends Component {
this.fetchAICourse('four'); this.fetchAICourse('four');
} }
shouldComponentUpdate(nextProps, nextState, nextContext) {
if(this.props.isApp !== nextProps.isApp) {
// 精品课程-集训营、就业班/AI特训营
this.fetchCourseData();
// AI之路-基础
this.fetchAICourse('one');
// AI之路-进阶
this.fetchAICourse('two');
// AI之路-高阶
this.fetchAICourse('three');
// AI之路-拓展
this.fetchAICourse('four');
return false;
}
return true;
}
fetchAICourse = (key) => { fetchAICourse = (key) => {
const { basic, advanced, higher, expand } = this.state; const { basic, advanced, higher, expand } = this.state;
http.get(`${API.home}/sys/ai_grow_up_courses/${key}`).then(res => { http.get(`${API.home}/sys/ai_grow_up_courses/${key}`).then(res => {
...@@ -221,8 +242,7 @@ class CourseList extends Component { ...@@ -221,8 +242,7 @@ class CourseList extends Component {
} }
toReceiveCoupon(id, key = '') { toReceiveCoupon(id, key = '') {
const {isLogin, toLogin,uid} = this.props; const {isLogin, toLogin} = this.props;
alert(uid)
if(isLogin) { if(isLogin) {
http.post(`${API.home}/sys/activity/coupon/receive`, { http.post(`${API.home}/sys/activity/coupon/receive`, {
course_id: id course_id: id
......
src/components/blessingPreheat/index.js
...@@ -81,7 +81,8 @@ class BlessingPreheat extends Component { ...@@ -81,7 +81,8 @@ class BlessingPreheat extends Component {
}, },
], ],
index: 0, index: 0,
userHasError: props.user.hasError userHasError: props.user.hasError,
isApp: false
} }
} }
...@@ -110,7 +111,7 @@ class BlessingPreheat extends Component { ...@@ -110,7 +111,7 @@ class BlessingPreheat extends Component {
this.handleToAddBlessing(result); this.handleToAddBlessing(result);
} }
this.appLogin()
} }
...@@ -138,6 +139,9 @@ class BlessingPreheat extends Component { ...@@ -138,6 +139,9 @@ class BlessingPreheat extends Component {
if (cookie.get("token") && cookie.get("uid")) { if (cookie.get("token") && cookie.get("uid")) {
this.fetchUserBlessing(); this.fetchUserBlessing();
this.setState({
isApp: true
})
} }
this.props.setCurrentUser(this.transformUser(this.state.userInfoList)) this.props.setCurrentUser(this.transformUser(this.state.userInfoList))
...@@ -419,11 +423,11 @@ class BlessingPreheat extends Component { ...@@ -419,11 +423,11 @@ class BlessingPreheat extends Component {
isSign, isSign,
showRecordList, showRecordList,
shareMark, shareMark,
index index,
isApp
} = this.state; } = this.state;
const {history} = this.props; const {history} = this.props;
const isLogin = !this.props.user.hasError const isLogin = !this.props.user.hasError
const uid = this.props.user.data.uid
return ( return (
<div id={'blessing-preheat'}> <div id={'blessing-preheat'}>
<Banner <Banner
...@@ -473,9 +477,9 @@ class BlessingPreheat extends Component { ...@@ -473,9 +477,9 @@ class BlessingPreheat extends Component {
{/* 精品课程特惠专区 */} {/* 精品课程特惠专区 */}
<ListHeader id={'best-courses'} text="精品课程特惠专区" styles={{margin: '30px 0 15px'}}/> <ListHeader id={'best-courses'} text="精品课程特惠专区" styles={{margin: '30px 0 15px'}}/>
<CourseList <CourseList
isApp={isApp}
isFormal={isFormal} isFormal={isFormal}
isLogin={isLogin} isLogin={isLogin}
uid={uid}
history={this.props.history} history={this.props.history}
toLogin={this.toLogin} toLogin={this.toLogin}
/> />
......
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