/**
|
* @author 韩天尊
|
* @time 2024-01-15
|
* @version 1.0.0
|
* @description 积分查询详情页面组件
|
*/
|
import React, { useState } from 'react';
|
import { useNavigate } from 'react-router-dom';
|
import { useAppContext } from '../context/AppContext';
|
import PageHeader from '../components/PageHeader';
|
|
const PointsQueryDetailPage: React.FC = () => {
|
const navigate = useNavigate();
|
const { state } = useAppContext();
|
const [activeTab, setActiveTab] = useState<'declarations' | 'redemptions'>('declarations');
|
|
const handleTabChange = (tab: 'declarations' | 'redemptions') => {
|
setActiveTab(tab);
|
};
|
|
const handlePointsRedemption = () => {
|
navigate('/points-redemption');
|
};
|
|
const handlePointsDeclaration = () => {
|
navigate('/points-declaration');
|
};
|
|
const handleShowPointsRules = () => {
|
// 显示积分规则
|
alert('积分规则：\n1. 参与社区活动：30-100分\n2. 志愿服务：20-80分\n3. 文明行为：10-50分\n4. 特殊贡献：100-500分');
|
};
|
|
const handleDeclarationClick = (recordId: number) => {
|
// 跳转到申报详情页面
|
const record = state.declarationRecords.find(d => d.id === recordId);
|
if (record) {
|
// 找到对应的活动
|
const activity = state.activities.find(a => a.title === record.title);
|
if (activity) {
|
navigate(`/activity-detail/${activity.id}`);
|
} else {
|
alert('未找到对应活动');
|
}
|
}
|
};
|
|
const handleRedemptionClick = (recordId: number) => {
|
// 跳转到核销详情页面
|
navigate(`/redemption-detail/${recordId}`);
|
};
|
|
return (
|
<div className="page">
|
<PageHeader title="我的积分" showBack={true} />
|
|
{/* 积分总览卡片 */}
|
<div className="points-overview">
|
<div className="overview-card">
|
<div className="overview-header">
|
<i className="fas fa-coins"></i>
|
<span>积分总览</span>
|
</div>
|
<div className="overview-content">
|
<div className="overview-item">
|
<div className="overview-label">可用积分</div>
|
<div className="overview-value">{state.user?.points || 0}</div>
|
<div className="overview-icon">
|
<i className="fas fa-wallet"></i>
|
</div>
|
</div>
|
<div className="overview-item">
|
<div className="overview-label">已核销积分</div>
|
<div className="overview-value">{state.user?.redeemedPoints || 0}</div>
|
<div className="overview-icon">
|
<i className="fas fa-exchange-alt"></i>
|
</div>
|
</div>
|
<div className="overview-item">
|
<div className="overview-label">累计积分</div>
|
<div className="overview-value">{state.user?.totalPoints || 0}</div>
|
<div className="overview-icon">
|
<i className="fas fa-chart-line"></i>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
|
{/* 快捷操作 */}
|
<div className="points-actions">
|
<button className="action-card" onClick={handlePointsRedemption}>
|
<i className="fas fa-qrcode"></i>
|
<span>积分核销</span>
|
</button>
|
<button className="action-card" onClick={handlePointsDeclaration}>
|
<i className="fas fa-plus-circle"></i>
|
<span>积分申报</span>
|
</button>
|
<button className="action-card" onClick={handleShowPointsRules}>
|
<i className="fas fa-info-circle"></i>
|
<span>积分规则</span>
|
</button>
|
</div>
|
|
{/* 积分记录 */}
|
<div className="points-records">
|
<div className="records-header">
|
<h3>积分记录</h3>
|
</div>
|
|
{/* Tab切换 */}
|
<div className="tab-section">
|
<button
|
className={`tab-btn ${activeTab === 'declarations' ? 'active' : ''}`}
|
onClick={() => handleTabChange('declarations')}
|
>
|
积分申报
|
</button>
|
<button
|
className={`tab-btn ${activeTab === 'redemptions' ? 'active' : ''}`}
|
onClick={() => handleTabChange('redemptions')}
|
>
|
核销历史
|
</button>
|
</div>
|
|
{/* 列表内容 */}
|
<div className="list-content">
|
<div id="declarations-tab" className={`list-tab ${activeTab === 'declarations' ? 'active' : ''}`}>
|
<div id="declarations-list">
|
{state.declarationRecords.map(record => (
|
<div
|
key={record.id}
|
className="declaration-card"
|
onClick={() => handleDeclarationClick(record.id)}
|
>
|
<div className="declaration-header">
|
<div className="declaration-title">{record.title}</div>
|
<div className={`declaration-status ${record.status}`}>
|
{record.status === 'pending' ? '审核中' :
|
record.status === 'approved' ? '已通过' : '不通过'}
|
</div>
|
</div>
|
<div className="declaration-info">
|
<div className="declaration-info-row">
|
<i className="fas fa-tag"></i>
|
<span>申报类型：{record.category || record.type || '未知'}</span>
|
</div>
|
<div className="declaration-info-row">
|
<i className="fas fa-clock"></i>
|
<span>时间：{record.time}</span>
|
</div>
|
</div>
|
<div className="declaration-content">{record.content}</div>
|
<div className="declaration-footer">
|
<div className="points-info">
|
<i className="fas fa-coins"></i>
|
<span>+{record.points} 积分</span>
|
</div>
|
<div className="declaration-arrow">
|
<i className="fas fa-chevron-right"></i>
|
</div>
|
</div>
|
</div>
|
))}
|
</div>
|
</div>
|
<div id="redemptions-tab" className={`list-tab ${activeTab === 'redemptions' ? 'active' : ''}`}>
|
<div id="redemptions-list">
|
<div
|
className="redemption-card"
|
onClick={() => handleRedemptionClick(1)}
|
>
|
<div className="redemption-header">
|
<div className="redemption-title">积分核销</div>
|
<div className="redemption-status completed">已完成</div>
|
</div>
|
<div className="redemption-info">
|
<div className="redemption-info-row">
|
<i className="fas fa-clock"></i>
|
<span>核销时间：2024-01-10 15:30</span>
|
</div>
|
<div className="redemption-info-row">
|
<i className="fas fa-store"></i>
|
<span>核销地点：社区服务中心</span>
|
</div>
|
</div>
|
<div className="redemption-content">兑换了鸡蛋</div>
|
<div className="redemption-footer">
|
<div className="points-info">
|
<i className="fas fa-coins"></i>
|
<span>-100 积分</span>
|
</div>
|
<div className="redemption-arrow">
|
<i className="fas fa-chevron-right"></i>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
</div>
|
);
|
};
|
|
export default PointsQueryDetailPage;
|
