122 lines
3.9 KiB
JavaScript
122 lines
3.9 KiB
JavaScript
"use client";
|
||
|
||
import React, { useState, useEffect } from "react";
|
||
import WechatBar from "./_components/WechatBar";
|
||
import baseRequest from "@/utils/baseRequest";
|
||
import { Toast } from "antd-mobile";
|
||
import InOtherApp from "@/components/InOtherApp";
|
||
import { generateSignature } from "@/utils/crypto";
|
||
import Image from "next/image";
|
||
import verification from "@/public/icon/verification.png";
|
||
|
||
export default function StreamerDetail({ params }) {
|
||
//生成二维码
|
||
const [qrcodeUrl, setQrcodeUrl] = useState("");
|
||
useEffect(() => {
|
||
var QRCode = require("qrcode");
|
||
QRCode.toDataURL(
|
||
`https://tiefen.fun/${params.user_id}`,
|
||
function (err, url) {
|
||
setQrcodeUrl(url);
|
||
}
|
||
);
|
||
}, []);
|
||
//页面数据
|
||
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);
|
||
} catch (error) {
|
||
console.error(error);
|
||
}
|
||
};
|
||
getData();
|
||
}, []);
|
||
return (
|
||
<section className="flex flex-1 flex-col container relative">
|
||
<InOtherApp />
|
||
<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>
|
||
<WechatBar
|
||
price={Math.ceil(data?.wechat_coin_price / 9)}
|
||
streamerMid={data?.mid}
|
||
/>
|
||
{data?.platforms?.map((item, index) => (
|
||
<div
|
||
key={index}
|
||
onClick={() => window.open(item.url, "_blank")}
|
||
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>
|
||
</section>
|
||
);
|
||
}
|