双旦落地页加loading

src/App.js

@@ -3,6 +3,7 @@ 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"
@@ -153,13 +154,10 @@ class App extends Component {
   getUser = () => {
     //获取用户信息
     this.props.startFetchUser()
-    http.get(`${API.home}/m/user_info`).then(res => {
-      this.props.setCurrentUser(this.transformUser(res))
-    })
+
     //微信
     let code = getParam('code')
     let oid = getParam('oid')
-
     if (code && !oid) {
 
       //针对2019双旦活动特殊处理，活动结束后删掉
@@ -185,11 +183,17 @@ class App extends Component {
             }
           } else {
             Toast.info(data.msg)
+            this.props.setCurrentUser(initialState)
           }
         })
 
 
+    } else {
+      http.get(`${API.home}/m/user_info`).then(res => {
+        this.props.setCurrentUser(this.transformUser(res))
+      })
     }
+
   }
 
   componentDidUpdate() {

src/components/activity/newyear-2019/landing/index.js

@@ -9,6 +9,7 @@ import './landing.scss'
 import { browser, getParam, http, wxShare, SendMessageToApp } from "@/utils"
 import QRCode from "qrcode"
 import YearCourse from '../preheat/YearCourse'
+import { FadeLoader } from "react-spinners"
 
 
 class Landing extends Component {
@@ -32,7 +33,8 @@ class Landing extends Component {
     activityEnd: false,
     notices: [],
     rule: '',
-    isCaptain: getParam('origin') == 1
+    isCaptain: getParam('origin') == 1,
+    isLoading: this.props.user.isFetching
   }
 
   componentDidMount() {
@@ -41,7 +43,7 @@ class Landing extends Component {
     document.title = '七月在线年终大回馈，幸运宝箱随你开，100%有奖！'
     const landing = document.querySelector('#landing')
     const boxContainer = document.querySelector('.box-container')
-    if(boxContainer.offsetHeight < window.innerHeight){
+    if (boxContainer.offsetHeight < window.innerHeight) {
       landing.style.minHeight = `${window.innerHeight}px`
       boxContainer.style.minHeight = `${window.innerHeight}px`
     }
@@ -51,30 +53,35 @@ class Landing extends Component {
     if (prevProps.user.hasError !== this.props.user.hasError && !this.props.user.hasError) {
       this.fetchPageData()
     }
+    if(prevProps.user.isFetching !== this.props.user.isFetching && !this.props.user.isFetching){
+      this.setState({
+        isLoading: this.props.user.isFetching
+      })
+    }
   }
 
   componentWillUnmount() {
     this.shareTipPopup && this.shareTipPopup.remove()
   }
 
-  createMeta = (title,dec,imgname) => {
-    let meta = document.createElement('meta');
+  createMeta = (title, dec, imgname) => {
+    let meta = document.createElement('meta')
     meta.setAttribute('name', 'description')
     meta.setAttribute('itemprop', 'description')
     meta.setAttribute('content', dec)
 
-    let meta2 = document.createElement('meta');
+    let meta2 = document.createElement('meta')
     meta2.setAttribute('itemprop', 'name')
     meta2.setAttribute('content', title)
 
-    let meta3 = document.createElement('meta');
+    let meta3 = document.createElement('meta')
     meta3.setAttribute('itemprop', 'image')
     meta3.setAttribute('content', imgname)
 
-    let head = document.getElementsByTagName('head')[0];
-    head.appendChild(meta);
-    head.appendChild(meta2);
-    head.appendChild(meta3);
+    let head = document.getElementsByTagName('head')[0]
+    head.appendChild(meta)
+    head.appendChild(meta2)
+    head.appendChild(meta3)
   }
 
   fetchPageData = ({origin = this.state.origin, treasure_code = this.state.treasure_code} = {}) => {
@@ -104,8 +111,8 @@ class Landing extends Component {
             })
             // history.replace(`${match.url}?treasure_code=${getParam('treasure_code')}&origin=2`)
           } else {
-            this.createMeta(this.shareTitle,this.shareDesc,'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/wx-share-icon.png');
-         }
+            this.createMeta(this.shareTitle, this.shareDesc, 'https://julyedu-cdn.oss-cn-beijing.aliyuncs.com/newyear20/H5/wx-share-icon.png')
+          }
 
           let searchParams = new URLSearchParams(window.location.search)
           if (searchParams.get('origin') === '1' && !browser.isWeixin) {
@@ -305,6 +312,7 @@ class Landing extends Component {
 
   remind = (type = 'create', treasure_code, origin = 1) => {
     const {user} = this.props
+    return
     http.get(`${API["base-api"]}/wx/user_temporary_qrcode/${user.data.uid}`)
       .then(res => {
         const {data} = res.data
@@ -413,7 +421,6 @@ class Landing extends Component {
     }
   }
 
-
   render() {
     const {
       teamData: {
@@ -427,7 +434,8 @@ class Landing extends Component {
         standby_plan
       },
       activityEnd,
-      isCaptain
+      isCaptain,
+      isLoading
     } = this.state
     /*
     * status
@@ -565,7 +573,8 @@ class Landing extends Component {
               </>
             }
             {
-              !(standby_plan && browser.isWeixin) && status === 2 && !activityEnd && < button type='button' className={'invite-btn'} onClick={this.joinTeam}>
+              !(standby_plan && browser.isWeixin) && status === 2 && !activityEnd &&
+              < button type='button' className={'invite-btn'} onClick={this.joinTeam}>
                 同意加入队伍
               </button>
             }
@@ -593,6 +602,14 @@ class Landing extends Component {
             }}/>
           </>
         }
+        {
+          isLoading && <div className="loading" style={{width: window.innerWidth + 'px', height: window.innerHeight + 'px'}}>
+            <FadeLoader
+              color={'#fff'}
+              loading={isLoading}
+            />
+          </div>
+        }
       </div>
     )
   }

src/components/activity/newyear-2019/landing/landing.scss

@@ -233,6 +233,20 @@
     .am-whitespace.am-whitespace-xl {
         height: 35px;
     }
+
+    .loading{
+        transform: scale(1);
+        position: fixed;
+        top: 0;
+        left: 0;
+        width: 100%;
+        height: 100%;
+        background: rgba(0,0,0,.8);
+        z-index: 1000;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+    }
 }
 
 .popup-container {

src/components/activity/newyear-2019/treasure-box/team.js

@@ -115,6 +115,7 @@ class TeamInfo extends Component {
           if (code === 200) {
             const { treasure_code } = data;
             if (!getParam('version')) {
+              // this.props.history.push('/activity/newyear-2019/landing?origin=1&treasure_code=' + treasure_code);
               window.location.assign('https://h5.julyedu.com/activity/newyear-2019/landing?origin=1&treasure_code=' + treasure_code);
             } else {
               window.location.assign('https://h5.julyedu.com/activity/newyear-2019/landing?origin=1&treasure_code=' + treasure_code + '&version='+ getParam('version'));

src/store/userReducer.js

@@ -3,7 +3,7 @@ import { merge } from 'lodash'
 
 const notLoggedIn = 4030
 
-const initialState = {
+export const initialState = {
     hasError: true,
     code: notLoggedIn,
     msg: '',
@@ -30,4 +30,4 @@ export default function (state = initialState, action) {
         default:
             return state
     }
-}
\ No newline at end of file
+}