261 lines
11 KiB
JavaScript
261 lines
11 KiB
JavaScript
"use client";
|
|
|
|
import React, { useEffect, useState } from "react";
|
|
import Image from "next/image";
|
|
import Link from "next/link";
|
|
|
|
export default function Profile() {
|
|
const [isLoggedIn, setIsLoggedIn] = React.useState(false);
|
|
const [userData, setUserData] = React.useState(null);
|
|
const [points, setPoints] = useState(0);
|
|
const [currentImageIndex, setCurrentImageIndex] = useState(0);
|
|
|
|
useEffect(() => {
|
|
// 检查本地存储中是否有用户信息
|
|
const storedUser = localStorage.getItem("user");
|
|
const token = localStorage.getItem("token");
|
|
|
|
if (storedUser && token) {
|
|
setIsLoggedIn(true);
|
|
setUserData(JSON.parse(storedUser));
|
|
} else {
|
|
setIsLoggedIn(false);
|
|
setUserData(null);
|
|
}
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const fetchUserPoints = async () => {
|
|
try {
|
|
const token = localStorage.getItem("token");
|
|
if (!token) return;
|
|
|
|
const res = await fetch("/api/user/points", {
|
|
headers: {
|
|
Authorization: `Bearer ${token}`,
|
|
},
|
|
});
|
|
const data = await res.json();
|
|
setPoints(data.points);
|
|
} catch (error) {
|
|
console.error("获取积分失败:", error);
|
|
}
|
|
};
|
|
|
|
fetchUserPoints();
|
|
}, []);
|
|
|
|
useEffect(() => {
|
|
const timer = setInterval(() => {
|
|
setCurrentImageIndex((prevIndex) => (prevIndex + 1) % 3);
|
|
}, 3000);
|
|
|
|
return () => clearInterval(timer);
|
|
}, []);
|
|
|
|
return (
|
|
<div className="flex flex-col min-h-screen bg-gray-50">
|
|
{/* 顶部用户信息区域 */}
|
|
<div className="bg-yellow-400 p-8 rounded-b-3xl">
|
|
{isLoggedIn && userData ? (
|
|
<Link href="/user/profile" className="flex items-center gap-6">
|
|
<Image
|
|
src={
|
|
userData.avatar ||
|
|
"https://s2.loli.net/2025/02/11/miDGcVpHvQUzNwr.jpg"
|
|
}
|
|
alt="avatar"
|
|
width={80}
|
|
height={80}
|
|
className="rounded-full"
|
|
/>
|
|
<div>
|
|
<h2 className="text-xl font-bold">{userData.username}</h2>
|
|
<p className="text-sm text-gray-700 mt-2">查看个人资料</p>
|
|
</div>
|
|
</Link>
|
|
) : (
|
|
<Link href="/login" className="flex items-center gap-6">
|
|
<div className="w-[80px] h-[80px] bg-gray-200 rounded-full flex items-center justify-center">
|
|
<svg
|
|
className="w-10 h-10 text-gray-400"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M16 7a4 4 0 11-8 0 4 4 0 018 0zM12 14a7 7 0 00-7 7h14a7 7 0 00-7-7z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<div>
|
|
<h2 className="text-xl font-bold">登录/注册</h2>
|
|
<p className="text-sm text-gray-700 mt-2">
|
|
点击登录享受更多精彩信息
|
|
</p>
|
|
</div>
|
|
</Link>
|
|
)}
|
|
</div>
|
|
|
|
{/* 积分和优惠券信息区域 */}
|
|
<div className="grid grid-cols-2 gap-4 p-4">
|
|
<Link href="/checkin" className="bg-white rounded-lg p-4 text-center">
|
|
<span className="text-xl font-bold">{points}</span>
|
|
<p className="text-sm text-gray-500 mt-1">积分</p>
|
|
</Link>
|
|
<Link href="/coupon" className="bg-white rounded-lg p-4 text-center">
|
|
<span className="text-xl font-bold">0</span>
|
|
<p className="text-sm text-gray-500 mt-1">优惠券</p>
|
|
</Link>
|
|
</div>
|
|
|
|
{/* 常用工具区域 */}
|
|
<div className="p-4">
|
|
<h3 className="text-lg font-bold mb-4">常用工具</h3>
|
|
<div className="grid grid-cols-4 gap-4">
|
|
<Link href="/address" className="flex flex-col items-center">
|
|
<div className="w-12 h-12 bg-green-100 rounded-lg flex items-center justify-center mb-1">
|
|
<svg
|
|
className="w-6 h-6 text-green-600"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M17.657 16.657L13.414 20.9a1.998 1.998 0 01-2.827 0l-4.244-4.243a8 8 0 1111.314 0z"
|
|
/>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M15 11a3 3 0 11-6 0 3 3 0 016 0z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<span className="text-sm">收货地址</span>
|
|
</Link>
|
|
|
|
<Link href="/coupon" className="flex flex-col items-center">
|
|
<div className="w-12 h-12 bg-purple-100 rounded-lg flex items-center justify-center mb-1">
|
|
<svg
|
|
className="w-6 h-6 text-purple-600"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M15 5v2m0 4v2m0 4v2M5 5a2 2 0 00-2 2v3a2 2 0 110 4v3a2 2 0 002 2h14a2 2 0 002-2v-3a2 2 0 110-4V7a2 2 0 00-2-2H5z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<span className="text-sm">优惠券</span>
|
|
</Link>
|
|
|
|
<Link href="/checkin" className="flex flex-col items-center">
|
|
<div className="w-12 h-12 bg-orange-100 rounded-lg flex items-center justify-center mb-1">
|
|
<svg
|
|
className="w-6 h-6 text-orange-600"
|
|
fill="none"
|
|
stroke="currentColor"
|
|
viewBox="0 0 24 24"
|
|
>
|
|
<path
|
|
strokeLinecap="round"
|
|
strokeLinejoin="round"
|
|
strokeWidth={2}
|
|
d="M9 12l2 2 4-4m6 2a9 9 0 11-18 0 9 9 0 0118 0z"
|
|
/>
|
|
</svg>
|
|
</div>
|
|
<span className="text-sm">签到</span>
|
|
</Link>
|
|
|
|
<Link href="/contact" className="flex flex-col items-center">
|
|
<div className="w-12 h-12 bg-teal-100 rounded-lg flex items-center justify-center mb-1">
|
|
<svg
|
|
className="w-6 h-6"
|
|
viewBox="0 0 1024 1024"
|
|
fill="#0d9488"
|
|
stroke="currentColor"
|
|
>
|
|
<path d="M927.616 465.6C923.328 236.704 745.888 51.808 528 51.808h-32c-217.888 0-395.328 184.896-399.616 413.76C58.112 487.744 32 528.672 32 576v64c0 70.592 57.408 128 128 128s128-57.408 128-128v-64a128.064 128.064 0 0 0-126.784-127.872C173.728 262.688 318.912 115.808 496 115.808h32c177.12 0 322.272 146.88 334.784 332.32A128.064 128.064 0 0 0 736 576v64c0 57.792 38.72 106.176 91.392 122.016a337.504 337.504 0 0 1-191.936 124.48A79.712 79.712 0 0 0 560 832a80 80 0 1 0 0 160 79.68 79.68 0 0 0 67.872-38.112 402.432 402.432 0 0 0 278.24-193.6C955.968 742.816 992 695.776 992 640v-64c0-47.328-26.112-88.256-64.384-110.4zM224 576v64c0 35.296-28.704 64-64 64s-64-28.704-64-64v-64c0-35.296 28.704-64 64-64s64 28.704 64 64z m704 64c0 34.304-27.2 62.176-61.12 63.712l-2.496-1.184c-0.224 0.512-0.576 0.928-0.8 1.408A64 64 0 0 1 800 640v-64c0-35.296 28.704-64 64-64s64 28.704 64 64v64z"></path>
|
|
</svg>
|
|
</div>
|
|
<span className="text-sm">联系客服</span>
|
|
</Link>
|
|
|
|
<Link href="/about" className="flex flex-col items-center">
|
|
<div className="w-12 h-12 bg-blue-100 rounded-lg flex items-center justify-center mb-1">
|
|
<svg
|
|
className="w-6 h-6"
|
|
viewBox="0 0 1229 1024"
|
|
fill="#2563eb"
|
|
stroke="currentColor"
|
|
>
|
|
<path
|
|
d="M727.59 511.004C817.748 467.99 880.387 375.63 880.387 268.53 880.387 120.549 761.052 0.147 614.391 0.147S348.4 120.549 348.4 268.53c0 107.098 62.674 199.46 152.792 242.474-224.396 55.89-328.166 277.36-328.166 485.41 0 14.89 11.962 26.876 26.643 26.876 14.76 0 26.68-12.027 26.68-26.876 0-214.47 121.399-445.341 388.01-445.341 266.604 0 388.004 230.871 388.004 445.341 0 14.89 11.96 26.876 26.678 26.876 14.721 0 26.643-12.027 26.643-26.876 0.074-208.051-103.656-429.522-328.093-485.41M401.72 268.53c0-118.315 95.37-214.583 212.67-214.583 117.297 0 212.675 96.268 212.675 214.583 0 118.276-95.376 214.511-212.675 214.511-117.301 0-212.67-96.235-212.67-214.511"
|
|
p-id="5242"
|
|
></path>
|
|
<path
|
|
d="M289.591 493.675c12.114-1.162 21.894-10.48 23.806-22.626 1.877-12.147-4.674-24.098-15.868-28.931-5.364-2.321-130.794-58.097-120.828-189.135C188.124 103.764 349.2 85.703 356.177 84.966c14.607-1.428 25.34-14.541 23.924-29.32-1.38-14.812-14.225-25.601-29.058-24.25C277.56 38.475 135.42 93.01 123.5 248.847c-7.324 96.924 44.313 166.582 95.411 207.43-88.82 31.206-234.37 119.899-216.354 364.072 1.034 14.118 12.728 24.947 26.523 24.947 0.692 0 1.347 0 2.039-0.077 14.68-1.121 25.719-14.041 24.607-28.854-21.62-293.563 223.52-321.686 233.865-322.69M1105.17 248.848C1093.283 93.05 951.185 38.513 877.702 31.397c-14.76-1.318-27.679 9.477-29.06 24.213-1.415 14.773 9.355 27.928 24 29.356 6.86 0.655 167.9 17.87 179.358 167.978 10.01 131.04-115.456 186.853-120.708 189.098-11.23 4.797-17.787 16.667-15.952 28.812 1.803 12.146 11.615 21.581 23.73 22.781 10.43 1.009 255.568 29.125 233.95 322.655-1.111 14.813 9.926 27.726 24.608 28.848 0.69 0.083 1.345 0.083 2.033 0.083 13.8 0 25.494-10.792 26.527-24.947 18.052-244.097-127.497-332.79-216.354-363.997 51.1-40.923 102.77-110.505 95.336-207.43z"
|
|
p-id="5243"
|
|
></path>
|
|
</svg>
|
|
</div>
|
|
<span className="text-sm">关于我们</span>
|
|
</Link>
|
|
</div>
|
|
</div>
|
|
|
|
{/* 宠物相册区域 */}
|
|
<div className="p-4">
|
|
<div className="flex justify-between items-center mb-4">
|
|
<h3 className="text-lg font-bold">推荐商品</h3>
|
|
</div>
|
|
|
|
<div className="relative w-full h-48 rounded-lg overflow-hidden">
|
|
{[
|
|
"https://s2.loli.net/2025/02/11/QCxNUXcDaPeRohE.png",
|
|
"https://s2.loli.net/2025/02/11/FdX5giEp9DjGx4J.png",
|
|
"https://s2.loli.net/2025/02/11/9zRiqkcn43BjHvp.png",
|
|
].map((url, index) => (
|
|
<Link href="/tab" key={index}>
|
|
<Image
|
|
src={url}
|
|
alt={`商品 ${index + 1}`}
|
|
fill
|
|
className={`object-cover transition-opacity duration-500 ${
|
|
index === currentImageIndex ? "opacity-100" : "opacity-0"
|
|
}`}
|
|
/>
|
|
</Link>
|
|
))}
|
|
|
|
<div className="absolute bottom-2 left-0 right-0 flex justify-center gap-1">
|
|
{[0, 1, 2].map((index) => (
|
|
<div
|
|
key={index}
|
|
className={`w-1.5 h-1.5 rounded-full ${
|
|
index === currentImageIndex
|
|
? "bg-yellow-400"
|
|
: "bg-white opacity-60"
|
|
}`}
|
|
/>
|
|
))}
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
);
|
|
}
|