upp

展示端/src/components/RouterOrder.tsx

@@ -83,6 +83,13 @@ const routerArr = [
     Com: React.lazy(() => import('@/pages/B3start'))
   },
   {
+    id: 11,
+    name: '展馆-填写信息',
+    path: '/exhiForm/:T/:D',
+    exact: true,
+    Com: React.lazy(() => import('@/pages/B4form'))
+  },
+  {
     id: 90,
     name: '找不到页面',
     path: '*',

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

@@ -1,4 +1,83 @@
 .B3start {
+  background-color: #f6f9fd;
   :global {
+    .B3main {
+      padding: 20px 18px;
+      height: calc(100% - 100px);
+      overflow-y: auto;
+      .B3tit {
+        font-size: 24px;
+        color: var(--themeColor);
+        font-weight: 700;
+        margin-bottom: 15px;
+      }
+      .B3nowTime {
+        font-size: 18px;
+      }
+      .B3selDay {
+        margin: 15px 0 20px;
+        width: 100%;
+        overflow-x: auto;
+        height: 90px;
+        padding-bottom: 10px;
+        white-space: nowrap;
+        display: inline-block;
+        .B3dayRow {
+          font-size: 16px;
+          display: inline-block;
+          width: 56px;
+          height: 100%;
+          margin: 0 4px;
+          border-radius: 50px;
+          align-items: center;
+          border: 1px solid rgba(13, 121, 217, 0.2);
+          background-color: #fff;
+          text-align: center;
+          & > div {
+            &:nth-of-type(1) {
+              padding-top: 12px;
+              margin-bottom: 8px;
+            }
+          }
+        }
+        .B3dayRowAc {
+          background-color: var(--themeColor2);
+          color: #fff;
+          font-weight: 700;
+        }
+      }
+
+      .B3time {
+        background: #ffffff;
+        box-shadow: 0px 2px 5px 0px rgba(0, 0, 0, 0.1);
+        border-radius: 10px;
+        padding: 30px 20px;
+        display: flex;
+        flex-wrap: wrap;
+        .B3timeRow {
+          width: calc(50% - 8px);
+          height: 60px;
+          border-radius: 5px;
+          border: 1px solid #d9d9d9;
+          display: flex;
+          flex-direction: column;
+          justify-content: center;
+          align-items: center;
+          font-size: 16px;
+          margin-bottom: 20px;
+          margin-right: 16px;
+          &:nth-of-type(2n) {
+            margin-right: 0;
+          }
+        }
+      }
+      .B3timeRowAc {
+        background-color: var(--themeColor2);
+        color: #fff;
+      }
+      .myBtnNo {
+        color: #303030 !important;
+      }
+    }
   }
 }

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

@@ -1,9 +1,272 @@
-import React from 'react'
+import React, { useEffect, useMemo, useState } from 'react'
 import styles from './index.module.scss'
+import ZexhiBtn from '@/components/ZexhiBtn'
+import dayjs from 'dayjs'
+import getWeekList from '@/utils/timeChange'
+import classNames from 'classnames'
+import history from '@/utils/history'
+
+type ListType = {
+  createTime: string
+  creatorId: number
+  creatorName: string
+  friday: number
+  id: number
+  monday: number
+  saturday: number
+  sunday: number
+  thursday: number
+  time: string
+  tuesday: number
+  updateTime: string
+  wednesday: number
+}[]
+
+const listTemp = [
+  {
+    createTime: '2024-05-06 17:59:02',
+    creatorId: 1,
+    creatorName: '',
+    friday: 100,
+    id: 9,
+    monday: 0,
+    saturday: 100,
+    sunday: 100,
+    thursday: 1,
+    time: '08:00-09:00',
+    tuesday: 0,
+    updateTime: '2024-11-04 16:47:33',
+    wednesday: 100
+  },
+  {
+    createTime: '2024-05-06 17:59:02',
+    creatorId: 1,
+    creatorName: '',
+    friday: 100,
+    id: 10,
+    monday: 0,
+    saturday: 100,
+    sunday: 100,
+    thursday: 100,
+    time: '09:00-10:00',
+    tuesday: 100,
+    updateTime: '2024-11-04 16:47:33',
+    wednesday: 100
+  },
+  {
+    createTime: '2024-05-06 17:59:02',
+    creatorId: 1,
+    creatorName: '',
+    friday: 100,
+    id: 11,
+    monday: 0,
+    saturday: 100,
+    sunday: 100,
+    thursday: 100,
+    time: '10:00-11:00',
+    tuesday: 100,
+    updateTime: '2024-11-04 16:47:33',
+    wednesday: 100
+  },
+  {
+    createTime: '2024-05-06 17:59:02',
+    creatorId: 1,
+    creatorName: '',
+    friday: 100,
+    id: 12,
+    monday: 0,
+    saturday: 100,
+    sunday: 100,
+    thursday: 100,
+    time: '11:00-12:00',
+    tuesday: 100,
+    updateTime: '2024-11-04 16:47:33',
+    wednesday: 100
+  },
+  {
+    createTime: '2024-05-06 17:59:02',
+    creatorId: 1,
+    creatorName: '',
+    friday: 100,
+    id: 13,
+    monday: 0,
+    saturday: 100,
+    sunday: 100,
+    thursday: 100,
+    time: '14:00-15:00',
+    tuesday: 100,
+    updateTime: '2024-11-04 16:47:33',
+    wednesday: 100
+  },
+  {
+    createTime: '2024-05-06 17:59:02',
+    creatorId: 1,
+    creatorName: '',
+    friday: 100,
+    id: 14,
+    monday: 0,
+    saturday: 9999,
+    sunday: 100,
+    thursday: 100,
+    time: '15:00-16:00',
+    tuesday: 100,
+    updateTime: '2024-11-04 16:47:34',
+    wednesday: 100
+  },
+  {
+    createTime: '2024-05-06 17:59:02',
+    creatorId: 1,
+    creatorName: '',
+    friday: 100,
+    id: 15,
+    monday: 0,
+    saturday: 100,
+    sunday: 100,
+    thursday: 100,
+    time: '16:00-17:00',
+    tuesday: 100,
+    updateTime: '2024-11-04 16:47:34',
+    wednesday: 100
+  },
+  {
+    createTime: '2024-05-06 17:59:02',
+    creatorId: 1,
+    creatorName: '',
+    friday: 100,
+    id: 16,
+    monday: 0,
+    saturday: 100,
+    sunday: 100,
+    thursday: 100,
+    time: '17:00-18:00',
+    tuesday: 100,
+    updateTime: '2024-11-04 16:47:34',
+    wednesday: 100
+  }
+]
+
+type ZhouArrType = {
+  name: string
+  date: string
+  timeStamp: number
+}[]
+
 function B3start() {
+  const [list, setList] = useState<ListType>([])
+
+  useEffect(() => {
+    setTimeout(() => {
+      setList(listTemp)
+    }, 100)
+  }, [])
+
+  // 获取当前时间
+  const [nowTime, setNowTime] = useState('')
+
+  // 一周日期
+  const [zhouArr, setZhouArr] = useState<ZhouArrType>([])
+
+  // 当前选中时间 返回 索引
+  const indexRes = useMemo(() => {
+    return zhouArr.findIndex(v => v.date === nowTime)
+  }, [nowTime, zhouArr])
+
+  // 一周的所有 时段 数字 合集
+  const zhouObj = useMemo(() => {
+    const obj: { [key: string]: { name: string; num: number }[] } = {
+      0: [],
+      1: [],
+      2: [],
+      3: [],
+      4: [],
+      5: [],
+      6: []
+    }
+
+    list.forEach(v => {
+      obj[0].push({ name: v.time, num: v.monday })
+      obj[1].push({ name: v.time, num: v.tuesday })
+      obj[2].push({ name: v.time, num: v.wednesday })
+      obj[3].push({ name: v.time, num: v.thursday })
+      obj[4].push({ name: v.time, num: v.friday })
+      obj[5].push({ name: v.time, num: v.saturday })
+      obj[6].push({ name: v.time, num: v.sunday })
+    })
+
+    return obj
+  }, [list])
+
+  // 返回的数据
+  const numRes = useMemo(() => {
+    let arr: { name: string; num: number }[] = []
+
+    if (indexRes > -1) arr = zhouObj[indexRes]
+    // console.log(123, arr)
+
+    return arr
+    // const index = nowTime.
+  }, [indexRes, zhouObj])
+
+  useEffect(() => {
+    setNowTime(dayjs().format('YYYY.MM.DD'))
+
+    const nowWrrk = dayjs().day()
+    if ([0, 5, 6].includes(nowWrrk)) {
+      setTimeout(() => {
+        const dom: HTMLDivElement = document.querySelector('.B3selDay')!
+        if (dom) dom.scrollLeft = 1000
+      }, 100)
+    }
+
+    const arr = getWeekList()
+    setZhouArr(arr)
+  }, [])
+
+  const [acInd, setAcInd] = useState(-1)
+
+  const pageInd = useMemo(() => {
+    let num = 0
+    if (numRes[acInd] && numRes[acInd].num) num = numRes[acInd].num
+    return num
+  }, [acInd, numRes])
+
   return (
     <div className={styles.B3start}>
-      <h1>B3start</h1>
+      <div className='B3main'>
+        <div className='B3tit'>选择日期</div>
+        <div className='B3nowTime'>{nowTime}</div>
+        <div className='B3selDay'>
+          {zhouArr.map((item, index) => (
+            <div
+              key={item.name}
+              className={classNames('B3dayRow', nowTime === item.date ? 'B3dayRowAc' : '')}
+              onClick={() => setNowTime(item.date)}
+            >
+              <div>{item.name}</div>
+              <div>{item.date.slice(-2)}</div>
+            </div>
+          ))}
+        </div>
+        <div className='B3tit'>入馆时间</div>
+        <div className='B3time'>
+          {numRes.map((item, index) => (
+            <div
+              key={item.name}
+              onClick={() => setAcInd(index)}
+              className={classNames(
+                'B3timeRow',
+                acInd === index ? 'B3timeRowAc' : '',
+                item.num <= 0 ? 'myBtnNo' : ''
+              )}
+            >
+              {item.name}
+
+              {item.num <= 0 ? <p>预约已满</p> : ''}
+            </div>
+          ))}
+        </div>
+      </div>
+      <ZexhiBtn nextOk={!!pageInd} nextFu={() => history.push(`/exhiForm/${indexRes}/${acInd}`)} />
     </div>
   )
 }

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

@@ -0,0 +1,5 @@
+.AAAAA{
+  :global{
+    
+  }
+}

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

@@ -0,0 +1,14 @@
+import React from "react";
+import styles from "./index.module.scss";
+ function AAAAA() {
+  
+  return (
+    <div className={styles.AAAAA}>
+      <h1>AAAAA</h1>
+    </div>
+  )
+}
+
+const MemoAAAAA = React.memo(AAAAA);
+
+export default MemoAAAAA;

展示端/src/utils/timeChange.ts

@@ -0,0 +1,46 @@
+import dayjs from 'dayjs'
+
+// 获取当天0点的时间戳
+const getStartTime = (time: number) => {
+  const nowTimeDate = new Date(time)
+  return nowTimeDate.setHours(0, 0, 0, 0)
+}
+// 时间戳转日期格式
+const timestampToTime = (timestamp: number) => {
+  return dayjs(timestamp).format('YYYY.MM.DD')
+}
+// 获取一周的日期
+const getWeekList = () => {
+  let week = []
+  for (var i = 0; i < 7; i++) {
+    let weekObj = {
+      name: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'][i],
+      date: '',
+      timeStamp: 0
+    }
+    week.push(weekObj)
+  }
+  let today = getStartTime(Number(new Date())) // 当天时间戳
+  let today_week = new Date().getDay() // 当天星期几
+  if (today_week === 0) {
+    // 若当天为周日
+    week[6].timeStamp = today
+  } else {
+    week[today_week - 1].timeStamp = today
+  }
+
+  var leftNum = today_week - 1 // 本周内今天的前几天的数量
+  var rightNum = 7 - today_week // 本周内今天的后几天的数量
+
+  for (var left = 0; left < leftNum; left++) {
+    week[left].timeStamp = today - (today_week - left - 1) * 1000 * 60 * 60 * 24
+  }
+  for (var right = 0; right < rightNum; right++) {
+    week[right + today_week].timeStamp = today + (right + 1) * 1000 * 60 * 60 * 24
+  }
+  week.map(el => (el.date = timestampToTime(el.timeStamp)))
+  const weekList = JSON.parse(JSON.stringify(week))
+  return weekList
+}
+
+export default getWeekList