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

feat: test popup not done

Browse Source
This commit is contained in:
刘杰
2025-09-30 14:07:42 +08:00
parent 9fef267cf6
commit 4b31141287
9 changed files with 306 additions and 24 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
src/components/NTRPEvaluatePopup/index.module.scss
View File

@@ -1,8 +1,8 @@
@use "~@/scss/images.scss" as img;
.container {
width: calc(100vw - 40px);
height: 400px;
width: 100%;
// height: 400px;
display: flex;
flex-direction: column;
align-items: center;

49
src/components/NTRPEvaluatePopup/index.tsx
View File

@@ -3,12 +3,15 @@ import React, {
useImperativeHandle,
useEffect,
forwardRef,
memo,
} from "react";
import { Button, Input, View, Text } from "@tarojs/components";
import Taro from "@tarojs/taro";
import CommonPopup from "../CommonPopup";
import { getCurrentFullPath } from "@/utils";
import { useUserInfo, useUserActions } from "@/store/userStore";
import evaluateService from "@/services/evaluateService";
import NTRPTestEntryCard from "../NTRPTestEntryCard";
import NtrpPopupGuide from "../NTRPPopupGuide";
import style from "./index.module.scss";
export enum EvaluateType {
@@ -32,6 +35,7 @@ interface NTRPEvaluatePopupProps {
types: EvaluateType[];
displayCondition: DisplayConditionType;
scene: SceneType;
showGuide: boolean;
children: React.ReactNode;
}
@@ -40,7 +44,7 @@ function showCondition(scene, ntrp) {
// TODO: 显示频率
return Math.random() < 0.1 && [0, undefined].includes(ntrp);
}
return [0, undefined].includes(ntrp);
return ntrp === "0";
}
const NTRPEvaluatePopup = (props: NTRPEvaluatePopupProps, ref) => {
@@ -48,10 +52,10 @@ const NTRPEvaluatePopup = (props: NTRPEvaluatePopupProps, ref) => {
types = ["edit", "evaluate"],
displayCondition = "auto",
scene = "list",
showGuide = false,
} = props;
const [visible, setVisible] = useState(false);
const { ntrp } = useUserInfo();
const { fetchUserInfo } = useUserActions();
const [visible, setVisible] = useState(true);
const [ntrp, setNtrp] = useState<undefined | string>();
useImperativeHandle(ref, () => ({
show: () => setVisible(true),
@@ -61,14 +65,26 @@ const NTRPEvaluatePopup = (props: NTRPEvaluatePopupProps, ref) => {
setVisible(false);
// TODO: 实现NTRP评估逻辑
Taro.navigateTo({
url: `/other_pages/ntrp-evaluate/index?redirect=${encodeURIComponent(getCurrentFullPath())}`,
url: `/other_pages/ntrp-evaluate/index?redirect=${encodeURIComponent(
getCurrentFullPath()
)}`,
});
}
useEffect(() => {
// fetchUserInfo();
getNtrp();
}, []);
async function getNtrp() {
const res = await evaluateService.getLastResult();
if (res.code === 0 && res.data.has_ntrp_level) {
// setNtrp(res.data.user_ntrp_level)
setNtrp("0");
} else {
setNtrp("0");
}
}
const showEntry =
displayCondition === "auto"
? showCondition(scene, ntrp)
@@ -80,20 +96,21 @@ const NTRPEvaluatePopup = (props: NTRPEvaluatePopupProps, ref) => {
title="NTRP评估"
visible={visible}
onClose={() => setVisible(false)}
position="center"
showHeader={false}
hideFooter
enableDragToClose={false}
>
<View className={style.container}>
{/* TODO: 直接修改NTRP水平 */}
<Text>您还未测评。。。</Text>
<Text>请先进行NTRP评估</Text>
<Button onClick={handleEvaluate}>开始评估</Button>
</View>
{showGuide ? (
<NtrpPopupGuide />
) : (
<View className={style.container}>
<NTRPTestEntryCard />
</View>
)}
</CommonPopup>
{showEntry ? props.children : ''}
{showEntry ? props.children : ""}
</>
);
};
export default forwardRef(NTRPEvaluatePopup);
export default memo(forwardRef(NTRPEvaluatePopup));

0
src/components/NTRPPopupGuide/index.module.scss Normal file
View File

23
src/components/NTRPPopupGuide/index.tsx Normal file
View File

@@ -0,0 +1,23 @@
import React from "react";
import { View, Text } from "@tarojs/components";
import styles from "./index.module.scss";
function NtrpPopupGuide() {
return (
<View className={styles.container}>
<View className={styles.top}>
<View className={styles.header}></View>
<View className={styles.avatarWrap}></View>
<View className={styles.title}>
<View></View>
<View></View>
</View>
<View className={styles.desc}>
<Text>首次发布球局前，需完善 NTRP 水平信息</Text>
</View>
</View>
</View>
);
}
export default NtrpPopupGuide;

138
src/components/NTRPTestEntryCard/index.module.scss Normal file
View File

@@ -0,0 +1,138 @@
@mixin commonCardStyle {
width: 100%;
padding: 16px;
box-sizing: border-box;
border-radius: 20px;
border: 0.5px solid rgba(0, 0, 0, 0.08);
background: linear-gradient(180deg, #BFFFEF 0%, #F2FFFC 100%), var(--Backgrounds-Primary, #FFF);
display: flex;
align-items: center;
justify-content: space-between;
}
.higher {
height: 100px;
@include commonCardStyle();
}
.lower {
height: 80px;
@include commonCardStyle();
}
.desc {
display: flex;
flex-direction: column;
align-items: flex-start;
justify-content: flex-start;
gap: 7px;
.title {
color: #2A4D44;
font-family: "Noto Sans SC";
font-size: 16px;
font-style: normal;
font-weight: 900;
line-height: 24px;
.colorTip {
color: #00E5AD;
font-family: "Noto Sans SC";
font-size: 16px;
font-style: normal;
font-weight: 900;
line-height: 24px;
}
.strongTip {
color: #00E5AD;
font-family: "Noto Sans SC";
font-size: 16px;
font-style: normal;
font-weight: 900;
line-height: 24px;
text-decoration-line: underline;
text-decoration-style: solid;
text-decoration-skip-ink: auto;
text-decoration-thickness: auto;
text-underline-offset: auto;
text-underline-position: from-font;
}
}
}
.entry {
display: flex;
align-items: center;
justify-content: flex-start;
gap: 4px;
color: #5CA693;
font-feature-settings: 'liga' off, 'clig' off;
font-family: "PingFang SC";
font-size: 12px;
font-style: normal;
font-weight: 600;
line-height: normal;
.entryIcon {
width: 12px;
height: 12px;
}
}
@mixin commonAvatarStyle($multiple: 1) {
.avatar {
flex: 0 0 auto;
width: calc(100px * $multiple);
height: calc(100px * $multiple);
display: flex;
align-items: center;
justify-content: center;
background-color: #fff;
border-radius: 50%;
border: 1px solid #efefef;
overflow: hidden;
box-shadow: 0 0 1px 0 rgba(0, 0, 0, 0.20), 0 8px 20px 0 rgba(0, 0, 0, 0.12);
.avatarUrl {
width: calc(90px * $multiple);
height: calc(90px * $multiple);
border-radius: 50%;
border: 1px solid #efefef;
}
}
.addonImage {
flex: 0 0 auto;
width: calc(88px * $multiple);
height: calc(88px * $multiple);
transform: rotate(8deg);
flex-shrink: 0;
aspect-ratio: 1/1;
border-radius: calc(20px * $multiple);
border: 4px solid #FFF;
background: linear-gradient(0deg, rgba(89, 255, 214, 0.20) 0%, rgba(89, 255, 214, 0.20) 100%), #FFF;
box-shadow: 0 4px 36px 0 rgba(0, 0, 0, 0.12);
display: flex;
align-items: center;
justify-content: center;
box-sizing: border-box;
margin-left: calc(-1 * 20px * $multiple);
.docImage {
width: calc(48px * $multiple);
height: calc(48px * $multiple);
transform: rotate(-7deg);
flex-shrink: 0;
}
}
}
.avatarWrap {
display: flex;
align-items: center;
justify-content: flex-start;
@include commonAvatarStyle(0.5);
}

82
src/components/NTRPTestEntryCard/index.tsx Normal file
View File

@@ -0,0 +1,82 @@
import React, { useEffect } from "react";
import { View, Image, Text } from "@tarojs/components";
import { useUserInfo, useUserActions } from "@/store/userStore";
import DocCopy from "@/static/ntrp/ntrp_doc_copy.svg";
import ArrowRight from "@/static/ntrp/ntrp_arrow_right_color.svg";
import styles from "./index.module.scss";
function NTRPTestEntryCard(props) {
const userInfo = useUserInfo();
// const { fetchUserInfo } = useUserActions()
// useEffect(() => {
// fetchUserInfo()
// }, [])
const { type } = props;
return type !== "list" ? (
<View className={styles.higher}>
<View className={styles.desc}>
<View>
<View className={styles.title}>
<Text>快速测一测✏️</Text>
</View>
<View className={styles.title}>
<Text>你的</Text>
<Text className={styles.colorTip}> (</Text>
<Text className={styles.strongTip}>NTRP</Text>
<Text className={styles.colorTip}>) </Text>
<Text>水平?</Text>
</View>
</View>
<View className={styles.entry}>
<Text>快速测试</Text>
<Image className={styles.entryIcon} src={ArrowRight} />
</View>
</View>
<View className={styles.avatarWrap}>
<View className={styles.avatar}>
<Image
className={styles.avatarUrl}
src={userInfo.avatar_url}
mode="aspectFit"
/>
</View>
{/* avatar side */}
<View className={styles.addonImage}>
<Image className={styles.docImage} src={DocCopy} mode="aspectFill" />
</View>
</View>
</View>
) : (
<View className={styles.lower}>
<View className={styles.desc}>
<View className={styles.title}>
<Text>不知道自己的</Text>
<Text className={styles.colorTip}> (</Text>
<Text className={styles.strongTip}>NTRP</Text>
<Text className={styles.colorTip}>) </Text>
<Text>水平?</Text>
</View>
<View className={styles.entry}>
<Text>快速测试</Text>
<Image className={styles.entryIcon} src={ArrowRight} />
</View>
</View>
<View className={styles.avatarWrap}>
<View className={styles.avatar}>
<Image
className={styles.avatarUrl}
src={userInfo.avatar_url}
mode="aspectFit"
/>
</View>
{/* avatar side */}
<View className={styles.addonImage}>
<Image className={styles.docImage} src={DocCopy} mode="aspectFill" />
</View>
</View>
</View>
);
}
export default NTRPTestEntryCard;

5
src/game_pages/detail/index.tsx
View File

@@ -314,7 +314,8 @@ function StickyButton(props) {
}
const displayPrice = is_organizer ? 0 : price;
// user_action_status.can_assess = true;
// user_action_status.can_join = true;
// user_action_status.can_join = false;
console.log(user_action_status, "user_action");
const {
can_assess,
can_join,
@@ -390,6 +391,7 @@ function StickyButton(props) {
types={[EvaluateType.EDIT, EvaluateType.EVALUATE]}
scene={SceneType.DETAIL}
displayCondition={DisplayConditionType.AUTO}
showGuide
>
<Text>¥{displayPrice} 立即加入</Text>
</NTRPEvaluatePopup>
@@ -400,7 +402,6 @@ function StickyButton(props) {
return {
text: "球局无法加入",
available: false,
// action: () => {},
};
}

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

@@ -28,6 +28,16 @@ enum StageType {
RESULT = "result",
}
enum SourceType {
DETAIL = 'detail',
PUBLISH = 'publish',
}
const sourceTypeToTextMap = new Map([
[SourceType.DETAIL, '继续加入球局'],
[SourceType.PUBLISH, '继续发布球局'],
])
function adjustRadarLabels(
source: [string, number][],
topK: number = 4 // 默认挑前4个最长的标签保护
@@ -369,9 +379,8 @@ function Test(props) {
}
function Result(props) {
const { redirect } = props;
const { params } = useRouter();
const { id } = params;
const { id, type, redirect } = params;
const userInfo = useUserInfo();
const { fetchUserInfo } = useUserActions();
const radarRef = useRef();
@@ -428,6 +437,14 @@ function Result(props) {
});
}
function handleGoon () {
if (type) {
Taro.redirectTo({ url: redirect })
} else {
handleViewGames()
}
}
async function genCardImage() {
return new Promise(async (resolve, reject) => {
const url = await radarRef.current.generateImage();
@@ -558,8 +575,8 @@ function Result(props) {
</View>
)}
<View className={styles.actions}>
<View className={styles.viewGame} onClick={handleViewGames}>
<Button className={styles.viewGameBtn}>去看看球局</Button>
<View className={styles.viewGame} onClick={handleGoon}>
<Button className={styles.viewGameBtn}>{sourceTypeToTextMap.get(type) || '去看看球局'}</Button>
</View>
<View className={styles.otherActions}>
<View className={styles.share}>

4
src/static/ntrp/ntrp_arrow_right_color.svg Normal file
View File

@@ -0,0 +1,4 @@
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="13" viewBox="0 0 12 13" fill="none">
<path d="M10.5 6.5H1.5" stroke="#5CA693" stroke-linecap="round" stroke-linejoin="round"/>
<path d="M7.5 3.5L10.5 6.5L7.5 9.5" stroke="#5CA693" stroke-linecap="round" stroke-linejoin="round"/>
</svg>
Side by Side

After

Width:  |  Height:  |  Size: 298 B