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;