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

2
ln_jq_app/lib/pages/b_page/base_widgets/view.dart
View File

@@ -2,8 +2,8 @@ import 'package:flutter/material.dart';
import 'package:getx_scaffold/common/index.dart';
import 'package:getx_scaffold/getx_scaffold.dart';
import 'package:ln_jq_app/pages/b_page/base_widgets/controller.dart';
import 'package:ln_jq_app/pages/b_page/reservation/view.dart';
import 'package:ln_jq_app/pages/b_page/site/view.dart';
import 'package:ln_jq_app/pages/c_page/reservation/view.dart';
class B_BaseWidgetsPage extends GetView<B_BaseWidgetsController> {
B_BaseWidgetsPage({super.key});

52
ln_jq_app/lib/pages/b_page/reservation/controller.dart
View File

@@ -1,18 +1,60 @@
import 'package:get/get.dart';
import 'package:getx_scaffold/getx_scaffold.dart';
import 'package:ln_jq_app/pages/login/view.dart';
class ReservationController extends GetxController with BaseControllerMixin {
@override
String get builderId => 'b_reservation';
String get builderId => 'b_reservation'; // 确保ID与View中一致
ReservationController();
// --- 运营状态下拉菜单所需的状态 ---
// 下拉菜单的选项列表
final List<String> operationStatusOptions = ['营运中', '维修中', '暂停营业', '站点关闭'];
// 当前选中的值，默认为'运营中'
late String selectedOperationStatus;
ReservationController() {
selectedOperationStatus = operationStatusOptions[0]; // 初始化选中值
}
@override
void onInit() {
super.onInit();
// 可以在这里从服务器加载站点的初始信息
renderData();
}
@override
void onClose() {
super.onClose();
Future<void> renderData() async {
showLoading("加载中");
// 模拟网络请求延迟
await Future.delayed(const Duration(seconds: 1));
dismissLoading();
updateUi();
}
/// 更新运营状态的方法
void onOperationStatusChanged(String? newValue) {
if (newValue != null) {
selectedOperationStatus = newValue;
updateUi();
}
}
void saveInfo() {
// TODO: 在这里执行保存信息的逻辑
// 1. 获取所有输入框和下拉框的最新值
// 2. 调用API接口，将数据提交到服务器
// 3. 根据接口返回结果给出提示（成功或失败）
Get.snackbar('提示', '保存成功！'); // 示例：显示一个成功的提示
}
void logout() {
// TODO: 在这里执行退出登录的逻辑
// 1. 清理本地缓存的用户信息
// 2. 调用退出登录接口
// 3. 导航到登录页面
Get.offAll(() => LoginPage());
}
}

229
ln_jq_app/lib/pages/b_page/reservation/view.dart
View File

@@ -1,27 +1,234 @@
import 'package:flutter/material.dart';
import 'package:get/get.dart';
import 'package:getx_scaffold/getx_scaffold.dart';
import 'controller.dart';
import 'package:ln_jq_app/pages/b_page/reservation/controller.dart';
class ReservationPage extends GetView<ReservationController> {
const ReservationPage({super.key});
// 主视图
Widget _buildView() {
return <Widget>[
TextX.titleLarge('预约'),
].toColumn(mainAxisSize: MainAxisSize.min).center();
}
@override
Widget build(BuildContext context) {
return GetBuilder<ReservationController>(
init: ReservationController(),
id: 'b_reservation',
builder: (_) {
return _buildView();
return Scaffold(
body: SingleChildScrollView(
child: Padding(
padding: const EdgeInsets.all(12.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
_buildHeaderCard(),
const SizedBox(height: 12),
_buildInfoFormCard(context),
const SizedBox(height: 12),
_buildTipsCard(),
const SizedBox(height: 12),
_buildLogoutButton(),
],
),
),
),
);
},
);
}
/// 构建顶部的站点信息头卡片
Widget _buildHeaderCard() {
return Card(
elevation: 2,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
child: Column(
children: [
ListTile(
leading: const Icon(Icons.local_gas_station, color: Colors.blue, size: 40),
title: const Text('H2加氢站', style: TextStyle(fontWeight: FontWeight.bold, fontSize: 18)),
subtitle: const Text('上海市浦东新区张江高科技园区'),
trailing: Container(
padding: const EdgeInsets.symmetric(horizontal: 10, vertical: 4),
decoration: BoxDecoration(
color: Colors.blue[100],
borderRadius: BorderRadius.circular(12),
),
child: const Text('运营中', style: TextStyle(color: Colors.blue, fontWeight: FontWeight.bold, fontSize: 12)),
),
),
const Divider(height: 1, indent: 16, endIndent: 16),
Padding(
padding: const EdgeInsets.symmetric(vertical: 16.0),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
_buildHeaderStat('¥45', '氢气价格'),
_buildHeaderStat('24h', '营业时间'),
_buildHeaderStat('98%', '设备状态'),
],
),
),
],
),
);
}
/// 构建头部卡片中的单个统计项
Widget _buildHeaderStat(String value, String label) {
return Column(
children: [
Text(value, style: const TextStyle(color: Colors.blue, fontSize: 20, fontWeight: FontWeight.bold)),
const SizedBox(height: 4),
Text(label, style: const TextStyle(color: Colors.grey, fontSize: 12)),
],
);
}
/// 构建包含所有信息表单的卡片
Widget _buildInfoFormCard(BuildContext context) {
return Card(
elevation: 2,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// --- 基本信息 ---
_buildSectionTitle('基本信息'),
_buildDisplayField(label: '站点名称', value: 'H2加氢站'),
_buildDisplayField(label: '运营企业', value: '上海氢能科技有限公司'),
_buildDisplayField(label: '站点地址', value: '上海市浦东新区张江高科技园区'),
const SizedBox(height: 16),
// --- 价格信息 ---
_buildSectionTitle('价格信息'),
_buildDisplayField(label: '氢气价格 (元/kg)', value: '45'),
_buildDisplayField(label: '官方价格 (元/kg)', value: '50'),
const SizedBox(height: 16),
// --- 运营信息 ---
_buildSectionTitle('运营信息'),
Text('运营状态', style: TextStyle(color: Colors.grey[600], fontSize: 14)),
const SizedBox(height: 8),
//下拉选择框
DropdownButtonFormField<String>(
value: controller.selectedOperationStatus,
items: controller.operationStatusOptions.map((String value) {
return DropdownMenuItem<String>(
value: value,
child: Text(value),
);
}).toList(),
onChanged: controller.onOperationStatusChanged,
decoration: InputDecoration(
border: OutlineInputBorder(borderRadius: BorderRadius.circular(8.0)),
contentPadding: const EdgeInsets.symmetric(horizontal: 12.0),
),
),
const SizedBox(height: 12),
_buildDisplayField(label: '营业时间', value: '24小时营业'),
_buildDisplayField(label: '联系电话', value: '021-12345678'),
const SizedBox(height: 24),
//保存按钮
ElevatedButton(
onPressed: controller.saveInfo,
style: ElevatedButton.styleFrom(
minimumSize: const Size(double.infinity, 48),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
),
child: const Text('保存信息', style: TextStyle(fontSize: 16)),
),
],
),
),
);
}
/// 构建静态提示信息卡片
Widget _buildTipsCard() {
return Card(
elevation: 2,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(8)),
child: Padding(
padding: const EdgeInsets.all(16.0),
child: Column(
children: [
_buildInfoItem(Icons.info_outline, '请确保信息准确无误'),
const SizedBox(height: 10),
_buildInfoItem(Icons.help_outline, '价格信息将实时更新到用户端'),
const SizedBox(height: 10),
_buildInfoItem(Icons.headset_mic_outlined, '如有疑问请联系技术支持: 400-123-4567'),
],
),
),
);
}
/// 构建退出登录按钮
Widget _buildLogoutButton() {
return ElevatedButton(
onPressed: controller.logout,
style: ElevatedButton.styleFrom(
backgroundColor: Colors.red,
foregroundColor: Colors.white,
minimumSize: const Size(double.infinity, 48),
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24)),
elevation: 2,
),
child: const Text('退出登录', style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
);
}
/// 构建带标题的表单区域
Widget _buildSectionTitle(String title) {
return Padding(
padding: const EdgeInsets.only(bottom: 12.0),
child: Row(
children: [
Container(width: 4, height: 16, color: Colors.blue),
const SizedBox(width: 8),
Text(title, style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold)),
],
),
);
}
/// 构建一个“标签+纯文本”的显示行
Widget _buildDisplayField({required String label, required String value}) {
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),
Container(
width: double.infinity,
padding: const EdgeInsets.symmetric(horizontal: 12.0, vertical: 12.0),
decoration: BoxDecoration(
color: Colors.grey[200], // 使用灰色背景以区分
borderRadius: BorderRadius.circular(8.0),
border: Border.all(color: Colors.grey[300]!),
),
child: Text(
value,
style: const TextStyle(fontSize: 14, color: Colors.black87),
),
),
],
),
);
}
/// 构建带图标的提示信息行
Widget _buildInfoItem(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: 14, color: Colors.black54))),
],
);
}
}

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