78 lines
2.0 KiB
React
78 lines
2.0 KiB
React
|
"use client";
|
||
|
|
import React, { useState, useEffect } from "react";
|
||
|
|
import Image from "next/image";
|
||
|
|
|
||
|
|
export default function GenerateLink({ params }) {
|
||
|
|
//生成二维码
|
||
|
|
const [qrcodeUrl, setQrcodeUrl] = useState("");
|
||
|
|
useEffect(() => {
|
||
|
|
var QRCode = require("qrcode");
|
||
|
|
QRCode.toDataURL(
|
||
|
|
`https://tiefen.fun/${params.user_id}`,
|
||
|
|
function (err, url) {
|
||
|
|
setQrcodeUrl(url);
|
||
|
|
}
|
||
|
|
);
|
||
|
|
}, []);
|
||
|
|
|
||
|
|
//保存图片
|
||
|
|
const saveImage = async () => {
|
||
|
|
window.ReactNativeWebView.postMessage(
|
||
|
|
JSON.stringify({
|
||
|
|
type: "SAVE_IMAGE",
|
||
|
|
data: qrcodeUrl,
|
||
|
|
})
|
||
|
|
);
|
||
|
|
};
|
||
|
|
|
||
|
|
//复制链接
|
||
|
|
const copyUrl = () => {
|
||
|
|
window.ReactNativeWebView.postMessage(
|
||
|
|
JSON.stringify({
|
||
|
|
type: "COPY_URL",
|
||
|
|
data: `https://tiefen.fun/${params.user_id}`,
|
||
|
|
})
|
||
|
|
);
|
||
|
|
};
|
||
|
|
return (
|
||
|
|
<section className="flex flex-col p-4 container gap-10">
|
||
|
|
<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">
|
||
|
|
<button
|
||
|
|
onClick={copyUrl}
|
||
|
|
className="btn btn-primary text-white text-base"
|
||
|
|
>
|
||
|
|
复制链接
|
||
|
|
</button>
|
||
|
|
<button
|
||
|
|
onClick={saveImage}
|
||
|
|
className="btn btn-primary text-white text-base"
|
||
|
|
>
|
||
|
|
保存二维码到相册
|
||
|
|
</button>
|
||
|
|
</div>
|
||
|
|
</section>
|
||
|
|
);
|
||
|
|
}
|