118 lines
4.0 KiB
JavaScript
118 lines
4.0 KiB
JavaScript
"use client";
|
|
|
|
import React, { useState, useEffect, useRef } from "react";
|
|
import Empty from "@/components/Empty";
|
|
import requireAPI from "@/utils/requireAPI";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faAngleLeft } from "@fortawesome/free-solid-svg-icons";
|
|
import { InfiniteScroll, Avatar, Divider } from "antd-mobile";
|
|
import { useRouter } from "next/navigation";
|
|
import InfiniteScrollContent from "@/components/InfiniteScrollContent";
|
|
import AddWeChat from "@/components/AddWeChat";
|
|
export default function UnlockedWechat() {
|
|
const router = useRouter();
|
|
//查询数据
|
|
const [data, setData] = useState([]);
|
|
const [offset, setOffset] = useState(0);
|
|
const [hasMore, setHasMore] = useState(1);
|
|
const [visible, setVisible] = useState(false);
|
|
const currentStreamer = useRef({});
|
|
useEffect(() => {
|
|
getData();
|
|
}, []);
|
|
|
|
const getData = async (currentOffset) => {
|
|
if (!hasMore) return;
|
|
try {
|
|
//查已解锁微信的主播的mid
|
|
const temData = await requireAPI("POST", "/api/vas/get_unlock_wechat_list", {
|
|
body: {
|
|
offset: currentOffset,
|
|
limit: 12,
|
|
},
|
|
});
|
|
setData([...data, ...temData.data.list]);
|
|
setOffset(temData.data.offset);
|
|
setHasMore(temData.data.more);
|
|
} catch (error) {
|
|
console.error(error);
|
|
}
|
|
};
|
|
async function loadMore() {
|
|
if (!offset) return;
|
|
const append = await getData(streamerInfo.id, currentKey, offset);
|
|
if (append) {
|
|
setData((val) => [...val, ...append]);
|
|
}
|
|
}
|
|
return (
|
|
<div>
|
|
<div className="p-4 fixed top-0 z-10 w-full">
|
|
<div className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full absolute">
|
|
<FontAwesomeIcon
|
|
icon={faAngleLeft}
|
|
size="xl"
|
|
onClick={() => {
|
|
router.back();
|
|
}}
|
|
/>
|
|
</div>
|
|
<p className="text-base text-center leading-9">已解锁微信</p>
|
|
</div>
|
|
<div className="mt-14">
|
|
<ul className="p-4 overflow-y-auto scrollbarBox_hidden">
|
|
{data.map((item, index) => (
|
|
<li key={item.id + "_" + index}>
|
|
<div className="flex items-center">
|
|
<Avatar
|
|
className="w-12 h-12 rounded-full"
|
|
src={item.account?.avatar?.images[0]?.urls[0]}
|
|
fit="cover"
|
|
onClick={()=>router.push("/profile/"+item?.account?.mid)}
|
|
/>
|
|
<div className="ml-2 justify-around flex-1">
|
|
<p className="text-base text-white font-medium">
|
|
{item.account.name}
|
|
</p>
|
|
<p className="text-sm text-[#FFFFFF80] font-medium">
|
|
{item.streamer.bio}
|
|
</p>
|
|
</div>
|
|
<div className="ml-2 justify-around items-center">
|
|
<div
|
|
className="text-sm font-medium px-3 py-1 bg-primary leading-[24px] rounded-full"
|
|
onClick={() => {
|
|
currentStreamer.current = item;
|
|
setVisible(true);
|
|
}}
|
|
>
|
|
查看微信
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<Divider className="my-3" />
|
|
</li>
|
|
))}
|
|
<InfiniteScroll loadMore={loadMore} hasMore={hasMore}>
|
|
<InfiniteScrollContent hasMore={hasMore} />
|
|
</InfiniteScroll>
|
|
</ul>
|
|
</div>
|
|
<AddWeChat
|
|
visible={visible}
|
|
closeMask={setVisible}
|
|
price={currentStreamer.current?.streamer?.wechat_coin_price}
|
|
name={currentStreamer.current?.account?.name}
|
|
streamerMid={currentStreamer.current?.streamer?.mid}
|
|
avatar={currentStreamer.current?.account?.avatar?.images[0]?.urls[0]}
|
|
streamerData={{
|
|
streamer_ext: {
|
|
wechat_lock_type:
|
|
currentStreamer.current?.streamer?.wechat_lock_type,
|
|
},
|
|
}}
|
|
/>
|
|
</div>
|
|
);
|
|
}
|