upp

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

@@ -42,7 +42,7 @@ textarea {
 /* 主题色 */
 :root {
   --themeColor: #0d79d9;
-  --themeColor2: #f58543;
+  --themeColor2: #7dbe2b;
 }
 /* 找不到页面 */
 .noFindPage {
@@ -116,7 +116,7 @@ textarea {
   /*滚动条里面小方块*/
   border-radius: 10px;
   -webkit-box-shadow: inset 0 0 5px transparent;
-  background: #7dbe2b;
+  background: var(--themeColor2);
 }
 .mySorrl::-webkit-scrollbar-track {
   /*滚动条里面轨道*/

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

@@ -52,7 +52,7 @@ textarea {
 /* 主题色 */
 :root {
   --themeColor: #0d79d9;
-  --themeColor2: #f58543;
+  --themeColor2: #7dbe2b;
 }
 
 /* 找不到页面 */
@@ -142,7 +142,7 @@ textarea {
   /*滚动条里面小方块*/
   border-radius: 10px;
   -webkit-box-shadow: inset 0 0 5px transparent;
-  background: #7dbe2b;
+  background: var(--themeColor2);
 }
 
 .mySorrl::-webkit-scrollbar-track {

展示端/src/components/RouterOrder.tsx

@@ -4,23 +4,34 @@ import { Route, Router, Switch } from 'react-router-dom'
 import SpinLoding from './SpinLoding'
 import NotFound from '@/components/NotFound'
 
-const A1home = React.lazy(() => import('@/pages/A1home'))
-const A2notice = React.lazy(() => import('@/pages/A2notice'))
-
 const routerArr = [
   {
     id: 1,
     name: '首页',
     path: '/',
     exact: true,
-    Com: A1home
+    Com: React.lazy(() => import('@/pages/A1home'))
   },
   {
     id: 2,
     name: '预约须知',
     path: '/notice',
     exact: true,
-    Com: A2notice
+    Com: React.lazy(() => import('@/pages/A2notice'))
+  },
+  {
+    id: 3,
+    name: '选择日期',
+    path: '/selectDay',
+    exact: true,
+    Com: React.lazy(() => import('@/pages/A3selectDay'))
+  },
+  {
+    id: 4,
+    name: '选择课程',
+    path: '/selectCourse',
+    exact: true,
+    Com: React.lazy(() => import('@/pages/A4selectCourse'))
   },
   {
     id: 9,

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

@@ -4,7 +4,7 @@
   position: relative;
   font-size: 24px;
   font-weight: 700;
-  color: #0d79d9;
+  color: var(--themeColor);
   text-align: center;
   line-height: 60px;
   :global {

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

@@ -3,12 +3,17 @@ import styles from './index.module.scss'
 
 import backImg from '@/assets/img/back.png'
 import history from '@/utils/history'
+import { useSelector } from 'react-redux'
+import { RootState } from '@/store'
 
 type Props = {
   backFu?: () => void
+  txt: string
 }
 
-function TopCom({ backFu }: Props) {
+function TopCom({ backFu, txt }: Props) {
+  const routerLength = useSelector((state: RootState) => state.A0Layout.routerLength)
+
   return (
     <div className={styles.TopCom}>
       <img
@@ -17,10 +22,10 @@ function TopCom({ backFu }: Props) {
         alt=''
         onClick={() => {
           if (backFu) backFu()
-          else history.go(-1)
+          else routerLength ? history.go(-1) : history.replace('/')
         }}
       />
-      预约须知
+      {txt}
     </div>
   )
 }

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

@@ -0,0 +1,12 @@
+.ZFlooBtn {
+  width: 90%;
+  margin: auto;
+  height: 60px;
+  background-color: var(--themeColor2);
+  text-align: center;
+  line-height: 60px;
+  color: #fff;
+  font-size: 20px;
+  font-weight: 700;
+  border-radius: 4px;
+}

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

@@ -0,0 +1,19 @@
+import React from 'react'
+import styles from './index.module.scss'
+
+type Props = {
+  txt: string
+  clickFu: () => void
+}
+
+function ZFlooBtn({ txt, clickFu }: Props) {
+  return (
+    <div id='ZFlooBtn' className={styles.ZFlooBtn} onClick={clickFu}>
+      {txt}
+    </div>
+  )
+}
+
+const MemoZFlooBtn = React.memo(ZFlooBtn)
+
+export default MemoZFlooBtn

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

@@ -10,7 +10,7 @@
         width: 100%;
         height: calc(100% - 80px);
         margin-bottom: 20px;
-        padding: 0 10px 20px 30px;
+        padding: 0 10px 0px 30px;
         & > div {
           height: 100%;
           padding-right: 20px;
@@ -21,19 +21,6 @@
           line-height: 24px;
         }
       }
-
-      .A2btn {
-        width: 90%;
-        margin: auto;
-        height: 60px;
-        background-color: #7dbe2b;
-        text-align: center;
-        line-height: 60px;
-        color: #fff;
-        font-size: 20px;
-        font-weight: 700;
-        border-radius: 4px;
-      }
     }
   }
 }

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

@@ -1,5 +1,65 @@
-.AAAAA{
-  :global{
-    
+.A3selectDay {
+  :global {
+    .A3main {
+      padding: 6% 0;
+      height: calc(100% - 60px);
+
+      .A3list {
+        width: 100%;
+        height: calc(100% - 80px);
+        margin-bottom: 20px;
+        & > div {
+          height: 100%;
+          overflow-y: auto;
+          background-color: #fffaf3;
+          .A3row {
+            &:nth-of-type(2n) {
+              background-color: #fff;
+            }
+
+            width: 100%;
+            height: 150px;
+            padding: 24px;
+            .A3R1 {
+              color: var(--themeColor);
+              font-size: 18px;
+              font-weight: 700;
+              margin-bottom: 15px;
+            }
+            .A3R2 {
+              display: flex;
+              & > div {
+                margin-right: 14px;
+                width: 130px;
+                height: 60px;
+                border-radius: 4px;
+                border: 1px solid #d9d9d9;
+                color: #303030;
+                font-size: 18px;
+                display: flex;
+                justify-content: center;
+                align-items: center;
+              }
+              .A3ac {
+                background-color: var(--themeColor);
+                color: #fff;
+              }
+              .A3no {
+                background-color: #d9d9d9;
+                pointer-events: none;
+                color: #aeaeae;
+              }
+            }
+          }
+        }
+      }
+    }
+    .A3mainNoBtn {
+      #ZFlooBtn {
+        background-color: #d9d9d9;
+        pointer-events: none;
+        color: #aeaeae;
+      }
+    }
   }
-}
+}

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

@@ -1,14 +1,101 @@
-import React from "react";
-import styles from "./index.module.scss";
- function AAAAA() {
-  
+import React, { useState } from 'react'
+import styles from './index.module.scss'
+import TopCom from '@/components/TopCom'
+import ZFlooBtn from '@/components/ZFlooBtn'
+import classNames from 'classnames'
+import history from '@/utils/history'
+
+const list = [
+  {
+    id: 1,
+    time: '12-02 周一',
+    shang: true,
+    xia: true
+  },
+  {
+    id: 2,
+    time: '12-02 周二',
+    shang: true,
+    xia: false
+  },
+  {
+    id: 3,
+    time: '12-02 周三',
+    shang: true,
+    xia: true
+  },
+  {
+    id: 4,
+    time: '12-02 周四',
+    shang: true,
+    xia: true
+  },
+  {
+    id: 5,
+    time: '12-02 周五',
+    shang: true,
+    xia: true
+  },
+  {
+    id: 6,
+    time: '12-02 周六',
+    shang: true,
+    xia: true
+  },
+  {
+    id: 7,
+    time: '12-02 周日',
+    shang: true,
+    xia: true
+  }
+]
+
+function A3selectDay() {
+  const [acObj, setAcObj] = useState({
+    id: 0,
+    txt: ''
+  })
+
   return (
-    <div className={styles.AAAAA}>
-      <h1>AAAAA</h1>
+    <div className={styles.A3selectDay}>
+      <TopCom txt='选择日期' />
+
+      <div className={classNames('A3main', acObj.id ? '' : 'A3mainNoBtn')}>
+        <div className='A3list'>
+          <div className='mySorrl'>
+            {list.map(item => (
+              <div className='A3row' key={item.id}>
+                <div className='A3R1'>{item.time}</div>
+                <div className='A3R2'>
+                  <div
+                    onClick={() => setAcObj({ id: item.id, txt: '上午' })}
+                    className={classNames(
+                      item.id === acObj.id && acObj.txt === '上午' ? 'A3ac' : '',
+                      item.shang ? '' : 'A3no'
+                    )}
+                  >
+                    上午{item.shang ? '' : '（已满）'}
+                  </div>
+                  <div
+                    onClick={() => setAcObj({ id: item.id, txt: '下午' })}
+                    className={classNames(
+                      item.id === acObj.id && acObj.txt === '下午' ? 'A3ac' : '',
+                      item.xia ? '' : 'A3no'
+                    )}
+                  >
+                    下午{item.xia ? '' : '（已满）'}
+                  </div>
+                </div>
+              </div>
+            ))}
+          </div>
+        </div>
+        <ZFlooBtn txt='下一步' clickFu={() => history.push('/selectCourse')} />
+      </div>
     </div>
   )
 }
 
-const MemoAAAAA = React.memo(AAAAA);
+const MemoA3selectDay = React.memo(A3selectDay)
 
-export default MemoAAAAA;
+export default MemoA3selectDay

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

@@ -0,0 +1,11 @@
+.A4selectCourse {
+  :global {
+    .A4main {
+      height: calc(100% - 60px);
+      // overflow-y: auto;
+      width: 100%;
+      background-image: url('../../assets/img/selectCourse/bg.jpg');
+      background-size: 100% 100%;
+    }
+  }
+}

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

@@ -0,0 +1,15 @@
+import React from 'react'
+import styles from './index.module.scss'
+import TopCom from '@/components/TopCom'
+function A4selectCourse() {
+  return (
+    <div className={styles.A4selectCourse}>
+      <TopCom txt='选择课程' />
+      <div className='A4main'></div>
+    </div>
+  )
+}
+
+const MemoA4selectCourse = React.memo(A4selectCourse)
+
+export default MemoA4selectCourse

展示端/src/store/reducer/layout.ts

@@ -12,13 +12,16 @@ const initState = {
   lookBigImg: {
     url: '',
     show: false
-  }
+  },
+  // 路由堆栈长度
+  routerLength: 0
 }
 
 // 定义 action 类型
 type LayoutActionType =
   | { type: 'layout/message'; payload: MessageType }
   | { type: 'layout/lookBigImg'; payload: { url: string; show: boolean } }
+  | { type: 'layout/routerLength'; payload: number }
 
 // 频道 reducer
 export default function layoutReducer(state = initState, action: LayoutActionType) {
@@ -29,6 +32,9 @@ export default function layoutReducer(state = initState, action: LayoutActionTyp
     // 所有图片点击预览查看大图
     case 'layout/lookBigImg':
       return { ...state, lookBigImg: action.payload }
+    // 路由堆栈长度
+    case 'layout/routerLength':
+      return { ...state, routerLength: action.payload }
     default:
       return state
   }

展示端/src/utils/history.ts

@@ -1,5 +1,18 @@
+import store from '@/store'
 import { createHashHistory } from 'history'
 const history = createHashHistory()
+
+// 监听路由
+let routerLength = 0
+history.listen((_: any, listener: any) => {
+  if (listener === 'PUSH') {
+    routerLength += 1
+  } else if (listener === 'POP') {
+    if (routerLength >= 1) routerLength -= 1
+  }
+  store.dispatch({ type: 'layout/routerLength', payload: routerLength })
+})
+
 export default history
 
 // 判断是手机端还是pc端