/**
|
* @author 韩天尊
|
* @time 2024-01-15
|
* @version 1.0.0
|
* @description 核销详情页面组件
|
*/
|
import React, { useState, useEffect } from 'react';
|
import { useParams, useNavigate } from 'react-router-dom';
|
import { useAppContext } from '../context/AppContext';
|
import { pointsAPI } from '../services/api';
|
import { RedemptionRecord } from '../types';
|
import PageHeader from '../components/PageHeader';
|
|
const RedemptionDetailPage: React.FC = () => {
|
const { id } = useParams<{ id: string }>();
|
const navigate = useNavigate();
|
const { state } = useAppContext();
|
const [redemption, setRedemption] = useState<RedemptionRecord | null>(null);
|
const [loading, setLoading] = useState(true);
|
const [error, setError] = useState('');
|
|
useEffect(() => {
|
const loadRedemptionDetail = async () => {
|
try {
|
setLoading(true);
|
// 由于API中没有获取单个核销详情的接口，这里模拟从列表中查找
|
const response = await pointsAPI.getRedemptionRecords({
|
page: 1,
|
size: 100
|
});
|
const record = response.data.list.find((item: RedemptionRecord) => item.id === Number(id));
|
if (record) {
|
setRedemption(record);
|
} else {
|
setError('核销记录不存在');
|
}
|
} catch (err: any) {
|
setError(err.message || '获取核销详情失败');
|
} finally {
|
setLoading(false);
|
}
|
};
|
|
if (id) {
|
loadRedemptionDetail();
|
}
|
}, [id]);
|
|
// 格式化时间
|
const formatDateTime = (timeString: string): string => {
|
try {
|
const date = new Date(timeString);
|
if (isNaN(date.getTime())) {
|
return timeString;
|
}
|
|
const year = date.getFullYear();
|
const month = String(date.getMonth() + 1).padStart(2, '0');
|
const day = String(date.getDate()).padStart(2, '0');
|
const hours = String(date.getHours()).padStart(2, '0');
|
const minutes = String(date.getMinutes()).padStart(2, '0');
|
|
return `${year}-${month}-${day} ${hours}:${minutes}`;
|
} catch (error) {
|
return timeString;
|
}
|
};
|
|
// 获取状态显示文本
|
const getStatusText = (status: string) => {
|
switch (status) {
|
case 'completed': return '已完成';
|
default: return '已核销';
|
}
|
};
|
|
// 获取状态样式类名
|
const getStatusClass = (status: string) => {
|
return status === 'completed' ? 'completed' : 'processed';
|
};
|
|
if (loading) {
|
return (
|
<div className="page">
|
<PageHeader title="核销详情" showBack={true} />
|
<div className="loading-container">
|
<div className="loading-spinner"></div>
|
<p>加载中...</p>
|
</div>
|
</div>
|
);
|
}
|
|
if (error || !redemption) {
|
return (
|
<div className="page">
|
<PageHeader title="核销详情" showBack={true} />
|
<div className="error-container">
|
<div className="error-icon">
|
<i className="fas fa-exclamation-triangle"></i>
|
</div>
|
<p>{error || '核销记录不存在'}</p>
|
<button
|
className="retry-btn"
|
onClick={() => navigate(-1)}
|
>
|
返回
|
</button>
|
</div>
|
</div>
|
);
|
}
|
|
return (
|
<div className="page">
|
<PageHeader title="核销详情" showBack={true} />
|
|
{/* 核销状态卡片 */}
|
<div className="redemption-status-card">
|
<div className="status-icon">
|
<i className="fas fa-check-circle"></i>
|
</div>
|
<div className="status-info">
|
<h3>{getStatusText(redemption.status)}</h3>
|
<p>核销时间：{formatDateTime(redemption.createTime || redemption.redemptionTime)}</p>
|
</div>
|
</div>
|
|
{/* 核销信息 */}
|
<div className="redemption-info-section">
|
<h3 className="section-title">核销信息</h3>
|
<div className="info-list">
|
<div className="info-item">
|
<div className="info-label">
|
<i className="fas fa-gift"></i>
|
<span>商品名称</span>
|
</div>
|
<div className="info-value">{redemption.productName || '积分核销'}</div>
|
</div>
|
<div className="info-item">
|
<div className="info-label">
|
<i className="fas fa-coins"></i>
|
<span>核销积分</span>
|
</div>
|
<div className="info-value points-value">-{redemption.points} 积分</div>
|
</div>
|
<div className="info-item">
|
<div className="info-label">
|
<i className="fas fa-clock"></i>
|
<span>核销时间</span>
|
</div>
|
<div className="info-value">{formatDateTime(redemption.createTime || redemption.redemptionTime)}</div>
|
</div>
|
<div className="info-item">
|
<div className="info-label">
|
<i className="fas fa-store"></i>
|
<span>核销地点</span>
|
</div>
|
<div className="info-value">社区服务中心</div>
|
</div>
|
<div className="info-item">
|
<div className="info-label">
|
<i className="fas fa-info-circle"></i>
|
<span>核销说明</span>
|
</div>
|
<div className="info-value">{redemption.description}</div>
|
</div>
|
</div>
|
</div>
|
|
{/* 操作按钮 */}
|
<div className="action-buttons">
|
<button
|
className="btn-secondary"
|
onClick={() => navigate('/points-query')}
|
>
|
<i className="fas fa-arrow-left"></i>
|
<span>返回积分页面</span>
|
</button>
|
</div>
|
</div>
|
);
|
};
|
|
export default RedemptionDetailPage;
|
