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

feat: NTRP测试入口接入

Browse Source
This commit is contained in:
刘杰
2025-10-01 09:34:20 +08:00
parent 61b70773e3
commit 273da07959
14 changed files with 629 additions and 304 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -9,6 +9,7 @@
justify-content: space-between;
// padding: 20px;
box-sizing: border-box;
padding-bottom: 40px;
.entryCard {
width: 100%;
@@ -56,5 +57,47 @@
.picker {
width: 100%;
height: 300px;
height: 252px;
}
.actions {
width: 100%;
padding: 10px;
box-sizing: border-box;
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
.buttonWrap {
width: 50%;
height: 50px;
border-radius: 16px;
border: 1px solid rgba(0, 0, 0, 0.06);
box-shadow: 0 8px 64px 0 rgba(0, 0, 0, 0.1);
backdrop-filter: blur(16px);
overflow: hidden;
.button {
width: 100%;
height: 50px;
color: #000;
background: #fff;
font-feature-settings: "liga" off, "clig" off;
font-family: "PingFang SC";
font-size: 16px;
font-style: normal;
font-weight: 600;
line-height: normal;
display: flex;
align-items: center;
justify-content: center;
&.primary {
color: #fff;
background: #000;
}
}
}
}

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

@@ -7,21 +7,25 @@ import React, {
} from "react";
import { Button, Input, View, Text, Image } from "@tarojs/components";
import Taro from "@tarojs/taro";
import classnames from "classnames";
import CommonPopup from "../CommonPopup";
import { getCurrentFullPath } from "@/utils";
import evaluateService from "@/services/evaluateService";
import { useUserActions } from "@/store/userStore";
import { EvaluateCallback, EvaluateScene } from "@/store/evaluateStore";
import NTRPTestEntryCard from "../NTRPTestEntryCard";
import NtrpPopupGuide from "../NTRPPopupGuide";
import Picker from "../Picker/Picker";
import CloseIcon from "@/static/ntrp/ntrp_popup_close.svg";
import styles from "./index.module.scss";
const options = ["1.5", "2.0", "2.5", "3.0", "3.5", "4.0", "4.5"].map(
(item) => ({
const ntrpLevels = ["1.5", "2.0", "2.5", "3.0", "3.5", "4.0", "4.5"];
const options = [
ntrpLevels.map((item) => ({
text: item,
value: item,
})
);
})),
];
export enum EvaluateType {
EDIT = "edit",
@@ -41,45 +45,57 @@ export enum SceneType {
}
interface NTRPEvaluatePopupProps {
types: EvaluateType[];
displayCondition: DisplayConditionType;
scene: SceneType;
// types: EvaluateType[];
// displayCondition: DisplayConditionType;
// scene: SceneType;
showGuide: boolean;
children: React.ReactNode;
type: EvaluateScene;
// children: React.ReactNode;
}
function showCondition(scene, ntrp) {
if (scene === "list") {
// TODO: 显示频率
return Math.random() < 0.1 && [0, undefined].includes(ntrp);
}
return ntrp === "0";
}
// function showCondition(scene, ntrp) {
// if (scene === "list") {
// // TODO: 显示频率
// return Math.random() < 0.1 && [0, undefined].includes(ntrp);
// }
// return true;
// return !ntrpLevels.includes(ntrp);
// }
const NTRPEvaluatePopup = (props: NTRPEvaluatePopupProps, ref) => {
const {
types = ["edit", "evaluate"],
displayCondition = "auto",
scene = "list",
// types = ["edit", "evaluate"],
// displayCondition = "auto",
// scene = "list",
type,
showGuide = false,
} = props;
const [visible, setVisible] = useState(true);
const [ntrp, setNtrp] = useState<undefined | string>();
const [guideShow, setGuideShow] = useState(() => props.showGuide);
const [visible, setVisible] = useState(false);
const [ntrp, setNtrp] = useState<string>("");
const [guideShow, setGuideShow] = useState(() => showGuide);
const { updateUserInfo } = useUserActions();
const [evaCallback, setEvaCallback] = useState<EvaluateCallback>({
type: "",
next: () => {},
onCancel: () => {},
});
useImperativeHandle(ref, () => ({
show: () => setVisible(true),
show: (evaluateCallback) => {
setVisible(true);
setEvaCallback(evaluateCallback);
},
}));
function handleEvaluate() {
setVisible(false);
// TODO: 实现NTRP评估逻辑
Taro.navigateTo({
url: `/other_pages/ntrp-evaluate/index?redirect=${encodeURIComponent(
getCurrentFullPath()
)}`,
});
}
// function handleEvaluate() {
// setVisible(false);
// // TODO: 实现NTRP评估逻辑
// Taro.navigateTo({
// url: `/other_pages/ntrp-evaluate/index?redirect=${encodeURIComponent(
// getCurrentFullPath()
// )}`,
// });
// }
useEffect(() => {
getNtrp();
@@ -88,20 +104,32 @@ const NTRPEvaluatePopup = (props: NTRPEvaluatePopupProps, ref) => {
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");
setNtrp(res.data.user_ntrp_level);
} else {
setNtrp("0");
setNtrp("");
}
}
const showEntry =
displayCondition === "auto"
? showCondition(scene, ntrp)
: displayCondition === "always";
// const showEntry =
// displayCondition === "auto"
// ? showCondition(scene, ntrp)
// : displayCondition === "always";
function handleClose() {
console.log("hide ....");
setVisible(false);
setGuideShow(showGuide);
}
async function handleChangeNtrp() {
Taro.showLoading({ title: "修改中" });
await updateUserInfo({ ntrp_level: ntrp });
Taro.showToast({
title: "NTRP水平修改成功",
icon: "none",
});
evaCallback.next(true);
handleClose();
}
return (
@@ -116,10 +144,11 @@ const NTRPEvaluatePopup = (props: NTRPEvaluatePopupProps, ref) => {
>
{guideShow ? (
<NtrpPopupGuide
close={handleClose}
close={() => handleClose()}
skipGuide={() => {
setGuideShow(false);
}}
evaluateCallback={evaCallback}
/>
) : (
<View className={styles.container}>
@@ -130,23 +159,42 @@ const NTRPEvaluatePopup = (props: NTRPEvaluatePopupProps, ref) => {
</View>
</View>
<View className={styles.entryCard}>
<NTRPTestEntryCard />
<NTRPTestEntryCard type={type} evaluateCallback={evaCallback} />
</View>
<View className={styles.picker}>
<Picker
visible={visible}
options={options}
value={ntrp}
onChange={(val) => {
console.log(val);
setNtrp(val.values);
}}
/>
{/* FIXME: 有异常渲染问题 */}
{visible && (
<Picker
visible
options={options}
defaultValue={[ntrp]}
onChange={(val) => {
console.log(val[0]);
if (val[0]?.value) {
setNtrp(val[0]?.value as string);
}
}}
/>
)}
</View>
<View className={styles.actions}>
<View className={styles.buttonWrap}>
<Button className={styles.button} onClick={handleClose}>
取消
</Button>
</View>
<View className={styles.buttonWrap}>
<Button
className={classnames(styles.button, styles.primary)}
onClick={handleChangeNtrp}
>
保存
</Button>
</View>
</View>
</View>
)}
</CommonPopup>
{showEntry ? props.children : ""}
</>
);
};

22
src/components/NTRPPopupGuide/index.tsx
View File

@@ -3,22 +3,32 @@ import { View, Text, Button, Image } from "@tarojs/components";
import Taro from "@tarojs/taro";
import classnames from "classnames";
import { useUserInfo } from "@/store/userStore";
import { useEvaluate, EvaluateCallback } from "@/store/evaluateStore";
import { delay } from "@/utils";
import ArrwoRight from "@/static/ntrp/ntrp_arrow_right.svg";
import CloseIcon from "@/static/ntrp/ntrp_popup_close.svg";
import DocCopy from "@/static/ntrp/ntrp_doc_copy.svg";
import styles from "./index.module.scss";
function NtrpPopupGuide(props: { close: () => void; skipGuide: () => void }) {
const { close, skipGuide } = props;
function NtrpPopupGuide(props: {
close: () => void;
skipGuide: () => void;
evaluateCallback: EvaluateCallback;
}) {
const { close, skipGuide, evaluateCallback } = props;
const userInfo = useUserInfo();
const { setCallback } = useEvaluate();
function handleTest() {
Taro.redirectTo({
url: `/other_pages/ntrp-evaluate/index`,
async function handleTest() {
setCallback(evaluateCallback);
Taro.navigateTo({
url: `/other_pages/ntrp-evaluate/index?stage=test`,
});
await delay(1000);
close();
}
return (
<View className={styles.container}>
<View className={styles.container} onClick={(e) => e.stopPropagation()}>
<View className={styles.header}>
<View className={styles.closeBtn} onClick={close}>
<Image className={styles.closeIcon} src={CloseIcon} />

62
src/components/NTRPTestEntryCard/index.tsx
View File

@@ -1,20 +1,72 @@
import React, { useEffect } from "react";
import { View, Image, Text } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useUserInfo, useUserActions } from "@/store/userStore";
// import { getCurrentFullPath } from "@/utils";
import DocCopy from "@/static/ntrp/ntrp_doc_copy.svg";
import ArrowRight from "@/static/ntrp/ntrp_arrow_right_color.svg";
import {
EvaluateScene,
useEvaluate,
EvaluateCallback,
} from "@/store/evaluateStore";
import styles from "./index.module.scss";
function NTRPTestEntryCard(props) {
function NTRPTestEntryCard(props: {
type: EvaluateScene;
evaluateCallback?: EvaluateCallback;
}) {
const { type, evaluateCallback } = props;
const userInfo = useUserInfo();
const { setCallback } = useEvaluate();
// const { fetchUserInfo } = useUserActions()
// useEffect(() => {
// fetchUserInfo()
// }, [])
const { type } = props;
return type === "list" ? (
<View className={styles.higher}>
function handleTest() {
switch (type) {
case (EvaluateScene.list, EvaluateScene.share):
setCallback({
type,
next: () => {
Taro.redirectTo({ url: "/game_pages/list/index" });
},
onCancel: () => {
Taro.redirectTo({ url: "/game_pages/list/index" });
},
});
case (EvaluateScene.detail, EvaluateScene.publish):
setCallback(evaluateCallback as EvaluateCallback);
case (EvaluateScene.user, EvaluateScene.userEdit):
setCallback({
type,
next: () => {
Taro.redirectTo({ url: "/game_pages/list/index" });
},
onCancel: () => {
Taro.redirectTo({ url: "/user_pages/myself/index" });
},
});
default:
setCallback({
type,
next: () => {
Taro.redirectTo({ url: "/game_pages/list/index" });
},
onCancel: () => {
Taro.redirectTo({ url: "/game_pages/list/index" });
},
});
}
Taro.redirectTo({
url: `/other_pages/ntrp-evaluate/index?stage=test`,
});
}
return type === EvaluateScene.list ? (
<View className={styles.higher} onClick={handleTest}>
<View className={styles.desc}>
<View>
<View className={styles.title}>
@@ -48,7 +100,7 @@ function NTRPTestEntryCard(props) {
</View>
</View>
) : (
<View className={styles.lower}>
<View className={styles.lower} onClick={handleTest}>
<View className={styles.desc}>
<View className={styles.title}>
<Text>不知道自己的</Text>

41
src/components/Picker/PopupPicker.tsx
View File

@@ -7,6 +7,8 @@ import {
renderYearMonthDay,
renderHourMinute,
} from "./PickerData";
import NTRPTestEntryCard from "../NTRPTestEntryCard";
import { EvaluateScene } from "@/store/evaluateStore";
import imgs from "@/config/images";
import styles from "./index.module.scss";
interface PickerOption {
@@ -106,25 +108,28 @@ const PopupPicker = ({
zIndex={1000}
>
{type === "ntrp" && (
<View className={`${styles["examination-btn"]}}`}>
<View className={`${styles["text-container"]}}`}>
<View className={`${styles["text-title"]}}`}>
不知道自己的<Text>（NTRP）</Text>水平
</View>
<View className={`${styles["text-btn"]}}`}>
<Text>快速测试</Text>
<Image src={imgs.ICON_ARROW_GREEN} className={`${styles["icon-arrow"]}`}></Image>
</View>
</View>
<View className={`${styles["img-container"]}}`}>
<View className={`${styles["img-box"]}`}>
<Image src={img!}></Image>
</View>
<View className={`${styles["img-box"]}`}>
<Image src={imgs.ICON_EXAMINATION}></Image>
</View>
</View>
<View className={styles.evaluateCardWrap}>
<NTRPTestEntryCard type={EvaluateScene.userEdit} />
</View>
// <View className={`${styles["examination-btn"]}}`}>
// <View className={`${styles["text-container"]}}`}>
// <View className={`${styles["text-title"]}}`}>
// 不知道自己的<Text>（NTRP）</Text>水平
// </View>
// <View className={`${styles["text-btn"]}}`}>
// <Text>快速测试</Text>
// <Image src={imgs.ICON_ARROW_GREEN} className={`${styles["icon-arrow"]}`}></Image>
// </View>
// </View>
// <View className={`${styles["img-container"]}}`}>
// <View className={`${styles["img-box"]}`}>
// <Image src={img!}></Image>
// </View>
// <View className={`${styles["img-box"]}`}>
// <Image src={imgs.ICON_EXAMINATION}></Image>
// </View>
// </View>
// </View>
)}
<Picker
visible={visible}

171
src/components/Picker/index.module.scss
View File

@@ -26,90 +26,89 @@
}
}
.examination-btn {
padding: 8px 16px;
margin: 16px;
border-radius: 12px;
border: 1px solid rgba(0, 0, 0, 0.08);
display: flex;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
background: linear-gradient(to bottom,
#CCFFF2,
/* 开始颜色 */
#F7FFFD
/* 结束颜色 */
),
repeating-linear-gradient(90deg,
/* 垂直方向 */
rgba(0, 0, 0, 1),
/* 条纹的开始颜色 */
rgba(0, 0, 0, 0.01) 1px,
/* 条纹的结束颜色及宽度 */
#CCFFF2 8px,
/* 条纹之间的开始颜色 */
#F7FFFD 10px
/* 条纹之间的结束颜色及宽度 */
);
background-blend-mode: luminosity;
/* 将两个渐变层叠在一起 */
.text-container {
.text-title {
font-family: Noto Sans SC;
font-weight: 900;
color: #2a4d44;
font-size: 16px;
margin-bottom: 4px;
Text {
color: #00e5ad;
}
}
.text-btn {
font-size: 12px;
color: #5ca693;
display: flex;
align-items: center;
gap: 6px;
.icon-arrow {
width: 12px;
height: 12px;
}
}
}
.img-container {
display: flex;
.img-box {
width: 47px;
height: 47px;
border: 3px solid #fff;
border-radius: 50%;
overflow: hidden;
display: flex;
justify-content: center;
align-items: center;
Image {
width: 100%;
height: 100%;
}
&:nth-child(2) {
border-radius: 8px;
background-color: #ccfff2;
transform: scale(0.88) rotate(15deg) translateX(-10px);
Image {
width: 66%;
height: 66%;
}
}
}
}
.evaluateCardWrap {
padding: 16px;
}
// .examination-btn {
// padding: 8px 16px;
// margin: 16px;
// border-radius: 12px;
// border: 1px solid rgba(0, 0, 0, 0.08);
// display: flex;
// justify-content: space-between;
// align-items: center;
// box-sizing: border-box;
// background: linear-gradient(
// to bottom,
// #ccfff2,
// /* 开始颜色 */ #f7fffd /* 结束颜色 */
// ),
// repeating-linear-gradient(
// 90deg,
// /* 垂直方向 */ rgba(0, 0, 0, 1),
// /* 条纹的开始颜色 */ rgba(0, 0, 0, 0.01) 1px,
// /* 条纹的结束颜色及宽度 */ #ccfff2 8px,
// /* 条纹之间的开始颜色 */ #f7fffd 10px /* 条纹之间的结束颜色及宽度 */
// );
// background-blend-mode: luminosity;
// /* 将两个渐变层叠在一起 */
// .text-container {
// .text-title {
// font-family: Noto Sans SC;
// font-weight: 900;
// color: #2a4d44;
// font-size: 16px;
// margin-bottom: 4px;
// Text {
// color: #00e5ad;
// }
// }
// .text-btn {
// font-size: 12px;
// color: #5ca693;
// display: flex;
// align-items: center;
// gap: 6px;
// .icon-arrow {
// width: 12px;
// height: 12px;
// }
// }
// }
// .img-container {
// display: flex;
// .img-box {
// width: 47px;
// height: 47px;
// border: 3px solid #fff;
// border-radius: 50%;
// overflow: hidden;
// display: flex;
// justify-content: center;
// align-items: center;
// Image {
// width: 100%;
// height: 100%;
// }
// &:nth-child(2) {
// border-radius: 8px;
// background-color: #ccfff2;
// transform: scale(0.88) rotate(15deg) translateX(-10px);
// Image {
// width: 66%;
// height: 66%;
// }
// }
// }
// }
// }

45
src/components/PublishMenu/PublishMenu.tsx
View File

@@ -1,9 +1,16 @@
import React, { useState } from "react";
import React, { useState, useRef } from "react";
import { View, Text, Image } from "@tarojs/components";
import Taro from "@tarojs/taro";
import { useUserInfo } from "@/store/userStore";
import {
useEvaluate,
EvaluateCallback,
EvaluateScene,
} from "@/store/evaluateStore";
import styles from "./index.module.scss";
import images from "@/config/images";
import AiImportPopup from "@/publish_pages/publishBall/components/AiImportPopup";
import NTRPEvaluatePopup from "../NTRPEvaluatePopup";
export interface PublishMenuProps {
onPersonalPublish?: () => void;
@@ -13,6 +20,10 @@ export interface PublishMenuProps {
const PublishMenu: React.FC<PublishMenuProps> = () => {
const [isVisible, setIsVisible] = useState(false);
const [aiImportVisible, setAiImportVisible] = useState(false);
const userInfo = useUserInfo();
const ntrpRef = useRef<{
show: (evaluateCallback: EvaluateCallback) => void;
}>({ show: () => {} });
const handleIconClick = () => {
setIsVisible(!isVisible);
@@ -20,18 +31,42 @@ const PublishMenu: React.FC<PublishMenuProps> = () => {
const handleOverlayClick = () => {
setIsVisible(false);
};
const handleMenuItemClick = (type: "individual" | "group" | "ai") => {
const handleMenuClick = (type: "individual" | "group" | "ai") => {
// 跳转到publishBall页面并传递type参数
console.log(type, "type");
setIsVisible(false);
if (type === "ai") {
setAiImportVisible(true);
setIsVisible(false);
return;
}
Taro.navigateTo({
url: `/publish_pages/publishBall/index?type=${type}`,
});
setIsVisible(false);
};
const handleMenuItemClick = (type: "individual" | "group" | "ai") => {
if (!userInfo.ntrp_level) {
ntrpRef.current.show({
type: EvaluateScene.publish,
next: (flag) => {
if (flag) {
handleMenuClick(type);
} else if (type === "ai") {
Taro.navigateBack();
setAiImportVisible(true);
} else {
Taro.redirectTo({
url: `/publish_pages/publishBall/index?type=${type}`,
});
}
},
onCancel: () => {
Taro.navigateBack();
},
});
setIsVisible(false);
return;
}
handleMenuClick(type);
};
const handleAiImportClose = () => {
@@ -136,6 +171,8 @@ const PublishMenu: React.FC<PublishMenuProps> = () => {
onClose={handleAiImportClose}
onManualPublish={handleManualPublish}
/>
<NTRPEvaluatePopup type={EvaluateScene.publish} ref={ntrpRef} showGuide />
</View>
);
};

2
src/components/index.ts
View File

@@ -24,6 +24,7 @@ import Comments from "./Comments";
import GeneralNavbar from "./GeneralNavbar";
import RadarChart from './Radar'
import EmptyState from './EmptyState';
import NTRPTestEntryCard from './NTRPTestEntryCard'
export {
ActivityTypeSwitch,
@@ -53,4 +54,5 @@ export {
GeneralNavbar,
RadarChart,
EmptyState,
NTRPTestEntryCard,
};

53
src/container/listContainer/index.tsx
View File

@@ -3,6 +3,10 @@ import ListCard from "@/components/ListCard";
import ListLoadError from "@/components/ListLoadError";
import ListCardSkeleton from "@/components/ListCardSkeleton";
import { useReachBottom } from "@tarojs/taro";
import { useUserInfo } from "@/store/userStore";
import { setStorage, getStorage } from "@/store/storage";
import { NTRPTestEntryCard } from "@/components";
import { EvaluateScene } from "@/store/evaluateStore";
import "./index.scss";
import { useRef, useEffect } from "react";
@@ -17,6 +21,8 @@ const ListContainer = (props) => {
} = props;
const timerRef = useRef<NodeJS.Timeout | null>(null);
const userInfo = useUserInfo();
useReachBottom(() => {
// 加载更多方法
timerRef.current = setTimeout(() => {
@@ -46,19 +52,46 @@ const ListContainer = (props) => {
);
};
// 对于没有ntrp等级的用户每个月展示一次, 插在第三个位置
function insertEvaluateCard(list) {
if (!list || list.length === 0) {
return list;
}
if (userInfo.ntrp_level) {
return list;
}
const lastShowTime = getStorage("list_evaluate_card");
if (!lastShowTime) {
setStorage("list_evaluate_card", Date.now());
}
if (Date.now() - Number(lastShowTime) < 30 * 24 * 60 * 60 * 1000) {
return list;
}
if (list.length <= 3) {
return [...list, { type: "evaluateCard" }];
}
const [item1, item2, item3, ...rest] = list;
return [item1, item2, item3, { type: "evaluateCard" }, ...rest];
}
// 渲染列表
const renderList = (list) => {
// 请求数据为空
if (!loading && list?.length === 0) {
if (!loading && (!list || list?.length === 0)) {
return <ListLoadError reload={reload} text="暂无数据" />;
}
// 渲染数据
return (
<>
{list?.map((match, index) => (
<ListCard key={match.id || index} {...match} />
))}
{insertEvaluateCard(list).map((match, index) => {
if (match.type === "evaluateCard") {
return (
<NTRPTestEntryCard key="evaluate" type={EvaluateScene.list} />
);
}
return <ListCard key={match.id || index} {...match} />;
})}
</>
);
};
@@ -74,15 +107,15 @@ const ListContainer = (props) => {
onScrollToLower={handleScrollToLower}
upperThreshold={60}
> */}
{renderList(data)}
{/* 显示骨架屏 */}
{loading && renderSkeleton()}
{/* <View className="recommendTextWrapper">
{renderList(data)}
{/* 显示骨架屏 */}
{loading && renderSkeleton()}
{/* <View className="recommendTextWrapper">
<Text className="recommendText">搜索结果较少，已为你推荐其他内容</Text>
</View>
{renderList(recommendList)} */}
{/* 到底了 */}
{data?.length > 0 && <View className="bottomTextWrapper">到底了</View>}
{/* 到底了 */}
{data?.length > 0 && <View className="bottomTextWrapper">到底了</View>}
{/* </ScrollView> */}
</View>
);

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

@@ -24,11 +24,11 @@ import {
GameManagePopup,
Comments,
} from "@/components";
import {
EvaluateType,
SceneType,
DisplayConditionType,
} from "@/components/NTRPEvaluatePopup";
// import {
// EvaluateType,
// SceneType,
// DisplayConditionType,
// } from "@/components/NTRPEvaluatePopup";
import DetailService, {
MATCH_STATUS,
IsSubstituteSupported,
@@ -36,7 +36,9 @@ import DetailService, {
import * as LoginService from "@/services/loginService";
import OrderService from "@/services/orderService";
import { getCurrentLocation, calculateDistance } from "@/utils/locationUtils";
// import { getCurrentFullPath } from "@/utils";
import { useUserInfo, useUserActions } from "@/store/userStore";
import { EvaluateCallback, EvaluateScene } from "@/store/evaluateStore";
import img from "@/config/images";
import styles from "./style.module.scss";
import "./index.scss";
@@ -280,7 +282,9 @@ function StickyButton(props) {
getCommentCount,
} = props;
const [commentCount, setCommentCount] = useState(0);
const ntrpRef = useRef(null);
const ntrpRef = useRef<{
show: (evaluateCallback: EvaluateCallback) => void;
}>({ show: () => {} });
const {
id,
price,
@@ -294,8 +298,22 @@ function StickyButton(props) {
const gameManageRef = useRef();
function handleSelfEvaluate() {
// TODO: 打开自评弹窗
ntrpRef?.current?.show();
ntrpRef?.current?.show({
type: EvaluateScene.detail,
next: (flag) => {
if (flag) {
Taro.navigateTo({
url: `/order_pages/orderDetail/index?gameId=${id}`,
});
return;
}
Taro.redirectTo({ url: `/order_pages/orderDetail/index?gameId=${id}` });
},
onCancel: () => {
// Taro.redirectTo({ url: `/game_pages/detail/index?id=${id}` });
Taro.navigateBack();
},
});
}
useEffect(() => {
@@ -313,8 +331,8 @@ function StickyButton(props) {
return;
}
const displayPrice = is_organizer ? 0 : price;
user_action_status.can_assess = true;
user_action_status.can_join = false;
// user_action_status.can_assess = true;
// user_action_status.can_join = false;
// console.log(user_action_status, "user_action");
const {
can_assess,
@@ -385,17 +403,7 @@ function StickyButton(props) {
};
} else if (can_assess) {
return {
text: () => (
<NTRPEvaluatePopup
ref={ntrpRef}
types={[EvaluateType.EDIT, EvaluateType.EVALUATE]}
scene={SceneType.DETAIL}
displayCondition={DisplayConditionType.AUTO}
showGuide={false}
>
<Text>¥{displayPrice} 立即加入</Text>
</NTRPEvaluatePopup>
),
text: () => <Text>¥{displayPrice} 立即加入</Text>,
action: handleSelfEvaluate,
};
}
@@ -477,6 +485,7 @@ function StickyButton(props) {
</View>
</View>
<GameManagePopup ref={gameManageRef} />
<NTRPEvaluatePopup type={EvaluateScene.detail} ref={ntrpRef} showGuide />
</>
);
}

107
src/game_pages/list/index.tsx
View File

@@ -2,7 +2,11 @@ import SearchBar from "@/components/SearchBar";
import FilterPopup from "@/components/FilterPopup";
import styles from "./index.module.scss";
import { useEffect, useRef, useCallback, useState } from "react";
import Taro, { usePageScroll, useShareAppMessage, useShareTimeline } from "@tarojs/taro";
import Taro, {
usePageScroll,
useShareAppMessage,
useShareTimeline,
} from "@tarojs/taro";
import { useListStore } from "@/store/listStore";
import { useGlobalState } from "@/store/global";
import { View } from "@tarojs/components";
@@ -13,14 +17,17 @@ import DistanceQuickFilter from "@/components/DistanceQuickFilter";
import { withAuth } from "@/components";
import { updateUserLocation } from "@/services/userService";
// import ShareCardCanvas from "@/components/ShareCardCanvas";
import { useUserActions } from "@/store/userStore";
import { useDictionaryStore } from "@/store/dictionaryStore";
const ListPage = () => {
// 从 store 获取数据和方法
const store = useListStore() || {};
const { statusNavbarHeightInfo, getCurrentLocationInfo } = useGlobalState() || {};
const { fetchUserInfo } = useUserActions();
const { statusNavbarHeightInfo, getCurrentLocationInfo } =
useGlobalState() || {};
const { totalHeight } = statusNavbarHeightInfo || {};
const {
@@ -49,48 +56,52 @@ const ListPage = () => {
filterOptions,
distanceQuickFilter,
isShowInputCustomerNavBar,
pageOption
pageOption,
} = listPageState || {};
// 防抖的滚动处理函数
const handleScroll = useCallback((res) => {
const currentScrollTop = res?.scrollTop || 0;
const handleScroll = useCallback(
(res) => {
const currentScrollTop = res?.scrollTop || 0;
// 添加缓冲区，避免临界点频繁切换
const buffer = 10; // 10px 缓冲区
const shouldShowInputNav = currentScrollTop >= (totalHeight + buffer);
const shouldHideInputNav = currentScrollTop < (totalHeight - buffer);
// 添加缓冲区，避免临界点频繁切换
const buffer = 10; // 10px 缓冲区
const shouldShowInputNav = currentScrollTop >= totalHeight + buffer;
const shouldHideInputNav = currentScrollTop < totalHeight - buffer;
// 清除之前的定时器
if (scrollTimeoutRef.current) {
clearTimeout(scrollTimeoutRef.current);
}
// 防抖处理，避免频繁更新状态
scrollTimeoutRef.current = setTimeout(() => {
// 只有在状态真正需要改变时才更新
if (shouldShowInputNav && !isShowInputCustomerNavBar) {
updateListPageState({
isShowInputCustomerNavBar: true
});
} else if (shouldHideInputNav && isShowInputCustomerNavBar) {
updateListPageState({
isShowInputCustomerNavBar: false
});
// 清除之前的定时器
if (scrollTimeoutRef.current) {
clearTimeout(scrollTimeoutRef.current);
}
lastScrollTopRef.current = currentScrollTop;
}, 16); // 约60fps的防抖间隔
}, [totalHeight, isShowInputCustomerNavBar, updateState]);
// 防抖处理，避免频繁更新状态
scrollTimeoutRef.current = setTimeout(() => {
// 只有在状态真正需要改变时才更新
if (shouldShowInputNav && !isShowInputCustomerNavBar) {
updateListPageState({
isShowInputCustomerNavBar: true,
});
} else if (shouldHideInputNav && isShowInputCustomerNavBar) {
updateListPageState({
isShowInputCustomerNavBar: false,
});
}
lastScrollTopRef.current = currentScrollTop;
}, 16); // 约60fps的防抖间隔
},
[totalHeight, isShowInputCustomerNavBar, updateState]
);
usePageScroll(handleScroll);
const scrollContextRef = useRef(null)
const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null)
const lastScrollTopRef = useRef(0)
const scrollContextRef = useRef(null);
const scrollTimeoutRef = useRef<NodeJS.Timeout | null>(null);
const lastScrollTopRef = useRef(0);
useEffect(() => {
getLocation()
getLocation();
fetchUserInfo();
}, []);
// 监听数据变化，如果是第一页就滚动到顶部
@@ -98,7 +109,7 @@ const ListPage = () => {
if (pageOption?.page === 1 && matches?.length > 0) {
Taro.pageScrollTo({
scrollTop: 0,
duration: 300
duration: 300,
});
}
}, [matches, pageOption?.page]);
@@ -112,7 +123,6 @@ const ListPage = () => {
};
}, []);
// 监听距离和排序方式变化，自动调用接口
// useEffect(() => {
// // 只有当 distanceQuickFilter 有值时才调用接口
@@ -126,7 +136,7 @@ const ListPage = () => {
// 获取位置信息
const getLocation = async () => {
const location = await getCurrentLocationInfo()
const location = await getCurrentLocationInfo();
// 保存位置到全局状态
updateState({ location });
@@ -136,7 +146,7 @@ const ListPage = () => {
try {
await updateUserLocation(location.latitude, location.longitude);
} catch (error) {
console.error('更新用户位置失败:', error);
console.error("更新用户位置失败:", error);
}
}
fetchGetGamesCount();
@@ -144,7 +154,7 @@ const ListPage = () => {
// 页面加载时获取数据
getMatchesData();
return location;
}
};
const refreshMatches = () => {
initialFilterSearch(true);
@@ -188,7 +198,7 @@ const ListPage = () => {
const handleFilterConfirm = () => {
toggleShowPopup();
getMatchesData();
}
};
/**
* @description 综合筛选弹框
@@ -196,7 +206,7 @@ const ListPage = () => {
*/
const toggleShowPopup = () => {
updateListPageState({
isShowFilterPopup: !isShowFilterPopup
isShowFilterPopup: !isShowFilterPopup,
});
};
@@ -208,7 +218,7 @@ const ListPage = () => {
updateFilterOptions(params);
};
const handleSearchChange = () => { };
const handleSearchChange = () => {};
// 距离筛选
const handleDistanceOrQuickChange = (name, value) => {
@@ -278,10 +288,10 @@ const ListPage = () => {
} catch (error) {
console.error("初始化字典数据失败:", error);
}
}
};
useEffect(() => {
initDictionaryData()
initDictionaryData();
}, []);
return (
@@ -311,9 +321,7 @@ const ListPage = () => {
/>
</View>
)}
<View
className={`${styles.listTopSearchWrapper}`}
>
<View className={`${styles.listTopSearchWrapper}`}>
<SearchBar
handleFilterIcon={toggleShowPopup}
isSelect={filterCount > 0}
@@ -322,13 +330,14 @@ const ListPage = () => {
value={searchValue}
onInputClick={handleSearchClick}
/>
</View>
{/* 筛选 */}
<View className={styles.listTopFilterWrapper}
<View
className={styles.listTopFilterWrapper}
style={{
top: totalHeight - 1,
}}>
}}
>
<DistanceQuickFilter
cityOptions={distanceData}
quickOptions={quickFilterData}

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

@@ -10,6 +10,7 @@ import evaluateService, {
TestResultData,
} from "@/services/evaluateService";
import { useUserInfo, useUserActions } from "@/store/userStore";
import { useEvaluate, EvaluateScene } from "@/store/evaluateStore";
import { delay, getCurrentFullPath } from "@/utils";
import CloseIcon from "@/static/ntrp/ntrp_close_icon.svg";
import DocCopy from "@/static/ntrp/ntrp_doc_copy.svg";
@@ -28,15 +29,10 @@ enum StageType {
RESULT = "result",
}
enum SourceType {
DETAIL = 'detail',
PUBLISH = 'publish',
}
const sourceTypeToTextMap = new Map([
[SourceType.DETAIL, '继续加入球局'],
[SourceType.PUBLISH, '继续发布球局'],
])
[EvaluateScene.detail, "继续加入球局"],
[EvaluateScene.publish, "继续发布球局"],
]);
function adjustRadarLabels(
source: [string, number][],
@@ -80,18 +76,31 @@ function adjustRadarLabels(
return result as [string, number][];
}
function isEmptyArrowFunction(fn) {
return (
typeof fn === "function" &&
!fn.hasOwnProperty("prototype") && // 排除普通函数
fn.toString().replace(/\s+/g, "") === "()=>{}"
);
}
function CommonGuideBar(props) {
const { title, confirm } = props;
const { params } = useRouter();
const { redirect } = params;
const { onCancel } = useEvaluate();
// const userInfo = useUserInfo()
function handleClose() {
//TODO: 二次确认
if (confirm) {
}
Taro.redirectTo({
url: redirect ? redirect : "/game_pages/list/index",
});
try {
if (isEmptyArrowFunction(onCancel)) {
Taro.redirectTo({ url: "/game_pages/list/index" });
}
onCancel();
} catch {
Taro.redirectTo({ url: "/game_pages/list/index" });
}
}
return (
@@ -106,12 +115,12 @@ function CommonGuideBar(props) {
);
}
function Intro(props) {
const { redirect } = props;
function Intro() {
const [ntrpData, setNtrpData] = useState<LastTimeTestResult>();
const userInfo = useUserInfo();
const { fetchUserInfo } = useUserActions();
const [ready, setReady] = useState(false);
const { setCallback } = useEvaluate();
const { last_test_result: { ntrp_level, create_time, id } = {} } =
ntrpData || {};
@@ -136,10 +145,24 @@ function Intro(props) {
}
function handleNext(type) {
setCallback({
type: EvaluateScene.share,
next: () => {
Taro.redirectTo({ url: "/game_pages/list/index" });
},
onCancel: () => {
Taro.redirectTo({ url: "/game_pages/list/index" });
// if (userInfo.id) {
// Taro.redirectTo({ url: "/game_pages/list/index" });
// } else {
// Taro.exitMiniProgram();
// }
},
});
Taro.redirectTo({
url: `/other_pages/ntrp-evaluate/index?stage=${type}${
type === StageType.RESULT ? `&id=${id}` : ""
}${redirect ? `&redirect=${redirect}` : ""}`,
}`,
});
}
@@ -249,8 +272,7 @@ function Intro(props) {
);
}
function Test(props) {
const { redirect } = props;
function Test() {
const [disabled, setDisabled] = useState(false);
const [index, setIndex] = useState(0);
const [questions, setQuestions] = useState<
@@ -295,9 +317,7 @@ function Test(props) {
});
if (res.code === 0) {
Taro.redirectTo({
url: `/other_pages/ntrp-evaluate/index?stage=${StageType.RESULT}&id=${
res.data.record_id
}${redirect ? `&redirect=${redirect}` : ""}`,
url: `/other_pages/ntrp-evaluate/index?stage=${StageType.RESULT}&id=${res.data.record_id}`,
});
}
} catch (e) {
@@ -378,11 +398,12 @@ function Test(props) {
);
}
function Result(props) {
function Result() {
const { params } = useRouter();
const { id, type, redirect } = params;
const { id } = params;
const userInfo = useUserInfo();
const { fetchUserInfo } = useUserActions();
const { type, next, clear } = useEvaluate();
const radarRef = useRef();
const [result, setResult] = useState<TestResultData>();
@@ -425,9 +446,7 @@ function Result(props) {
function handleReTest() {
Taro.redirectTo({
url: `/other_pages/ntrp-evaluate/index?stage=${StageType.TEST}${
redirect ? `&redirect=${redirect}` : ""
}`,
url: `/other_pages/ntrp-evaluate/index?stage=${StageType.TEST}`,
});
}
@@ -437,11 +456,13 @@ function Result(props) {
});
}
function handleGoon () {
async function handleGoon() {
if (type) {
Taro.redirectTo({ url: redirect })
next();
await delay(1500);
clear();
} else {
handleViewGames()
handleViewGames();
}
}
@@ -495,7 +516,7 @@ function Result(props) {
async function handleSaveImage() {
if (!userInfo.id) {
return
return;
}
const url = await genCardImage();
Taro.saveImageToPhotosAlbum({ filePath: url });
@@ -511,11 +532,11 @@ function Result(props) {
};
});
function handleAuth () {
function handleAuth() {
if (userInfo.id) {
return true
return true;
}
const currentPage = getCurrentFullPath()
const currentPage = getCurrentFullPath();
Taro.redirectTo({
url: `/login_pages/index/index${
currentPage ? `?redirect=${encodeURIComponent(currentPage)}` : ""
@@ -576,11 +597,17 @@ function Result(props) {
)}
<View className={styles.actions}>
<View className={styles.viewGame} onClick={handleGoon}>
<Button className={styles.viewGameBtn}>{sourceTypeToTextMap.get(type) || '去看看球局'}</Button>
<Button className={styles.viewGameBtn}>
{sourceTypeToTextMap.get(type) || "去看看球局"}
</Button>
</View>
<View className={styles.otherActions}>
<View className={styles.share}>
<Button className={styles.shareBtn} openType={userInfo.id ? 'share' : undefined} onClick={handleAuth}>
<Button
className={styles.shareBtn}
openType={userInfo.id ? "share" : undefined}
onClick={handleAuth}
>
<Image className={styles.wechatIcon} src={WechatIcon} />
<Text>邀请好友测试</Text>
</Button>
@@ -614,30 +641,30 @@ const ComponentsMap = {
};
function NtrpEvaluate() {
const { updateUserInfo } = useUserActions();
// const { updateUserInfo } = useUserActions();
const { params } = useRouter();
const { redirect } = params;
// const { redirect } = params;
const stage = params.stage as StageType;
async function handleUpdateNtrp() {
await updateUserInfo({
ntrp_level: "4.0",
});
Taro.showToast({
title: "更新成功",
icon: "success",
duration: 2000,
});
await delay(2000);
if (redirect) {
Taro.redirectTo({ url: decodeURIComponent(redirect) });
}
}
// async function handleUpdateNtrp() {
// await updateUserInfo({
// ntrp_level: "4.0",
// });
// Taro.showToast({
// title: "更新成功",
// icon: "success",
// duration: 2000,
// });
// await delay(2000);
// if (redirect) {
// Taro.redirectTo({ url: decodeURIComponent(redirect) });
// }
// }
const Component = ComponentsMap[stage];
return <Component redirect={redirect} />;
return <Component />;
}
export default withAuth(NtrpEvaluate);

43
src/store/evaluateStore.ts Normal file
View File

@@ -0,0 +1,43 @@
import { create } from "zustand";
export enum EvaluateScene {
list,
publish,
detail,
user,
userEdit,
share,
}
export interface EvaluateCallback {
type: EvaluateScene | ''
next: (flag?: boolean) => void,
onCancel: () => void,
}
export interface EvaluateCallbackType extends EvaluateCallback {
setCallback: (options: { type: EvaluateScene | '', next: () => void, onCancel: () => void }) => void,
clear: () => void,
}
export const useEvaluateCallback = create<EvaluateCallbackType>()((set) => ({
type: '',
next: () => { },
onCancel: () => { },
setCallback: ({ type, next, onCancel }) => {
set({
type,
next,
onCancel,
})
},
clear: () => { set({ type: '', next: () => { }, onCancel: () => { } }) }
}));
export const useEvaluate = () => useEvaluateCallback(({ type, next, onCancel, setCallback, clear }) => ({
type,
next,
onCancel,
setCallback,
clear,
}))

28
src/user_pages/myself/index.tsx
View File

@@ -7,7 +7,8 @@ import { UserInfoCard, UserInfo } from "@/components/UserInfo/index";
import { UserService } from "@/services/userService";
import ListContainer from "@/container/listContainer";
import { TennisMatch } from "@/../types/list/types";
import { withAuth } from "@/components";
import { withAuth, NTRPTestEntryCard } from "@/components";
import { EvaluateScene } from "@/store/evaluateStore";
const MyselfPage: React.FC = () => {
// 获取页面参数
@@ -34,9 +35,9 @@ const MyselfPage: React.FC = () => {
occupation: "加载中...",
ntrp_level: "NTRP 3.0",
personal_profile: "加载中...",
gender: '',
country: '',
province: '',
gender: "",
country: "",
province: "",
});
// 球局记录状态
@@ -50,7 +51,7 @@ const MyselfPage: React.FC = () => {
// 当前激活的标签页
const [active_tab, setActiveTab] = useState<"hosted" | "participated">(
"hosted",
"hosted"
);
// 加载用户数据
@@ -131,7 +132,10 @@ const MyselfPage: React.FC = () => {
games_data = await UserService.get_participated_games(user_info.id);
}
const sorted_games = games_data.sort((a, b) => {
return new Date(a.original_start_time.replace(/\s/, 'T')).getTime() - new Date(b.original_start_time.replace(/\s/, 'T')).getTime();
return (
new Date(a.original_start_time.replace(/\s/, "T")).getTime() -
new Date(b.original_start_time.replace(/\s/, "T")).getTime()
);
});
const { notEndGames, finishedGames } = classifyGameRecords(sorted_games);
set_game_records(notEndGames);
@@ -147,7 +151,7 @@ const MyselfPage: React.FC = () => {
try {
const new_following_state = await UserService.toggle_follow(
user_id,
is_following,
is_following
);
setIsFollowing(new_following_state);
@@ -221,6 +225,8 @@ const MyselfPage: React.FC = () => {
</View>
</View>
<NTRPTestEntryCard type={EvaluateScene.user} />
{/* 球局类型标签页 */}
<View className="game_tabs_section">
<View className="tab_container">
@@ -231,7 +237,9 @@ const MyselfPage: React.FC = () => {
<Text className="tab_text">我主办的</Text>
</View>
<View
className={`tab_item ${active_tab === "participated" ? "active" : ""}`}
className={`tab_item ${
active_tab === "participated" ? "active" : ""
}`}
onClick={() => setActiveTab("participated")}
>
<Text className="tab_text">我参与的</Text>
@@ -248,7 +256,7 @@ const MyselfPage: React.FC = () => {
loading={loading}
error={null}
reload={load_game_data}
loadMoreMatches={() => { }}
loadMoreMatches={() => {}}
/>
</ScrollView>
</View>
@@ -271,7 +279,7 @@ const MyselfPage: React.FC = () => {
loading={loading}
error={null}
reload={load_game_data}
loadMoreMatches={() => { }}
loadMoreMatches={() => {}}
/>
</ScrollView>
{/* </View> */}