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 './index.scss'
import {http, SendMessageToApp, getParam} from '@/utils'
import {http, SendMessageToApp, getParam, browser} from '@/utils'
import CommonContainer from './../../common/commonContainer/index'
import CourseItem from '../../../../blessingPreheat/courseItem/index'
import {withRouter} from "react-router-dom"
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 {
constructor(props) {
......@@ -46,6 +52,11 @@ class YearCourse extends Component {
courseList: [],
isMore: false,
},
isshowFollow: false, // 是否提示关注公众号
wish: {
id: '',
key: ""
},
}
}
......@@ -63,6 +74,24 @@ class YearCourse extends Component {
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 = () => {
const {bigcourse} = this.state
http.get(`${API.home}/activity/preheat_data`).then(res => {
......@@ -199,6 +228,15 @@ class YearCourse extends Component {
}
}
// 去登录
toLogin = () => {
if (!getParam('version')) {
this.props.history.push('/passport/login')
} else {
SendMessageToApp("toLogin")
}
}
// 免费学习
freeStudy = () => {
this.setState({
......@@ -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() {
......@@ -341,7 +460,7 @@ class YearCourse extends Component {
{
item.is_join == 0 &&
<a
onClick={() => this.addWishList(item.course_id)}
onClick={() => this.addWishList(item.course_id, 'group')}
className="status-btn add-wish-success">
<img
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/like_icon.png"
......@@ -435,7 +554,7 @@ class YearCourse extends Component {
{
item.is_join == 0 &&
<a
onClick={() => this.addWishList(item.course_id)}
onClick={() => this.addWishList(item.course_id, '1')}
className="status-btn add-wish-success">
<img
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/like_icon.png"
......@@ -526,7 +645,7 @@ class YearCourse extends Component {
{
item.is_join == 0 &&
<a
onClick={() => this.addWishList(item.course_id)}
onClick={() => this.addWishList(item.course_id, '2')}
className="status-btn add-wish-success">
<img
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/like_icon.png"
......@@ -617,7 +736,7 @@ class YearCourse extends Component {
{
item.is_join == 0 &&
<a
onClick={() => this.addWishList(item.course_id)}
onClick={() => this.addWishList(item.course_id, '3')}
className="status-btn add-wish-success">
<img
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/like_icon.png"
......@@ -708,7 +827,7 @@ class YearCourse extends Component {
{
item.is_join == 0 &&
<a
onClick={() => this.addWishList(item.course_id)}
onClick={() => this.addWishList(item.course_id, '4')}
className="status-btn add-wish-success">
<img
src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/like_icon.png"
......@@ -737,13 +856,33 @@ class YearCourse extends Component {
{
this.state.tofreeStudy &&
<CommonPopup top={100} closePopup={this.closePopup} mark={true}>
<CommonPopup top={100} closePopup={this.closePopup} mark={false}>
<div className='sub__code_container'>
<p className='sub__title'>提醒服务</p>
<p className='sub__tip'>进入服务号回复<i>77</i>免费领取课程</p>
<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>
{
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>
</CommonPopup>
}
......
src/components/activity/newyear-2019/preheat/YearCourse/index.scss
......@@ -251,4 +251,18 @@
.sub__code_container {
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'
import TreasureBox from './../treasure-box/index'
import TreasureNav from './nav'
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 {
state = {
userInfoList: [],
userInfo: {},
isAppUpdate: false,
showMark: false,
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 = () => {
this.setState({
......@@ -20,22 +85,23 @@ export default class index extends Component {
}
render() {
const { banner } = this.state;
const {banner} = this.state
return (
<div className={'year-index'}>
<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">
<TreasureNav id="banner" />
<TreasureNav id="banner"/>
</div>
<div className="banner-treasure__decorate"></div>
</div>
{/* 大咖直播 */}
<LiveRoom />
<LiveRoom/>
{/* 组队开宝箱 */}
<TreasureBox />
<YearCourse />
<TreasureBox/>
<YearCourse isAppUpdate={this.state.isAppUpdate}/>
{/*好友加入队伍提醒；获得宝箱提醒；开售提醒弹窗，需要自取，注意修改文案*/}
{
......@@ -44,7 +110,8 @@ export default class index extends Component {
<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=""/>
<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>
</div>
</CommonPopup>
......
src/components/activity/newyear-2019/year-wish/index.js
......@@ -3,17 +3,29 @@ import './index.scss'
import {http, SendMessageToApp, getParam} from '@/utils'
import CommonContainer from './../common/commonContainer/index'
import CourseItem from '../../../blessingPreheat/courseItem/index'
import {Link, withRouter} from "react-router-dom"
import {withRouter} from "react-router-dom"
class YarnWish extends Component {
state = {
list: []
list: [],
activityStage: 1,
}
componentDidMount() {
this.fetchCourse()
this.getStage()
}
componentWillUpdate() {
const {activityStage} = this.state;
if(activityStage == 1) {
document.title = `七月在线年终大回馈，人气好课免费学，精品课程1分抢！`
}else{
document.title = `七月在线年终大回馈，人气好课免费学，精品课程1分抢！`
}
}
fetchCourse = () => {
http.get(`${API.home}/activity/wish_course`).then(res => {
const {code, data} = res.data
......@@ -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) => {
......@@ -36,7 +58,7 @@ class YarnWish extends Component {
}
render() {
const {list} = this.state
const {list, activityStage} = this.state
return (
<div className='yarn-wish'>
......@@ -132,10 +154,10 @@ class YarnWish extends Component {
</CommonContainer>
: <div className="notData">
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/PC/icon-empty.png" alt=""/>
<p>你的心愿单目前空空如也，<br/>快去挑选更多优惠课程吧～</p>
{/*活动期间文案*/}
{/*<p>你的心愿单没有课程哦，感兴趣的课程可在双旦主会场直接购买！</p>*/}
{
activityStage == 1 ? <p>你的心愿单目前空空如也，<br/>快去挑选更多优惠课程吧～</p>
: <p>你的心愿单没有课程哦，<br/>感兴趣的课程可在双旦主会场直接购买！</p>
}
</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