"use client";
import React, { useState, useEffect } from "react";
import html2canvas from "html2canvas";
import baseRequest from "@/utils/baseRequest";
import { Toast } from "antd-mobile";
import { generateSignature } from "@/utils/crypto";
export default function Share({ params }) {
//获取页面数据、生成二维码
const [data, setData] = useState({});
const [qrcodeUrl, setQrcodeUrl] = useState("");
const [shareWebUrl, setShareWebUrl] = useState("https://tiefen.fun");
const [isFetching, setIsFetching] = useState(true);
function generateRandomString(length = 10) {
const characters =
"ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz0123456789";
let result = "";
for (let i = 0; i < length; i++) {
result += characters.charAt(
Math.floor(Math.random() * characters.length)
);
}
return result;
}
useEffect(() => {
function getRandomUrl(urls) {
return urls[Math.floor(Math.random() * urls.length)];
}
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);
const urlsResponse = await fetch(`/api/config/cold_config`, {
method: "POST",
headers: {
"Content-Type": "application/json",
},
body: JSON.stringify({ ...base }),
});
const urlsData = await urlsResponse.json();
if (urlsData.ret === -1) {
Toast.show({
content: urlsData.msg,
});
return;
}
const randomUrl = getRandomUrl(urlsData.data.share_redirect_urls);
setShareWebUrl(randomUrl);
const randomStr = generateRandomString();
var QRCode = require("qrcode");
QRCode.toDataURL(
`${randomUrl}/zone/${params.user_id}/${randomStr}`,
function (err, url) {
setQrcodeUrl(url);
}
);
setIsFetching(false);
} catch (error) {
console.error(error);
}
};
getData();
}, []);
//分享海报组件
const Poster = () => {
return (
铁粉空间
|官网:tiefen.fun
);
};
//保存图片
const saveImage = 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 = () => {
const randomStr = generateRandomString();
window.ReactNativeWebView.postMessage(
JSON.stringify({
type: "COPY_URL",
data: `${shareWebUrl}/zone/${params.user_id}/${randomStr}`,
})
);
};
if (isFetching) {
return (
);
}
return (
);
}