Skip to content

M
mr-julyedu
Commit e77cc79d by xuzhenghua
Options

心愿单

parent 51b062f6
Showing with 266 additions and 23 deletions
src/components/activity/newyear-2019/preheat/YearCourse/index.js
import React, {Component} from 'react' import React, {Component} from 'react'
import './index.scss' import './index.scss'
import {http, SendMessageToApp, getParam} from '@/utils' import {http, SendMessageToApp, getParam, browser} from '@/utils'
import CommonContainer from './../../common/commonContainer/index' import CommonContainer from './../../common/commonContainer/index'
import CourseItem from '../../../../blessingPreheat/courseItem/index' import CourseItem from '../../../../blessingPreheat/courseItem/index'
import {withRouter} from "react-router-dom" import {withRouter} from "react-router-dom"
import CommonPopup from './../../common/commonPopup/index' import CommonPopup from './../../common/commonPopup/index'
import {Toast} from 'antd-mobile'
import {connect} from "react-redux"
@connect(state => ({
user: state.user
}))
class YearCourse extends Component { class YearCourse extends Component {
constructor(props) { constructor(props) {
...@@ -46,6 +52,11 @@ class YearCourse extends Component { ...@@ -46,6 +52,11 @@ class YearCourse extends Component {
courseList: [], courseList: [],
isMore: false, isMore: false,
}, },
isshowFollow: false, // 是否提示关注公众号
wish: {
id: '',
key: ""
},
} }
} }
...@@ -63,6 +74,24 @@ class YearCourse extends Component { ...@@ -63,6 +74,24 @@ class YearCourse extends Component {
this.fetchAICourse('four') this.fetchAICourse('four')
} }
shouldComponentUpdate(nextProps, nextState, nextContext) {
if(this.props.isAppUpdate !== nextProps.isAppUpdate) {
this.fetchBigCourse()
this.fetchFreeCourse()
this.fetchGroupCourse()
// AI之路-基础
this.fetchAICourse('one')
// AI之路-进阶
this.fetchAICourse('two')
// AI之路-高阶
this.fetchAICourse('three')
// AI之路-拓展
this.fetchAICourse('four')
return false;
}
return true;
}
fetchBigCourse = () => { fetchBigCourse = () => {
const {bigcourse} = this.state const {bigcourse} = this.state
http.get(`${API.home}/activity/preheat_data`).then(res => { http.get(`${API.home}/activity/preheat_data`).then(res => {
...@@ -199,6 +228,15 @@ class YearCourse extends Component { ...@@ -199,6 +228,15 @@ class YearCourse extends Component {
} }
} }
// 去登录
toLogin = () => {
if (!getParam('version')) {
this.props.history.push('/passport/login')
} else {
SendMessageToApp("toLogin")
}
}
// 免费学习 // 免费学习
freeStudy = () => { freeStudy = () => {
this.setState({ this.setState({
...@@ -212,9 +250,90 @@ class YearCourse extends Component { ...@@ -212,9 +250,90 @@ class YearCourse extends Component {
}) })
} }
closePopupWish = () => {
const _this = this
_this.setState({
isshowFollow: false
})
setTimeout(function () {
_this.toJoinList(_this.state.wish.id, _this.state.wish.key)
}, 200)
}
// 点击加入心愿单登录验证，在判断是否关注公众号，已关注的话直接加入，未关注弹出二维码弹窗，点击关闭按钮加入心愿单 // 点击加入心愿单登录验证，在判断是否关注公众号，已关注的话直接加入，未关注弹出二维码弹窗，点击关闭按钮加入心愿单
addWishList = (id) => { addWishList = (id, key) => {
const _this = this
const isLogin = !this.props.user.hasError
_this.setState({
wish: {
id: id,
key: key
}
})
if (isLogin) {
_this.isFollow(id, key)
} else {
_this.toLogin()
}
}
isFollow = (id, key) => {
const _this = this
http.get(`${API.home}/m/live/isFollow`).then(res => {
const {code, data, msg} = res.data
if (code === 200) {
_this.setState({
isshowFollow: data.status == 0 ? true : false
})
if (!_this.state.isshowFollow) {
_this.toJoinList(id, key)
}
} else {
Toast.info(msg, 2)
}
})
}
toJoinList = (id, key) => {
const _this = this
http.post(`${API.home}/activity/join_list`, {course_id: id})
.then(res => {
const {code, msg} = res.data
if (code == 200) {
Toast.success('已成功加入心愿单', 3)
if (key === '1') {
_this.fetchAICourse('one')
}
if (key === '2') {
_this.fetchAICourse('two')
}
if (key === '3') {
_this.fetchAICourse('three')
}
if (key === '4') {
_this.fetchAICourse('four')
}
if (key === 'group') {
_this.fetchGroupCourse()
}
} else {
Toast.info(msg, 2)
}
})
}
// 安卓手机保存二维码
saveImage = () => {
let version = getParam('version')
version = typeof version === 'string' ? version.replace('.', '').replace('.', '').slice(0, 3) : ''
const QRCodeUrl = '//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018christyear/h5/qrcode.jpg'
if (version && parseInt(version) < 451) {
Toast.info('当前不支持此功能，升级到最新版本app可以点击保存二维码！', 3, null, false)
} else {
SendMessageToApp('generateQRCode', QRCodeUrl)
}
} }
render() { render() {
...@@ -341,7 +460,7 @@ class YearCourse extends Component { ...@@ -341,7 +460,7 @@ class YearCourse extends Component {
{ {
item.is_join == 0 && item.is_join == 0 &&
<a <a
onClick={() => this.addWishList(item.course_id)} onClick={() => this.addWishList(item.course_id, 'group')}
className="status-btn add-wish-success"> className="status-btn add-wish-success">
<img <img
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/like_icon.png" src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/like_icon.png"
...@@ -435,7 +554,7 @@ class YearCourse extends Component { ...@@ -435,7 +554,7 @@ class YearCourse extends Component {
{ {
item.is_join == 0 && item.is_join == 0 &&
<a <a
onClick={() => this.addWishList(item.course_id)} onClick={() => this.addWishList(item.course_id, '1')}
className="status-btn add-wish-success"> className="status-btn add-wish-success">
<img <img
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/like_icon.png" src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/like_icon.png"
...@@ -526,7 +645,7 @@ class YearCourse extends Component { ...@@ -526,7 +645,7 @@ class YearCourse extends Component {
{ {
item.is_join == 0 && item.is_join == 0 &&
<a <a
onClick={() => this.addWishList(item.course_id)} onClick={() => this.addWishList(item.course_id, '2')}
className="status-btn add-wish-success"> className="status-btn add-wish-success">
<img <img
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/like_icon.png" src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/like_icon.png"
...@@ -617,7 +736,7 @@ class YearCourse extends Component { ...@@ -617,7 +736,7 @@ class YearCourse extends Component {
{ {
item.is_join == 0 && item.is_join == 0 &&
<a <a
onClick={() => this.addWishList(item.course_id)} onClick={() => this.addWishList(item.course_id, '3')}
className="status-btn add-wish-success"> className="status-btn add-wish-success">
<img <img
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/like_icon.png" src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/like_icon.png"
...@@ -708,7 +827,7 @@ class YearCourse extends Component { ...@@ -708,7 +827,7 @@ class YearCourse extends Component {
{ {
item.is_join == 0 && item.is_join == 0 &&
<a <a
onClick={() => this.addWishList(item.course_id)} onClick={() => this.addWishList(item.course_id, '4')}
className="status-btn add-wish-success"> className="status-btn add-wish-success">
<img <img
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/like_icon.png" src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/like_icon.png"
...@@ -737,13 +856,33 @@ class YearCourse extends Component { ...@@ -737,13 +856,33 @@ class YearCourse extends Component {
{ {
this.state.tofreeStudy && this.state.tofreeStudy &&
<CommonPopup top={100} closePopup={this.closePopup} mark={true}> <CommonPopup top={100} closePopup={this.closePopup} mark={false}>
<div className='sub__code_container'> <div className='sub__code_container'>
<p className='sub__title'>提醒服务</p> <p className='sub__title'>提醒服务</p>
<p className='sub__tip'>进入服务号回复<i>77</i>免费领取课程</p> <p className='sub__tip'>进入服务号回复<i>77</i>免费领取课程</p>
<img className='sub__qr_code' id={'live-qr-code'} <img className='sub__qr_code' id={'live-qr-code'}
src='//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018christyear/h5/qrcode.jpg' alt=""/> src='//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018christyear/h5/qrcode.jpg' alt=""/>
<p className='sub__tip'>长按识别/扫码 关注【七月在线】服务号</p> {
getParam('version') ? (
<button className={'save-image'} onClick={this.saveImage}>保存二维码</button>
) : <p className='sub__tip'>长按识别/扫码 关注【七月在线】服务号</p>
}
</div>
</CommonPopup>
}
{
this.state.isshowFollow &&
<CommonPopup top={100} closePopup={this.closePopupWish} mark={false}>
<div className='sub__code_container'>
<p className='sub__title'>提醒服务</p>
<p className='sub__tip'>课程开售立即提醒，不错过任何优惠哦！</p>
<img className='sub__qr_code' id={'live-qr-code'}
src='//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018christyear/h5/qrcode.jpg' alt=""/>
{
getParam('version') ? (
<button className={'save-image'} onClick={this.saveImage}>保存二维码</button>
) : <p className='sub__tip'>长按识别/扫码 关注【七月在线】服务号</p>
}
</div> </div>
</CommonPopup> </CommonPopup>
} }
......
src/components/activity/newyear-2019/preheat/YearCourse/index.scss
...@@ -251,4 +251,18 @@ ...@@ -251,4 +251,18 @@
.sub__code_container { .sub__code_container {
padding: 20px; padding: 20px;
} }
.save-image {
display: block;
width: 133px;
height: 30px;
margin: 20px auto 0 auto;
background: rgba(83, 39, 250, 1);
border-radius: 15px;
font-size: 14px;
color: #fff;
-webkit-appearance: none;
outline: 0;
border: none;
}
} }
\ No newline at end of file
src/components/activity/newyear-2019/preheat/index.js
...@@ -5,13 +5,78 @@ import YearCourse from './YearCourse/index' ...@@ -5,13 +5,78 @@ import YearCourse from './YearCourse/index'
import TreasureBox from './../treasure-box/index' import TreasureBox from './../treasure-box/index'
import TreasureNav from './nav' import TreasureNav from './nav'
import CommonPopup from './../common/commonPopup/index' import CommonPopup from './../common/commonPopup/index'
import cookie from "js-cookie"
import {setCurrentUser, startFetchUser} from "@/store/userAction"
import {addDays} from "date-fns"
export default class index extends Component { export default class index extends Component {
state = { state = {
userInfoList: [],
userInfo: {},
isAppUpdate: false,
showMark: false, showMark: false,
banner: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/m_banner_bj%402x.png' banner: 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/m_banner_bj%402x.png'
} }
componentDidMount() {
const _this = this
// 获取App登录信息
window['loginInfo'] = result => {
_this.loginInfo(result)
}
}
// 获取app登录数据
loginInfo = (result) => {
this.setState({
userInfoList: result
}, () => {
if (this.state.userInfoList.length) {
this.props.startFetchUser()
this.appLogin()
}
})
}
// 保存cookie
appLogin = () => {
let expires = addDays(new Date(), 90)
this.state.userInfoList.map((item, index) => {
cookie.set("token", item.token, {expires, path: '/', domain: '.julyedu.com'})
cookie.set("plat", item.plat, {expires, path: '/', domain: '.julyedu.com'})
cookie.set("uid", item.uid, {expires, path: '/', domain: '.julyedu.com'})
cookie.set("uname", item.uname, {expires, path: '/', domain: '.julyedu.com'})
cookie.set("avatar_file", item.avatar_file, {expires, path: '/', domain: '.julyedu.com'})
})
if (cookie.get("token") && cookie.get("uid")) {
this.setState({
isAppUpdate: true
})
}
this.props.setCurrentUser(this.transformUser(this.state.userInfoList))
}
transformUser = res => {
let payload
res.map((item, index) => {
payload = {
hasError: false,
data: {
username: item.uname,
avatar: item.avatar_file,
token: item.token,
uid: item.uid
},
isFetching: false
}
})
return payload
}
// 关闭弹框 // 关闭弹框
closePopup = () => { closePopup = () => {
this.setState({ this.setState({
...@@ -20,22 +85,23 @@ export default class index extends Component { ...@@ -20,22 +85,23 @@ export default class index extends Component {
} }
render() { render() {
const { banner } = this.state; const {banner} = this.state
return ( return (
<div className={'year-index'}> <div className={'year-index'}>
<div className="banner-treasure"> <div className="banner-treasure">
<div id="banner" className="banner-treasure__header" style={{backgroundImage: `url(${banner})`}}></div> <div id="banner" className="banner-treasure__header"
style={{backgroundImage: `url(${banner})`}}></div>
<div className="banner-treasure__nav"> <div className="banner-treasure__nav">
<TreasureNav id="banner" /> <TreasureNav id="banner"/>
</div> </div>
<div className="banner-treasure__decorate"></div> <div className="banner-treasure__decorate"></div>
</div> </div>
{/* 大咖直播 */} {/* 大咖直播 */}
<LiveRoom /> <LiveRoom/>
{/* 组队开宝箱 */} {/* 组队开宝箱 */}
<TreasureBox /> <TreasureBox/>
<YearCourse /> <YearCourse isAppUpdate={this.state.isAppUpdate}/>
{/*好友加入队伍提醒；获得宝箱提醒；开售提醒弹窗，需要自取，注意修改文案*/} {/*好友加入队伍提醒；获得宝箱提醒；开售提醒弹窗，需要自取，注意修改文案*/}
{ {
...@@ -44,7 +110,8 @@ export default class index extends Component { ...@@ -44,7 +110,8 @@ export default class index extends Component {
<div className='sub__code_container'> <div className='sub__code_container'>
<p className='sub__title'>提醒服务</p> <p className='sub__title'>提醒服务</p>
<p className='sub__tip'>有好友加入队伍后第一时间通知我~</p> <p className='sub__tip'>有好友加入队伍后第一时间通知我~</p>
<img className='sub__qr_code' id={'live-qr-code'} src='//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018christyear/h5/qrcode.jpg' alt=""/> <img className='sub__qr_code' id={'live-qr-code'}
src='//julyedu-cdn.oss-cn-beijing.aliyuncs.com/2018christyear/h5/qrcode.jpg' alt=""/>
<p className='sub__tip'>长按识别/扫码 关注【七月在线】服务号即可预约</p> <p className='sub__tip'>长按识别/扫码 关注【七月在线】服务号即可预约</p>
</div> </div>
</CommonPopup> </CommonPopup>
......
src/components/activity/newyear-2019/year-wish/index.js
...@@ -3,17 +3,29 @@ import './index.scss' ...@@ -3,17 +3,29 @@ import './index.scss'
import {http, SendMessageToApp, getParam} from '@/utils' import {http, SendMessageToApp, getParam} from '@/utils'
import CommonContainer from './../common/commonContainer/index' import CommonContainer from './../common/commonContainer/index'
import CourseItem from '../../../blessingPreheat/courseItem/index' import CourseItem from '../../../blessingPreheat/courseItem/index'
import {Link, withRouter} from "react-router-dom" import {withRouter} from "react-router-dom"
class YarnWish extends Component { class YarnWish extends Component {
state = { state = {
list: [] list: [],
activityStage: 1,
} }
componentDidMount() { componentDidMount() {
this.fetchCourse() this.fetchCourse()
this.getStage()
} }
componentWillUpdate() {
const {activityStage} = this.state;
if(activityStage == 1) {
document.title = `七月在线年终大回馈，人气好课免费学，精品课程1分抢！`
}else{
document.title = `七月在线年终大回馈，人气好课免费学，精品课程1分抢！`
}
}
fetchCourse = () => { fetchCourse = () => {
http.get(`${API.home}/activity/wish_course`).then(res => { http.get(`${API.home}/activity/wish_course`).then(res => {
const {code, data} = res.data const {code, data} = res.data
...@@ -24,6 +36,16 @@ class YarnWish extends Component { ...@@ -24,6 +36,16 @@ class YarnWish extends Component {
} }
}) })
} }
getStage = () => {
http.get(`${API.home}/activity/stage`).then(res => {
const {code, data} = res.data
if (code === 200) {
this.setState({
activityStage: data.activity_stage // 0-不在活动时间 1-预热 2-正式 3-返场
})
}
})
}
// 去课程详情页 // 去课程详情页
toCourse = (courseId) => { toCourse = (courseId) => {
...@@ -36,7 +58,7 @@ class YarnWish extends Component { ...@@ -36,7 +58,7 @@ class YarnWish extends Component {
} }
render() { render() {
const {list} = this.state const {list, activityStage} = this.state
return ( return (
<div className='yarn-wish'> <div className='yarn-wish'>
...@@ -132,10 +154,10 @@ class YarnWish extends Component { ...@@ -132,10 +154,10 @@ class YarnWish extends Component {
</CommonContainer> </CommonContainer>
: <div className="notData"> : <div className="notData">
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/icon-empty.png" alt=""/> <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/icon-empty.png" alt=""/>
{
<p>你的心愿单目前空空如也，<br/>快去挑选更多优惠课程吧～</p> activityStage == 1 ? <p>你的心愿单目前空空如也，<br/>快去挑选更多优惠课程吧～</p>
{/*活动期间文案*/} : <p>你的心愿单没有课程哦，<br/>感兴趣的课程可在双旦主会场直接购买！</p>
{/*<p>你的心愿单没有课程哦，感兴趣的课程可在双旦主会场直接购买！</p>*/} }
</div> </div>
} }
</div> </div>
......
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