写不完，根本写不完

展示端/src/assets/styles/base.css

@@ -166,7 +166,7 @@ textarea {
   display: none !important;
 }
 #openDom {
-  animation: openDom 0.5s linear forwards;
+  animation: openDom 0.3s linear forwards;
 }
 @keyframes openDom {
   0% {

展示端/src/assets/styles/base.less

@@ -201,7 +201,7 @@ textarea {
 
 // 详情打开 透明的动画
 #openDom {
-  animation: openDom 0.5s linear forwards;
+  animation: openDom 0.3s linear forwards;
 }
 @keyframes openDom {
   0% {

展示端/src/components/AuthRoute.tsx

@@ -0,0 +1,32 @@
+import { hasToken } from '@//utils/storage'
+import { MessageFu } from '@/utils/message'
+import React from 'react'
+import { Redirect, Route } from 'react-router-dom'
+
+type AtahType = {
+  path: string
+  component: React.FC
+  [x: string]: any
+}
+
+export default function AuthRoute({ path, component: Com, ...rest }: AtahType) {
+  return (
+    <Route
+      path={path}
+      {...rest}
+      render={() => {
+        if (hasToken()) return <Com />
+        else {
+          MessageFu.warning('登录失效!')
+          return (
+            <Redirect
+              to={{
+                pathname: '/login'
+              }}
+            />
+          )
+        }
+      }}
+    />
+  )
+}

展示端/src/components/RouterOrder.tsx

@@ -3,6 +3,9 @@ import React from 'react'
 import { Route, Router, Switch } from 'react-router-dom'
 import SpinLoding from './SpinLoding'
 import NotFound from '@/components/NotFound'
+import AuthRoute from './AuthRoute'
+
+const Login = React.lazy(() => import('@/pages/Z1login'))
 
 const routerArr = [
   {
@@ -75,8 +78,9 @@ function RouterOrder() {
     <Router history={history}>
       <React.Suspense fallback={<SpinLoding />}>
         <Switch>
+          <Route path='/login' component={Login} exact={true} />
           {routerArr.map(v => (
-            <Route key={v.id} path={v.path} exact={v.exact} component={v.Com} />
+            <AuthRoute key={v.id} path={v.path} exact={v.exact} component={v.Com} />
           ))}
         </Switch>
       </React.Suspense>

展示端/src/components/TopCom/index.tsx

@@ -15,7 +15,7 @@ function TopCom({ backFu, txt }: Props) {
   const routerLength = useSelector((state: RootState) => state.A0Layout.routerLength)
 
   return (
-    <div className={styles.TopCom}>
+    <div className={styles.TopCom} id='TopCom'>
       <img
         src={backImg}
         className='TCimg'

展示端/src/components/ZinfoPop/index.module.scss

@@ -43,5 +43,13 @@
         letter-spacing: 4px;
       }
     }
+    .ZIinfo {
+      & > h2 {
+        color: var(--themeColor);
+      }
+      & > div {
+        background: var(--themeColor);
+      }
+    }
   }
 }

展示端/src/components/ZinfoPop/index.tsx

@@ -2,24 +2,26 @@ import React, { useMemo } from 'react'
 import styles from './index.module.scss'
 
 import succImg from '@/assets/img/order/succ.png'
-// import infoImg from '@/assets/img/order/info.png'
+import infoImg from '@/assets/img/order/info.png'
 // import errImg from '@/assets/img/order/err.png'
 
 type Props = {
   type: 'succ' | 'info' | 'err'
   callFu: () => void
-  proof?: boolean
+  txt1?: string
+  txt2?: string
 }
 
-function ZinfoPop({ type, callFu, proof }: Props) {
+function ZinfoPop({ type, callFu, txt1 = '预约成功', txt2 = '工作人员将尽快与您取得联系' }: Props) {
   const infoObj = useMemo(() => {
     let obj = {
       img: succImg,
-      tit1: proof ? '申请成功' : '预约成功',
-      txt2: '工作人员将尽快与您取得联系'
+      tit1: txt1,
+      txt2: txt2
     }
+    if (type === 'info') obj.img = infoImg
     return obj
-  }, [proof])
+  }, [txt1, txt2, type])
 
   return (
     <div id='openDom' className={styles.ZinfoPop}>

展示端/src/pages/A7team/index.tsx

@@ -1,11 +1,26 @@
-import React from 'react'
+import React, { useCallback, useState } from 'react'
 import styles from './index.module.scss'
 import TopCom from '@/components/TopCom'
 
 import topImg from '@/assets/img/team/top.png'
 import history from '@/utils/history'
+import ZinfoPop from '@/components/ZinfoPop'
 
 function A7team() {
+  const toFromFu = useCallback((can: '1' | '2') => {
+    // history.push(`/proof/${can}`)
+    setTitPop({
+      txt1: can === '1' ? '您已完成认证' : '申请审核中',
+      txt2: can === '1' ? '无需重复申请' : '请勿重复申请'
+    })
+  }, [])
+
+  // 打开提示弹窗
+  const [titPop, setTitPop] = useState({
+    txt1: '',
+    txt2: ''
+  })
+
   return (
     <div className={styles.A7team}>
       <TopCom txt='选择团体' />
@@ -13,13 +28,22 @@ function A7team() {
         <img src={topImg} alt='' />
         <div className='A7tit'>请选择认证单位</div>
 
-        <div className='A7dan1' onClick={() => history.push('/proof/1')}>
+        <div className='A7dan1' onClick={() => toFromFu('1')}>
           <div>横琴粤澳深度合作区民生事务局</div>
         </div>
-        <div className='A7dan1' onClick={() => history.push('/proof/2')}>
+        <div className='A7dan1' onClick={() => toFromFu('2')}>
           <div className='A7dan1_1'>澳门街坊会联合总会广东办事处</div>
         </div>
       </div>
+      {/* 提示的弹窗 */}
+      {titPop.txt1 ? (
+        <ZinfoPop
+          txt1={titPop.txt1}
+          txt2={titPop.txt2}
+          type='info'
+          callFu={() => setTitPop({ txt1: '', txt2: '' })}
+        />
+      ) : null}
     </div>
   )
 }

展示端/src/pages/A8proof/index.tsx

@@ -159,7 +159,7 @@ function A8proof() {
       </div>
       {/* 预约成功的弹窗 */}
       {titPop ? (
-        <ZinfoPop proof={true} type={titPop as 'succ'} callFu={() => history.push('/my?m=1')} />
+        <ZinfoPop txt1='申请成功' type={titPop as 'succ'} callFu={() => history.push('/my?m=1')} />
       ) : null}
     </div>
   )

展示端/src/pages/Z1login/index.module.scss

@@ -0,0 +1,16 @@
+.Z1login {
+  :global {
+    #TopCom {
+      .TCimg {
+        opacity: 0;
+        pointer-events: none;
+      }
+    }
+    .Z1main {
+      height: calc(100% - 160px);
+      display: flex;
+      justify-content: center;
+      align-items: center;
+    }
+  }
+}

展示端/src/pages/Z1login/index.tsx

@@ -0,0 +1,68 @@
+import React, { useCallback, useEffect } from 'react'
+import styles from './index.module.scss'
+import TopCom from '@/components/TopCom'
+import { Button } from 'antd'
+import history from '@/utils/history'
+import { setTokenInfo } from '@/utils/storage'
+import { MessageFu } from '@/utils/message'
+function Z1login() {
+  // 获取用户openID(微信授权)
+  const getUserCode = useCallback(() => {
+    window.location.href = 'http://192.168.20.55:3000/#/login?code=xxxx'
+    //此处的ID是在文档的开发-基本配置里面
+    // let appid = 'wx3d4f2e0cfc3b8e54'
+    // let url = 'https://sit-wuxicishan.4dage.com/unityForPad/index.html'
+    // window.location.href = `https://open.weixin.qq.com/connect/oauth2/authorize?appid=${appid}&redirect_uri=${encodeURIComponent(
+    //   url
+    // )}&response_type=code&scope=SCOPE&state=STATE#wechat_redirect`
+  }, [])
+
+  // 获取地址栏参数的方法
+  const getQueryCode = useCallback((name: string) => {
+    // 未传参，返回空
+    if (!name) return null
+    // 查询参数：先通过search取值，如果取不到就通过hash来取
+    let after = window.location.search
+    after = after.substr(1) || window.location.hash.split('?')[1]
+    // 地址栏URL没有查询参数，返回空
+    if (!after) return null
+    // 如果查询参数中没有"name"，返回空
+    if (after.indexOf(name) === -1) return null
+
+    let reg = new RegExp('(^|&)' + name + '=([^&]*)(&|$)')
+    // 当地址栏参数存在中文时，需要解码，不然会乱码
+    let r = decodeURI(after).match(reg)
+    // 如果url中"name"没有值，返回空
+    if (!r) return null
+
+    return r[2]
+  }, [])
+
+  useEffect(() => {
+    let code = getQueryCode('code')
+    console.log('-----------', code)
+    if (code) {
+      // 发请求，拿token
+      // 用户信息存到本地
+      setTokenInfo({ token: 'xxxxxxxxxxxx' })
+      // 跳到首页
+      MessageFu.success('登录成功!')
+      history.push('/')
+    }
+  }, [getQueryCode])
+
+  return (
+    <div className={styles.Z1login}>
+      <TopCom txt='登录' />
+      <div className='Z1main'>
+        <Button size='large' type='primary' onClick={getUserCode}>
+          授权微信登录
+        </Button>
+      </div>
+    </div>
+  )
+}
+
+const MemoZ1login = React.memo(Z1login)
+
+export default MemoZ1login

展示端/src/utils/http.ts

@@ -1,13 +1,13 @@
 import axios from 'axios'
+import history from './history'
+import { getTokenInfo, removeTokenInfo } from './storage'
 import { MessageFu } from './message'
-import { Toast } from 'antd-mobile'
 import { domShowFu } from './domShow'
-import { isMobileFu } from './history'
 
 const envFlag = process.env.NODE_ENV === 'development'
 
-const baseUrlTemp = 'https://sit-zhongliuyiyuan.4dage.com' // 测试环境
-// const baseUrlTemp = 'http://192.168.20.13:8079' // 线下环境
+const baseUrlTemp = 'https://sit-liushaoqibwg.4dage.com' // 测试环境
+// const baseUrlTemp = 'http://192.168.20.61:8072' // 线下环境
 
 const baseFlag = baseUrlTemp.includes('https://')
 
@@ -18,6 +18,7 @@ export const baseURL = envFlag ? `${baseUrlTemp}${baseFlag ? '' : '/api/'}` : ''
 declare module 'axios' {
   interface AxiosResponse {
     code: number
+    timestamp: string
     // 这里追加你的参数
   }
 }
@@ -37,6 +38,9 @@ http.interceptors.request.use(
     domShowFu('#AsyncSpinLoding', true)
 
     axajInd++
+
+    const { token } = getTokenInfo()
+    if (token) config.headers.token = token
     return config
   },
   function (err) {
@@ -54,16 +58,16 @@ http.interceptors.response.use(
     if (axajInd === 0) {
       domShowFu('#AsyncSpinLoding', false)
     }
-    if (response.data.code === 0) {
+    if (response.data.code === 5001 || response.data.code === 5002) {
+      removeTokenInfo()
+      history.push('/login')
+      clearTimeout(timeId)
+      timeId = window.setTimeout(() => {
+        MessageFu.warning('登录失效!')
+      }, 200)
+    } else if (response.data.code === 0) {
       // MessageFu.success(response.data.msg);
-    } else {
-      isMobileFu() && response.data.msg
-        ? Toast.show({
-            icon: 'fail',
-            content: response.data.msg
-          })
-        : MessageFu.warning(response.data.msg)
-    }
+    } else if (response.data.code !== 3014) MessageFu.warning(response.data.msg)
 
     return response.data
   },
@@ -73,20 +77,21 @@ http.interceptors.response.use(
       axajInd = 0
       domShowFu('#AsyncSpinLoding', false)
       // 如果因为网络原因，response没有，给提示消息
-      if (!err.response) {
-        isMobileFu()
-          ? Toast.show({
-              icon: 'fail',
-              content: '网络繁忙，请稍后重试!'
-            })
-          : MessageFu.error('网络繁忙，请稍后重试!')
-      } else {
-        isMobileFu()
-          ? Toast.show({
-              icon: 'fail',
-              content: '响应错误，请联系管理员!'
-            })
-          : MessageFu.error('响应错误，请联系管理员!')
+      if (!err.response) MessageFu.error('网络繁忙，请稍后重试!')
+      else {
+        if (
+          err.response &&
+          err.response.data &&
+          err.response.data.msg &&
+          err.response.data.msg.length < 30
+        ) {
+          MessageFu.error(err.response.data.msg)
+          // 没有权限
+          if (err.response.data.code === 5003) {
+            removeTokenInfo()
+            history.push('/login')
+          }
+        } else MessageFu.error('响应错误，请联系管理员!')
       }
     }, 100)
 

展示端/src/utils/storage.ts

@@ -1,16 +1,40 @@
-// 本地存储-临时会话
-const TOKEN_KEY = 'HQ_YY_WEB'
+// ------------------------------------token的本地存储------------------------------------
+
+// 用户 Token 的本地缓存键名，自己定义
+const TOKEN_KEY = 'HQMSSWJ_Web_YY_USER_INFO'
+
+/**
+ * 从本地缓存中获取 用户 信息
+ */
+export const getTokenInfo = (): any => {
+  return JSON.parse(localStorage.getItem(TOKEN_KEY) || '{}')
+}
+
+/**
+ * 将 用户 信息存入缓存
+ * @param {Object} tokenInfo 从后端获取到的 Token 信息
+ */
+export const setTokenInfo = (tokenInfo: any): void => {
+  localStorage.setItem(TOKEN_KEY, JSON.stringify(tokenInfo))
+}
+
+/**
+ * 删除本地缓存中的 用户 信息
+ */
+export const removeTokenInfo = (): void => {
+  localStorage.removeItem(TOKEN_KEY)
+}
 
 /**
- * 获取临时存储信息
+ * 判断本地缓存中是否存在 Token 信息
  */
-export const getTitFu = (): string[] => {
-  return JSON.parse(sessionStorage.getItem(TOKEN_KEY) || '[]')
+export const hasToken = (): boolean => {
+  return Boolean(getTokenInfo().token)
 }
 
 /**
- *  信息存入缓存
+ * 获取本地缓存中是否存在 Token 信息
  */
-export const setTitFu = (val: string[]): void => {
-  sessionStorage.setItem(TOKEN_KEY, JSON.stringify(val))
+export const getTokenFu = (): string => {
+  return getTokenInfo().token
 }