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

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))),
],
);
}
}