226 lines
7.5 KiB
JavaScript
226 lines
7.5 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-3 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>
|
|
</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>
|
|
);
|
|
}
|