提交预约，相关修改

ln_jq_app/lib/pages/c_page/reservation/view.dart

@@ -1,34 +1,42 @@
 import 'package:dropdown_button2/dropdown_button2.dart';
 import 'package:flutter/material.dart';
 import 'package:getx_scaffold/getx_scaffold.dart';
-import 'package:ln_jq_app/common/model/vehicle_info.dart';
+import 'package:ln_jq_app/common/model/station_model.dart';
 import 'package:ln_jq_app/pages/qr_code/view.dart';
 import 'package:ln_jq_app/storage_service.dart';
 
 import 'controller.dart';
 
+///加氢预约
 class ReservationPage extends GetView<ReservationController> {
   const ReservationPage({super.key});
 
   @override
   Widget build(BuildContext context) {
+    Get.put(ReservationController());
     return GetBuilder<ReservationController>(
-      init: ReservationController(),
       id: 'reservation',
       builder: (_) {
         return Scaffold(
           backgroundColor: Colors.grey[100],
-          body: SingleChildScrollView(
-            padding: const EdgeInsets.all(16.0),
-            child: Column(
-              crossAxisAlignment: CrossAxisAlignment.stretch,
-              children: [
-                _buildUserInfoCard(),
-                const SizedBox(height: 5),
-                _buildCarInfoCard(),
-                const SizedBox(height: 5),
-                _buildReservationFormCard(context),
-              ],
+          body: GestureDetector(
+            onTap: () {
+              FocusScope.of(context).unfocus();
+            },
+            child: SingleChildScrollView(
+              padding: const EdgeInsets.all(16.0),
+              child: Column(
+                crossAxisAlignment: CrossAxisAlignment.stretch,
+                children: [
+                  _buildUserInfoCard(),
+                  const SizedBox(height: 5),
+                  _buildCarInfoCard(),
+                  const SizedBox(height: 5),
+                  _buildReservationFormCard(context),
+                  const SizedBox(height: 5),
+                  _buildTipsCard(),
+                ],
+              ),
             ),
           ),
         );
@@ -36,6 +44,38 @@ class ReservationPage extends GetView<ReservationController> {
     );
   }
 
+  Widget _buildTipsCard() {
+    return Card(
+      elevation: 2,
+      shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
+      child: Padding(
+        padding: const EdgeInsets.all(16.0),
+        child: Column(
+          children: [
+            _buildTipItem(Icons.info_outline, '请提前30分钟到达加氢站'),
+            const SizedBox(height: 10),
+            _buildTipItem(Icons.rule, '请确保车辆证件齐全'),
+            const SizedBox(height: 10),
+            _buildTipItem(Icons.headset_mic_outlined, '如有疑问请联系客服: 400-123-4567'),
+          ],
+        ),
+      ),
+    );
+  }
+
+  // 提示信息卡片中的列表项
+  Widget _buildTipItem(IconData icon, String text) {
+    return Row(
+      children: [
+        Icon(icon, color: Colors.blue, size: 20),
+        const SizedBox(width: 10),
+        Expanded(
+          child: Text(text, style: const TextStyle(fontSize: 12, color: Colors.black54)),
+        ),
+      ],
+    );
+  }
+
   /// 构建用户信息卡片
   Widget _buildUserInfoCard() {
     return Card(
@@ -210,7 +250,6 @@ class ReservationPage extends GetView<ReservationController> {
       shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
       child: Padding(
         padding: const EdgeInsets.all(16.0),
-        // 【修改】使用 Obx 包裹以自动响应 Rx 变量的变化
         child: Obx(
           () => Column(
             crossAxisAlignment: CrossAxisAlignment.start,
@@ -246,23 +285,23 @@ class ReservationPage extends GetView<ReservationController> {
                 enabled: false, // 设置为不可编辑
               ),
               _buildStationSelector(),
-              const SizedBox(height: 24),
+              const SizedBox(height: 20),
               Row(
                 children: [
                   Expanded(
                     child: ElevatedButton(
                       onPressed: controller.submitReservation,
                       style: ElevatedButton.styleFrom(
-                        minimumSize: const Size(double.infinity, 48),
+                        minimumSize: const Size(double.infinity, 38),
                         shape: RoundedRectangleBorder(
                           borderRadius: BorderRadius.circular(24),
                         ),
-                        backgroundColor: Colors.blue, // 明确指定背景色
-                        foregroundColor: Colors.white, // 明确指定前景色（文字颜色）
+                        backgroundColor: Colors.blue,
+                        foregroundColor: Colors.white,
                       ),
                       child: const Text(
                         '提交预约',
-                        style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
+                        style: TextStyle(fontSize: 13, fontWeight: FontWeight.bold),
                       ),
                     ),
                   ),
@@ -271,17 +310,17 @@ class ReservationPage extends GetView<ReservationController> {
                     child: OutlinedButton(
                       onPressed: controller.getReservationList,
                       style: OutlinedButton.styleFrom(
-                        minimumSize: const Size(double.infinity, 48), // 高度与另一个按钮保持一致
-                        side: const BorderSide(color: Colors.blue), // 设置边框颜色为蓝色
+                        minimumSize: const Size(double.infinity, 38), // 高度与另一个按钮保持一致
+                        side: const BorderSide(color: Colors.blue),
                         shape: RoundedRectangleBorder(
                           borderRadius: BorderRadius.circular(24),
                         ),
                       ),
                       child: const Text(
-                        '查看预约', // 假设第二个按钮是“取消”
+                        '查看预约',
                         style: TextStyle(
-                          color: Colors.blue, // 设置文字颜色为蓝色
-                          fontSize: 16,
+                          color: Colors.blue,
+                          fontSize: 13,
                           fontWeight: FontWeight.bold,
                         ),
                       ),
@@ -308,12 +347,12 @@ class ReservationPage extends GetView<ReservationController> {
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          Text(label, style: TextStyle(color: Colors.grey[600], fontSize: 14)),
+          Text(label, style: TextStyle(color: Colors.grey[600], fontSize: 13)),
           const SizedBox(height: 8),
           InkWell(
             onTap: onTap,
             child: Container(
-              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 14),
+              padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
               decoration: BoxDecoration(
                 border: Border.all(color: Colors.grey[400]!),
                 borderRadius: BorderRadius.circular(8),
@@ -321,7 +360,7 @@ class ReservationPage extends GetView<ReservationController> {
               child: Row(
                 mainAxisAlignment: MainAxisAlignment.spaceBetween,
                 children: [
-                  Text(value, style: const TextStyle(fontSize: 16)),
+                  Text(value, style: const TextStyle(fontSize: 14)),
                   Icon(icon, color: Colors.grey, size: 20),
                 ],
               ),
@@ -345,17 +384,19 @@ class ReservationPage extends GetView<ReservationController> {
       child: Column(
         crossAxisAlignment: CrossAxisAlignment.start,
         children: [
-          Text(label, style: TextStyle(color: Colors.grey[600], fontSize: 14)),
+          Text(label, style: TextStyle(color: Colors.grey[600], fontSize: 13)),
           const SizedBox(height: 8),
           TextFormField(
             controller: controller,
             keyboardType: keyboardType,
-            enabled: enabled, // 使用 enabled 参数
+            enabled: enabled,
+            style: const TextStyle(fontSize: 14),
             decoration: InputDecoration(
+              isDense: true,
               hintText: hint,
+              hintStyle: TextStyle(fontSize: 14),
               border: OutlineInputBorder(borderRadius: BorderRadius.circular(8.0)),
-              contentPadding: const EdgeInsets.symmetric(horizontal: 12.0),
-              // 【新增】禁用时，使用填充色
+              contentPadding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
               filled: !enabled,
               fillColor: Colors.grey[100],
             ),
@@ -366,12 +407,12 @@ class ReservationPage extends GetView<ReservationController> {
   }
 
   Widget _buildStationSelector() {
-    return Padding(
-      padding: const EdgeInsets.only(bottom: 12.0),
-      child: Column(
-        crossAxisAlignment: CrossAxisAlignment.start,
-        children: [
-          Row(
+    return Column(
+      crossAxisAlignment: CrossAxisAlignment.start,
+      children: [
+        Container(
+          padding: EdgeInsets.all(0),
+          child: Row(
             mainAxisAlignment: MainAxisAlignment.spaceBetween,
             children: [
               Text('加氢站', style: TextStyle(color: Colors.grey[600], fontSize: 14)),
@@ -383,46 +424,109 @@ class ReservationPage extends GetView<ReservationController> {
               ),
             ],
           ),
-          Obx(
-            () => DropdownButtonHideUnderline(
-              child: DropdownButton2<String>(
-                isExpanded: true,
-                hint: Text(
-                  '请选择加氢站',
-                  style: TextStyle(fontSize: 14, color: Theme.of(Get.context!).hintColor),
-                ),
-                items: controller.stationOptions
-                    .map(
-                      (item) => DropdownMenuItem(
-                        value: item,
-                        child: _buildDropdownItem(item), // 使用自定义 Widget 构建 Item
-                      ),
-                    )
-                    .toList(),
-                value: controller.selectedStation.value,
-                onChanged: (value) {
-                  if (value != null) {
-                    controller.selectedStation.value = value;
-                  }
-                },
-                buttonStyleData: ButtonStyleData(
-                  height: 55, // 控制按钮的高度
-                  padding: const EdgeInsets.symmetric(horizontal: 12.0), // 控制按钮内部的内边距
-                  decoration: BoxDecoration(
-                    borderRadius: BorderRadius.circular(8),
-                    border: Border.all(color: Colors.grey[400]!),
-                  ),
-                ),
-                iconStyleData: const IconStyleData(
-                  icon: Icon(Icons.arrow_drop_down),
-                  iconSize: 20,
-                ),
-                dropdownStyleData: DropdownStyleData(
-                  maxHeight: 200,
-                  decoration: BoxDecoration(borderRadius: BorderRadius.circular(8)),
-                ),
-                menuItemStyleData: const MenuItemStyleData(height: 40),
+        ),
+        Obx(
+          () => DropdownButtonHideUnderline(
+            child: DropdownButton2<String>(
+              isExpanded: true,
+              hint: const Text(
+                '请选择加氢站',
+                style: TextStyle(fontSize: 14, color: Colors.grey),
               ),
+              // items 列表现在从 stationOptions (StationModel列表) 构建
+              items: controller.stationOptions
+                  .map(
+                    (station) => DropdownMenuItem<String>(
+                      value: station.hydrogenId, // value 是站点的唯一ID
+                      child: _buildDropdownItem(station), // child 是自定义的 Widget
+                    ),
+                  )
+                  .toList(),
+              value: controller.selectedStationId.value,
+              // 当前选中的是站点ID
+              onChanged: (value) {
+                if (value != null) {
+                  controller.selectedStationId.value = value;
+                }
+              },
+              customButton: controller.selectedStationId.value == null
+                  ? null // 未选择时，显示默认的 hint
+                  : _buildSelectedStationButton(
+                      controller.stationOptions.firstWhere(
+                        (s) => s.hydrogenId == controller.selectedStationId.value,
+                      ),
+                    ),
+              buttonStyleData: ButtonStyleData(
+                height: 60, // 增加高度以容纳两行文字
+                padding: const EdgeInsets.symmetric(horizontal: 12.0),
+                decoration: BoxDecoration(
+                  borderRadius: BorderRadius.circular(8),
+                  border: Border.all(color: Colors.grey[400]!),
+                ),
+              ),
+              iconStyleData: const IconStyleData(
+                icon: Icon(Icons.arrow_drop_down, color: Colors.grey),
+                iconSize: 24,
+              ),
+              dropdownStyleData: DropdownStyleData(
+                maxHeight: 300,
+                decoration: BoxDecoration(borderRadius: BorderRadius.circular(8)),
+              ),
+              menuItemStyleData: const MenuItemStyleData(
+                height: 60, // 增加下拉项的高度
+              ),
+            ),
+          ),
+        ),
+      ],
+    );
+  }
+
+  /// 构建下拉菜单中的每一项
+  Widget _buildDropdownItem(StationModel station) {
+    bool isMaintenance = station.siteStatusName == '维修中';
+    return Padding(
+      padding: const EdgeInsets.symmetric(vertical: 8.0),
+      child: Row(
+        children: [
+          Expanded(
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              mainAxisAlignment: MainAxisAlignment.center,
+              children: [
+                Row(
+                  children: [
+                    Text(
+                      '${station.name} | ¥${station.price}/kg',
+                      style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500),
+                      overflow: TextOverflow.ellipsis,
+                    ),
+                    if (isMaintenance) const SizedBox(width: 8),
+                    if (isMaintenance)
+                      Container(
+                        padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
+                        decoration: BoxDecoration(
+                          color: Colors.orange[100],
+                          borderRadius: BorderRadius.circular(4),
+                        ),
+                        child: const Text(
+                          '维修中',
+                          style: TextStyle(
+                            fontSize: 10,
+                            color: Colors.orange,
+                            fontWeight: FontWeight.bold,
+                          ),
+                        ),
+                      ),
+                  ],
+                ),
+                const SizedBox(height: 4),
+                Text(
+                  '${station.address}',
+                  style: const TextStyle(fontSize: 12, color: Colors.grey),
+                  overflow: TextOverflow.ellipsis,
+                ),
+              ],
             ),
           ),
         ],
@@ -430,13 +534,21 @@ class ReservationPage extends GetView<ReservationController> {
     );
   }
 
-  Widget _buildDropdownItem(String item) {
-    return Row(
-      children: [
-        const Icon(Icons.local_gas_station_outlined, size: 18, color: Colors.grey),
-        const SizedBox(width: 10),
-        Text(item, style: const TextStyle(fontSize: 14)),
-      ],
+  Widget _buildSelectedStationButton(StationModel station) {
+    return Container(
+      // 选中后样式
+      padding: const EdgeInsets.symmetric(horizontal: 12.0),
+      decoration: BoxDecoration(
+        borderRadius: BorderRadius.circular(8),
+        border: Border.all(color: Colors.grey[400]!),
+      ),
+      child: Row(
+        mainAxisAlignment: MainAxisAlignment.spaceBetween,
+        children: [
+          Expanded(child: _buildDropdownItem(station)),
+          const Icon(Icons.arrow_drop_down, color: Colors.grey, size: 24),
+        ],
+      ),
     );
   }
 }