320 lines
10 KiB
JavaScript
320 lines
10 KiB
JavaScript
"use client";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
import { FontAwesomeIcon } from "@fortawesome/react-fontawesome";
|
|
import { faAngleRight } from "@fortawesome/free-solid-svg-icons";
|
|
import { Avatar, Image, Toast } from "antd-mobile";
|
|
import { useRouter, useSearchParams } from "next/navigation";
|
|
import withAuth from "@/components/WithAuth";
|
|
import { get } from "@/utils/storeInfo";
|
|
import require from "@/utils/require";
|
|
const My = () => {
|
|
const [userInfo, setUserInfo] = useState({});
|
|
const searchParams = useSearchParams();
|
|
const router = useRouter();
|
|
useEffect(() => {
|
|
const userInfo = get("account");
|
|
if (userInfo) {
|
|
setUserInfo(userInfo);
|
|
getData(userInfo);
|
|
}
|
|
}, []);
|
|
const getData = async (oldUserInfo) => {
|
|
const data =
|
|
await require("POST", "/api/account_relation/count", null, true);
|
|
if (data.ret === -1) {
|
|
Toast.show({
|
|
icon: "fail",
|
|
content: data.msg,
|
|
position: "top",
|
|
});
|
|
return;
|
|
}
|
|
setUserInfo({ ...oldUserInfo, ...data.data });
|
|
};
|
|
return (
|
|
<div className="h-screen p-4 pb-20 bg-no-repeat bg-contain bg-top bg-[url(/images/profilebackground.png)]">
|
|
<div className="flex justify-end items-center z-10 w-full mb-4">
|
|
<div
|
|
className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full mr-2"
|
|
onClick={() =>
|
|
router.push("my/editUserProfile/selectUserProfileItem")
|
|
}
|
|
>
|
|
<Image
|
|
src="/icons/32DP/edit.png"
|
|
width={32}
|
|
className="w-4 h-full"
|
|
placeholder=""
|
|
/>
|
|
</div>
|
|
<div
|
|
className="w-9 h-9 flex items-center justify-center bg-[#FFFFFF1A] rounded-full"
|
|
onClick={() => router.push("my/setting")}
|
|
>
|
|
<Image
|
|
src="/icons/32DP/setting.png"
|
|
width={32}
|
|
className="w-4 h-full"
|
|
placeholder=""
|
|
/>
|
|
</div>
|
|
</div>
|
|
<div
|
|
className="flex items-center justify-between mb-4"
|
|
onClick={() => router.push("profile/" + userInfo.mid)}
|
|
>
|
|
<div className="flex items-center">
|
|
<Avatar
|
|
rounded-full
|
|
mr-4
|
|
src={userInfo.avatar?.images[0].urls[0]}
|
|
className="mr-4"
|
|
style={{ "--size": "76px", "--border-radius": "50%" }}
|
|
/>
|
|
<div>
|
|
<p className="text-2xl font-bold">{userInfo.name}</p>
|
|
<div className="h-4 flex items-center text-xs bg-[#ffffff18] rounded-full px-2 py-2.5 mt-1 w-max">
|
|
<Image
|
|
src="/icons/info/ID.png"
|
|
width={14}
|
|
height={14}
|
|
className="w-4 h-full mr-1"
|
|
placeholder=""
|
|
/>
|
|
<span>{userInfo.user_id}</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<FontAwesomeIcon
|
|
icon={faAngleRight}
|
|
size="xl"
|
|
className="h-6 mr-2"
|
|
onClick={() => {
|
|
// searchParams.append();
|
|
// router.back();
|
|
}}
|
|
/>
|
|
</div>
|
|
<ul className="grid grid-cols-4 mb-4">
|
|
<li
|
|
className="text-center"
|
|
onClick={() => router.push("my/relationship?key=follow")}
|
|
>
|
|
<p className="text-2xl">{userInfo?.follow_count || 0}</p>
|
|
<p className="text-[#ffffff88]">关注</p>
|
|
</li>
|
|
<li
|
|
className="text-center"
|
|
onClick={() => router.push("my/relationship?key=fans")}
|
|
>
|
|
<p className="text-2xl">{userInfo?.is_followed_count || 0}</p>
|
|
<p className="text-[#ffffff88]">粉丝</p>
|
|
</li>
|
|
<li className="text-center" onClick={() => router.push("my/wallet")}>
|
|
<p className="text-2xl">{userInfo.gold_num || 0}</p>
|
|
<p className="text-[#ffffff88]">金币</p>
|
|
</li>
|
|
<li className="text-center" onClick={() => router.push("my/wallet")}>
|
|
<p className="text-2xl">{userInfo.diamond_num || 0}</p>
|
|
<p className="text-[#ffffff88]">钻石</p>
|
|
</li>
|
|
</ul>
|
|
{/* 会员用户 */}
|
|
{/* <div className="rounded-xl p-2 border-2 border-[#2c2b2f] mb-4">
|
|
<ul>
|
|
<li className="flex justify-between items-center p-3 py-2">
|
|
<div className="flex items-center">
|
|
<Image
|
|
className="mr-2"
|
|
width={32}
|
|
src="/icons/32DP/space.png"
|
|
placeholder=""
|
|
/>
|
|
<span className="text-base">我的空间</span>
|
|
</div>
|
|
<div className="opacity-30 flex items-center">
|
|
<span className="mr-1">创作者功能</span>
|
|
<FontAwesomeIcon
|
|
icon={faAngleRight}
|
|
size="sm"
|
|
className="h-4 "
|
|
onClick={() => {
|
|
router.back();
|
|
}}
|
|
/>
|
|
</div>
|
|
</li>
|
|
<li className="flex justify-between items-center p-3 py-2">
|
|
<div className="flex items-center">
|
|
<Image
|
|
className="mr-2"
|
|
width={32}
|
|
src="/icons/32DP/myposts.png"
|
|
placeholder=""
|
|
/>
|
|
<span className="text-base">广场动态</span>
|
|
</div>
|
|
<div className="opacity-30 flex items-center">
|
|
<span className="mr-1">创作者功能</span>
|
|
<FontAwesomeIcon
|
|
icon={faAngleRight}
|
|
size="sm"
|
|
className="h-4 "
|
|
onClick={() => {
|
|
router.back();
|
|
}}
|
|
/>
|
|
</div>
|
|
</li>
|
|
<li className="flex justify-between items-center p-3 py-2">
|
|
<div className="flex items-center">
|
|
<Image
|
|
className="mr-2"
|
|
width={32}
|
|
src="/icons/32DP/wechat.png"
|
|
placeholder=""
|
|
/>
|
|
<span className="text-base">待添加微信</span>
|
|
</div>
|
|
<div className="opacity-30 flex items-center">
|
|
<span className="mr-1">创作者功能</span>
|
|
<FontAwesomeIcon
|
|
icon={faAngleRight}
|
|
size="sm"
|
|
className="h-4 "
|
|
onClick={() => {
|
|
router.back();
|
|
}}
|
|
/>
|
|
</div>
|
|
</li>
|
|
<li className="flex justify-between items-center p-3 py-2">
|
|
<div className="flex items-center">
|
|
<Image
|
|
className="mr-2"
|
|
width={32}
|
|
src="/icons/32DP/editprofile.png"
|
|
placeholder=""
|
|
/>
|
|
<span className="text-base">编辑资料</span>
|
|
</div>
|
|
<div className="opacity-30 flex items-center">
|
|
<span className="mr-1">创作者功能</span>
|
|
<FontAwesomeIcon
|
|
icon={faAngleRight}
|
|
size="sm"
|
|
className="h-4 "
|
|
onClick={() => {
|
|
router.back();
|
|
}}
|
|
/>
|
|
</div>
|
|
</li>
|
|
<li className="flex justify-between items-center p-3 py-2">
|
|
<div className="flex items-center">
|
|
<Image
|
|
className="mr-2"
|
|
width={32}
|
|
src="/icons/32DP/share.png"
|
|
placeholder=""
|
|
/>
|
|
<span className="text-base">生成分享页</span>
|
|
</div>
|
|
<div className="opacity-30 flex items-center">
|
|
<span className="mr-1">创作者功能</span>
|
|
<FontAwesomeIcon
|
|
icon={faAngleRight}
|
|
size="sm"
|
|
className="h-4 "
|
|
onClick={() => {
|
|
router.back();
|
|
}}
|
|
/>
|
|
</div>
|
|
</li>
|
|
</ul>
|
|
</div> */}
|
|
{/* 普通用户 */}
|
|
<div className="rounded-xl p-2 border-2 border-[#2c2b2f]">
|
|
<ul>
|
|
<li
|
|
className="flex justify-between items-center p-3 py-2"
|
|
onClick={() => router.push("my/wallet")}
|
|
>
|
|
<div className="flex items-center">
|
|
<Image
|
|
className="mr-2"
|
|
width={32}
|
|
src="/icons/32DP/wallet.png"
|
|
placeholder=""
|
|
/>
|
|
<span className="text-base">我的钱包</span>
|
|
</div>
|
|
<FontAwesomeIcon
|
|
icon={faAngleRight}
|
|
size="sm"
|
|
className="h-4 text-gray-300"
|
|
/>
|
|
</li>
|
|
<li className="flex justify-between items-center p-3 py-2" onClick={()=>router.push("my/unlockedWechat")}>
|
|
<div className="flex items-center">
|
|
<Image
|
|
className="mr-2"
|
|
width={32}
|
|
src="/icons/32DP/wechat.png"
|
|
placeholder=""
|
|
/>
|
|
<span className="text-base">已解锁微信</span>
|
|
</div>
|
|
<FontAwesomeIcon
|
|
icon={faAngleRight}
|
|
size="sm"
|
|
className="h-4 text-gray-300"
|
|
/>
|
|
</li>
|
|
{/* <li className="flex justify-between items-center p-3 py-2" onClick={()=>router.push("my/settleIn")}>
|
|
<div className="flex items-center">
|
|
<Image
|
|
className="mr-2"
|
|
width={32}
|
|
src="/icons/32DP/join.png"
|
|
placeholder=""
|
|
/>
|
|
<span className="text-base">申请入驻</span>
|
|
</div>
|
|
<FontAwesomeIcon
|
|
icon={faAngleRight}
|
|
size="sm"
|
|
className="h-4 text-gray-300"
|
|
/>
|
|
</li> */}
|
|
<li
|
|
className="flex justify-between items-center p-3 py-2"
|
|
onClick={() => {
|
|
router.push("/messageDetail");
|
|
}}
|
|
>
|
|
<div className="flex items-center">
|
|
<Image
|
|
className="mr-2"
|
|
width={32}
|
|
src="/icons/32DP/contact.png"
|
|
placeholder=""
|
|
/>
|
|
<span className="text-base">联系客服</span>
|
|
</div>
|
|
<FontAwesomeIcon
|
|
icon={faAngleRight}
|
|
size="sm"
|
|
className="h-4 text-gray-300"
|
|
/>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</div>
|
|
);
|
|
};
|
|
|
|
export default withAuth(My);
|