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

静态页面补充

Browse Source
This commit is contained in:
userGyl
2025-11-07 18:08:41 +08:00
parent aaf5c12735
commit 079bec91f8
9 changed files with 1093 additions and 47 deletions
Download Patch File Download Diff File Expand all files Collapse all files

111
ln_jq_app/lib/pages/c_page/reservation/controller.dart
View File

@@ -1,18 +1,113 @@
import 'package:getx_scaffold/getx_scaffold.dart';
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:intl/intl.dart'; // 用于日期格式化
class ReservationController extends GetxController with BaseControllerMixin {
@override
String get builderId => 'reservation';
class ReservationController extends GetxController {
/// --- 状态变量 ---
ReservationController();
// 【修改】使用 Rx 变量，让 GetX 的 Obx/GetX 能够自动监听变化，UI更新更简单
// 日期，默认为今天
final Rx<DateTime> selectedDate = DateTime.now().obs;
@override
void onInit() {
super.onInit();
// 开始时间，默认为当前时分
final Rx<TimeOfDay> startTime = TimeOfDay.now().obs;
// 结束时间，默认为开始时间后30分钟
final Rx<TimeOfDay> endTime = TimeOfDay.fromDateTime(DateTime.now().add(const Duration(minutes: 30))).obs;
// 预约氢量
final TextEditingController amountController = TextEditingController();
// 车牌号
final TextEditingController plateNumberController = TextEditingController();
// 加氢站
final List<String> stationOptions = ['诚志AP银河路加氢站', '站点B', '站点C'];
final Rx<String> selectedStation = '诚志AP银河路加氢站'.obs;
// --- 用于UI显示的格式化字符串 (Getters) ---
String get formattedDate => DateFormat('yyyy-MM-dd').format(selectedDate.value);
// 使用 context-aware 的 format 方法
String get formattedStartTime => startTime.value.format(Get.context!);
String get formattedEndTime => endTime.value.format(Get.context!);
/// --- 交互方法 ---
/// 【修改】显示 Flutter 内置的日期选择器
void pickDate(BuildContext context) async { // 改为 async
final DateTime? pickedDate = await showDatePicker(
context: context,
initialDate: selectedDate.value,
firstDate: DateTime.now(), // 只能从今天开始选
lastDate: DateTime.now().add(const Duration(days: 365)), // 假设最多预约一年内
helpText: '选择预约日期',
confirmText: '确定',
cancelText: '取消',
);
if (pickedDate != null && pickedDate != selectedDate.value) {
selectedDate.value = pickedDate;
}
}
/// 【修改】显示 Flutter 内置的时间选择器
void pickTime(BuildContext context, bool isStartTime) async { // 改为 async
TimeOfDay initialTime = isStartTime ? startTime.value : endTime.value;
final TimeOfDay? pickedTime = await showTimePicker(
context: context,
initialTime: initialTime,
helpText: isStartTime ? '选择开始时间' : '选择结束时间',
confirmText: '确定',
cancelText: '取消',
);
if (pickedTime != null) {
if (isStartTime) {
startTime.value = pickedTime;
// 如果新的开始时间晚于或等于结束时间，自动将结束时间设置为开始时间后30分钟
if ((pickedTime.hour * 60 + pickedTime.minute) >= (endTime.value.hour * 60 + endTime.value.minute)) {
final newDateTime = DateTime(
selectedDate.value.year, selectedDate.value.month, selectedDate.value.day, pickedTime.hour, pickedTime.minute)
.add(const Duration(minutes: 30));
endTime.value = TimeOfDay.fromDateTime(newDateTime);
}
} else {
// 确保结束时间不早于开始时间
if ((pickedTime.hour * 60 + pickedTime.minute) > (startTime.value.hour * 60 + startTime.value.minute)) {
endTime.value = pickedTime;
} else {
// 如果选择了更早的时间，给出提示
Get.snackbar(
'时间选择错误',
'结束时间必须晚于开始时间',
snackPosition: SnackPosition.BOTTOM,
backgroundColor: Colors.red,
colorText: Colors.white,
);
}
}
}
}
/// 提交预约
void submitReservation() {
// TODO: 在这里执行提交预约的逻辑
print('提交预约:');
print('日期: $formattedDate');
print('开始时间: $formattedStartTime');
print('结束时间: $formattedEndTime');
print('预约氢量: ${amountController.text}');
print('车牌号: ${plateNumberController.text}');
print('加氢站: ${selectedStation.value}');
Get.snackbar('成功', '预约已提交！', snackPosition: SnackPosition.BOTTOM);
}
@override
void onClose() {
amountController.dispose();
plateNumberController.dispose();
super.onClose();
}
}

361
ln_jq_app/lib/pages/c_page/reservation/view.dart
View File

@@ -1,27 +1,358 @@
import 'package:flutter/material.dart';
import 'package:getx_scaffold/getx_scaffold.dart';
import 'package:get/get.dart';
// import 'package:getx_scaffold/getx_scaffold.dart'; // 如果不使用其中的扩展，可以注释掉
import 'controller.dart';
class ReservationPage extends GetView<ReservationController> {
const ReservationPage({super.key});
// 主视图
Widget _buildView() {
return <Widget>[
TextX.titleLarge('H2加氢站'),
].toColumn(mainAxisSize: MainAxisSize.min).center();
}
@override
Widget build(BuildContext context) {
return GetBuilder<ReservationController>(
init: ReservationController(),
id: 'reservation',
builder: (_) {
return _buildView();
},
// 【修改】使用 Get.put 来初始化 Controller，而不是在 GetBuilder 中。这是更推荐的做法。
// Get.lazyPut 会在第一次使用时才创建实例。
Get.lazyPut(() => ReservationController());
return SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
_buildUserInfoCard(),
const SizedBox(height: 12),
_buildCarInfoCard(),
const SizedBox(height: 12),
_buildReservationFormCard(context), // 将 context 传入
const SizedBox(height: 12),
_buildTipsCard(),
],
),
),
);
}
/// 构建顶部用户信息卡片
Widget _buildUserInfoCard() {
return Card(
elevation: 2,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
child: Column(
children: [
Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
children: [
const CircleAvatar(
radius: 24,
backgroundColor: Colors.blue,
child: Icon(Icons.person, color: Colors.white, size: 30),
),
const SizedBox(width: 12),
const Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'王小龙',
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
),
SizedBox(height: 4),
Text(
'15888332828',
style: TextStyle(color: Colors.grey, fontSize: 12),
),
],
),
),
Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: Colors.blue[50],
borderRadius: BorderRadius.circular(12),
border: Border.all(color: Colors.blue, width: 0.5),
),
child: const Row(
children: [
Icon(Icons.shield_outlined, color: Colors.blue, size: 14),
SizedBox(width: 4),
Text('已认证', style: TextStyle(color: Colors.blue, fontSize: 10, fontWeight: FontWeight.bold)),
],
),
)
],
),
),
const Divider(height: 1, indent: 16, endIndent: 16),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
_buildStatItem('0Kg', '累计加氢'),
_buildStatItem('0次', '加氢次数'),
],
),
),
],
),
);
}
// 用户信息卡片中的小统计项
Widget _buildStatItem(String value, String label) {
return Column(
children: [
Text(value, style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),
const SizedBox(height: 4),
Text(label, style: const TextStyle(color: Colors.grey, fontSize: 12)),
],
);
}
/// 构建车辆信息卡片
Widget _buildCarInfoCard() {
return Card(
elevation: 2,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Row(
children: [
Expanded(
child: Column(
children: [
_buildInfoRow('车牌号:', '扫码绑定'),
const SizedBox(height: 12),
_buildInfoRow('剩余氢量:', '0Kg'),
const SizedBox(height: 12),
_buildInfoRow('百公里氢耗:', '0KG/100KM'),
],
),
),
const SizedBox(width: 16),
Icon(Icons.propane_tank_outlined, size: 80, color: Colors.blue.withOpacity(0.5)),
],
),
),
);
}
// 车辆信息卡片中的信息行
Widget _buildInfoRow(String label, String value) {
bool isButton = value == '扫码绑定';
return Row(
children: [
Text(label, style: const TextStyle(color: Colors.grey, fontSize: 14)),
const SizedBox(width: 8),
isButton
? ElevatedButton.icon(
onPressed: () { /* TODO: 扫码绑定逻辑 */ },
icon: const Icon(Icons.qr_code_scanner, size: 16),
label: Text(value),
style: ElevatedButton.styleFrom(
padding: const EdgeInsets.symmetric(horizontal: 12),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
),
)
: Text(value, style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500)),
],
);
}
/// 构建预约表单卡片
Widget _buildReservationFormCard(BuildContext context) {
return Card(
elevation: 2,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)),
child: Padding(
padding: const EdgeInsets.all(16.0),
// 【修改】使用 Obx 包裹以自动响应 Rx 变量的变化
child: Obx(() => Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
_buildPickerRow(
label: '日期',
value: controller.formattedDate,
icon: Icons.calendar_today_outlined,
onTap: () => controller.pickDate(context),
),
_buildPickerRow(
label: '开始时间',
value: controller.formattedStartTime,
icon: Icons.access_time_outlined,
onTap: () => controller.pickTime(context, true),
),
_buildPickerRow(
label: '结束时间',
value: controller.formattedEndTime,
icon: Icons.access_time_outlined,
onTap: () => controller.pickTime(context, false),
),
_buildTextField(label: '预约氢量(kg)', controller: controller.amountController, hint: '请输入氢量(kg)', keyboardType: TextInputType.number),
_buildTextField(label: '车牌号', controller: controller.plateNumberController, hint: '请输入车牌号'),
_buildStationSelector(),
const SizedBox(height: 24),
ElevatedButton(
onPressed: controller.submitReservation,
style: ElevatedButton.styleFrom(
minimumSize: const Size(double.infinity, 48),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24)),
),
child: const Text('提交预约', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
),
],
)),
),
);
}
// 表单中的可点击行 (用于日期和时间选择)
Widget _buildPickerRow({required String label, required String value, required IconData icon, required VoidCallback onTap}) {
return Padding(
padding: const EdgeInsets.only(bottom: 12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(label, style: TextStyle(color: Colors.grey[600], fontSize: 14)),
const SizedBox(height: 8),
InkWell(
onTap: onTap,
child: Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 14),
decoration: BoxDecoration(
border: Border.all(color: Colors.grey[400]!),
borderRadius: BorderRadius.circular(8),
),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text(value, style: const TextStyle(fontSize: 16)),
Icon(icon, color: Colors.grey, size: 20),
],
),
),
),
],
),
);
}
// 表单中的文本输入框
Widget _buildTextField({required String label, required TextEditingController controller, required String hint, TextInputType? keyboardType}) {
return Padding(
padding: const EdgeInsets.only(bottom: 12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(label, style: TextStyle(color: Colors.grey[600], fontSize: 14)),
const SizedBox(height: 8),
TextFormField(
controller: controller,
keyboardType: keyboardType,
decoration: InputDecoration(
hintText: hint,
border: OutlineInputBorder(borderRadius: BorderRadius.circular(8.0)),
contentPadding: const EdgeInsets.symmetric(horizontal: 12.0),
),
),
],
),
);
}
// 构建加氢站选择器
Widget _buildStationSelector() {
return Padding(
padding: const EdgeInsets.only(bottom: 12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [
Text('加氢站', style: TextStyle(color: Colors.grey[600], fontSize: 14)),
TextButton(onPressed: () { /* TODO: 刷新站点列表 */ }, child: const Text('刷新')),
],
),
// 【修改】使用 Obx 包裹 DropdownButtonFormField 以响应 Rx 变量
Obx(() => DropdownButtonFormField<String>(
value: controller.selectedStation.value,
isExpanded: true,
items: controller.stationOptions.map((String value) {
return DropdownMenuItem<String>(
value: value,
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
mainAxisAlignment: MainAxisAlignment.center,
children: [
Row(
children: [
Text(value, style: const TextStyle(fontWeight: FontWeight.bold)),
const SizedBox(width: 8),
if (value.contains('银河路')) // 示例：给特定站点加标签
Container(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
decoration: BoxDecoration(
color: Colors.orange[100],
borderRadius: BorderRadius.circular(4),
),
child: const Text('维修中', style: TextStyle(color: Colors.orange, fontSize: 10)),
),
],
),
const Text(
'江苏省苏州市常熟市东南街道银河路80号 | ¥45.00/kg',
style: TextStyle(color: Colors.grey, fontSize: 12),
overflow: TextOverflow.ellipsis,
),
],
),
);
}).toList(),
onChanged: (newValue) {
if (newValue != null) {
controller.selectedStation.value = newValue;
}
},
decoration: InputDecoration(
border: OutlineInputBorder(borderRadius: BorderRadius.circular(8.0)),
contentPadding: const EdgeInsets.symmetric(horizontal: 8.0, vertical: 4.0),
),
)),
],
),
);
}
/// 构建提示信息卡片
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))),
],
);
}
}