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

package-lock.json

@@ -6990,6 +6990,11 @@
         "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": {
       "version": "2.0.0",
       "resolved": "https://registry.npmjs.org/handle-thing/-/handle-thing-2.0.0.tgz",

package.json

@@ -35,6 +35,7 @@
     "file-loader": "2.0.0",
     "formik": "^1.5.8",
     "fs-extra": "7.0.1",
+    "hammerjs": "^2.0.8",
     "html-webpack-plugin": "4.0.0-alpha.2",
     "http-proxy-middleware": "^0.19.1",
     "identity-obj-proxy": "3.0.0",

src/App.js

-import React, {Component} from 'react'
+import React, { Component } from 'react'
 import Routes from './router'
 import cookie from 'js-cookie'
-import {connect} from "react-redux"
-import {setCurrentUser, startFetchUser} from "@/store/userAction"
-import {initialState} from "@/store/userReducer"
-import {withRouter, Link} from 'react-router-dom'
-import {compose} from 'redux'
-import {getParam, http, browser} from "@/utils"
-import {Toast} from "antd-mobile"
-import {addDays} from 'date-fns'
+import { connect } from "react-redux"
+import { setCurrentUser, startFetchUser } from "@/store/userAction"
+import { initialState } from "@/store/userReducer"
+import { withRouter, Link } from 'react-router-dom'
+import { compose } from 'redux'
+import { getParam, http, browser } from "@/utils"
+import { Toast } from "antd-mobile"
+import { addDays } from 'date-fns'
 import stringify from 'json-stringify-safe'
+import Hammer from 'hammerjs'
 
 
 //拦截ajax请求，返回mock数据
@@ -30,6 +31,7 @@ class App extends Component {
       isShowActivityEntry: 0,
       isShowChannel: 0
     }
+    this.globalEntry = null
   }
 
   static displayName = 'App'
@@ -44,15 +46,16 @@ class App extends Component {
 
   componentWillMount() {
     let url = window.location.href;
-        if(url.indexOf('ccode') > -1) {
-            if(!getParam('ccode').includes('%')) {
-                cookie.set('ccode', getParam('ccode'), { expires: 1, domain: '.julyedu.com', path: '/' })
+    if (url.indexOf('ccode') > -1) {
+      if (!getParam('ccode').includes('%')) {
+        cookie.set('ccode', getParam('ccode'), {expires: 1, domain: '.julyedu.com', path: '/'})
       }
     }
   }
 
   componentDidMount() {
-        this.getStage()
+    //是否显示宝箱全局入口
+    this.isShowGlobalEntryInTime()
 
     this.umengStatistic()
     //平台信息
@@ -112,6 +115,8 @@ class App extends Component {
         this.setState({
           isShowActivityEntry: data.treasure_stage,
           isShowChannel: data.is_show_site_window_by_channel
+        }, () => {
+          this.bindGlobalEntry()
         })
 
         window.sessionStorage.setItem('isShowSiteWindowByChannel', data.is_show_site_window_by_channel)
@@ -295,15 +300,61 @@ class App extends Component {
     }
   }
 
+  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 {
+          _this.globalEntry.style.transition = `.2s`
+          _this.globalEntry.style.transform = `translateX(0px)`
+        }
+      }
+    })
+  }
+
+  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 <>
       <Routes/>
       {
         !!this.state.isShowActivityEntry && !!this.state.isShowChannel &&
-                <Link className={'year19-index'} to="/box/boxActive">
+        <div className="year19-index" ref={el => this.globalEntry = el} onTransitionEnd={() => {
+          this.globalEntry.style.transition = ''
+        }}>
           <img src="https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/treasure-active/m/global-entry.png"
                alt=""/>
-                </Link>
+        </div>
       }
     </>
   }