mini-programs/src/components/NTRPTestEntryCard/index.tsx

import React, { useState, useEffect, useCallback, memo } from "react";
import { View, Image, Text } from "@tarojs/components";
import { requireLoginWithPhone } from "@/utils/helper";
import Taro from "@tarojs/taro";
import { useUserInfo, useUserActions } from "@/store/userStore";
// import { getCurrentFullPath } from "@/utils";
import evaluateService, { StageType } from "@/services/evaluateService";
import { waitForAuthInit } from "@/utils/authInit";
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: {
  type: EvaluateScene;
  evaluateCallback?: EvaluateCallback;
  callback?: (flag) => void;
}) {
  const [testFlag, setTestFlag] = useState(false);
  const [hasTestInLastMonth, setHasTestInLastMonth] = useState(false);
  const { type, evaluateCallback, callback } = props;
  const userInfo = useUserInfo();
  const { setCallback } = useEvaluate();
  const { fetchUserInfo } = useUserActions();

  console.log(userInfo);

  useEffect(() => {
    const init = async () => {
      // 先等待静默登录完成
      await waitForAuthInit();
      // 然后再获取用户信息
      if (!userInfo.id) {
        await fetchUserInfo();
      }
      // 获取测试结果
      const res = await evaluateService.getLastResult();
      if (res.code === 0) {
        setTestFlag(res.data.has_test_record);
        setHasTestInLastMonth(res.data.has_test_in_last_month);
        callback?.(res.data.has_test_in_last_month);
      }
    };
    init();
  }, [userInfo]);

  const handleTest = useCallback(
    function () {
      // 没有绑定手机号，线条转登陆
      // if (!requireLoginWithPhone()) {
      //   return;
      // }

      switch (type) {
        case EvaluateScene.list:
          setCallback({
            type,
            next: () => {
              Taro.redirectTo({ url: "/main_pages/index" });
            },
            onCancel: () => {
            
              Taro.navigateBack();
            },
          });
          break;
        case EvaluateScene.share:
          setCallback({
            type,
            next: () => {
              Taro.redirectTo({ url: "/main_pages/index" });
            },
            onCancel: () => {
              Taro.redirectTo({ url: "/main_pages/index" });
            },
          });
          break;
        case EvaluateScene.detail:
        case EvaluateScene.publish:
          setCallback(evaluateCallback as EvaluateCallback);
          break;
        case EvaluateScene.user:
          setCallback({
            type,
            next: () => {
              Taro.redirectTo({ url: "/main_pages/index" });
            },
            onCancel: () => {
              // Taro.redirectTo({ url: "/user_pages/myself/index" });
              Taro.navigateBack();
            },
          });
          break;
        case EvaluateScene.userEdit:
          setCallback({
            type,
            next: () => {
              Taro.redirectTo({ url: "/main_pages/index" });
            },
            onCancel: () => {
              // Taro.redirectTo({ url: "/user_pages/edit/index" });
              Taro.navigateBack();
            },
          });
          break;
        default:
          setCallback({
            type,
            next: () => {
              Taro.redirectTo({ url: "/main_pages/index" });
            },
            onCancel: () => {
              Taro.redirectTo({ url: "/main_pages/index" });
            },
          });
      }
      if (!testFlag && !userInfo.phone) {
        Taro.navigateTo({
          url: `/login_pages/index/index?redirect=${encodeURIComponent(
            `/other_pages/ntrp-evaluate/index?stage=${StageType.INTRO}`
          )}`,
        });
        return false;
      }
      Taro.navigateTo({
        url: `/other_pages/ntrp-evaluate/index?stage=${
          testFlag ? StageType.INTRO : StageType.TEST
        }`,
      });
    },
    [setCallback, testFlag, type, evaluateCallback, userInfo.phone]
  );

  // 如果最近一个月有测试记录，则不展示
  if (hasTestInLastMonth && type === EvaluateScene.list) {
    return null;
  }

  return type === EvaluateScene.list ? (
    <View className={styles.higher} onClick={handleTest}>
      <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="aspectFill"
          />
        </View>
        {/* avatar side */}
        <View className={styles.addonImage}>
          <Image className={styles.docImage} src={DocCopy} mode="aspectFill" />
        </View>
      </View>
    </View>
  ) : (
    <View className={styles.lower} onClick={handleTest}>
      <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="aspectFill"
          />
        </View>
        {/* avatar side */}
        <View className={styles.addonImage}>
          <Image className={styles.docImage} src={DocCopy} mode="aspectFill" />
        </View>
      </View>
    </View>
  );
}

export default memo(NTRPTestEntryCard);
// export default NTRPTestEntryCard;