309 lines
8.5 KiB
TypeScript
309 lines
8.5 KiB
TypeScript
import { FC } from 'react';
|
||
|
||
const AppointmentScreen: FC = () => {
|
||
const mockAppointments = [
|
||
{
|
||
id: 1,
|
||
title: '商务会议翻译',
|
||
date: '2024-01-20',
|
||
time: '10:00-12:00',
|
||
language: '中文 ⇄ 英文',
|
||
status: '已确认',
|
||
translator: '李译员'
|
||
},
|
||
{
|
||
id: 2,
|
||
title: '医疗咨询翻译',
|
||
date: '2024-01-22',
|
||
time: '14:00-15:00',
|
||
language: '中文 ⇄ 西班牙文',
|
||
status: '待确认',
|
||
translator: '王译员'
|
||
},
|
||
{
|
||
id: 3,
|
||
title: '法律文件翻译',
|
||
date: '2024-01-25',
|
||
time: '09:00-11:00',
|
||
language: '中文 ⇄ 法文',
|
||
status: '已取消',
|
||
translator: '张译员'
|
||
},
|
||
];
|
||
|
||
return (
|
||
<div style={styles.container}>
|
||
<div style={styles.content}>
|
||
{/* 新建预约 */}
|
||
<div style={styles.section}>
|
||
<h3 style={styles.sectionTitle}>预约翻译服务</h3>
|
||
<button style={styles.newAppointmentButton}>
|
||
<span style={styles.buttonIcon}>➕</span>
|
||
<span style={styles.buttonText}>新建预约</span>
|
||
</button>
|
||
</div>
|
||
|
||
{/* 快速预约选项 */}
|
||
<div style={styles.section}>
|
||
<h3 style={styles.sectionTitle}>快速预约</h3>
|
||
<div style={styles.quickOptions}>
|
||
<button style={styles.quickOption}>
|
||
<span style={styles.optionIcon}>🏢</span>
|
||
<span style={styles.optionLabel}>商务会议</span>
|
||
</button>
|
||
<button style={styles.quickOption}>
|
||
<span style={styles.optionIcon}>🏥</span>
|
||
<span style={styles.optionLabel}>医疗咨询</span>
|
||
</button>
|
||
<button style={styles.quickOption}>
|
||
<span style={styles.optionIcon}>⚖️</span>
|
||
<span style={styles.optionLabel}>法律事务</span>
|
||
</button>
|
||
<button style={styles.quickOption}>
|
||
<span style={styles.optionIcon}>🎓</span>
|
||
<span style={styles.optionLabel}>学术交流</span>
|
||
</button>
|
||
</div>
|
||
</div>
|
||
|
||
{/* 我的预约 */}
|
||
<div style={styles.section}>
|
||
<h3 style={styles.sectionTitle}>我的预约</h3>
|
||
<div style={styles.appointmentsList}>
|
||
{mockAppointments.map((appointment) => (
|
||
<div key={appointment.id} style={styles.appointmentItem}>
|
||
<div style={styles.appointmentHeader}>
|
||
<h4 style={styles.appointmentTitle}>{appointment.title}</h4>
|
||
<div style={{
|
||
...styles.appointmentStatus,
|
||
backgroundColor:
|
||
appointment.status === '已确认' ? '#f6ffed' :
|
||
appointment.status === '待确认' ? '#fff7e6' : '#fff1f0',
|
||
color:
|
||
appointment.status === '已确认' ? '#52c41a' :
|
||
appointment.status === '待确认' ? '#fa8c16' : '#ff4d4f'
|
||
}}>
|
||
{appointment.status}
|
||
</div>
|
||
</div>
|
||
|
||
<div style={styles.appointmentDetails}>
|
||
<div style={styles.appointmentRow}>
|
||
<span style={styles.appointmentLabel}>📅 日期时间</span>
|
||
<span style={styles.appointmentValue}>
|
||
{appointment.date} {appointment.time}
|
||
</span>
|
||
</div>
|
||
|
||
<div style={styles.appointmentRow}>
|
||
<span style={styles.appointmentLabel}>🌐 语言</span>
|
||
<span style={styles.appointmentValue}>
|
||
{appointment.language}
|
||
</span>
|
||
</div>
|
||
|
||
<div style={styles.appointmentRow}>
|
||
<span style={styles.appointmentLabel}>👤 译员</span>
|
||
<span style={styles.appointmentValue}>
|
||
{appointment.translator}
|
||
</span>
|
||
</div>
|
||
</div>
|
||
|
||
<div style={styles.appointmentActions}>
|
||
<button style={styles.actionButton}>编辑</button>
|
||
<button style={{...styles.actionButton, backgroundColor: '#ff4d4f'}}>
|
||
取消
|
||
</button>
|
||
</div>
|
||
</div>
|
||
))}
|
||
</div>
|
||
</div>
|
||
|
||
{/* 预约统计 */}
|
||
<div style={styles.section}>
|
||
<h3 style={styles.sectionTitle}>本月统计</h3>
|
||
<div style={styles.statsContainer}>
|
||
<div style={styles.statItem}>
|
||
<span style={styles.statValue}>8</span>
|
||
<span style={styles.statLabel}>总预约</span>
|
||
</div>
|
||
<div style={styles.statItem}>
|
||
<span style={styles.statValue}>6</span>
|
||
<span style={styles.statLabel}>已完成</span>
|
||
</div>
|
||
<div style={styles.statItem}>
|
||
<span style={styles.statValue}>1</span>
|
||
<span style={styles.statLabel}>待确认</span>
|
||
</div>
|
||
<div style={styles.statItem}>
|
||
<span style={styles.statValue}>1</span>
|
||
<span style={styles.statLabel}>已取消</span>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
</div>
|
||
);
|
||
};
|
||
|
||
const styles = {
|
||
container: {
|
||
display: 'flex',
|
||
flexDirection: 'column' as const,
|
||
height: '100%',
|
||
backgroundColor: '#f5f5f5',
|
||
},
|
||
content: {
|
||
flex: 1,
|
||
padding: '16px',
|
||
paddingBottom: '100px',
|
||
},
|
||
section: {
|
||
marginBottom: '24px',
|
||
},
|
||
sectionTitle: {
|
||
fontSize: '18px',
|
||
fontWeight: 'bold',
|
||
color: '#333',
|
||
margin: '0 0 16px 0',
|
||
},
|
||
newAppointmentButton: {
|
||
display: 'flex',
|
||
alignItems: 'center',
|
||
justifyContent: 'center',
|
||
width: '100%',
|
||
padding: '16px',
|
||
backgroundColor: '#1890ff',
|
||
color: '#fff',
|
||
border: 'none',
|
||
borderRadius: '12px',
|
||
cursor: 'pointer',
|
||
fontSize: '16px',
|
||
fontWeight: 'bold',
|
||
boxShadow: '0 4px 12px rgba(24, 144, 255, 0.3)',
|
||
},
|
||
buttonIcon: {
|
||
fontSize: '20px',
|
||
marginRight: '8px',
|
||
},
|
||
buttonText: {
|
||
fontSize: '16px',
|
||
},
|
||
quickOptions: {
|
||
display: 'grid',
|
||
gridTemplateColumns: 'repeat(2, 1fr)',
|
||
gap: '12px',
|
||
},
|
||
quickOption: {
|
||
display: 'flex',
|
||
flexDirection: 'column' as const,
|
||
alignItems: 'center',
|
||
padding: '20px',
|
||
backgroundColor: '#fff',
|
||
border: 'none',
|
||
borderRadius: '12px',
|
||
cursor: 'pointer',
|
||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||
transition: 'transform 0.2s ease',
|
||
},
|
||
optionIcon: {
|
||
fontSize: '32px',
|
||
marginBottom: '8px',
|
||
},
|
||
optionLabel: {
|
||
fontSize: '14px',
|
||
color: '#333',
|
||
fontWeight: 'bold',
|
||
},
|
||
appointmentsList: {
|
||
display: 'flex',
|
||
flexDirection: 'column' as const,
|
||
gap: '16px',
|
||
},
|
||
appointmentItem: {
|
||
backgroundColor: '#fff',
|
||
borderRadius: '12px',
|
||
padding: '16px',
|
||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||
},
|
||
appointmentHeader: {
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
marginBottom: '12px',
|
||
},
|
||
appointmentTitle: {
|
||
fontSize: '16px',
|
||
fontWeight: 'bold',
|
||
color: '#333',
|
||
margin: 0,
|
||
},
|
||
appointmentStatus: {
|
||
padding: '4px 8px',
|
||
borderRadius: '4px',
|
||
fontSize: '12px',
|
||
fontWeight: 'bold',
|
||
},
|
||
appointmentDetails: {
|
||
marginBottom: '16px',
|
||
},
|
||
appointmentRow: {
|
||
display: 'flex',
|
||
justifyContent: 'space-between',
|
||
alignItems: 'center',
|
||
marginBottom: '8px',
|
||
},
|
||
appointmentLabel: {
|
||
fontSize: '14px',
|
||
color: '#666',
|
||
},
|
||
appointmentValue: {
|
||
fontSize: '14px',
|
||
color: '#333',
|
||
fontWeight: 'bold',
|
||
},
|
||
appointmentActions: {
|
||
display: 'flex',
|
||
gap: '8px',
|
||
},
|
||
actionButton: {
|
||
flex: 1,
|
||
padding: '8px 16px',
|
||
backgroundColor: '#1890ff',
|
||
color: '#fff',
|
||
border: 'none',
|
||
borderRadius: '6px',
|
||
cursor: 'pointer',
|
||
fontSize: '14px',
|
||
fontWeight: 'bold',
|
||
},
|
||
statsContainer: {
|
||
display: 'grid',
|
||
gridTemplateColumns: 'repeat(4, 1fr)',
|
||
gap: '12px',
|
||
},
|
||
statItem: {
|
||
display: 'flex',
|
||
flexDirection: 'column' as const,
|
||
alignItems: 'center',
|
||
padding: '16px 8px',
|
||
backgroundColor: '#fff',
|
||
borderRadius: '12px',
|
||
boxShadow: '0 2px 8px rgba(0, 0, 0, 0.1)',
|
||
},
|
||
statValue: {
|
||
fontSize: '20px',
|
||
fontWeight: 'bold',
|
||
color: '#1890ff',
|
||
marginBottom: '4px',
|
||
},
|
||
statLabel: {
|
||
fontSize: '12px',
|
||
color: '#666',
|
||
textAlign: 'center' as const,
|
||
},
|
||
};
|
||
|
||
export default AppointmentScreen;
|