bimwe/mini-programs
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: test result

Browse Source
This commit is contained in:
刘杰
2025-09-30 09:52:28 +08:00
parent 288b845270
commit 9fef267cf6
7 changed files with 386 additions and 16 deletions
Download Patch File Download Diff File Expand all files Collapse all files

23
src/components/Radar/index.tsx
View File

@@ -1,8 +1,8 @@
import Taro, { useReady } from "@tarojs/taro";
import { View, Canvas, Button } from "@tarojs/components";
import { useEffect, useRef } from "react";
import { useEffect, useRef, forwardRef, useImperativeHandle } from "react";
const RadarChart: React.FC = (props) => {
const RadarChart: React.FC = forwardRef((props, ref) => {
const { data } = props
const renderFnRef = useRef()
@@ -118,6 +118,23 @@ const RadarChart: React.FC = (props) => {
});
}
useImperativeHandle(ref, () => ({
generateImage: () => new Promise((resolve, reject) => {
const query = Taro.createSelectorQuery()
query.select("#radarCanvas")
.fields({ node: true, size: true })
.exec((res) => {
const canvas = res[0].node
// ⚠️ 关键：传 canvas，而不是 canvasId
Taro.canvasToTempFilePath({
canvas,
success: (res) => resolve(res.tempFilePath),
fail: (err) => reject(err),
})
})
})
}))
// 保存为图片
const saveImage = () => {
@@ -142,6 +159,6 @@ const RadarChart: React.FC = (props) => {
{/* <Button onClick={saveImage}>保存为图片</Button> */}
</View>
);
};
});
export default RadarChart;

118
src/other_pages/ntrp-evaluate/index.module.scss
View File

@@ -564,5 +564,123 @@
line-height: normal;
}
}
.retest {
position: absolute;
right: 12px;
top: 12px;
display: flex;
padding: 6px 10px;
justify-content: center;
align-items: center;
gap: 6px;
border-radius: 12px;
border: 0.5px solid rgba(0, 0, 0, 0.12);
background: #FFF;
box-shadow: 0 8px 64px 0 rgba(0, 0, 0, 0.10);
color: rgba(0, 0, 0, 0.85);
font-feature-settings: 'liga' off, 'clig' off;
font-family: "PingFang SC";
font-size: 12px;
font-style: normal;
font-weight: 500;
line-height: 20px;
.re_actIcon {
width: 12px;
height: 12px;
}
}
}
.updateTip {
color: #000;
font-feature-settings: 'liga' off, 'clig' off;
font-family: "PingFang SC";
font-size: 12px;
font-style: normal;
font-weight: 400;
line-height: 24px;
text-align: center;
padding: 24px 0;
.grayTip {
color: rgba(60, 60, 67, 0.60);
}
}
.actions {
padding: 0 28px;
display: flex;
flex-direction: column;
align-items: center;
justify-content: flex-start;
gap: 10px;
.viewGame {
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.06);
width: 100%;
overflow: hidden;
.viewGameBtn {
width: 100%;
height: 50px;
background: #000;
color: #FFF;
font-feature-settings: 'liga' off, 'clig' off;
font-family: "PingFang SC";
font-size: 16px;
font-style: normal;
font-weight: 600;
display: flex;
align-items: center;
justify-content: center;
}
}
.otherActions {
width: 100%;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
.share, .saveImage {
width: 50%;
height: 50px;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.06);
overflow: hidden;
.shareBtn, .saveImageBtn {
background: #FFF;
width: 100%;
height: 50px;
display: flex;
align-items: center;
justify-content: center;
gap: 8px;
color: #000;
font-feature-settings: 'liga' off, 'clig' off;
font-family: "PingFang SC";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
.downloadIcon {
width: 20px;
height: 20px;
}
.wechatIcon {
width: 24px;
height: 24px;
}
}
}
}
}
}

222
src/other_pages/ntrp-evaluate/index.tsx
View File

@@ -1,6 +1,6 @@
import { useState, useEffect, useRef } from "react";
import { View, Text, Image, Button } from "@tarojs/components";
import Taro, { useRouter } from "@tarojs/taro";
import { useState, useEffect, useRef, useId } from "react";
import { View, Text, Image, Button, Canvas } from "@tarojs/components";
import Taro, { useRouter, useShareAppMessage } from "@tarojs/taro";
import dayjs from "dayjs";
import classnames from "classnames";
import { withAuth, RadarChart } from "@/components";
@@ -10,13 +10,16 @@ import evaluateService, {
TestResultData,
} from "@/services/evaluateService";
import { useUserInfo, useUserActions } from "@/store/userStore";
import { delay } from "@/utils";
import { delay, getCurrentFullPath } from "@/utils";
import CloseIcon from "@/static/ntrp/ntrp_close_icon.svg";
import DocCopy from "@/static/ntrp/ntrp_doc_copy.svg";
import ArrowRight from "@/static/ntrp/ntrp_arrow_right.svg";
import ArrowBack from "@/static/ntrp/ntrp_arrow_back.svg";
import CircleChecked from "@/static/ntrp/ntrp_circle_checked.svg";
import CircleUnChecked from "@/static/ntrp/ntrp_circle_unchecked.svg";
import WechatIcon from "@/static/ntrp/ntrp_wechat.svg";
import DownloadIcon from "@/static/ntrp/ntrp_download.svg";
import ReTestIcon from "@/static/ntrp/ntrp_re-action.svg";
import styles from "./index.module.scss";
enum StageType {
@@ -25,6 +28,48 @@ enum StageType {
RESULT = "result",
}
function adjustRadarLabels(
source: [string, number][],
topK: number = 4 // 默认挑前4个最长的标签保护
): [string, number][] {
if (source.length === 0) return source;
// 复制并按长度排序（降序）
let sorted = [...source].sort((a, b) => b[0].length - a[0].length);
// 取出前 K 个最长标签
let protectedLabels = sorted.slice(0, topK);
// 其他标签（保持原始顺序，但排除掉 protected）
let protectedSet = new Set(protectedLabels.map(([l]) => l));
let others = source.filter(([l]) => !protectedSet.has(l));
let n = source.length;
let result: ([string, number] | undefined)[] = new Array(n);
// 放首尾
result[0] = protectedLabels.shift() || others.shift();
result[n - 1] = protectedLabels.shift() || others.shift();
// 放中间（支持偶数两个位置）
if (n % 2 === 0) {
let mid1 = n / 2 - 1;
let mid2 = n / 2;
result[mid1] = protectedLabels.shift() || others.shift();
result[mid2] = protectedLabels.shift() || others.shift();
} else {
let mid = Math.floor(n / 2);
result[mid] = protectedLabels.shift() || others.shift();
}
// 把剩余标签按顺序塞进空位
let pool = [...protectedLabels, ...others];
for (let i = 0; i < n; i++) {
if (!result[i]) result[i] = pool.shift();
}
return result as [string, number][];
}
function CommonGuideBar(props) {
const { title, confirm } = props;
const { params } = useRouter();
@@ -197,7 +242,7 @@ function Intro(props) {
function Test(props) {
const { redirect } = props;
const [disabled, setDisabled] = useState(false);
const [index, setIndex] = useState(9);
const [index, setIndex] = useState(0);
const [questions, setQuestions] = useState<
(Question & { choosen: number })[]
>([]);
@@ -323,14 +368,18 @@ function Test(props) {
);
}
function Result() {
function Result(props) {
const { redirect } = props;
const { params } = useRouter();
const { id } = params;
const userInfo = useUserInfo();
const { fetchUserInfo } = useUserActions();
const radarRef = useRef();
const [result, setResult] = useState<TestResultData>();
const [radarData, setRadarData] = useState<[propName: string, prop: number][]>([])
const [radarData, setRadarData] = useState<
[propName: string, prop: number][]
>([]);
useEffect(() => {
getResultById();
@@ -341,11 +390,121 @@ function Result() {
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]))
setRadarData(
adjustRadarLabels(
Object.entries(res.data.radar_data.abilities).map(([key, value]) => [
key,
value.current_score,
])
)
);
updateUserLevel(res.data.record_id, res.data.ntrp_level);
}
}
console.log(result, "result");
function updateUserLevel(record_id, ntrp_level) {
try {
evaluateService.updateNtrp({
record_id,
ntrp_level,
update_type: "test_result",
});
} catch (e) {
Taro.showToast({ title: e.message, icon: "none" });
}
}
function handleReTest() {
Taro.redirectTo({
url: `/other_pages/ntrp-evaluate/index?stage=${StageType.TEST}${
redirect ? `&redirect=${redirect}` : ""
}`,
});
}
function handleViewGames() {
Taro.redirectTo({
url: "/game_pages/list/index",
});
}
async function genCardImage() {
return new Promise(async (resolve, reject) => {
const url = await radarRef.current.generateImage();
const query = Taro.createSelectorQuery();
query
.select("#exportCanvas")
.fields({ node: true, size: true })
.exec((res2) => {
const canvas = res2[0].node;
const ctx = canvas.getContext("2d");
const dpr = Taro.getSystemInfoSync().pixelRatio;
const width = 300;
const height = 400;
canvas.width = width * dpr;
canvas.height = height * dpr;
ctx.scale(dpr, dpr);
// 背景
ctx.fillStyle = "#e9fdf8";
ctx.fillRect(0, 0, width, height);
// 标题文字
ctx.fillStyle = "#000";
ctx.font = "16px sans-serif";
ctx.fillText("你的 NTRP 测试结果为", 20, 40);
ctx.fillStyle = "#00E5AD";
ctx.font = "bold 22px sans-serif";
ctx.fillText(`NTRP ${result?.ntrp_level}`, 20, 70);
// 绘制雷达图
const img = canvas.createImage();
img.src = url;
img.onload = () => {
ctx.drawImage(img, 20, 100, 260, 260);
// 第三步：导出最终卡片
Taro.canvasToTempFilePath({
canvas,
success: (res3) => {
console.log("导出成功:", res3.tempFilePath);
resolve(res3.tempFilePath);
},
});
};
});
});
}
async function handleSaveImage() {
if (!userInfo.id) {
return
}
const url = await genCardImage();
Taro.saveImageToPhotosAlbum({ filePath: url });
}
useShareAppMessage(async (res) => {
const url = await genCardImage();
console.log(res, "res");
return {
title: "分享",
imageUrl: url,
path: `/other_pages/ntrp-evaluate/index?stage=${StageType.INTRO}`,
};
});
function handleAuth () {
if (userInfo.id) {
return true
}
const currentPage = getCurrentFullPath()
Taro.redirectTo({
url: `/login_pages/index/index${
currentPage ? `?redirect=${encodeURIComponent(currentPage)}` : ""
}`,
});
}
return (
<View className={styles.resultContainer}>
@@ -381,9 +540,52 @@ function Result() {
</View>
</View>
<View>
<RadarChart data={radarData} />
<RadarChart ref={radarRef} data={radarData} />
</View>
<View className={styles.retest} onClick={handleReTest}>
<Image className={styles.re_actIcon} src={ReTestIcon} />
<Text>重新测试</Text>
</View>
</View>
{userInfo.id ? (
<View className={styles.updateTip}>
<Text>你的 NTRP 水平已更新为 {result?.ntrp_level} </Text>
<Text className={styles.grayTip}>(可在个人信息中修改)</Text>
</View>
) : (
<View className={styles.updateTip}>
<Text>登录「有场」小程序，查看匹配你的球局</Text>
</View>
)}
<View className={styles.actions}>
<View className={styles.viewGame} onClick={handleViewGames}>
<Button className={styles.viewGameBtn}>去看看球局</Button>
</View>
<View className={styles.otherActions}>
<View className={styles.share}>
<Button className={styles.shareBtn} openType={userInfo.id ? 'share' : undefined} onClick={handleAuth}>
<Image className={styles.wechatIcon} src={WechatIcon} />
<Text>邀请好友测试</Text>
</Button>
</View>
<View className={styles.saveImage} onClick={handleSaveImage}>
<Button className={styles.saveImageBtn}>
<Image className={styles.downloadIcon} src={DownloadIcon} />
<Text>保存图片</Text>
</Button>
</View>
</View>
</View>
<Canvas
type="2d"
id="exportCanvas"
style={{
width: "0px",
height: "0px",
position: "absolute",
left: "-9999px",
}}
/>
</View>
);
}

5
src/static/ntrp/ntrp_download.svg Normal file
View File

@@ -0,0 +1,5 @@
<svg width="20" height="20" viewBox="0 0 20 20" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M2.5 10.0035V17.5H17.5V10" stroke="black" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M13.75 9.58301L10 13.333L6.25 9.58301" stroke="black" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M9.99658 2.5V13.3333" stroke="black" stroke-width="1.66667" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 479 B

4
src/static/ntrp/ntrp_re-action.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg width="12" height="12" viewBox="0 0 12 12" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M9.18198 9.18198C8.36765 9.99633 7.24265 10.5 6 10.5C3.51472 10.5 1.5 8.48528 1.5 6C1.5 3.51472 3.51472 1.5 6 1.5C7.24265 1.5 8.36765 2.00368 9.18198 2.81803C9.59648 3.23253 10.5 4.25 10.5 4.25" stroke="black" stroke-opacity="0.85" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M10.5 2V4.25H8.25" stroke="black" stroke-opacity="0.85" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 507 B

22
src/static/ntrp/ntrp_wechat.svg Normal file
View File

@@ -0,0 +1,22 @@
<svg width="28" height="28" viewBox="0 0 28 28" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M1.52734 11.4374C1.52734 13.7338 2.74202 15.8003 4.6428 17.1972C4.79619 17.3071 4.89569 17.4895 4.89569 17.6946C4.89569 17.761 4.88118 17.8252 4.86459 17.8895C4.71329 18.4636 4.47075 19.3838 4.45831 19.4253C4.43967 19.4979 4.41063 19.5725 4.41063 19.6492C4.41063 19.817 4.54539 19.9538 4.7112 19.9538C4.77753 19.9538 4.82936 19.9289 4.88531 19.8979L6.85865 18.7413C7.00789 18.6543 7.16542 18.6004 7.33747 18.6004C7.43074 18.6004 7.51782 18.6149 7.60278 18.6398C8.52312 18.9092 9.516 19.0584 10.5462 19.0584C15.5251 19.0584 19.563 15.6469 19.563 11.4395C19.563 7.22993 15.5251 3.81836 10.5462 3.81836C5.56314 3.81629 1.52734 7.22784 1.52734 11.4374Z" fill="white"/>
<path d="M1.52734 11.4374C1.52734 13.7338 2.74202 15.8003 4.6428 17.1972C4.79619 17.3071 4.89569 17.4895 4.89569 17.6946C4.89569 17.761 4.88118 17.8252 4.86459 17.8895C4.71329 18.4636 4.47075 19.3838 4.45831 19.4253C4.43967 19.4979 4.41063 19.5725 4.41063 19.6492C4.41063 19.817 4.54539 19.9538 4.7112 19.9538C4.77753 19.9538 4.82936 19.9289 4.88531 19.8979L6.85865 18.7413C7.00789 18.6543 7.16542 18.6004 7.33747 18.6004C7.43074 18.6004 7.51782 18.6149 7.60278 18.6398C8.52312 18.9092 9.516 19.0584 10.5462 19.0584C15.5251 19.0584 19.563 15.6469 19.563 11.4395C19.563 7.22993 15.5251 3.81836 10.5462 3.81836C5.5652 3.81629 1.52734 7.22784 1.52734 11.4374Z" fill="url(#paint0_linear_4962_26946)"/>
<path d="M11.4062 17.0935C11.4062 20.5983 14.7684 23.4378 18.914 23.4378C19.7701 23.4378 20.5971 23.3134 21.3641 23.0896C21.4346 23.0689 21.5071 23.0565 21.5838 23.0565C21.7268 23.0565 21.8595 23.1 21.9818 23.1725L23.6256 24.1342C23.6711 24.1612 23.7147 24.1819 23.7706 24.1819C23.9095 24.1819 24.0215 24.0679 24.0215 23.929C24.0215 23.8669 23.9966 23.8026 23.9821 23.7425C23.9717 23.7073 23.7706 22.9404 23.6442 22.4616C23.6297 22.4077 23.6173 22.3559 23.6173 22.2999C23.6173 22.13 23.7002 21.9787 23.8266 21.8875C25.4102 20.7247 26.4218 19.0024 26.4218 17.0914C26.4218 13.5866 23.0597 10.7471 18.914 10.7471C14.7663 10.7492 11.4062 13.5887 11.4062 17.0935Z" fill="url(#paint1_linear_4962_26946)"/>
<path d="M20.4937 15.1574C20.4937 15.7212 20.9434 16.1772 21.4989 16.1772C22.0543 16.1772 22.5041 15.7212 22.5041 15.1574C22.5041 14.5937 22.0543 14.1377 21.4989 14.1377C20.9434 14.1377 20.4937 14.5937 20.4937 15.1574Z" fill="#919191"/>
<path d="M15.4692 15.1574C15.4692 15.7212 15.919 16.1772 16.4745 16.1772C17.0299 16.1772 17.4797 15.7212 17.4797 15.1574C17.4797 14.5937 17.0299 14.1377 16.4745 14.1377C15.919 14.1377 15.4692 14.5937 15.4692 15.1574Z" fill="#919191"/>
<path d="M8.73456 8.98751C8.73456 9.6632 8.19561 10.2104 7.52817 10.2104C6.86279 10.2104 6.32178 9.6632 6.32178 8.98751C6.32178 8.31185 6.86073 7.76465 7.52817 7.76465C8.19561 7.76465 8.73456 8.31185 8.73456 8.98751Z" fill="#168743"/>
<path d="M14.7639 8.98751C14.7639 9.6632 14.2228 10.2104 13.5575 10.2104C12.8921 10.2104 12.3511 9.6632 12.3511 8.98751C12.3511 8.31185 12.8921 7.76465 13.5575 7.76465C14.2228 7.76465 14.7639 8.31185 14.7639 8.98751Z" fill="#168743"/>
<defs>
<linearGradient id="paint0_linear_4962_26946" x1="10.5439" y1="19.9517" x2="10.5439" y2="3.81689" gradientUnits="userSpaceOnUse">
<stop offset="0.0602" stop-color="#05CD66"/>
<stop offset="0.2202" stop-color="#0ED169"/>
<stop offset="0.4805" stop-color="#26DB6F"/>
<stop offset="0.8069" stop-color="#4DEB7A"/>
<stop offset="0.9517" stop-color="#61F380"/>
</linearGradient>
<linearGradient id="paint1_linear_4962_26946" x1="18.9141" y1="24.1841" x2="18.9141" y2="10.7484" gradientUnits="userSpaceOnUse">
<stop offset="0.081" stop-color="#D9D9D9"/>
<stop offset="1" stop-color="#F0F0F0"/>
</linearGradient>
</defs>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 3.6 KiB

8
src/store/userStore.ts
View File

@@ -14,9 +14,11 @@ export interface UserState {
export const useUser = create<UserState>()((set) => ({
user: {},
fetchUserInfo: async () => {
const res = await fetchUserProfile();
console.log(res);
set({ user: res.data });
try {
const res = await fetchUserProfile();
console.log(res);
set({ user: res.data });
} catch {}
},
updateUserInfo: async (userInfo: Partial<UserInfoType>) => {
const res = await updateUserProfile(userInfo);