92 lines
3.0 KiB
TypeScript
92 lines
3.0 KiB
TypeScript
import React from "react";
|
||
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;
|
||
evaluateCallback: EvaluateCallback;
|
||
}) {
|
||
const { close, skipGuide, evaluateCallback } = props;
|
||
const userInfo = useUserInfo();
|
||
const { setCallback } = useEvaluate();
|
||
|
||
async function handleTest() {
|
||
setCallback(evaluateCallback);
|
||
Taro.navigateTo({
|
||
url: `/other_pages/ntrp-evaluate/index?stage=test`,
|
||
});
|
||
await delay(1000);
|
||
close();
|
||
}
|
||
return (
|
||
<View className={styles.container} onClick={(e) => e.stopPropagation()}>
|
||
<View className={styles.header}>
|
||
<View className={styles.closeBtn} onClick={close}>
|
||
<Image className={styles.closeIcon} src={CloseIcon} />
|
||
</View>
|
||
</View>
|
||
<View className={styles.top}>
|
||
<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 className={styles.guideMsg}>
|
||
<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.desc}>
|
||
<Text>首次发布球局前，需完善 NTRP 水平信息</Text>
|
||
</View>
|
||
</View>
|
||
<View className={styles.bottom}>
|
||
<View className={styles.jump}>
|
||
<Button
|
||
className={classnames(styles.button, styles.primary)}
|
||
onClick={handleTest}
|
||
>
|
||
<Text>快速测试</Text>
|
||
<Image className={styles.jumpIcon} src={ArrwoRight} />
|
||
</Button>
|
||
</View>
|
||
<View className={styles.direct}>
|
||
<Button className={classnames(styles.button)} onClick={skipGuide}>
|
||
<Text>我了解我的水平，无需测试</Text>
|
||
</Button>
|
||
</View>
|
||
</View>
|
||
</View>
|
||
);
|
||
}
|
||
|
||
export default NtrpPopupGuide;
|