/**
|
* @author 韩天尊
|
* @time 2024-01-15
|
* @version 1.0.0
|
* @description 个人中心页面组件
|
*/
|
import React, { useState, useEffect } from 'react';
|
import { useNavigate } from 'react-router-dom';
|
import { useAppContext } from '../context/AppContext';
|
import { pointsAPI } from '../services/api';
|
import './ProfilePage.css';
|
|
const ProfilePage: React.FC = () => {
|
const { state, logout, loadAdminInfo } = useAppContext();
|
const navigate = useNavigate();
|
const [showLogoutDialog, setShowLogoutDialog] = useState(false);
|
const [statsData, setStatsData] = useState({
|
totalServiceHours: 0,
|
monthServiceHours: 0,
|
totalActivities: 0
|
});
|
|
// 加载积分概览数据
|
useEffect(() => {
|
const loadOverview = async () => {
|
try {
|
const response = await pointsAPI.getOverview();
|
if (response.code === 0) {
|
const data = response.data as any;
|
setStatsData({
|
totalServiceHours: data.totalServiceHours || 0,
|
monthServiceHours: data.monthServiceHours || 0,
|
totalActivities: data.totalActivities || 0
|
});
|
}
|
} catch (error) {
|
console.error('获取积分概览失败:', error);
|
}
|
};
|
|
loadOverview();
|
}, []);
|
|
// 模拟数据（保留用于社区信息）
|
const mockData = {
|
community: '金牛奥翔社区',
|
isVerified: false
|
};
|
|
const handleVolunteerRegister = () => {
|
// 跳转到志愿者注册页面
|
navigate('/volunteer-register');
|
};
|
|
const handleMyRegistrations = () => {
|
// 跳转到我的报名页面
|
navigate('/my-registrations');
|
};
|
|
const handleMyPoints = () => {
|
// 跳转到我的积分页面
|
navigate('/points-query');
|
};
|
|
const handleMyMessages = () => {
|
// 跳转到我的消息页面
|
navigate('/message-list');
|
};
|
|
const handleSwitchToAdmin = async () => {
|
try {
|
// 获取用户手机号
|
const phone = state.user?.phone;
|
if (!phone) {
|
console.error('用户手机号不存在');
|
return;
|
}
|
|
// 调用接口获取管理员信息并缓存
|
await loadAdminInfo(phone);
|
|
// 跳转到管理端首页
|
navigate('/admin');
|
} catch (error) {
|
console.error('获取管理员信息失败:', error);
|
// 即使获取管理员信息失败，也跳转到管理端首页
|
navigate('/admin');
|
}
|
};
|
|
const handleLogout = () => {
|
// 显示退出登录确认框
|
setShowLogoutDialog(true);
|
};
|
|
const confirmLogout = async () => {
|
try {
|
// 调用退出登录方法
|
await logout();
|
// 跳转到登录页面
|
navigate('/login');
|
} catch (error) {
|
console.error('退出登录失败:', error);
|
// 即使API调用失败，也要清除本地状态并跳转
|
navigate('/login');
|
} finally {
|
setShowLogoutDialog(false);
|
}
|
};
|
|
const cancelLogout = () => {
|
setShowLogoutDialog(false);
|
};
|
|
return (
|
<div className="page">
|
{/* 顶部用户信息 */}
|
<div className="page-header profile-page-header">
|
{/* 按钮和认证行 */}
|
<div className="user-top-row">
|
{/* 左侧空白 */}
|
<div className="user-left-space"></div>
|
|
{/* 右侧按钮和认证 */}
|
<div className="user-actions">
|
{/* 成为志愿者按钮 */}
|
<button
|
className="volunteer-register-btn"
|
onClick={handleVolunteerRegister}
|
>
|
<i className="fas fa-user-plus"></i>
|
<span>成为志愿者</span>
|
</button>
|
|
{/* 已认证图标 */}
|
<div className={`verified-badge ${mockData.isVerified ? '' : 'hidden'}`}>
|
<i className="fas fa-check-circle"></i>
|
<span>已认证</span>
|
</div>
|
</div>
|
</div>
|
|
{/* 姓名信息在正下方 */}
|
<div className="user-text-info">
|
<div className="user-name">{state.user?.name || '未登录'}</div>
|
</div>
|
</div>
|
|
{/* 服务时长统计卡片 */}
|
<div className="service-stats-card">
|
<div className="stats-header">
|
<i className="fas fa-clock icon-clock"></i>
|
<span>服务统计</span>
|
</div>
|
<div className="stats-content">
|
<div className="stats-item">
|
<div className="stats-label">累计服务时长</div>
|
<div className="stats-value">{statsData.totalServiceHours}</div>
|
<div className="stats-unit">小时</div>
|
</div>
|
<div className="stats-item">
|
<div className="stats-label">本月服务时长</div>
|
<div className="stats-value">{statsData.monthServiceHours}</div>
|
<div className="stats-unit">小时</div>
|
</div>
|
<div className="stats-item">
|
<div className="stats-label">参与活动次数</div>
|
<div className="stats-value">{statsData.totalActivities}</div>
|
<div className="stats-unit">次</div>
|
</div>
|
</div>
|
</div>
|
|
{/* 快捷操作卡片 */}
|
<div className="activity-list">
|
<div className="function-row">
|
<div className="function-btn function-btn-flex" onClick={handleMyRegistrations}>
|
<i className="fas fa-clipboard-list icon-clipboard"></i>
|
<span>我的报名</span>
|
</div>
|
<div className="function-btn function-btn-flex" onClick={handleMyPoints}>
|
<i className="fas fa-coins icon-coins"></i>
|
<span>我的积分</span>
|
</div>
|
<div className="function-btn function-btn-flex" onClick={handleMyMessages} style={{ display: 'none' }}>
|
<i className="fas fa-comment-dots icon-comment"></i>
|
<span>我的消息</span>
|
</div>
|
</div>
|
<div className="function-row-left">
|
{/* 只有管理员才显示切换管理端按钮 */}
|
{state.user?.isAdmin && (
|
<div className="function-btn function-btn-width" onClick={handleSwitchToAdmin}>
|
<i className="fas fa-user-shield icon-shield"></i>
|
<span>切换管理端</span>
|
</div>
|
)}
|
<div className="function-btn function-btn-width" onClick={handleLogout}>
|
<i className="fas fa-sign-out-alt icon-signout"></i>
|
<span>退出登录</span>
|
</div>
|
</div>
|
</div>
|
|
{/* 自定义退出登录确认对话框 */}
|
{showLogoutDialog && (
|
<div className="logout-dialog-overlay" onClick={cancelLogout}>
|
<div className="logout-dialog" onClick={(e) => e.stopPropagation()}>
|
<div className="logout-dialog-header">
|
<div className="logout-dialog-icon">
|
<i className="fas fa-sign-out-alt"></i>
|
</div>
|
<h3 className="logout-dialog-title">退出登录</h3>
|
</div>
|
<div className="logout-dialog-content">
|
<p>确定要退出登录吗？</p>
|
<p className="logout-dialog-subtitle">退出后需要重新登录才能使用系统</p>
|
</div>
|
<div className="logout-dialog-actions">
|
<button
|
className="logout-dialog-btn logout-dialog-btn-cancel"
|
onClick={cancelLogout}
|
>
|
取消
|
</button>
|
<button
|
className="logout-dialog-btn logout-dialog-btn-confirm"
|
onClick={confirmLogout}
|
>
|
确认退出
|
</button>
|
</div>
|
</div>
|
</div>
|
)}
|
</div>
|
);
|
};
|
|
export default ProfilePage;
|
