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
2026-02-10 11:51:47 +08:00
parent 26c5f9d67a
commit a5e2a89e4f
1 changed files with 73 additions and 70 deletions
Download Patch File Download Diff File Expand all files Collapse all files

143
ln_jq_app/lib/pages/c_page/reservation/reservation_list_bottomsheet.dart
View File

@@ -36,19 +36,19 @@ class _ReservationListBottomSheetState extends State<ReservationListBottomSheet>
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
return Container( return Container(
height: Get.height * 0.55, height: Get.height * 0.6,
decoration: const BoxDecoration( decoration: const BoxDecoration(
color: Colors.white, color: Color.fromRGBO(247, 249, 251, 1),
borderRadius: BorderRadius.only( borderRadius: BorderRadius.only(
topLeft: Radius.circular(16), topLeft: Radius.circular(16),
topRight: Radius.circular(16), topRight: Radius.circular(16),
), ),
), ),
child: Column( child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [ children: [
// 构建标题和下拉框 // 构建标题和下拉框
_buildHeader(), _buildHeader(),
const Divider(height: 1),
// 下拉筛选框 // 下拉筛选框
_buildChoice(), _buildChoice(),
// 构建列表（使用 Obx 监听数据变化） // 构建列表（使用 Obx 监听数据变化）
@@ -60,58 +60,41 @@ class _ReservationListBottomSheetState extends State<ReservationListBottomSheet>
Container _buildChoice() { Container _buildChoice() {
return Container( return Container(
padding: const EdgeInsets.fromLTRB(20, 8, 0, 0), padding: const EdgeInsets.fromLTRB(20, 8, 0, 0),
alignment: AlignmentGeometry.centerLeft, alignment: AlignmentGeometry.centerLeft,
child: Container( child: Container(
padding: const EdgeInsets.symmetric(horizontal: 8), padding: const EdgeInsets.symmetric(horizontal: 8),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.grey[100], color: Colors.grey[100],
borderRadius: BorderRadius.circular(8), borderRadius: BorderRadius.circular(8),
), ),
child: DropdownButton<String>( child: DropdownButton<String>(
value: _selectedStatus, value: _selectedStatus,
underline: const SizedBox.shrink(), // 隐藏下划线 underline: const SizedBox.shrink(), // 隐藏下划线
items: _statusOptions.entries.map((entry) { items: _statusOptions.entries.map((entry) {
return DropdownMenuItem<String>( return DropdownMenuItem<String>(value: entry.key, child: Text(entry.value));
value: entry.key, }).toList(),
child: Text(entry.value), onChanged: (newValue) {
); if (newValue != null) {
}).toList(), setState(() {
onChanged: (newValue) { _selectedStatus = newValue;
if (newValue != null) { });
setState(() { // 当选择新状态时，调用接口刷新数据
_selectedStatus = newValue; _controller.getReservationList(addStatus: _selectedStatus);
}); }
// 当选择新状态时，调用接口刷新数据 },
_controller.getReservationList(addStatus: _selectedStatus); ),
} ),
}, );
),
),
);
} }
/// 构建标题、关闭按钮和下拉筛选框 /// 构建标题、关闭按钮和下拉筛选框
Widget _buildHeader() { Widget _buildHeader() {
return Container( return Container(
padding: const EdgeInsets.fromLTRB(20, 8, 8, 8), margin: const EdgeInsets.fromLTRB(20, 20, 8, 8),
child: Stack( child: const Text(
alignment: Alignment.center, '我的预约',
children: [ style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold),
Center(child: const Text('我的预约', style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold)),),
Align(
alignment: Alignment.centerRight,
child: ElevatedButton(
onPressed: () => Get.back(),
style: ElevatedButton.styleFrom(
elevation: 0,
backgroundColor: Colors.grey[200],
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(5)),
),
child: const Text('关闭', style: TextStyle(color: Colors.black54)),
),
),
],
), ),
); );
} }
@@ -134,8 +117,8 @@ class _ReservationListBottomSheetState extends State<ReservationListBottomSheet>
return Card( return Card(
color: Colors.white, color: Colors.white,
margin: const EdgeInsets.only(bottom: 12.0), margin: const EdgeInsets.only(bottom: 12.0),
elevation: 1, elevation: 0,
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(12)), shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
child: Padding( child: Padding(
padding: const EdgeInsets.all(16), padding: const EdgeInsets.all(16),
child: Column( child: Column(
@@ -151,17 +134,20 @@ class _ReservationListBottomSheetState extends State<ReservationListBottomSheet>
vertical: 5, vertical: 5,
), ),
decoration: BoxDecoration( decoration: BoxDecoration(
color: Colors.blue.shade50, // 淡蓝色背景 color: reservation.state == "-1"
? Color.fromRGBO(241, 67, 56, 0.1)
: Color.fromRGBO(230, 249, 243, 1),
borderRadius: BorderRadius.circular(4), // 小圆角 borderRadius: BorderRadius.circular(4), // 小圆角
// 可以选择去掉边框，或者用极淡的边框 // 可以选择去掉边框，或者用极淡的边框
border: Border.all(color: Colors.blue.shade100),
), ),
child: Text( child: Text(
"${reservation.stateName}-${reservation.addStatusName}", "${reservation.stateName}-${reservation.addStatusName}",
style: TextStyle( style: TextStyle(
color: Colors.blue.shade700, color: reservation.state == "-1"
fontSize: 12, ? Color.fromRGBO(241, 67, 56, 0.8)
fontWeight: FontWeight.w500, : Color.fromRGBO(49, 186, 133, 1),
fontSize: 12.sp,
fontWeight: FontWeight.w600,
), ),
), ),
), ),
@@ -171,12 +157,10 @@ class _ReservationListBottomSheetState extends State<ReservationListBottomSheet>
SizedBox( SizedBox(
height: 28, // 限制按钮高度，显得精致 height: 28, // 限制按钮高度，显得精致
child: OutlinedButton( child: OutlinedButton(
onPressed: () async{ onPressed: () async {
var responseData = await HttpService.to.post( var responseData = await HttpService.to.post(
'appointment/orderAddHyd/vehicle-cancel', 'appointment/orderAddHyd/vehicle-cancel',
data: { data: {'id': reservation.id},
'id': reservation.id,
},
); );
if (responseData == null || responseData.data == null) { if (responseData == null || responseData.data == null) {
@@ -203,19 +187,22 @@ class _ReservationListBottomSheetState extends State<ReservationListBottomSheet>
), ),
child: Text( child: Text(
'取消预约', '取消预约',
style: TextStyle(color: Colors.grey.shade600, fontSize: 12), style: TextStyle(
color: Colors.grey.shade600,
fontSize: 12,
),
), ),
), ),
), ),
SizedBox(width: 10.w,), SizedBox(width: 10.w),
// 修改按钮 (仅在 hasEdit 为 true 时显示) // 修改按钮 (仅在 hasEdit 为 true 时显示)
if (reservation.hasEdit) if (reservation.hasEdit)
SizedBox( SizedBox(
height: 28, height: 28,
child: OutlinedButton( child: OutlinedButton(
onPressed: () async{ onPressed: () async {
var result = await Get.to( var result = await Get.to(
() => ReservationEditPage(), () => ReservationEditPage(),
arguments: { arguments: {
'reservation': reservation, 'reservation': reservation,
'difference': _controller.difference, 'difference': _controller.difference,
@@ -241,13 +228,14 @@ class _ReservationListBottomSheetState extends State<ReservationListBottomSheet>
'修改', '修改',
style: TextStyle(color: Colors.blue, fontSize: 12), style: TextStyle(color: Colors.blue, fontSize: 12),
), ),
),), ),
),
], ],
), ),
const SizedBox(height: 12), const SizedBox(height: 12),
_buildDetailRow('车牌号:', reservation.plateNumber), _buildDetailRow('车牌号:', reservation.plateNumber),
_buildDetailRow('预约日期:', reservation.date), _buildDetailRow('预约日期:', reservation.date),
_buildDetailRow('预约氢量:', reservation.hydAmount), _buildDetailRow('预约氢量:', "${reservation.hydAmount} KG"),
_buildDetailRow('加氢站:', reservation.stationName), _buildDetailRow('加氢站:', reservation.stationName),
_buildDetailRow('开始时间:', reservation.startTime), _buildDetailRow('开始时间:', reservation.startTime),
_buildDetailRow('结束时间:', reservation.endTime), _buildDetailRow('结束时间:', reservation.endTime),
@@ -271,11 +259,26 @@ class _ReservationListBottomSheetState extends State<ReservationListBottomSheet>
return Padding( return Padding(
padding: const EdgeInsets.only(top: 8.0), padding: const EdgeInsets.only(top: 8.0),
child: Row( child: Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
children: [ children: [
Text(label, style: const TextStyle(color: Colors.grey)), Text(
label,
style: TextStyle(
color: Color.fromRGBO(51, 51, 51, 0.6),
fontSize: 14.sp,
fontWeight: FontWeight.w400,
),
),
const SizedBox(width: 8), const SizedBox(width: 8),
Expanded( Text(
child: Text(value, style: const TextStyle(fontWeight: FontWeight.w500)), value,
style: TextStyle(
color: label.contains("预约氢量:")
? Color.fromRGBO(27, 168, 85, 1)
: Color.fromRGBO(51, 51, 51, 1),
fontSize: 14.sp,
fontWeight: FontWeight.w500,
),
), ),
], ],
), ),