引入新的页面,考场列表页

package.json

@@ -12,6 +12,7 @@
     "@types/react-router-dom": "^5.1.7",
     "antd": "^4.12.3",
     "antd-mobile": "^5.28.1",
+    "antd-mobile-icons": "^0.3.0",
     "autoprefixer": "^10.4.13",
     "axios": "^0.21.4",
     "pdfjs-dist": "^2.12.313",

src/App.tsx

@@ -7,6 +7,7 @@ import { VideoList } from "~/views/videoList/index";
 import { Layout } from "~/views/Layout";
 import { VideoKindList } from "./views/videokindList";
 import {CourseCatalog} from './views/courseCatalog'
+import {ExamRoadVideo} from './views/examRoadVideo'
 import { DownloadCaigong1 } from "./views/downloadCaigong1";
 import { DownloadCaigong2 } from "./views/downloadCaigong2";
 import { PdfImages } from './views/pdfImages'
@@ -44,7 +45,9 @@ export function App() {
       <Route path="/courseCatalog">
         <CourseCatalog />
       </Route>
-
+      <Route path="/examRoadVideo">
+        <ExamRoadVideo />
+      </Route>
       <Route path="/downloadCaigong1">
         <DownloadCaigong1 />
       </Route>

src/api/index.ts

@@ -76,6 +76,36 @@ const api = {
             data
 
         })
+    },
+    //根据省份ID获取考场城市
+    studentExamInfoCity(proviceId:number){
+        return request({
+            url:`student/exam/info/city/${proviceId}`,
+            method:'get',
+        })
+
+    },
+//根据城市ID获取考场区县
+    studentExamInfoCounty(cityId:number){
+        return request({
+            url:`student/exam/info/county/${cityId}`,
+            method:'get',
+        })
+
+    },
+    // ip定位
+    studentExamInfoIp(){
+        return request({
+            url:"student/exam/info/ip",
+            method:'get'
+        })
+    },
+    //查询考场详细信息
+    studentExamInfoList(data:{}){
+        return request({
+            url:"student/exam/info/list",
+            method:'get'
+        })
     }
 
     

src/components/mNavBar/index.tsx

@@ -0,0 +1,10 @@
+import './index.less'
+import React from "react";
+export const MNavBar: React.FC = (props: any) => {
+    return (
+        <div>
+            <span>不服啊</span>
+        </div>
+    )
+
+}

src/views/courseCatalog/components/courseCatalog/index.tsx

@@ -31,7 +31,7 @@ export const CourseCatalog: React.FC = (props: any) => {
             province: '上海市'
 
         }).then(res => {
-            setList(res.data.rows)
+            // setList(res.data.rows)
 
 
         })

src/views/examRoadVideo/index.less

@@ -0,0 +1,145 @@
+.ExamRoadVideo {
+    .header {
+        width: 100%;
+        height: auto;
+        flex-wrap: wrap;
+        border-radius: 0px 0px 45px 45px;
+
+
+
+        .rect {
+            width: 100%;
+            height: 406px;
+            background-image: url("https://ndata.zzxcx.net/ctjk/mp-wx/buyVideo/headerBg.png");
+            background-size: 100%;
+
+            .search {
+                width: 100%;
+                padding: 0 30px;
+                margin-bottom: 20px;
+                margin-top: 20px;
+                position: relative;
+
+                .icon1 {
+                    position: absolute;
+                    top: 12px;
+                    left: 50px;
+                }
+
+                .bar {
+                    width: 100%;
+                    outline: none;
+                    background-color: #fff;
+                    height: 60px;
+                    border-radius: 30px 30px 30px 30px;
+                    font-size: 26px;
+                    padding-left: 72px;
+                    border: none;
+                }
+            }
+
+            .select {
+                padding: 0 30px;
+                display: flex;
+                padding: 0 30px;
+                justify-content: space-between;
+            }
+        }
+
+        .arc {
+            width: 100%;
+            height: 100px;
+        }
+
+        .header-province {
+            width: 210px;
+            height: 60px;
+            background: #fff;
+            border-radius: 40px;
+            font-size: 26px;
+            padding-left: 30px;
+            box-sizing: border-box;
+            outline: none;
+            border: none;
+        }
+
+        .header-city {
+            width: 210px;
+            height: 60px;
+            background: #fff;
+            border-radius: 40px;
+            font-size: 26px;
+            padding-left: 30px;
+            box-sizing: border-box;
+            outline: none;
+            border: none;
+        }
+
+        .header-area {
+            width: 210px;
+            height: 60px;
+            background: #fff;
+            border-radius: 40px;
+            font-size: 26px;
+            padding-left: 30px;
+            box-sizing: border-box;
+            outline: none;
+            border: none;
+        }
+    }
+
+    .content {
+        width: 100%;
+        padding: 0px 30px;
+        transform: translateY(-190px);
+
+        .list {
+            width: 100%;
+            background: #edf4ff;
+            box-shadow: 0px 6px 12px 2px rgba(0, 0, 0, 0.1);
+
+            border-radius: 20px 20px 20px 20px;
+
+            .list-item {
+                width: 100%;
+                padding: 30px;
+                padding-top: 30px;
+                padding-bottom: 0px;
+                display: flex;
+                height: 220px;
+                flex-wrap: wrap;
+            }
+
+            .list-item-image {
+                width: 248px;
+                height: 138px;
+                margin-right: 24px;
+            }
+
+            .list-item-border {
+                width: 100%;
+                background: #e0e0e0;
+                height: 2px;
+            }
+            .list-item-textbody{
+                display: 'flex';
+                align-items: space-between;
+                flex-wrap: 'wrap';
+                width: 355px;
+            }
+
+            .list-item-text1 {
+                width: 305px;
+                color: #0a1a33;
+                font-size: 30px;
+                padding-top: 10px;
+            }
+
+            .list-item-text2 {
+                width: 305px;
+                color: #8a9099;
+                font-size: 26px;
+            }
+        }
+    }
+}

src/views/examRoadVideo/index.tsx

@@ -0,0 +1,105 @@
+import React, { useEffect, useRef, useState } from "react";
+import "./index.less";
+import { SearchBarRef } from 'antd-mobile/es/components/search-bar'
+
+import { SearchOutline } from 'antd-mobile-icons'
+import api from "~/api";
+export const ExamRoadVideo: React.FC = (props: any) => {
+  const searchRef = useRef<SearchBarRef>(null)
+  const [city, setCity] = useState({
+    cityName: "福州市",
+    city: "3501"
+  })
+  const [province, setProvince] = useState({
+    cityName: "province",
+    city: "35"
+  })
+  const [examList, setExamList] = useState([])
+  useEffect(() => {
+    api.studentExamInfoIp().then(res => {
+      console.log(res)
+    })
+    api.studentExamInfoList({}).then(res => {
+      console.log(res)
+      setExamList(res.data.rows)
+
+    })
+
+  }, [])
+  return (
+    <div className="ExamRoadVideo">
+      <div className="header">
+        <div className="rect">
+          <div className="search">
+            <SearchOutline className="icon1" color="#8A9099" fontSize={18} />
+            <input placeholder="输入系列课标题" className="bar" type="search"></input>
+          </div>
+          <div
+            className="select"
+
+          >
+            <input
+
+              disabled
+              v-model="province.province"
+
+              placeholder="省份"
+              className="header-province"
+              type="text"
+            />
+            <input
+              disabled
+
+              v-model="city.city"
+              placeholder="地市"
+              className="header-city"
+              type="text"
+            />
+
+            <input
+              disabled
+
+
+              v-model="county.county"
+              placeholder="区"
+              className="header-area"
+              type="text"
+            />
+
+          </div>
+        </div>
+
+      </div>
+      <div className="content">
+        <div className="list">
+          {/* <van-empty
+          v-if="examRoomList.length == 0"
+          className="custom-image"
+          image="https://img.yzcdn.cn/vant/custom-empty-image.png"
+          description="该城市无视频"
+        /> */}
+          {examList.map(item => {
+            return (<div
+              className="list-item"
+
+            >
+              <img src={item.image} className="list-item-image">
+              </img>
+              <div
+              className="list-item-textbody"
+              
+              >
+                <div className="list-item-text1">{item.name}</div>
+                <div className="list-item-text2">共{item.videoCount}节</div>
+              </div>
+              <div className="list-item-border"></div>
+            </div>)
+
+          })}
+
+        </div>
+      </div>
+    </div>
+
+  );
+};

src/views/home/me/index.tsx

@@ -0,0 +1,10 @@
+import './index.less'
+import React from "react";
+export const Me: React.FC = (props: any) => {
+    return (
+        <div>
+            <span>不服啊</span>
+        </div>
+    )
+
+}