feat: 结果页

src/components/Radar/index.tsx

@@ -1,26 +1,46 @@
 import Taro, { useReady } from "@tarojs/taro";
 import { View, Canvas, Button } from "@tarojs/components";
-import { useEffect } from "react";
+import { useEffect, useRef } from "react";
 
-const RadarChart: React.FC = () => {
-  const labels = [
-    "正手球质",
-    "正手控制",
-    "反手球质",
-    "反手控制",
-    "底线相持",
-    "场地覆盖",
-    "发球接发",
-    "接随机球",
-    "战术设计",
-  ];
-  const values = [50, 75, 60, 20, 40, 70, 65, 35, 75];
+const RadarChart: React.FC = (props) => {
+  const { data } = props
+
+  const renderFnRef = useRef()
+  // const labels = [
+  //   "正手球质",
+  //   "正手控制",
+  //   "反手球质",
+  //   "反手控制",
+  //   "底线相持",
+  //   "场地覆盖",
+  //   "发球接发",
+  //   "接随机球",
+  //   "战术设计",
+  // ];
+  // const values = [50, 75, 60, 20, 40, 70, 65, 35, 75];
   const maxValue = 100;
   const levels = 4;
   const radius = 100;
   const center = { x: 160, y: 160 };
 
+  useEffect(() => {
+    if (data.length > 0) {
+      const {texts, vals} = data.reduce((res, item) => {
+        const [text, val] = item
+        return {
+          texts: [...res.texts, text],
+          vals: [...res.vals, val]
+        }
+      }, { texts: [], vals: [] })
+      renderFnRef.current && renderFnRef.current(texts, vals)
+    }
+  }, [data])
+
   useReady(() => {
+    renderFnRef.current = renderCanvas
+  });
+
+  function renderCanvas (labels, values) {
     const query = Taro.createSelectorQuery();
     query
       .select("#radarCanvas")
@@ -93,10 +113,10 @@ const RadarChart: React.FC = () => {
         ctx.fillStyle = "rgba(0,200,180,0.3)";
         ctx.fill();
         ctx.strokeStyle = "#00c8b4";
-        ctx.lineWidth = 4;
+        ctx.lineWidth = 3;
         ctx.stroke();
       });
-  });
+  }
 
 
   // 保存为图片

src/other_pages/ntrp-evaluate/index.module.scss

@@ -545,6 +545,10 @@
         font-style: normal;
         font-weight: 900;
         line-height: 44px;
+        display: flex;
+        align-items: center;
+        justify-content: center;
+        gap: 8px;
 
         .level {
           color: #00E5AD;

src/other_pages/ntrp-evaluate/index.tsx

@@ -7,6 +7,7 @@ import { withAuth, RadarChart } from "@/components";
 import evaluateService, {
   LastTimeTestResult,
   Question,
+  TestResultData,
 } from "@/services/evaluateService";
 import { useUserInfo, useUserActions } from "@/store/userStore";
 import { delay } from "@/utils";
@@ -323,12 +324,28 @@ function Test(props) {
 }
 
 function Result() {
+  const { params } = useRouter();
+  const { id } = params;
   const userInfo = useUserInfo();
   const { fetchUserInfo } = useUserActions();
 
+  const [result, setResult] = useState<TestResultData>();
+  const [radarData, setRadarData] = useState<[propName: string, prop: number][]>([])
+
   useEffect(() => {
-    fetchUserInfo()
-  }, [])
+    getResultById();
+    fetchUserInfo();
+  }, []);
+
+  async function getResultById() {
+    const res = await evaluateService.getTestResult({ record_id: Number(id) });
+    if (res.code === 0) {
+      setResult(res.data);
+      setRadarData(Object.entries(res.data.radar_data.abilities).map(([key, value]) => [key, value.current_score]))
+    }
+  }
+
+  console.log(result, "result");
 
   return (
     <View className={styles.resultContainer}>
@@ -357,14 +374,14 @@ function Result() {
           </View>
           <View className={styles.levelWrap}>
             <Text>NTRP</Text>
-            <Text className={styles.level}>{1.1}</Text>
+            <Text className={styles.level}>{result?.ntrp_level}</Text>
           </View>
           <View className={styles.slogan}>
             <Text>变线+网前，下一步就是赢比赛！</Text>
           </View>
         </View>
         <View>
-          <RadarChart />
+          <RadarChart data={radarData} />
         </View>
       </View>
     </View>