fix

src/assets/data/questions.ts

@@ -1,4 +1,4 @@
-const questions = [
+ const questions = [
   [
     {
       id: 1,
@@ -513,4 +513,8 @@ const randomQuestions = questions.map((questionArray) => {
   };
 });
 
-export default shuffle(randomQuestions);
+export  {
+  questions,
+  shuffle,
+  generateThreeOptions
+};

src/page/home/iindex.tsx

@@ -11,9 +11,10 @@ const Home = () => {
 
   const handleStart = () => {
     navigate('/question');
+    // window.location.reload()
   }
   const handleRank = () => {
-    navigate('/rank');
+    navigate('/rank', { state: { noRank: true } });
   }
   return (
     <div className={styles.home}>

src/page/question/components/index.module.scss

@@ -45,6 +45,7 @@
       }
     }
     .from {
+      display: none;
       width: 100%;
       height: 55px;
       padding: 20px 0;
@@ -89,6 +90,7 @@
       margin-top: 20px;
       background: linear-gradient(90deg, rgba(89, 110, 141, 0.35) 0%, #596E8D 49%, rgba(89, 110, 141, 0.35) 100%);
       cursor: default;
+      display: none;
     }
     .btn-group {
       width: 100%;

src/page/question/components/index.tsx

@@ -1,4 +1,4 @@
-import React, { useState, useEffect, useMemo } from "react";
+import React, { useState, useEffect } from "react";
 import styles from "./index.module.scss";
 import { useNavigate } from "react-router-dom";
 import { getRankList, RankItem, RankDescItem, saveScore } from "../../../utils/API";
@@ -54,39 +54,46 @@ const Result = ({ timeLeft, rightCount }: ResultProps) => {
         score: rightCount * 10,
         time: exhausetime
       }).then(() => {
-        navigate("/rank")
+        navigate("/rank", { state: { noRank: false } })
       })
+      return
+    }
+    if (isShowRank) {
+      navigate("/rank", { state: { noRank: true } })
+      return
     }
   }
-
+  const [isShowRank, setIsShowRank] = useState(true)
   useEffect(() => {
     getRankList().then(res => {
-      const rankDescResult = getRankDesc(res.data.data, rightCount, 180 - timeLeft)
-      setRankDesc(rankDescResult)
+      setRankDesc(res.data.data)
+      let rankData = res.data.data
+      setIsShowRank((rankData[rankData.length - 1].score > rightCount * 10) || (rankData[rankData.length - 1].score === rightCount * 10 && rankData[rankData.length - 1].time < exhausetime) ? true
+        : false)
     })
-  }, [rightCount, timeLeft])
-
-  const currentRank = useMemo(() => rankDesc.find(item => item.isCurrentUser)?.rank || 0, [rankDesc])
+  }, [exhausetime, rightCount])
+  console.log(rankDesc)
   return (
     <div className={styles.infomation}>
       <div className="title">恭喜您！
       </div>
       <div className="content">
-        共答对 <span>{rightCount}</span> 道题，耗时 <span>{exhausetime}</span> 秒。{currentRank > 10 ? "当前排名第" + currentRank + "名" : "恭喜您进入当前答题排行榜前十名！"}
+        共答对 <span>{rightCount}</span> 道题，耗时 <span>{exhausetime}</span> 秒。{isShowRank ? "未进入排行榜" : "恭喜您进入当前答题排行榜前十名！"}
       </div>
-      <div className="from">
+      <div className="from" style={{ display: isShowRank ? "none" : "flex" }}>
         <input value={nickname} onChange={(e) => setNickname(e.target.value)} onBlur={handleInputChange} type="text" placeholder="请输入昵称，不超过5个字" />
         <input value={phone} onChange={(e) => setPhone(e.target.value)} onBlur={handleInputChange} type="text" placeholder="请输入联系方式，不超过20个字" />
       </div>
       <div className="content2">
         游戏规则：答对更多题目耗时更少的前五名 将在展览结束后赠送文创书签纪念品。
       </div>
-      <div className="tips" style={{ opacity: isShowTips ? 1 : 0 }}>您未填写昵称和联系方式，无法参与此次活动</div>
+      <div className="tips" style={{ display: isShowTips && !isShowRank ? "block" : "none" }}>您未填写昵称和联系方式，无法参与此次活动</div>
+      <div className="tips" style={{ display: !isShowTips && !isShowRank ? "block" : "none" }}>点击查看排行榜参与排名</div>
       <div className="btn-group">
-        <div className={"backHome item"} onClick={() => navigate("/")}>返回首页</div>
+        <div className={isShowRank ? "item" : "backHome"} onClick={() => navigate("/")}>返回首页</div>
         <div className="item" onClick={handleRank}>查看排行榜</div>
       </div>
-      <div className="back"><img src={require("../../../assets/img/back.png")} alt="" /></div>
+      <div className="back" onClick={() => navigate("/")}><img src={require("../../../assets/img/back.png")} alt="" /></div>
 
     </div >
   );

src/page/question/index.tsx

@@ -1,6 +1,6 @@
-import React, { useState, useEffect } from "react";
+import React, { useState, useEffect, useMemo } from "react";
 import styles from "./index.module.scss";
-import randomQuestions from "../../assets/data/questions";
+import { shuffle, generateThreeOptions, questions } from "../../assets/data/questions";
 import { getSessionStorage, setSessionStorage, clearSessionStorage } from "../../utils/storage";
 import { useNavigate } from "react-router-dom";
 import dayjs from "dayjs";
@@ -14,6 +14,7 @@ interface QuestionItem {
 }
 
 interface QuestionProps {
+  randomQuestions: QuestionItem[];
   item: QuestionItem;
   setItem: (item: QuestionItem) => void;
   currentIndex: number;
@@ -22,7 +23,7 @@ interface QuestionProps {
   setRightCount: (rightCount: number) => void;
 }
 
-const Question = ({ item, setItem, currentIndex, setCurrentIndex, setIsFinish, setRightCount }: QuestionProps) => {
+const Question = ({ randomQuestions, item, setItem, currentIndex, setCurrentIndex, setIsFinish, setRightCount }: QuestionProps) => {
   const sentence = item.title.split("——")[0];
   const from = item.title.split("——")[1];
   const [questionStatus, setQuestionStatus] = useState(["or", "or", "or", "or", "or", "or", "or", "or", "or", "or"]);
@@ -96,6 +97,15 @@ const Question = ({ item, setItem, currentIndex, setCurrentIndex, setIsFinish, s
 };
 
 const QuestionList = () => {
+  const randomQuestions: QuestionItem[] = useMemo(() => {
+    return (shuffle(questions.map((questionArray) => {
+      const question = shuffle(questionArray)[0];
+      return {
+        ...question,
+        options: generateThreeOptions(question.options),
+      };
+    })) as QuestionItem[])
+  }, [])
   const [item, setItem] = useState<QuestionItem>(randomQuestions[0]);
   const [index, setIndex] = useState(0);
   const [timeLeft, setTimeLeft] = useState(180);
@@ -130,6 +140,7 @@ const QuestionList = () => {
     ) : (
       <div className={styles.question}>
         <Question
+          randomQuestions={randomQuestions}
           item={item}
           setItem={setItem}
           currentIndex={index}

src/page/rank/index.tsx

@@ -1,6 +1,6 @@
 import React, { useEffect, useRef, useState } from "react";
+import { useLocation, useNavigate } from "react-router-dom";
 import styles from "./index.module.scss";
-import { useNavigate } from "react-router-dom";
 import { RankItem, getRankList } from "../../utils/API";
 
 const sortDESC = (arr: RankItem[]) => {
@@ -29,26 +29,31 @@ const Rank = () => {
   const [currentUser, setCurrentUser] = useState<number>(0);
   const topThree = ["探花", "榜眼", "状元"];
   const containerRef = useRef<HTMLDivElement>(null);
+  const { noRank } = useLocation().state as { noRank: boolean } || { noRank: false };
 
   useEffect(() => {
     getRankList().then((res) => {
       setRankList(sortDESC(res.data.data));
       // 暂时用最大id作为当前用户
-      setCurrentUser(res.data.data.find((item: RankItem) => item.id === res.data.data.length)!.id);
+      // 找到最大id
+      const maxId = Math.max(...res.data.data.map((item: RankItem) => item.id));
+      if (noRank) {
+        setCurrentUser(res.data.data[res.data.data.length - 1].id);
+      } else {
+        setCurrentUser(maxId);
+      }
     });
     // 一开始就滚到当前用户
 
     setTimeout(() => {
-      console.log(document.querySelector(".rank-item-active"));
       const container = document.querySelector(".rank-item-active");
       if (container) {
-        console.log(container);
         container.scrollIntoView({ behavior: "smooth", inline: "end", block: "nearest" });
       }
     }, 200);
 
     containerRef.current = document.querySelector(".container")!;
-  }, []);
+  }, [noRank]);
 
   // 滚轮让x轴滚动
   const handleWheel = (event: React.WheelEvent<HTMLDivElement>) => {
@@ -57,22 +62,6 @@ const Rank = () => {
     }
   };
 
-  // 移动端触摸滚动
-  const [startX, setStartX] = useState<number>(0);
-
-  const touchStart = (event: React.TouchEvent<HTMLDivElement>) => {
-    if (containerRef.current) {
-      setStartX(event.touches[0].clientX); // 记录触摸开始的X坐标
-    }
-  };
-
-  const touchMove = (event: React.TouchEvent<HTMLDivElement>) => {
-    if (containerRef.current) {
-      const moveX = event.touches[0].clientX - startX;
-      containerRef.current.scrollLeft = containerRef.current.scrollLeft - moveX;
-      setStartX(event.touches[0].clientX);
-    }
-  };
 
   const activeRank = rankList.find((item) => item.id === currentUser)?.rank!;
   const handleLeft = () => {

src/utils/http.ts

@@ -1,7 +1,7 @@
 import axios from "axios";
 
 const http = axios.create({
-  baseURL: "http://192.168.20.61:8098/",
+  baseURL: "https://sit-qingdaobwg.4dage.com/",
   timeout: 5000,
 });