feat: test popup not done

src/components/NTRPEvaluatePopup/index.module.scss

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

src/components/NTRPEvaluatePopup/index.tsx

@@ -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 [visible, setVisible] = useState(true);
-  const { ntrp } = useUserInfo();
+  const [ntrp, setNtrp] = useState<undefined | string>();
-  const { fetchUserInfo } = useUserActions();
 
   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}
       >
+        {showGuide ? (
+          <NtrpPopupGuide />
+        ) : (
           <View className={style.container}>
-          {/* TODO: 直接修改NTRP水平 */}
+            <NTRPTestEntryCard />
-          <Text>您还未测评。。。</Text>
-          <Text>请先进行NTRP评估</Text>
-          <Button onClick={handleEvaluate}>开始评估</Button>
           </View>
+        )}
       </CommonPopup>
-      {showEntry ? props.children : ''}
+      {showEntry ? props.children : ""}
     </>
   );
 };
 
-export default forwardRef(NTRPEvaluatePopup);
+export default memo(forwardRef(NTRPEvaluatePopup));

src/components/NTRPPopupGuide/index.tsx

@@ -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;

src/components/NTRPTestEntryCard/index.module.scss

@@ -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);
+}

src/components/NTRPTestEntryCard/index.tsx

@@ -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;

src/game_pages/detail/index.tsx

@@ -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: () => {},
     };
   }
 

src/other_pages/ntrp-evaluate/index.tsx

@@ -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}>
+        <View className={styles.viewGame} onClick={handleGoon}>
-          <Button className={styles.viewGameBtn}>去看看球局</Button>
+          <Button className={styles.viewGameBtn}>{sourceTypeToTextMap.get(type) || '去看看球局'}</Button>
         </View>
         <View className={styles.otherActions}>
           <View className={styles.share}>

src/static/ntrp/ntrp_arrow_right_color.svg

@@ -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>