Skip to content

M
mr-julyedu
Commit 4058d349 by zhanghaozhe
Options

全局入口添加滑动关闭功能

parent 2c353d5e
Showing with 310 additions and 253 deletions
package-lock.json
...@@ -6990,6 +6990,11 @@ ...@@ -6990,6 +6990,11 @@
"pify": "^3.0.0" "pify": "^3.0.0"
} }
}, },
"hammerjs": {
"version": "2.0.8",
"resolved": "https://registry.npmjs.org/hammerjs/-/hammerjs-2.0.8.tgz",
"integrity": "sha1-BO93hiz/K7edMPdpIJWTAiK/YPE="
},
"handle-thing": { "handle-thing": {
"version": "2.0.0", "version": "2.0.0",
"resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.0.tgz", "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.0.tgz",
......
package.json
...@@ -35,6 +35,7 @@ ...@@ -35,6 +35,7 @@
"file-loader": "2.0.0", "file-loader": "2.0.0",
"formik": "^1.5.8", "formik": "^1.5.8",
"fs-extra": "7.0.1", "fs-extra": "7.0.1",
"hammerjs": "^2.0.8",
"html-webpack-plugin": "4.0.0-alpha.2", "html-webpack-plugin": "4.0.0-alpha.2",
"http-proxy-middleware": "^0.19.1", "http-proxy-middleware": "^0.19.1",
"identity-obj-proxy": "3.0.0", "identity-obj-proxy": "3.0.0",
......
src/App.js
import React, {Component} from 'react' import React, { Component } from 'react'
import Routes from './router' import Routes from './router'
import cookie from 'js-cookie' import cookie from 'js-cookie'
import {connect} from "react-redux" import { connect } from "react-redux"
import {setCurrentUser, startFetchUser} from "@/store/userAction" import { setCurrentUser, startFetchUser } from "@/store/userAction"
import {initialState} from "@/store/userReducer" import { initialState } from "@/store/userReducer"
import {withRouter, Link} from 'react-router-dom' import { withRouter, Link } from 'react-router-dom'
import {compose} from 'redux' import { compose } from 'redux'
import {getParam, http, browser} from "@/utils" import { getParam, http, browser } from "@/utils"
import {Toast} from "antd-mobile" import { Toast } from "antd-mobile"
import {addDays} from 'date-fns' import { addDays } from 'date-fns'
import stringify from 'json-stringify-safe' import stringify from 'json-stringify-safe'
import Hammer from 'hammerjs'
//拦截ajax请求，返回mock数据 //拦截ajax请求，返回mock数据
...@@ -24,295 +25,345 @@ import './assets/css/index.scss' ...@@ -24,295 +25,345 @@ import './assets/css/index.scss'
import './assets/font/iconfont.css' import './assets/font/iconfont.css'
class App extends Component { class App extends Component {
constructor(props) { constructor(props) {
super(props) super(props)
this.state = { this.state = {
isShowActivityEntry: 0, isShowActivityEntry: 0,
isShowChannel: 0 isShowChannel: 0
}
} }
this.globalEntry = null
}
static displayName = 'App' static displayName = 'App'
previousLocation = {pathname: '/', search: '', hash: ''} previousLocation = {pathname: '/', search: '', hash: ''}
records = [] records = []
pathnameBlacklist = ['/country', '/passport'] pathnameBlacklist = ['/country', '/passport']
firstLoad = true firstLoad = true
componentWillMount() { componentWillMount() {
let url = window.location.href; let url = window.location.href;
if(url.indexOf('ccode') > -1) { if (url.indexOf('ccode') > -1) {
if(!getParam('ccode').includes('%')) { if (!getParam('ccode').includes('%')) {
cookie.set('ccode', getParam('ccode'), { expires: 1, domain: '.julyedu.com', path: '/' }) cookie.set('ccode', getParam('ccode'), {expires: 1, domain: '.julyedu.com', path: '/'})
} }
}
} }
}
componentDidMount() { componentDidMount() {
this.getStage() //是否显示宝箱全局入口
this.isShowGlobalEntryInTime()
this.umengStatistic()
//平台信息
!getParam('version') && cookie.set('plat', '5', {domain: '.julyedu.com'})
this.umengStatistic()
//平台信息
!getParam('version') && cookie.set('plat', '5', {domain: '.julyedu.com'})
if (browser.isWeixin && browser.isIOS) {
sessionStorage.setItem('enter_url', window.location.href)
}
this.getUser() if (browser.isWeixin && browser.isIOS) {
this.utm() sessionStorage.setItem('enter_url', window.location.href)
}
const {history} = this.props this.getUser()
this.utm()
const {history} = this.props
this.setNavigationRecord(this.props.location, this.props.history.action)
this.setPreviousLocation()
this.setNavigationRecord(this.props.location, this.props.history.action)
this.setPreviousLocation()
history.listen((location, action) => {
this.firstLoad = false
this.setNavigationRecord(location, action)
this.utm()
if (cookie.get('uid') && this.props.user.hasError) { history.listen((location, action) => {
this.getUser() this.firstLoad = false
} this.setNavigationRecord(location, action)
if (location.pathname.startsWith('/passport')) { this.utm()
window.localStorage.setItem('binding_redirect', stringify(this.previousLocation))
}
const {pathname, state} = location
if (pathname.startsWith('/passport')) {
location.state = {
...state,
...{
from: {
pathname: this.previousLocation.pathname,
search: this.previousLocation.search,
hash: this.previousLocation.hash
}
}
}
} else {
this.removeShareCodeCookie()
}
})
}
// 获取宝箱阶段 if (cookie.get('uid') && this.props.user.hasError) {
getStage = () => { this.getUser()
let ccode = cookie.get('ccode') }
http.get(`${API.home}/activity/stage?ccode=${ccode}`).then(res => { if (location.pathname.startsWith('/passport')) {
const {code, data, msg} = res.data window.localStorage.setItem('binding_redirect', stringify(this.previousLocation))
if (code === 200) { }
// treasure_stage，宝箱阶段，0-不在活动时间，1-活动时间内 const {pathname, state} = location
this.setState({ if (pathname.startsWith('/passport')) {
isShowActivityEntry: data.treasure_stage, location.state = {
isShowChannel: data.is_show_site_window_by_channel ...state,
}) ...{
from: {
window.sessionStorage.setItem('isShowSiteWindowByChannel', data.is_show_site_window_by_channel) pathname: this.previousLocation.pathname,
} else { search: this.previousLocation.search,
Toast.info(msg, 2) hash: this.previousLocation.hash
} }
}
}
} else {
this.removeShareCodeCookie()
}
})
}
// 获取宝箱阶段
getStage = () => {
let ccode = cookie.get('ccode')
http.get(`${API.home}/activity/stage?ccode=${ccode}`).then(res => {
const {code, data, msg} = res.data
if (code === 200) {
// treasure_stage，宝箱阶段，0-不在活动时间，1-活动时间内
this.setState({
isShowActivityEntry: data.treasure_stage,
isShowChannel: data.is_show_site_window_by_channel
}, () => {
this.bindGlobalEntry()
}) })
}
umengStatistic = () => { window.sessionStorage.setItem('isShowSiteWindowByChannel', data.is_show_site_window_by_channel)
// 友盟统计 } else {
const script = document.createElement('script') Toast.info(msg, 2)
script.src = 'https://s22.cnzz.com/z_stat.php?id=1265696973&web_id=1265696973' }
script.language = 'JavaScript' })
document.body.appendChild(script) }
umengStatistic = () => {
// 友盟统计
const script = document.createElement('script')
script.src = 'https://s22.cnzz.com/z_stat.php?id=1265696973&web_id=1265696973'
script.language = 'JavaScript'
document.body.appendChild(script)
}
removeShareCodeCookie = () => {
cookie.remove('share_code', {path: '/', domain: '.julyedu.com'})
}
setNavigationRecord = (location, action) => {
const {pathname, search, hash} = location
let isLastRecord = location.pathname === (this.records.length && this.records[this.records.length - 1].pathname)
let needHistoryMutation = location.pathname !== this.previousLocation.pathname
switch (action) {
case 'POP':
if (needHistoryMutation) {
this.firstLoad ? this.records.push({pathname, search, hash}) : this.records.pop()
} else {
this.records[this.records.length - 1] = location
}
break
case 'REPLACE':
this.records.length > 1 && (this.records[this.records.length - 1] = {pathname, search, hash})
break
default:
!isLastRecord && this.records.push({pathname, search, hash})
} }
removeShareCodeCookie = () => { location.state && location.state.records
cookie.remove('share_code', {path: '/', domain: '.julyedu.com'}) ? (location.state.records = this.records)
} : location.state ? location.state = {...location.state, records: this.records}
: (location.state = {records: this.records})
}
setNavigationRecord = (location, action) => {
const {pathname, search, hash} = location
let isLastRecord = location.pathname === (this.records.length && this.records[this.records.length - 1].pathname)
let needHistoryMutation = location.pathname !== this.previousLocation.pathname
switch (action) {
case 'POP':
if (needHistoryMutation) {
this.firstLoad ? this.records.push({pathname, search, hash}) : this.records.pop()
} else {
this.records[this.records.length - 1] = location
}
break
case 'REPLACE':
this.records.length > 1 && (this.records[this.records.length - 1] = {pathname, search, hash})
break
default:
!isLastRecord && this.records.push({pathname, search, hash})
}
location.state && location.state.records utm = () => {
? (location.state.records = this.records) // utm统计 m站全站统计广告投放、以及统计详情页浏览
: location.state ? location.state = {...location.state, records: this.records} let zhihu_cb = getParam('cb')
: (location.state = {records: this.records})
}
if (zhihu_cb) {
let data = {
'zhihu_cb': zhihu_cb
}
utm = () => { http.post(`${API['home']}/sys/zhihu/firstRecord`, data)
// utm统计 m站全站统计广告投放、以及统计详情页浏览 .then(res => {
let zhihu_cb = getParam('cb') })
if (zhihu_cb) { }
let data = { }
'zhihu_cb': zhihu_cb
getUser = () => {
//获取用户信息
this.props.startFetchUser()
//微信
let code = getParam('code')
let oid = getParam('oid')
if (code && !oid) {
http.get(`${API["passport-api"]}/m/wx_loginInfo/code/${code}?redirect=${encodeURIComponent(window.location.href)}`)
.then(res => {
let data = res.data
if (data.errno == 200) {
if (data.data['is_bind_mobile']) {
window.location.assign(data.data.url)
} else {
let user = this.transformWxUser(res)
let {role, uid, token} = data.data
let expires = addDays(new Date(), 90)
cookie.set('role', role, {expires, domain: '.julyedu.com', path: '/'})
cookie.set('uid', uid, {expires, domain: '.julyedu.com', path: '/'})
cookie.set('token', token, {expires, domain: '.julyedu.com', path: '/'})
this.props.setCurrentUser(user)
} }
} else {
Toast.info(data.msg)
this.props.setCurrentUser(initialState)
}
})
http.post(`${API['home']}/sys/zhihu/firstRecord`, data)
.then(res => {
})
} } else {
http.get(`${API.home}/m/user_info`).then(res => {
this.props.setCurrentUser(this.transformUser(res))
})
} }
getUser = () => { }
//获取用户信息
this.props.startFetchUser()
//微信
let code = getParam('code')
let oid = getParam('oid')
if (code && !oid) {
http.get(`${API["passport-api"]}/m/wx_loginInfo/code/${code}?redirect=${encodeURIComponent(window.location.href)}`)
.then(res => {
let data = res.data
if (data.errno == 200) {
if (data.data['is_bind_mobile']) {
window.location.assign(data.data.url)
} else {
let user = this.transformWxUser(res)
let {role, uid, token} = data.data
let expires = addDays(new Date(), 90)
cookie.set('role', role, {expires, domain: '.julyedu.com', path: '/'})
cookie.set('uid', uid, {expires, domain: '.julyedu.com', path: '/'})
cookie.set('token', token, {expires, domain: '.julyedu.com', path: '/'})
this.props.setCurrentUser(user)
}
} else {
Toast.info(data.msg)
this.props.setCurrentUser(initialState)
}
})
componentDidUpdate() {
} else { this.setPreviousLocation()
http.get(`${API.home}/m/user_info`).then(res => {
this.props.setCurrentUser(this.transformUser(res))
})
}
if (!this.props.user.hasError && getParam('redirect')) {
window.location.href = getParam('redirect')
} }
}
componentDidUpdate() {
setPreviousLocation = () => {
this.setPreviousLocation() const {location} = this.props
let isInBlacklist = this.pathnameBlacklist.some(item => location.pathname.startsWith(item))
if (!this.props.user.hasError && getParam('redirect')) { !isInBlacklist && (this.previousLocation = location)
window.location.href = getParam('redirect') }
transformUser = res => {
let payload
if (res.data.code === 200) {
//移除红包统计cookie
this.removeShareCodeCookie()
const {
msg, data: {
avatar_file: avatar,
user_name: username,
is_vip: isVIP,
uid,
code
} }
} } = res.data
setPreviousLocation = () => { payload = {
const {location} = this.props hasError: false,
let isInBlacklist = this.pathnameBlacklist.some(item => location.pathname.startsWith(item)) msg,
!isInBlacklist && (this.previousLocation = location) data: {
} username,
isVIP,
transformUser = res => { avatar,
let payload uid,
if (res.data.code === 200) { code
//移除红包统计cookie
this.removeShareCodeCookie()
const {
msg, data: {
avatar_file: avatar,
user_name: username,
is_vip: isVIP,
uid,
code
}
} = res.data
payload = {
hasError: false,
msg,
data: {
username,
isVIP,
avatar,
uid,
code
}
}
} else {
payload = {
hasError: true,
msg: res.data.msg,
code: res.data.code,
data: {}
}
} }
return payload }
} else {
payload = {
hasError: true,
msg: res.data.msg,
code: res.data.code,
data: {}
}
} }
return payload
transformWxUser = res => { }
let data = res.data
if (data.errno == 200) { transformWxUser = res => {
//移除红包统计cookie let data = res.data
this.removeShareCodeCookie() if (data.errno == 200) {
let {uid, token, avatar_file: avatar, uname: username,} = data.data //移除红包统计cookie
this.removeShareCodeCookie()
return { let {uid, token, avatar_file: avatar, uname: username,} = data.data
hasError: false,
data: { return {
uid, hasError: false,
token, data: {
avatar, uid,
username token,
}, avatar,
msg: data.msg username
} },
msg: data.msg
}
} else {
let {code, msg} = data.data
return {
code,
msg,
hasError: true,
data: {}
}
}
}
bindGlobalEntry = () => {
const mc = new Hammer(this.globalEntry)
const {history} = this.props
const _this = this
const entryWidth = this.globalEntry.offsetWidth
mc.on('panright tap panend', function (e) {
if (e.type === 'tap') {
history.push('/box/boxActive')
} else if (e.type === 'panright') {
_this.globalEntry.style.transform = `translateX(${e.deltaX}px)`
} else {
if (e.deltaX > entryWidth / 2) {
_this.globalEntry.style.transition = `.2s`
_this.globalEntry.style.transform = `translateX(${entryWidth + 10}px)`
_this.closeGlobalEntry()
} else { } else {
let {code, msg} = data.data _this.globalEntry.style.transition = `.2s`
return { _this.globalEntry.style.transform = `translateX(0px)`
code,
msg,
hasError: true,
data: {}
}
} }
}
})
}
closeGlobalEntry = () => {
localStorage.setItem('globalEntryClosedTime', Date.now().toString())
this.setState({
isShowActivityEntry: 0
})
}
isShowGlobalEntryInTime = () => {
const lastCloseTime = localStorage.getItem('globalEntryClosedTime')
if (lastCloseTime) {
const pastDate = new Date(parseInt(lastCloseTime))
const now = new Date()
if (now.getFullYear() > pastDate.getFullYear() || now.getMonth() > pastDate.getMonth() || now.getDate() > pastDate.getDate()) {
this.getStage()
}
} else {
this.getStage()
} }
}
render() {
return <> render() {
<Routes/> return <>
{ <Routes/>
!!this.state.isShowActivityEntry && !!this.state.isShowChannel && {
<Link className={'year19-index'} to="/box/boxActive"> !!this.state.isShowActivityEntry && !!this.state.isShowChannel &&
<img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/treasure-active/m/global-entry.png" <div className="year19-index" ref={el => this.globalEntry = el} onTransitionEnd={() => {
alt=""/> this.globalEntry.style.transition = ''
</Link> }}>
} <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/treasure-active/m/global-entry.png"
</> alt=""/>
} </div>
}
</>
}
} }
export default compose( export default compose(
connect( connect(
state => ({user: state.user}), state => ({user: state.user}),
{setCurrentUser, startFetchUser} {setCurrentUser, startFetchUser}
), ),
withRouter withRouter
)(App) )(App)
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