为生成专属链接页面添加保存海报功能
This commit is contained in:
parent
4b2c2ddd07
commit
2915561010
|
|
@ -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 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">
|
||||
<div className="flex flex-col gap-4 px-4 mt-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>
|
||||
);
|
||||
|
|
|
|||
Loading…
Reference in New Issue