预约页面

This commit is contained in:
2025-11-04 11:19:09 +08:00
parent 32fa975fb2
commit fec7b70fa9
3 changed files with 262 additions and 24 deletions

View File

@@ -6,13 +6,28 @@ class SiteController extends GetxController with BaseControllerMixin {
SiteController();
bool hasReservationData = false;
@override
void onInit() {
super.onInit();
fetchReservationData();
}
@override
void onClose() {
super.onClose();
Future<void> fetchReservationData() async {
showLoading("加载中");
// 模拟网络请求延迟
await Future.delayed(const Duration(seconds: 1));
hasReservationData = !hasReservationData;
dismissLoading();
updateUi();
}
// 如果需要一个方法来清空数据
void clearData() {
hasReservationData = false;
}
}

View File

@@ -6,21 +6,255 @@ import 'controller.dart';
class SitePage extends GetView<SiteController> {
const SitePage({super.key});
// 主视图
Widget _buildView() {
return <Widget>[
TextX.titleLarge('加氢预约 加氢站'),
].toColumn(mainAxisSize: MainAxisSize.min).center();
}
@override
Widget build(BuildContext context) {
// 使用 GetBuilder 包裹,并从 controller 初始化
return GetBuilder<SiteController>(
init: SiteController(),
id: 'site',
init: controller,
id: controller.builderId,
builder: (_) {
return _buildView();
return SingleChildScrollView(
child: _buildView(),
);
},
);
}
// 主视图
Widget _buildView() {
return Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
// 第一个卡片: 今日预约统计
Card(
elevation: 3,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
margin: const EdgeInsets.only(bottom: 12),
child: Padding(
padding: const EdgeInsets.symmetric(vertical: 12.0),
child: Column(
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Row(
children: [
const Icon(Icons.calendar_today, color: Colors.blue, size: 32),
const SizedBox(width: 12),
const Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'今日预约统计',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
),
),
Text(
"Today's Reservation Statistics",
style: TextStyle(fontSize: 12, color: Colors.grey),
),
],
),
),
Container(
padding: const EdgeInsets.symmetric(
horizontal: 10,
vertical: 4,
),
decoration: BoxDecoration(
color: Colors.blue.withOpacity(0.1),
borderRadius: BorderRadius.circular(12),
),
child: const Text(
'实时',
style: TextStyle(
color: Colors.blue,
fontSize: 12,
fontWeight: FontWeight.bold,
),
),
),
],
),
),
const SizedBox(height: 10),
const Divider(height: 1, indent: 16, endIndent: 16),
const SizedBox(height: 12),
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
_buildStatItem('300kg', '剩余余量'),
_buildStatItem('12辆', '预约车辆'),
_buildStatItem('8辆', '已完成'),
],
),
),
],
),
),
),
// 第二个卡片: 预约信息
Card(
elevation: 3,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
margin: const EdgeInsets.only(bottom: 12),
clipBehavior: Clip.antiAlias,
child: Column(
children: [
Container(
color: Colors.blue,
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0),
child: Row(
children: [
const Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'预约信息',
style: TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Colors.white,
),
),
SizedBox(height: 2),
Text(
'Reservation Information',
style: TextStyle(fontSize: 12, color: Colors.white70),
),
],
),
),
ElevatedButton.icon(
onPressed: () {
controller.fetchReservationData();
},
icon: const Icon(Icons.refresh, size: 16),
label: const Text('刷新'),
style: ElevatedButton.styleFrom(
foregroundColor: Colors.blue,
backgroundColor: Colors.white,
padding: const EdgeInsets.symmetric(horizontal: 12),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16),
),
),
),
],
),
),
controller.hasReservationData
? _buildReservationListView()
: _buildEmptyReservationView(),
],
),
),
// ==================== 新增的第三个卡片: 提示信息 ====================
Card(
elevation: 3,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8.0)),
margin: const EdgeInsets.only(bottom: 12),
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 16.0, vertical: 12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildInfoItem(
Icons.info_outline,
'数据每5分钟自动刷新一次',
),
const SizedBox(height: 8),
_buildInfoItem(
Icons.help_outline,
'点击车牌号可查看详细信息',
),
const SizedBox(height: 8),
_buildInfoItem(
Icons.headset_mic_outlined,
'如有疑问请联系客服: 400-123-4567',
),
],
),
),
),
],
),
);
}
/// 构建单个统计项
Widget _buildStatItem(String value, String label, {Color valueColor = Colors.blue}) {
return Expanded(
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Text(
value,
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: valueColor,
),
),
const SizedBox(height: 4),
Text(label, style: const TextStyle(fontSize: 14, color: Colors.grey)),
],
),
);
}
/// 构建“暂无预约数据”的视图
Widget _buildEmptyReservationView() {
return Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(vertical: 48.0),
color: Colors.white,
child: Column(
mainAxisAlignment: MainAxisAlignment.center,
children: [
Icon(Icons.inventory_2_outlined, size: 80, color: Colors.grey[300]),
const SizedBox(height: 16),
const Text('暂无预约数据', style: TextStyle(fontSize: 16, color: Colors.black54)),
const SizedBox(height: 8),
const Text(
'点击右上角刷新按钮获取最新数据',
style: TextStyle(fontSize: 14, color: Colors.grey),
),
],
),
);
}
/// 【预留】构建“有预约数据”的列表视图
Widget _buildReservationListView() {
return Container(
color: Colors.white,
child: const Center(
child: Padding(
padding: EdgeInsets.all(48.0),
child: Text('这里将显示预约信息列表', style: TextStyle(color: Colors.grey)),
),
),
);
}
/// 【新增】构建带图标的提示信息行
Widget _buildInfoItem(IconData icon, String text) {
return Row(
children: [
Icon(icon, color: Colors.blue, size: 20),
const SizedBox(width: 8),
Text(text, style: const TextStyle(fontSize: 14, color: Colors.black54)),
],
);
}
}