加氢站ui
This commit is contained in:
@@ -1,21 +1,19 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:getx_scaffold/getx_scaffold.dart';
|
||||
import 'package:ln_jq_app/common/styles/theme.dart';
|
||||
|
||||
import 'controller.dart';
|
||||
|
||||
///加氢预约
|
||||
class SitePage extends GetView<SiteController> {
|
||||
const SitePage({super.key});
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
// 使用 GetBuilder 包裹，并从 controller 初始化
|
||||
return GetBuilder<SiteController>(
|
||||
init: controller,
|
||||
id: controller.builderId,
|
||||
init: SiteController(),
|
||||
id: 'site',
|
||||
builder: (_) {
|
||||
return SingleChildScrollView(
|
||||
child: _buildView(),
|
||||
);
|
||||
return SingleChildScrollView(child: _buildView());
|
||||
},
|
||||
);
|
||||
}
|
||||
@@ -158,7 +156,7 @@ class SitePage extends GetView<SiteController> {
|
||||
),
|
||||
),
|
||||
|
||||
// ==================== 新增的第三个卡片: 提示信息 ====================
|
||||
//第三部分
|
||||
Card(
|
||||
elevation: 3,
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
|
||||
@@ -168,20 +166,11 @@ class SitePage extends GetView<SiteController> {
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
_buildInfoItem(
|
||||
Icons.info_outline,
|
||||
'数据每5分钟自动刷新一次',
|
||||
),
|
||||
_buildInfoItem(Icons.info_outline, '数据每5分钟自动刷新一次'),
|
||||
const SizedBox(height: 8),
|
||||
_buildInfoItem(
|
||||
Icons.help_outline,
|
||||
'点击车牌号可查看详细信息',
|
||||
),
|
||||
_buildInfoItem(Icons.help_outline, '点击车牌号可查看详细信息'),
|
||||
const SizedBox(height: 8),
|
||||
_buildInfoItem(
|
||||
Icons.headset_mic_outlined,
|
||||
'如有疑问请联系客服: 400-123-4567',
|
||||
),
|
||||
_buildInfoItem(Icons.headset_mic_outlined, '如有疑问请联系客服: 400-123-4567'),
|
||||
],
|
||||
),
|
||||
),
|
||||
@@ -234,20 +223,204 @@ class SitePage extends GetView<SiteController> {
|
||||
);
|
||||
}
|
||||
|
||||
/// 【预留】构建“有预约数据”的列表视图
|
||||
/// 构建“有预约数据”的列表视图
|
||||
Widget _buildReservationListView() {
|
||||
return Container(
|
||||
color: Colors.white,
|
||||
child: const Center(
|
||||
child: Padding(
|
||||
padding: EdgeInsets.all(48.0),
|
||||
child: Text('这里将显示预约信息列表', style: TextStyle(color: Colors.grey)),
|
||||
),
|
||||
child: ListView.separated(
|
||||
shrinkWrap: true,
|
||||
physics: const NeverScrollableScrollPhysics(),
|
||||
// 因为外层已有滚动，这里禁用内部滚动
|
||||
itemCount: controller.reservationList.length,
|
||||
padding: const EdgeInsets.all(12.0),
|
||||
itemBuilder: (context, index) {
|
||||
final item = controller.reservationList[index];
|
||||
// 调用新的方法来构建每一项
|
||||
return _buildReservationItem(item);
|
||||
},
|
||||
separatorBuilder: (context, index) => const SizedBox(height: 12), // 列表项之间的间距
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// 【新增】构建带图标的提示信息行
|
||||
Widget _buildReservationItem(ReservationModel item) {
|
||||
return Container(
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(8.0),
|
||||
border: Border.all(color: Colors.grey[200]!, width: 1.0),
|
||||
boxShadow: [
|
||||
BoxShadow(
|
||||
color: Colors.grey.withOpacity(0.1),
|
||||
spreadRadius: 1,
|
||||
blurRadius: 3,
|
||||
offset: const Offset(0, 2),
|
||||
),
|
||||
],
|
||||
),
|
||||
child: Column(
|
||||
children: [
|
||||
// 顶部：序号、车牌号、状态
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(8, 12, 16, 12),
|
||||
child: Row(
|
||||
children: [
|
||||
// 序号
|
||||
Container(
|
||||
width: 24,
|
||||
height: 24,
|
||||
alignment: Alignment.center,
|
||||
decoration: const BoxDecoration(
|
||||
color: Colors.blue,
|
||||
shape: BoxShape.circle,
|
||||
),
|
||||
child: Text(
|
||||
item.id,
|
||||
style: const TextStyle(
|
||||
color: Colors.white,
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 8),
|
||||
const Icon(Icons.directions_car, color: Colors.black54),
|
||||
const SizedBox(width: 4),
|
||||
// 车牌号
|
||||
Expanded(
|
||||
child: Text(
|
||||
item.plateNumber,
|
||||
style: const TextStyle(
|
||||
fontSize: 16,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: AppTheme.themeColor,
|
||||
),
|
||||
),
|
||||
),
|
||||
// 状态标签
|
||||
_buildStatusChip(item.status),
|
||||
],
|
||||
),
|
||||
),
|
||||
const Divider(height: 1),
|
||||
// 中部：详细信息
|
||||
Padding(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0),
|
||||
child: Column(
|
||||
children: [
|
||||
_buildDetailRow(
|
||||
Icons.local_gas_station,
|
||||
'加氢量',
|
||||
item.amount,
|
||||
valueColor: Colors.red,
|
||||
),
|
||||
const SizedBox(height: 8),
|
||||
_buildDetailRow(Icons.access_time, '预约时间', item.time),
|
||||
const SizedBox(height: 8),
|
||||
_buildDetailRow(Icons.person, '联系人', item.contactPerson),
|
||||
const SizedBox(height: 8),
|
||||
_buildDetailRow(
|
||||
Icons.phone,
|
||||
'联系电话',
|
||||
item.contactPhone,
|
||||
valueColor: AppTheme.themeColor,
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
// 底部：操作按钮 (仅在待处理时显示)
|
||||
if (item.status == ReservationStatus.pending)
|
||||
Padding(
|
||||
padding: const EdgeInsets.fromLTRB(16, 0, 16, 12),
|
||||
child: Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: ElevatedButton(
|
||||
onPressed: () => controller.confirmReservation(item.id),
|
||||
style: ElevatedButton.styleFrom(backgroundColor: Colors.blue),
|
||||
child: const Text('确定'),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: ElevatedButton(
|
||||
onPressed: () => controller.rejectReservation(item.id),
|
||||
style: ElevatedButton.styleFrom(backgroundColor: Colors.red),
|
||||
child: const Text('拒绝'),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// 构建状态标签
|
||||
Widget _buildStatusChip(ReservationStatus status) {
|
||||
String text;
|
||||
Color color;
|
||||
switch (status) {
|
||||
case ReservationStatus.pending:
|
||||
text = '待处理';
|
||||
color = Colors.orange;
|
||||
break;
|
||||
case ReservationStatus.completed:
|
||||
text = '已完成';
|
||||
color = Colors.greenAccent;
|
||||
break;
|
||||
case ReservationStatus.rejected:
|
||||
text = '已拒绝';
|
||||
color = Colors.red;
|
||||
break;
|
||||
}
|
||||
return Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
||||
decoration: BoxDecoration(
|
||||
color: color.withOpacity(0.1),
|
||||
borderRadius: BorderRadius.circular(12),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisSize: MainAxisSize.min,
|
||||
children: [
|
||||
Icon(Icons.circle, color: color, size: 8),
|
||||
const SizedBox(width: 4),
|
||||
Text(
|
||||
text,
|
||||
style: TextStyle(color: color, fontSize: 12, fontWeight: FontWeight.bold),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
/// 构建信息详情行
|
||||
Widget _buildDetailRow(
|
||||
IconData icon,
|
||||
String label,
|
||||
String value, {
|
||||
Color valueColor = Colors.black87,
|
||||
}) {
|
||||
return Row(
|
||||
children: [
|
||||
Icon(icon, color: Colors.grey, size: 20),
|
||||
const SizedBox(width: 8),
|
||||
Text('$label: ', style: const TextStyle(fontSize: 14, color: Colors.grey)),
|
||||
Expanded(
|
||||
child: Text(
|
||||
value,
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
color: valueColor,
|
||||
fontWeight: FontWeight.w500,
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
/// 底部构建带图标的提示信息行
|
||||
Widget _buildInfoItem(IconData icon, String text) {
|
||||
return Row(
|
||||
children: [
|
||||
|
||||
Reference in New Issue
Block a user