/**
|
* @author 韩天尊
|
* @time 2024-01-15
|
* @version 1.0.0
|
* @description 活动签到页面组件
|
*/
|
import React, { useState } from 'react';
|
import { useParams, useNavigate } from 'react-router-dom';
|
import { useAppContext } from '../context/AppContext';
|
import PageHeader from '../components/PageHeader';
|
|
const ActivityCheckinPage: React.FC = () => {
|
const { id } = useParams<{ id: string }>();
|
const navigate = useNavigate();
|
const { state, dispatch } = useAppContext();
|
|
// 根据ID获取活动信息
|
const activity = state.activities.find(a => a.id === Number(id));
|
const [checkinLocation, setCheckinLocation] = useState('');
|
const [checkinNotes, setCheckinNotes] = useState('');
|
|
if (!activity) {
|
return (
|
<div className="page">
|
<PageHeader title="活动签到" />
|
<div style={{ padding: '20px', textAlign: 'center' }}>
|
活动不存在
|
</div>
|
</div>
|
);
|
}
|
|
// 处理签到
|
const handleCheckin = () => {
|
if (!checkinLocation) {
|
alert('请填写签到地点');
|
return;
|
}
|
|
// 创建签到记录
|
const checkinRecord = {
|
id: Date.now(),
|
activityId: activity.id,
|
activityTitle: activity.title,
|
checkinTime: new Date().toLocaleString(),
|
checkinLocation: checkinLocation,
|
checkoutTime: '',
|
checkoutLocation: '',
|
status: 'checked'
|
};
|
|
// 添加到签到记录
|
dispatch({ type: 'ADD_CHECKIN_RECORD', payload: checkinRecord });
|
|
// 更新用户积分
|
dispatch({ type: 'UPDATE_USER_POINTS', payload: activity.points });
|
|
// 跳转到成功页面
|
navigate('/checkin-success');
|
};
|
|
return (
|
<div className="page">
|
<PageHeader title="活动签到" />
|
|
<div className="checkin-container">
|
{/* 活动信息 */}
|
<div style={{
|
background: 'white',
|
borderRadius: 'var(--border-radius)',
|
padding: '16px',
|
marginBottom: '16px',
|
boxShadow: 'var(--shadow)'
|
}}>
|
<h3 style={{ marginBottom: '12px', fontSize: '16px', fontWeight: '600', color: 'var(--text-color)' }}>
|
<i className="fas fa-info-circle" style={{ color: 'var(--primary-color)', marginRight: '8px' }}></i>
|
活动信息
|
</h3>
|
<div style={{ fontSize: '14px', color: 'var(--text-color)', lineHeight: '1.6' }}>
|
<div style={{ marginBottom: '8px' }}>
|
<strong>活动名称：</strong>{activity.title}
|
</div>
|
<div style={{ marginBottom: '8px' }}>
|
<strong>活动时间：</strong>{activity.time}
|
</div>
|
<div style={{ marginBottom: '8px' }}>
|
<strong>活动地点：</strong>{activity.location}
|
</div>
|
<div style={{ marginBottom: '8px' }}>
|
<strong>可获得积分：</strong>
|
<span className="activity-points" style={{ marginLeft: '8px' }}>
|
+{activity.points}分
|
</span>
|
</div>
|
</div>
|
</div>
|
|
{/* 签到表单 */}
|
<div className="checkin-form">
|
<div className="form-group">
|
<label>签到地点 *</label>
|
<input
|
type="text"
|
placeholder="请输入签到地点"
|
value={checkinLocation}
|
onChange={(e) => setCheckinLocation(e.target.value)}
|
/>
|
</div>
|
|
<div className="form-group">
|
<label>备注（可选）</label>
|
<textarea
|
placeholder="请输入备注信息"
|
value={checkinNotes}
|
onChange={(e) => setCheckinNotes(e.target.value)}
|
/>
|
</div>
|
|
{/* 提交按钮 */}
|
<button className="submit-btn" onClick={handleCheckin}>
|
<i className="fas fa-check-circle" style={{ marginRight: '8px' }}></i>
|
确认签到
|
</button>
|
</div>
|
|
{/* 签到说明 */}
|
<div style={{
|
background: 'white',
|
borderRadius: 'var(--border-radius)',
|
padding: '16px',
|
marginTop: '16px',
|
boxShadow: 'var(--shadow)'
|
}}>
|
<h4 style={{ marginBottom: '8px', color: 'var(--text-color)' }}>
|
<i className="fas fa-info-circle" style={{ color: 'var(--primary-color)', marginRight: '8px' }}></i>
|
签到说明
|
</h4>
|
<ul style={{
|
margin: 0,
|
paddingLeft: '20px',
|
color: 'var(--text-light)',
|
fontSize: '14px',
|
lineHeight: '1.6'
|
}}>
|
<li>请确保在活动开始前完成签到</li>
|
<li>签到地点必须与活动地点一致</li>
|
<li>签到成功后即可获得相应积分</li>
|
<li>如需签退，请在活动结束后操作</li>
|
</ul>
|
</div>
|
</div>
|
</div>
|
);
|
};
|
|
export default ActivityCheckinPage;
|
