feats\

src/app.js

@@ -11,8 +11,6 @@ class App extends Component {
 
     // 预拉取数据
     preFetchData().then((fetchData) => {
-      console.log('----fetchData--->', new Date())
-
       setPerson({
         personId: fetchData.personId,
         openid: fetchData.openid,

src/components/Spin/Spin2.jsx

@@ -0,0 +1,17 @@
+import React from 'react'
+import { View } from '@tarojs/components'
+import Spin from '.'
+
+import './style.less'
+
+export default (props) => {
+  const { spinning, style, ...leftProps } = props
+
+  return spinning ? (
+    <View className='spin2box' style={style}>
+      <View className='spin2'>
+        {spinning && <Spin {...leftProps} />}
+      </View>
+    </View>
+  ) : null
+}

src/components/Spin/index.jsx

@@ -0,0 +1,31 @@
+import './style.less'
+
+export default (props) => {
+  const { size = '160rpx', background = 'transparent' } = props
+  const wrapperStyle = {
+    width: size,
+    height: size,
+    background,
+  }
+
+  const leftBarStyle = {
+    'border-top-right-radius': size,
+    'border-bottom-right-radius': size,
+  }
+
+  const rightBarStyle = {
+    'border-top-left-radius': size,
+    'border-bottom-left-radius': size,
+  }
+
+  return (
+    <view className='spin' style={wrapperStyle}>
+      <view className='mask-left'>
+        <view className='spin-bar' style={leftBarStyle}></view>
+      </view>
+      <view className='mask-right'>
+        <view className='spin-bar' style={rightBarStyle}></view>
+      </view>
+    </view>
+  )
+}

src/components/Spin/style.less

@@ -0,0 +1,132 @@
+
+@width: 160px;
+
+.spin {
+  width: @width;
+  height: @width;
+  border-radius: 100%;
+  display: inline-block;
+  position: relative;
+  animation: spin-rotate 4s linear infinite;
+  box-sizing: border-box;
+
+  view {
+    box-sizing: border-box;
+    position: absolute;
+  }
+
+  .mask-left, .mask-right {
+    // background: #fff;
+    top: 0;
+    width: calc(50% + 1px);
+    height: 100%;
+    overflow: hidden;
+  }
+
+  .mask-left {
+    left: 0;
+
+    .spin-bar {
+      left: 100%;
+      border-top-right-radius: @width;
+      border-bottom-right-radius: @width;
+      border-left: 0;
+      // transform: rotate(180deg);
+      transform-origin: center left;
+      animation: spin-rotate-right 1.2s cubic-bezier(.25,.5,.25,1) 0.6s infinite, spin-color 2s linear infinite;
+    }
+  }
+
+  .mask-right {
+    right: 0;
+
+    .spin-bar {
+      left: -100%;
+      border-top-left-radius: @width;
+      border-bottom-left-radius: @width;
+      border-right: 0;
+      transform-origin: center right;
+      animation: spin-rotate-right 1.2s cubic-bezier(1,.25,.5,.25) infinite, spin-color 2s linear infinite;
+    }
+  }
+
+  .spin-bar {
+    float: left;
+    width: 100%;
+    height: 100%;
+    border-width: 4px;
+    border-style: solid;
+  }
+}
+
+@keyframes spin-rotate-right {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  50% {
+    transform: rotate(180deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spin-rotate-left {
+  0% {
+    transform: rotate(180deg);
+  }
+
+  50% {
+    transform: rotate(360deg);
+  }
+
+  100% {
+    transform: rotate(540deg);
+  }
+}
+
+@keyframes spin-rotate {
+  0% {
+    transform: rotate(0deg);
+  }
+
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@keyframes spin-color {
+  0%, 100% {
+    border-color: #d62d20;
+  }
+  40% {
+    border-color: #0057e7;
+  }
+  60% {
+    border-color: #008744;
+  }
+  80%, 90% {
+    border-color: #ffa700;
+  }
+}
+
+.spin2box {
+  width: 100%;
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 100;
+  text-align: center;
+  background: rgba(255, 255, 255, .75);
+
+  .spin2 {
+    display: inline-block;
+    position: absolute;
+    left: 50%;
+    top: 50%;
+    transform: translate(-50%, -50%);
+  }
+}

src/layouts/Loading.jsx

@@ -0,0 +1,18 @@
+import Spin from '@/components/Spin'
+import logo from '@/assets/icons/comm/logo_small.png'
+import './style.less'
+
+export default (props) => {
+  const { width = '64px', logoVisible } = props
+  const height = width
+
+  return (
+    <view className='loading' style={{ width, height }}>
+      <Spin size={width} />
+      {
+        logoVisible !== false &&
+        (<image className='loading-logo' src={logo} style={{ width, height }} />)
+      }
+    </view>
+  )
+}

src/layouts/index.jsx

@@ -1,9 +1,47 @@
+
+import { useMemo } from 'react'
+import Taro from '@tarojs/taro'
 import { useModel } from '@/store'
 import useRouter from '@/utils/hooks/useRouter'
+import Loading from './Loading'
+import { getPageBy, getIndexPageOf } from '../routes'
 
 export default (Child) => (props) => {
   const [person] = useModel('person')
   const router = useRouter()
 
-  return <Child {...props} person={person} router={router} />
+  // 确保人员信息到位
+  const loading = !person?.personRole;
+
+  // 校验人员角色及页面是否对应
+  const jumpPage = useMemo(() => {
+    const personRole = person?.personRole;
+    if (!personRole) return;
+
+    const isNormalPerson = personRole === 'person'
+
+    const currentPage = getPageBy(router.path)
+    let indexPage = getIndexPageOf(personRole)
+    if (!isNormalPerson) {
+      indexPage = `${personRole}/${indexPage}`
+    }
+
+    const isMatched = isNormalPerson ?
+      // 如果是普通客户, page.root 应该是空的
+      !currentPage.root :
+      // 其他角色, 应该是对应的
+      currentPage.root === personRole
+    
+    // 如果对应上, 就不跳转
+    return isMatched ? undefined : indexPage
+  }, [router.path, person?.personRole])
+
+  if (jumpPage) {
+    // 注意此处跳转是没有加上原来的页面参数的
+    Taro.reLaunch({
+      url: `/${jumpPage}`,
+    })
+  }
+
+  return loading ? <Loading /> : <Child {...props} person={person} router={router} />
 }

src/layouts/style.less

@@ -1,20 +1,25 @@
-.main-layout {
-  display: flex;
-  flex-direction: column;
-  width: 100vw;
-  height: 100vh;
-  overflow: hidden;
-  box-sizing: border-box;
 
-  .main-navbar {
-    flex: none;
+.loading {
+  margin: 0 auto;
+  margin-top: 30vh;
+  position: relative;
+
+  &-logo {
+    box-sizing: border-box;
+    padding: 12px;
+    position: absolute;
+    left: 0;
+    transform: scale(.75, .75);
+    animation: logo-opacity 2s linear infinite;
   }
+}
 
-  .main-tabber {
-    flex: none;
+@keyframes logo-opacity {
+  0%, 100% {
+    opacity: 1;
   }
 
-  .main-container {
-    flex: auto;
+  50% {
+    opacity: .4;
   }
 }

src/routes.js

@@ -100,17 +100,25 @@ const subPackages = Object.keys(subPages).map((key) => {
   }
 })
 
-function getPages(role) {
-  if (role === person) {
-    return routes.filter(x => !x.root)
+// 获取路径对应页面
+function getPageBy(path) {
+  return routes.filter(x => path.indexOf(x.page) > -1)[0]
+}
+
+// 获取角色首页
+function getIndexPageOf(role) {
+  if (role === 'person') {
+    return routes.filter(x => !x.root && x.isIndex)[0]
   }
 
-  return routes.filter(x => x.roo === role)
+  return routes.filter(x => x.root === role && x.isIndex)[0]
 }
 
+// eslint-disable-next-line import/no-commonjs
 module.exports = {
   routes,
   pages,
   subPackages,
-  getPages
+  getPageBy,
+  getIndexPageOf
 }