diff --git a/ln_jq_app/README.md b/ln_jq_app/README.md index f091074..b86a337 100644 --- a/ln_jq_app/README.md +++ b/ln_jq_app/README.md @@ -2,15 +2,4 @@ 加氢预约app -## Getting Started -This project is a starting point for a Flutter application. - -A few resources to get you started if this is your first Flutter project: - -- [Lab: Write your first Flutter app](https://docs.flutter.dev/get-started/codelab) -- [Cookbook: Useful Flutter samples](https://docs.flutter.dev/cookbook) - -For help getting started with Flutter development, view the -[online documentation](https://docs.flutter.dev/), which offers tutorials, -samples, guidance on mobile development, and a full API reference. diff --git a/ln_jq_app/lib/pages/b_page/site/controller.dart b/ln_jq_app/lib/pages/b_page/site/controller.dart index 71dec6b..31ce9f8 100644 --- a/ln_jq_app/lib/pages/b_page/site/controller.dart +++ b/ln_jq_app/lib/pages/b_page/site/controller.dart @@ -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 fetchReservationData() async { + + showLoading("加载中"); + // 模拟网络请求延迟 + await Future.delayed(const Duration(seconds: 1)); + + hasReservationData = !hasReservationData; + + dismissLoading(); + updateUi(); + } + + // 如果需要一个方法来清空数据 + void clearData() { + hasReservationData = false; } } diff --git a/ln_jq_app/lib/pages/b_page/site/view.dart b/ln_jq_app/lib/pages/b_page/site/view.dart index f4c6667..61934fa 100644 --- a/ln_jq_app/lib/pages/b_page/site/view.dart +++ b/ln_jq_app/lib/pages/b_page/site/view.dart @@ -6,21 +6,255 @@ import 'controller.dart'; class SitePage extends GetView { const SitePage({super.key}); - // 主视图 - Widget _buildView() { - return [ - TextX.titleLarge('加氢预约 加氢站'), - ].toColumn(mainAxisSize: MainAxisSize.min).center(); - } - @override Widget build(BuildContext context) { + // 使用 GetBuilder 包裹，并从 controller 初始化 return GetBuilder( - 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)), + ], + ); + } }