传递参数的方式更改

package-lock.json

@@ -1217,6 +1217,11 @@
         "isarray": "0.0.1"
       }
     },
+    "pdfjs-dist": {
+      "version": "2.12.313",
+      "resolved": "https://registry.npmmirror.com/pdfjs-dist/-/pdfjs-dist-2.12.313.tgz",
+      "integrity": "sha512-1x6iXO4Qnv6Eb+YFdN5JdUzt4pAkxSp3aLAYPX93eQCyg/m7QFzXVWJHJVtoW48CI8HCXju4dSkhQZwoheL5mA=="
+    },
     "picocolors": {
       "version": "1.0.0",
       "resolved": "https://registry.npmmirror.com/picocolors/-/picocolors-1.0.0.tgz",

package.json

@@ -14,6 +14,7 @@
     "antd-mobile": "^5.28.1",
     "autoprefixer": "^10.4.13",
     "axios": "^0.21.4",
+    "pdfjs-dist": "^2.12.313",
     "react": "^17.0.0",
     "react-dom": "^17.0.0",
     "react-router-dom": "^5.2.0",

src/App.tsx

@@ -9,12 +9,12 @@ import { Layout } from "~/views/Layout";
 import { VideoKindList } from "./views/videokindList";
 import { DownloadCaigong1 } from "./views/downloadCaigong1";
 import { DownloadCaigong2 } from "./views/downloadCaigong2";
-
+import { Pdf } from "./views/pdf";
 export function App() {
   return (
     <Router>
       <Switch>
-        <Route onEnter={() => { document.title = '' }} exact path="/">
+        <Route exact path="/">
           <VideoKindList />
         </Route>
         <Route path="/home">
@@ -26,7 +26,10 @@ export function App() {
         <Route path="/me">
           <Me />
         </Route>
-        <Route path="/videoList">
+        <Route path="/pdf">
+          <Pdf />
+        </Route>
+        <Route path="/videoList/:subject">
           <VideoList />
         </Route>
 

src/utils/request.ts

@@ -21,6 +21,7 @@ request.interceptors.request.use((config) => {
 });
 
 request.interceptors.response.use((res) => {
+	let redirect_uri = window.location.href
 	if (res && res.data) {
 		switch (res.data.code) {
 			case 401:
@@ -33,13 +34,13 @@ request.interceptors.response.use((res) => {
 
 					switch (import.meta.env.MODE) {
 						case "development":
-							window.location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx457ba48e0801c0b6&redirect_uri=https://nbjk1-h5.zzxcx.net/&response_type=code&scope=snsapi_userinfo&state=LOGIN#wechat_redirect`)
+							window.location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx457ba48e0801c0b6&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=LOGIN#wechat_redirect`)
 							break;
 						case "test":
-							window.location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx457ba48e0801c0b6&redirect_uri=https://nbjk1-h5.zzxcx.net/&response_type=code&scope=snsapi_userinfo&state=LOGIN#wechat_redirect`)
+							window.location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx457ba48e0801c0b6&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=LOGIN#wechat_redirect`)
 							break;
 						case "production":
-							window.location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx457ba48e0801c0b6&redirect_uri=https://nbjk-h5.zzxcx.net/&response_type=code&scope=snsapi_userinfo&state=LOGIN#wechat_redirect`);
+							window.location.replace(`https://open.weixin.qq.com/connect/oauth2/authorize?appid=wx457ba48e0801c0b6&redirect_uri=${redirect_uri}&response_type=code&scope=snsapi_userinfo&state=LOGIN#wechat_redirect`);
 							break;
 					}
 				}, 2000)

src/views/pdf/index.less

@@ -0,0 +1,3 @@
+.pdf-canvas {
+    width: 100%;
+  }

src/views/pdf/index.tsx

@@ -0,0 +1,75 @@
+import './index.less'
+import React, { useEffect, useState } from "react";
+import * as PDFJS from 'pdfjs-dist/legacy/build/pdf'; // 引入PDFJS
+import pdfjsWorker from 'pdfjs-dist/legacy/build/pdf.worker.entry.js'; // 引入workerSrc的地址
+import 'pdfjs-dist/web/pdf_viewer.css';
+import { PDFDocumentProxy } from 'pdfjs-dist/types/web/pdf_find_controller';
+PDFJS.GlobalWorkerOptions.workerSrc = pdfjsWorker; //设置PDFJS.GlobalWorkerOptions.workerSrc的地址
+import { Toast } from 'antd-mobile'
+document.title = '预览pdf';
+export const Pdf: React.FC = (props: any) => {
+    let [pdfPagesNum, setPdfPagesNum] = useState(1)
+
+    const getPdf = (url: string) => {
+        let that = this;
+       let loadToast= Toast.show({
+            content: "正在加载中",
+            icon: "loading"
+        });
+        (document.getElementById('pdf-canvas') as HTMLDivElement).innerHTML = '';
+        PDFJS.getDocument({url:url
+       }).promise.then((pdfDoc) => {
+            pdfPagesNum = pdfDoc.numPages; // pdf的总页数
+            //console.log(pdfPagesNum)
+            //获取第pageNum页的数据
+            for (let index = 1; index <= pdfDoc.numPages; index++) {
+                showPdfs(pdfDoc, index);
+                console.log(index)
+            }
+            loadToast.close()
+        });
+        
+    }
+    const showPdfs = (pdfDoc: PDFDocumentProxy, pageNum: number) => {
+        pdfDoc.getPage(pageNum).then((page) => {
+            // 设置canvas相关的属性
+            // console.log(canvasDomArr.value)
+            const canvas: HTMLCanvasElement = document.createElement('canvas');
+            canvas.classList.add('pdf-canvas');
+            const ctx = canvas.getContext('2d') as CanvasRenderingContext2D;
+            const dpr = window.devicePixelRatio || 1;
+            const bsr =
+                ctx?.webkitBackingStorePixelRatio ||
+                ctx?.mozBackingStorePixelRatio ||
+                ctx?.msBackingStorePixelRatio ||
+                ctx?.oBackingStorePixelRatio ||
+                ctx?.backingStorePixelRatio ||
+                1;
+            const ratio = dpr / bsr;
+            const viewport = page.getViewport({ scale: 1 });
+            canvas.width = viewport.width * ratio;
+            canvas.height = viewport.height * ratio;
+            // canvas.style.width = viewport.width + "px";
+            // canvas.style.height = viewport.height + "px";
+            ctx.setTransform(ratio, 0, 0, ratio, 0, 0);
+            const context = {
+                canvasContext: ctx,
+                viewport: viewport,
+            };
+            // 数据渲染到canvas画布上
+            page.render(context);
+            //插入canvas
+            document.getElementById('pdf-canvas')?.appendChild(canvas);
+        });
+    }
+    useEffect(() => {
+        getPdf('./ctjk_library.pdf')
+
+    })
+    return (
+        <div>
+            <div id="pdf-canvas"></div>
+        </div>
+    )
+
+}

src/views/pdfImages/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>
+    )
+
+}

src/views/videoList/index.tsx

@@ -1,7 +1,9 @@
 import './index.less'
 import React, { useEffect, useState } from "react";
 import api from '~/api'
+import { useParams } from 'react-router-dom';
 export const VideoList: React.FC = (props: any) => {
+   
     const [configList, setConfigList] = useState([{
         jiao: 'https://t1-1305573081.file.myqcloud.com/ctjk/nbjk/h5/videoList/kemu1jiao.png',
         title: "科目一",
@@ -30,24 +32,40 @@ export const VideoList: React.FC = (props: any) => {
         videoUrl: "https://mp.weixin.qq.com/s?__biz=Mzg2OTkwMDU0OA==&mid=2247483656&idx=1&sn=61381ded69ebe20d8c0fedc7e77ee0ce&chksm=ce974963f9e0c075bb209fde63d128a97936eb65694d373853c6352584acc645085f42f7b9d5#rd"
     }])
     const [subject, setSubject] = useState(1)
-   
-    useEffect(()=>{
+    const params = useParams<{
+        subject:string
+    }>()
+    useEffect(() => {
         let query = new URLSearchParams(window.location.search)
+        document.title = ''
         console.log(query.get("subject"))
-        api.studentVideoTeachingList({
-            state: 1,
-            videoSubject: Number(query.get("subject"))
-        }).then(res => {
-            setList(res.data.rows)
-            console.log(res)
-            
-        
-    
-    
-        })
+        if (query.get("state") == 'LOGIN') {
+            api.loginGzhcode({
+                authorizationCode: query.get("code") || ""
+            }).then(res => {
+                window.localStorage.setItem("token", res.data.data.token)
+                console.log(res.data.data.token)
+                window.location.replace('/videoList/'+Number(params.subject))
+            })
+        }
+        else {
+            api.studentVideoTeachingList({
+                state: 1,
+                videoSubject:Number(params.subject)
+            }).then(res => {
+                setList(res.data.rows)
+                console.log(res)
+
+
+
+
+            })
+
+        }
+
+
+    }, [])
 
-    },[])
-   
 
     return (
         <div className="videoList">

src/views/videokindList/index.tsx

@@ -56,7 +56,7 @@ export const VideoKindList: React.FC = (props: any) => {
                     list.map((item, index) => {
                         return (
                             <Link key={index} to={
-                                './videoList?subject=' + (index + 1)
+                                './videoList/' + (index + 1)
                             }>
                                 <div className="list-item" key={index}>
                                     <img className="list-item-img" src={item.image} alt="图片" />