Merge pull request '为生成专属链接页面添加保存海报功能' (#4) from feat-20240106 into main

Reviewed-on: https://git.wishpal.cn/wishpal_ironfan/tiefen_space_web/pulls/4

app/generatelink/[user_id]/page.jsx

@@ -1,6 +1,13 @@
 "use client";
+
 import React, { useState, useEffect } from "react";
+import baseRequest from "@/utils/baseRequest";
+import { Toast } from "antd-mobile";
+import { generateSignature } from "@/utils/crypto";
 import Image from "next/image";
+import verification from "@/public/icon/verification.png";
+import platform_wechat from "@/public/images/platform_wechat.png";
+import html2canvas from "html2canvas";
 
 export default function GenerateLink({ params }) {
   //生成二维码
@@ -15,8 +22,48 @@ export default function GenerateLink({ params }) {
     );
   }, []);
 
-  //保存图片
+  //页面数据
-  const saveImage = async () => {
+  const [isFetching, setIsFetching] = useState(true);
+  const [data, setData] = useState({});
+  useEffect(() => {
+    const getData = async () => {
+      try {
+        const base = baseRequest();
+        const signature = generateSignature({
+          user_id: parseInt(params.user_id, 10),
+          ...base,
+        });
+        const detailResponse = await fetch(
+          `/api/streamer/list_ext_by_user_id?signature=${signature}`,
+          {
+            method: "POST",
+            headers: {
+              "Content-Type": "application/json",
+            },
+            body: JSON.stringify({
+              user_id: parseInt(params.user_id, 10),
+              ...base,
+            }),
+          }
+        );
+        const detailData = await detailResponse.json();
+        if (detailData.ret === -1) {
+          Toast.show({
+            content: detailData.msg,
+          });
+          return;
+        }
+        setData(detailData.data.streamer_ext);
+        setIsFetching(false);
+      } catch (error) {
+        console.error(error);
+      }
+    };
+    getData();
+  }, []);
+
+  //保存二维码
+  const saveQrcode = async () => {
     window.ReactNativeWebView.postMessage(
       JSON.stringify({
         type: "SAVE_IMAGE",
@@ -25,6 +72,21 @@ export default function GenerateLink({ params }) {
     );
   };
 
+  //保存海报
+  const savePoster = async () => {
+    const element = document.getElementById("print");
+    const canvas = await html2canvas(element, {
+      useCORS: true,
+    });
+    const data = canvas.toDataURL("image/jpg");
+    window.ReactNativeWebView.postMessage(
+      JSON.stringify({
+        type: "SAVE_IMAGE",
+        data: data,
+      })
+    );
+  };
+
   //复制链接
   const copyUrl = () => {
     window.ReactNativeWebView.postMessage(
@@ -34,31 +96,26 @@ export default function GenerateLink({ params }) {
       })
     );
   };
+
+  if (isFetching) {
+    return (
+      <section className="flex flex-1 justify-center container">
+        <span className="absolute top-1/2 loading loading-spinner loading-lg"></span>
+      </section>
+    );
+  }
+
   return (
-    <section className="flex flex-col p-4 container gap-10">
+    <section className="py-4">
       <div className="flex flex-col gap-2">
         <h1 className="text-white text-xl font-semibold text-center">
-          已为您生成专属链接与二维码
+          已为您生成专属链接与分享海报
         </h1>
         <p className="text-white text-base text-center">
-          请扫码或复制到浏览器查看
+          请保存您的分享链接或海报
         </p>
       </div>
-      <div className="flex flex-col gap-2">
+      <div className="flex flex-col gap-4 px-4 mt-4">
-        <div className="flex justify-center">
-          <Image
-            className="aspect-square object-contain rounded-xl"
-            src={qrcodeUrl}
-            width={96}
-            height={96}
-            alt=""
-          ></Image>
-        </div>
-        <p className="text-white text-base text-center">
-          https://tiefen.fun/{params.user_id}
-        </p>
-      </div>
-      <div className="flex flex-col gap-4">
         <button
           onClick={copyUrl}
           className="btn btn-primary text-white text-base"
@@ -66,11 +123,84 @@ export default function GenerateLink({ params }) {
           复制链接
         </button>
         <button
-          onClick={saveImage}
+          onClick={savePoster}
           className="btn btn-primary text-white text-base"
         >
-          保存二维码到相册
+          保存分享海报到相册
         </button>
+        <button
+          onClick={saveQrcode}
+          className="btn btn-primary text-white text-base"
+        >
+          只保存二维码到相册
+        </button>
+      </div>
+      <div
+        id="print"
+        className="flex flex-1 scale-90 flex-col container relative"
+      >
+        <div className="absolute top-0 left-0 w-full">
+          <div className="relative">
+            <img
+              src={data?.cover?.images[0].urls[0]}
+              alt=""
+              className="w-full h-64 object-cover object-center opacity-30"
+            />
+            <div className="absolute top-0 left-0 w-full h-64 bg-gradient-to-t from-[#07050A] to-[#00000000]"></div>
+          </div>
+        </div>
+        <div className="flex flex-col flex-1 px-4 py-2 z-10">
+          <div className="flex flex-col items-center mt-24">
+            <div className="w-[74px] h-[74px] rounded-full overflow-hidden">
+              <img
+                src={data?.avatar?.images[0].urls[0]}
+                alt=""
+                className="w-full object-cover"
+              />
+            </div>
+            <div className="flex flex-row items-center mt-3">
+              <p className="text-white text-2xl font-medium mr-1">
+                {data?.name}
+              </p>
+              <Image src={verification} alt="" className="w-6 h-6" />
+            </div>
+            <p className="text-secondary text-sm text-center font-medium mt-3 px-4">
+              {data?.bio}
+            </p>
+          </div>
+          <div className="flex flex-col mt-8 bg-[#FFFFFF1A] rounded-2xl">
+            <div className="flex flex-row cursor-pointer bg-[#07050A] border-2 border-[#FFFFFF26] rounded-2xl h-12 items-center justify-center">
+              <Image src={platform_wechat} alt="" className="w-5 h-5" />
+              <p className="text-white text-base font-medium ml-2">我的微信</p>
+            </div>
+          </div>
+          {data?.platforms?.map((item, index) => (
+            <div
+              key={index}
+              className="flex flex-row cursor-pointer bg-[#07050A] border-2 border-[#FFFFFF26] rounded-2xl h-12 items-center justify-center mt-4"
+            >
+              <img
+                src={item.icon.images[0].urls[0]}
+                alt=""
+                className="w-5 h-5"
+              />
+              <p className="text-white text-base font-medium ml-2">
+                {item.link_name}｜{item.nickname}
+              </p>
+            </div>
+          ))}
+        </div>
+        <div className="flex justify-center">
+          {qrcodeUrl && (
+            <Image
+              className="aspect-square object-contain rounded-xl"
+              src={qrcodeUrl}
+              width={96}
+              height={96}
+              alt=""
+            ></Image>
+          )}
+        </div>
       </div>
     </section>
   );