/**
|
* @author 韩天尊
|
* @time 2024-01-15
|
* @version 1.0.0
|
* @description 签到成功页面组件
|
*/
|
import React from 'react';
|
import { useNavigate } from 'react-router-dom';
|
import { useAppContext } from '../context/AppContext';
|
import PageHeader from '../components/PageHeader';
|
|
const CheckinSuccessPage: React.FC = () => {
|
const navigate = useNavigate();
|
const { state } = useAppContext();
|
|
// 获取最新的签到记录
|
const latestCheckin = state.checkinRecords[state.checkinRecords.length - 1];
|
|
// 返回首页
|
const handleGoHome = () => {
|
navigate('/');
|
};
|
|
// 继续签到
|
const handleContinueCheckin = () => {
|
navigate('/scan-checkin');
|
};
|
|
return (
|
<div className="page">
|
<PageHeader title="签到成功" />
|
|
<div className="success-container">
|
{/* 成功图标 */}
|
<div className="success-icon">
|
<i className="fas fa-check-circle"></i>
|
</div>
|
|
{/* 成功信息 */}
|
<div className="success-info">
|
<h3>签到成功！</h3>
|
<p>您已成功签到本次活动</p>
|
</div>
|
|
{/* 活动信息 */}
|
<div className="activity-info-card">
|
<div className="info-item">
|
<label>活动名称</label>
|
<span>{latestCheckin ? latestCheckin.activityTitle : '社区清洁日'}</span>
|
</div>
|
<div className="info-item">
|
<label>签到时间</label>
|
<span>{latestCheckin ? latestCheckin.checkinTime : new Date().toLocaleString()}</span>
|
</div>
|
<div className="info-item">
|
<label>获得积分</label>
|
<span>+50</span>
|
</div>
|
</div>
|
|
{/* 操作按钮 */}
|
<div className="success-actions">
|
<button className="action-btn primary" onClick={handleGoHome}>
|
<i className="fas fa-home"></i>
|
<span>返回首页</span>
|
</button>
|
<button className="action-btn secondary" onClick={handleContinueCheckin}>
|
<i className="fas fa-list"></i>
|
<span>继续签到</span>
|
</button>
|
</div>
|
</div>
|
</div>
|
);
|
};
|
|
export default CheckinSuccessPage;
|
