guyongliang/ln-ios
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

加氢站ui

Browse Source
This commit is contained in:
userGyl
2025-11-04 16:21:04 +08:00
parent fec7b70fa9
commit 6faf03a331
7 changed files with 559 additions and 52 deletions
Download Patch File Download Diff File Expand all files Collapse all files

93
ln_jq_app/lib/pages/b_page/site/controller.dart
View File

@@ -1,33 +1,114 @@
import 'package:getx_scaffold/getx_scaffold.dart';
enum ReservationStatus { pending, completed, rejected }
class ReservationModel {
final String id;
final String plateNumber;
final String amount;
final String time;
final String contactPerson;
final String contactPhone;
ReservationStatus status; // 状态是可变的
ReservationModel({
required this.id,
required this.plateNumber,
required this.amount,
required this.time,
required this.contactPerson,
required this.contactPhone,
this.status = ReservationStatus.pending,
});
}
class SiteController extends GetxController with BaseControllerMixin {
@override
String get builderId => 'site';
SiteController();
/// 状态变量：是否有预约数据
bool hasReservationData = false;
// 新增预约数据列表
List<ReservationModel> reservationList = [];
@override
void onInit() {
super.onInit();
// 页面初始化时自动加载数据
fetchReservationData();
}
/// 模拟获取预约数据的方法
Future<void> fetchReservationData() async {
showLoading("加载中");
// 模拟网络请求延迟
await Future.delayed(const Duration(seconds: 1));
hasReservationData = !hasReservationData;
// ==================== 3. 填充模拟数据 ====================
reservationList = [
ReservationModel(
id: '1',
plateNumber: '浙F08860F',
amount: '52kg',
time: '2025-11-04 21:54-22:24',
contactPerson: '王小龙',
contactPhone: '15888332828',
status: ReservationStatus.pending,
),
ReservationModel(
id: '2',
plateNumber: '浙F08860F',
amount: '52kg',
time: '2025-11-04 14:54-15:24',
contactPerson: '王小龙',
contactPhone: '15888332828',
status: ReservationStatus.completed, // 示例：已完成状态
),
ReservationModel(
id: '3',
plateNumber: '浙F08860F',
amount: '52kg',
time: '2025-11-04 15:54-16:24',
contactPerson: '王小龙',
contactPhone: '15888332828',
status: ReservationStatus.rejected, // 示例：已拒绝状态
),
ReservationModel(
id: '4',
plateNumber: '浙F08860F',
amount: '52kg',
time: '2025-11-04 12:54-13:24',
contactPerson: '王小龙',
contactPhone: '15888332828',
status: ReservationStatus.pending,
),
];
hasReservationData = reservationList.isNotEmpty;
dismissLoading();
updateUi();
}
/// 确认预约
Future<void> confirmReservation(String id) async {
print('确认预约: $id');
// TODO: 在这里调用确认接口
// 接口调用成功后，更新本地数据状态并刷新UI
final item = reservationList.firstWhere((item) => item.id == id);
item.status = ReservationStatus.completed;
updateUi();
}
// 如果需要一个方法来清空数据
void clearData() {
hasReservationData = false;
/// 拒绝预约
Future<void> rejectReservation(String id) async {
print('拒绝预约: $id');
// TODO: 在这里调用拒绝接口
// 接口调用成功后，更新本地数据状态并刷新UI
final item = reservationList.firstWhere((item) => item.id == id);
item.status = ReservationStatus.rejected;
updateUi();
}
}

4
ln_jq_app/lib/pages/b_page/site/index.dart Normal file
View File

@@ -0,0 +1,4 @@
library load_container;
export 'controller.dart';
export 'view.dart';

227
ln_jq_app/lib/pages/b_page/site/view.dart
View File

@@ -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: [