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 { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { http, getParam, SendMessageToApp } from '@/utils';
import { Toast } from "antd-mobile";
import React, {Component} from 'react';
import {connect} from 'react-redux';
import {Link} from 'react-router-dom';
import {http, getParam, SendMessageToApp} from '@/utils';
import {Toast} from "antd-mobile";
import ListFrame from './../listFrame/index';
import ListHeader from './../listHeader';
import './index.scss';
@connect(({user})=> ({
uid: user.data.uid || ''
@connect(({user}) => ({
uid: user && user.data && user.data.uid ? user.data.uid :''
}))
class CollectBlessing extends Component {
constructor(props) {
super(props);
this.state = {
rules: [
'app/h5/pc端活动页签到+5点福气值（每天一次）',
'关注七月在线微信服务号+30点福气值（仅限一次）',
'分享活动页到朋友圈、qq，分别+2点福气值（每个平台每天一次）',
'浏览指定课程详情页，一门课程+2点福气值（每天一次）',
'邀请好友注册，+10点福气值/人（无上限）',
'活动期间每购买一门课程+20点福气值',
],
welfareRuleList: [
{
range: '50~100',
rules: [
{id: 1, text: '1.每天一次抽奖机会；'},
{id: 2, text: '2.中奖概率翻2倍', des: '（热力值越高，中奖概率越大）；'},
{id: 3, text: '3.满111减11、满1111减111。'},
]
},
{
range: '101~190',
rules: [
{id: 1, text: '1.每天两次抽奖机会；'},
{id: 2, text: '2.中奖概率翻3倍', des: '（热力值越高，中奖概率越大）；'},
{id: 3, text: '3.满111减31、满1111减211；'},
{id: 4, text: '4.AI水平测试增加1次。'},
]
},
{
range: '>190',
rules: [
{id: 1, text: '1.每天三次抽奖机会；'},
{id: 2, text: '2.中奖概率翻4倍', des: '（热力值越高，中奖概率越大）；'},
{id: 3, text: '3.满111减51、满1111减411；'},
{id: 4, text: '4.AI水平测试增加2次。'},
]
constructor(props) {
super(props);
this.state = {
rules: [
'app/h5/pc端活动页签到+5点福气值（每天一次）',
'关注七月在线微信服务号+30点福气值（仅限一次）',
'分享活动页到朋友圈、qq，分别+2点福气值（每个平台每天一次）',
'浏览指定课程详情页，一门课程+2点福气值（每天一次）',
'邀请好友注册，+10点福气值/人（无上限）',
'活动期间每购买一门课程+20点福气值',
],
welfareRuleList: [
{
range: '50~100',
rules: [
{id: 1, text: '1.每天一次抽奖机会；'},
{id: 2, text: '2.中奖概率翻2倍', des: '（热力值越高，中奖概率越大）；'},
{id: 3, text: '3.满111减11、满1111减111。'},
]
},
{
range: '101~190',
rules: [
{id: 1, text: '1.每天两次抽奖机会；'},
{id: 2, text: '2.中奖概率翻3倍', des: '（热力值越高，中奖概率越大）；'},
{id: 3, text: '3.满111减31、满1111减211；'},
{id: 4, text: '4.AI水平测试增加1次。'},
]
},
{
range: '>190',
rules: [
{id: 1, text: '1.每天三次抽奖机会；'},
{id: 2, text: '2.中奖概率翻4倍', des: '（热力值越高，中奖概率越大）；'},
{id: 3, text: '3.满111减51、满1111减411；'},
{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 = () => {
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);
});
}
wechatToShare = () => {
const {uid, history} = this.props;
if (getParam('version')) {
if (!uid) {
SendMessageToApp("toLogin");
} else {
SendMessageToApp("WXshare", {
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=1&utm_medium=1&utm_campaign=11&utm_content=1&utm_term=1');
this.fetchUserBlessing(1, () => {
this.handleToAddBlessing(1);
});
}
}
}
}
wechatToShare = () => {
const { uid, history } = this.props;
if(getParam('version')) {
if(!uid) {
SendMessageToApp("toLogin");
}else {
SendMessageToApp("WXshare", {
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=1&utm_medium=1&utm_campaign=11&utm_content=1&utm_term=1');
this.fetchUserBlessing(1, () => {
this.handleToAddBlessing(1);
});
}
weiboToShare = () => {
const {uid, history} = this.props;
if (getParam('version')) {
if (!uid) {
SendMessageToApp("toLogin");
} else {
SendMessageToApp("WBshare", {
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=sina&utm_medium=11&utm_campaign=sina11&utm_content=1&utm_term=11');
this.fetchUserBlessing(2, () => {
this.handleToAddBlessing(2);
});
}
}
}
}
weiboToShare = () => {
const { uid, history } = this.props;
if(getParam('version')) {
if(!uid) {
SendMessageToApp("toLogin");
}else {
SendMessageToApp("WBshare", {
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',
fetchUserBlessing(key, cb) {
const {handleToShowShare, handleToHideShare} = this.props;
let {seconds} = this.state;
http.get(`${API.home}/sys/user/blessing`).then(res => {
const {code, data} = res.data;
if (code === 200) {
if (data.today_shared_platforms.some(item => item === key)) {
Toast.info('今日已分享，记得明天来~', 2, null, false);
} else {
handleToShowShare();
this.shareTimer = setInterval(() => {
this.setState(
{
seconds: (--seconds)
},
() => {
if (seconds === 0) {
typeof cb === 'function' && cb();
handleToHideShare();
clearInterval(this.shareTimer);
}
}
);
}, 1000);
}
}
});
}
}else {
if(!uid) {
history.push('/passport');
}else {
history.push('/blessingPreheat?utm_source=sina&utm_medium=11&utm_campaign=sina11&utm_content=1&utm_term=11');
this.fetchUserBlessing(2, () => {
this.handleToAddBlessing(2);
}
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);
}
});
}
}
}
fetchUserBlessing(key, cb) {
const { handleToShowShare, handleToHideShare } = this.props;
let { seconds } = this.state;
http.get(`${API.home}/sys/user/blessing`).then(res => {
const { code, data } = res.data;
if(code === 200) {
if(data.today_shared_platforms.some(item => item === key)) {
Toast.info('今日已分享，记得明天来~', 2, null, false);
}else {
handleToShowShare();
this.shareTimer = setInterval(() => {
this.setState(
{
seconds: (--seconds)
},
() => {
if (seconds === 0) {
typeof cb === 'function' && cb();
handleToHideShare();
clearInterval(this.shareTimer);
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>
)
}
}
);
}, 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">
<p className='activity__over'>活动结束前福气榜前50名可获奖品一份</p>
{
item.rules.map(item => {
return (
<p key={item.id}>
{item.text}
<span>{item.des}</span>
</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 => {
return (
<p key={item.id}>
{item.text}
<span>{item.des}</span>
</p>
)
})
}
</div>
</div>
))
}
</div>
</div>
))
}
<ListHeader text="福气值积攒规则" size="middle" styles={{margin: '30px 0 0'}} />
{
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>
{
index === 0 &&
<>
{
(isLogin && isSign)
? (
<a className="collect-blessing__content" data-status="done">
+5点<br/>福气值
</a>
)
: (
<span onClick={toLogin} className="collect-blessing__content">
<ListHeader text="福气值积攒规则" size="middle" styles={{margin: '30px 0 0'}}/>
{
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>
{
index === 0 &&
<>
{
(isLogin && isSign)
? (
<a className="collect-blessing__content" data-status="done">
+5点<br/>福气值
</a>
)
: (
<span onClick={toLogin} className="collect-blessing__content">
点击<br/>签到
</span>
)
}
</>
}
{
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"
onClick={this.qqToShare}
></a>
<a
className="collect-blessing__share-button"
data-type="wechat"
onClick={this.wechatToShare}
></a>
<a
className="collect-blessing__share-button"
data-type="weibo"
onClick={this.weiboToShare}
></a>
</div>
</div>
}
{
index === 3 &&
<a className="collect-blessing__content" onClick={handleToShowList}>
浏览课程<br/>详情页
</a>
}
{
index === 4 &&
<a className="collect-blessing__content" onClick={handleToShowInvite}>
<span>邀请链接</span>
{
inviteBlessing > 0 && <i>已加{inviteBlessing}点</i>
}
</a>
}
{
index === 5 &&
<a
className="collect-blessing__content"
onClick={toSection}>
<span>去选课</span>
{
buyBlessing > 0 && <i>已加{buyBlessing}点</i>
}
</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"
onClick={this.qqToShare}
></a>
<a
className="collect-blessing__share-button"
data-type="wechat"
onClick={this.wechatToShare}
></a>
<a
className="collect-blessing__share-button"
data-type="weibo"
onClick={this.weiboToShare}
></a>
</div>
</div>
}
{
index === 3 &&
<a className="collect-blessing__content" onClick={handleToShowList}>
浏览课程<br/>详情页
</a>
}
{
index === 4 &&
<a className="collect-blessing__content" onClick={handleToShowInvite}>
<span>邀请链接</span>
{
inviteBlessing > 0 && <i>已加{inviteBlessing}点</i>
}
</a>
}
{
index === 5 &&
<a
className="collect-blessing__content"
onClick={toSection}>
<span>去选课</span>
{
buyBlessing > 0 && <i>已加{buyBlessing}点</i>
}
</a>
}
</div>
))
}
</div>
))
}
</div>
)
}
)
}
}
export default ListFrame(CollectBlessing);
\ No newline at end of file
src/components/blessingPreheat/courseList/index.js
......@@ -62,6 +62,27 @@ class CourseList extends Component {
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) => {
const { basic, advanced, higher, expand } = this.state;
http.get(`${API.home}/sys/ai_grow_up_courses/${key}`).then(res => {
......@@ -221,8 +242,7 @@ class CourseList extends Component {
}
toReceiveCoupon(id, key = '') {
const {isLogin, toLogin,uid} = this.props;
alert(uid)
const {isLogin, toLogin} = this.props;
if(isLogin) {
http.post(`${API.home}/sys/activity/coupon/receive`, {
course_id: id
......
src/components/blessingPreheat/index.js
......@@ -81,7 +81,8 @@ class BlessingPreheat extends Component {
},
],
index: 0,
userHasError: props.user.hasError
userHasError: props.user.hasError,
isApp: false
}
}
......@@ -110,7 +111,7 @@ class BlessingPreheat extends Component {
this.handleToAddBlessing(result);
}
this.appLogin()
}
......@@ -138,6 +139,9 @@ class BlessingPreheat extends Component {
if (cookie.get("token") && cookie.get("uid")) {
this.fetchUserBlessing();
this.setState({
isApp: true
})
}
this.props.setCurrentUser(this.transformUser(this.state.userInfoList))
......@@ -419,11 +423,11 @@ class BlessingPreheat extends Component {
isSign,
showRecordList,
shareMark,
index
index,
isApp
} = this.state;
const {history} = this.props;
const isLogin = !this.props.user.hasError
const uid = this.props.user.data.uid
return (
<div id={'blessing-preheat'}>
<Banner
......@@ -473,9 +477,9 @@ class BlessingPreheat extends Component {
{/* 精品课程特惠专区 */}
<ListHeader id={'best-courses'} text="精品课程特惠专区" styles={{margin: '30px 0 15px'}}/>
<CourseList
isApp={isApp}
isFormal={isFormal}
isLogin={isLogin}
uid={uid}
history={this.props.history}
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