From 2915561010a80a732b4309c3e4ddb1afc9508072 Mon Sep 17 00:00:00 2001 From: yezian Date: Sat, 6 Jan 2024 19:27:55 +0800 Subject: [PATCH] =?UTF-8?q?=E4=B8=BA=E7=94=9F=E6=88=90=E4=B8=93=E5=B1=9E?= =?UTF-8?q?=E9=93=BE=E6=8E=A5=E9=A1=B5=E9=9D=A2=E6=B7=BB=E5=8A=A0=E4=BF=9D?= =?UTF-8?q?=E5=AD=98=E6=B5=B7=E6=8A=A5=E5=8A=9F=E8=83=BD?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- app/generatelink/[user_id]/page.jsx | 174 ++++++++++++++++++++++++---- 1 file changed, 152 insertions(+), 22 deletions(-) diff --git a/app/generatelink/[user_id]/page.jsx b/app/generatelink/[user_id]/page.jsx index f311b20..cd6d01c 100644 --- a/app/generatelink/[user_id]/page.jsx +++ b/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 ( +
+ +
+ ); + } + return ( -
+

- 已为您生成专属链接与二维码 + 已为您生成专属链接与分享海报

- 请扫码或复制到浏览器查看 + 请保存您的分享链接或海报

-
-
- -
-

- https://tiefen.fun/{params.user_id} -

-
-
+
+ +
+
+
+
+ +
+
+
+
+
+
+ +
+
+

+ {data?.name} +

+ +
+

+ {data?.bio} +

+
+
+
+ +

我的微信

+
+
+ {data?.platforms?.map((item, index) => ( +
+ +

+ {item.link_name}｜{item.nickname} +

+
+ ))} +
+
+ {qrcodeUrl && ( + + )} +
);