12

src/other_pages/ntrp-evaluate/index.tsx

@@ -3,7 +3,7 @@ import { View, Text, Image, Button, Canvas } from "@tarojs/components";
 import Taro, { useRouter, useShareAppMessage } from "@tarojs/taro";
 import dayjs from "dayjs";
 import classnames from "classnames";
-import { withAuth, RadarChart } from "@/components";
+import { withAuth, RadarChart, RadarChartV2 } from "@/components";
 import evaluateService, {
   LastTimeTestResult,
   Question,
@@ -16,6 +16,9 @@ import { useGlobalState } from "@/store/global";
 import { delay, getCurrentFullPath } from "@/utils";
 import { formatNtrpDisplay } from "@/utils/helper";
 import { waitForAuthInit } from "@/utils/authInit";
+import httpService from "@/services/httpService";
+import DetailService from "@/services/detailService";
+import { base64ToTempFilePath } from "@/utils/genPoster";
 import CloseIcon from "@/static/ntrp/ntrp_close_icon.svg";
 import DocCopy from "@/static/ntrp/ntrp_doc_copy.svg";
 import ArrowRight from "@/static/ntrp/ntrp_arrow_right.svg";
@@ -452,12 +455,14 @@ function Result() {
   const userInfo = useUserInfo();
   const { fetchUserInfo, updateUserInfo } = useUserActions();
   const { type, next, clear } = useEvaluate();
-  const radarRef = useRef();
+  const radarRef = useRef<any>();
+  const radarV2Ref = useRef<any>();
 
   const [result, setResult] = useState<TestResultData>();
   const [radarData, setRadarData] = useState<
     [propName: string, prop: number][]
   >([]);
+  const [qrCodeUrl, setQrCodeUrl] = useState<string>("");
 
   useEffect(() => {
     const init = async () => {
@@ -469,10 +474,32 @@ function Result() {
       if (!userInfo || Object.keys(userInfo).length === 0) {
         await fetchUserInfo();
       }
+      // 获取二维码
+      await fetchQRCode();
     };
     init();
   }, [id]);
 
+  // 获取二维码 - 调用接口生成分享二维码
+  async function fetchQRCode() {
+    try {
+      // 调用接口生成二维码，分享当前页面
+      const qrCodeUrlRes = await DetailService.getQrCodeUrl({
+        page: "other_pages/ntrp-evaluate/index",
+        scene: `stage=${StageType.INTRO}`,
+      });
+      if (qrCodeUrlRes.code === 0 && qrCodeUrlRes.data?.qr_code_base64) {
+        // 将 base64 转换为临时文件路径
+        const tempFilePath = await base64ToTempFilePath(
+          qrCodeUrlRes.data.qr_code_base64
+        );
+        setQrCodeUrl(tempFilePath);
+      }
+    } catch (error) {
+      console.error("获取二维码失败:", error);
+    }
+  }
+
   async function getResultById() {
     const res = await evaluateService.getTestResult({ record_id: Number(id) });
     if (res.code === 0) {
@@ -542,51 +569,38 @@ function Result() {
   }
 
   async function genCardImage() {
-    return new Promise(async (resolve, reject) => {
-      const url = await radarRef.current.generateImage();
-      const query = Taro.createSelectorQuery();
-      query
-        .select("#exportCanvas")
-        .fields({ node: true, size: true })
-        .exec((res2) => {
-          const canvas = res2[0].node;
-          const ctx = canvas.getContext("2d");
-          const dpr = Taro.getWindowInfo().pixelRatio;
-          const width = 300;
-          const height = 400;
-          canvas.width = width * dpr;
-          canvas.height = height * dpr;
-          ctx.scale(dpr, dpr);
-
-          // 背景
-          ctx.fillStyle = "#e9fdf8";
-          ctx.fillRect(0, 0, width, height);
-
-          // 标题文字
-          ctx.fillStyle = "#000";
-          ctx.font = "16px sans-serif";
-          ctx.fillText("你的 NTRP 测试结果为", 20, 40);
-          ctx.fillStyle = "#00E5AD";
-          ctx.font = "bold 22px sans-serif";
-          ctx.fillText(`NTRP ${formatNtrpDisplay(result?.ntrp_level)}`, 20, 70);
-
-          // 绘制雷达图
-          const img = canvas.createImage();
-          img.src = url;
-          img.onload = () => {
-            ctx.drawImage(img, 20, 100, 260, 260);
-
-            // 第三步：导出最终卡片
-            Taro.canvasToTempFilePath({
-              canvas,
-              success: (res3) => {
-                console.log("导出成功:", res3.tempFilePath);
-                resolve(res3.tempFilePath);
-              },
-            });
-          };
+    try {
+      // 确保二维码已获取，如果没有则重新获取
+      let finalQrCodeUrl = qrCodeUrl;
+      if (!finalQrCodeUrl) {
+        // 直接调用接口获取二维码
+        const qrCodeUrlRes = await DetailService.getQrCodeUrl({
+          page: "other_pages/ntrp-evaluate/index",
+          scene: `stage=${StageType.INTRO}`,
         });
-    });
+        if (qrCodeUrlRes.code === 0 && qrCodeUrlRes.data?.qr_code_base64) {
+          finalQrCodeUrl = await base64ToTempFilePath(
+            qrCodeUrlRes.data.qr_code_base64
+          );
+        }
+      }
+      
+      // 使用 RadarV2 的 generateFullImage 方法生成完整图片
+      const imageUrl = await radarV2Ref.current?.generateFullImage({
+        title: "你的 NTRP 测试结果为",
+        ntrpLevel: result?.ntrp_level,
+        levelDescription: result?.level_description,
+        avatarUrl: userInfo?.avatar_url,
+        qrCodeUrl: finalQrCodeUrl,
+        bottomText: "长按识别二维码，快来加入，有你就有场！",
+        width: 750, // 设计稿宽度
+        height: 1334, // 设计稿高度
+      });
+      return imageUrl;
+    } catch (error) {
+      console.error("生成图片失败:", error);
+      throw error;
+    }
   }
 
   async function handleSaveImage() {
@@ -746,6 +760,19 @@ function Result() {
           left: "-9999px",
         }}
       />
+      {/* 隐藏的 RadarV2 用于生成完整图片，不显示在界面上 */}
+      <View style={{ position: "absolute", top: "-9999px", left: "-9999px", width: "0px", height: "0px", overflow: "hidden" }}>
+        <RadarChartV2 
+          ref={radarV2Ref} 
+          data={radarData}
+          title="你的 NTRP 测试结果为"
+          ntrpLevel={result?.ntrp_level}
+          levelDescription={result?.level_description}
+          avatarUrl={userInfo?.avatar_url}
+          qrCodeUrl={qrCodeUrl}
+          bottomText="长按识别二维码，快来加入，有你就有场！"
+        />
+      </View>
     </View>
   );
 }