|
@@ -0,0 +1,308 @@
|
|
|
+import 'package:cs_resources/generated/assets.dart';
|
|
|
+import 'package:cs_resources/generated/l10n.dart';
|
|
|
+import 'package:cs_resources/theme/app_colors_theme.dart';
|
|
|
+import 'package:flutter/material.dart';
|
|
|
+import 'package:auto_route/auto_route.dart';
|
|
|
+import 'package:hooks_riverpod/hooks_riverpod.dart';
|
|
|
+import 'package:router/ext/auto_router_extensions.dart';
|
|
|
+import 'package:widgets/ext/ex_widget.dart';
|
|
|
+import 'package:widgets/my_appbar.dart';
|
|
|
+import 'package:widgets/my_load_image.dart';
|
|
|
+import 'package:widgets/my_text_view.dart';
|
|
|
+import '../../router/page/facility_page_router.dart';
|
|
|
+import 'facility_detail_view_model.dart';
|
|
|
+
|
|
|
+@RoutePage()
|
|
|
+class FacilityDetailPage extends HookConsumerWidget {
|
|
|
+ const FacilityDetailPage({Key? key}) : super(key: key);
|
|
|
+
|
|
|
+ //启动当前页面
|
|
|
+ static void startInstance({BuildContext? context}) {
|
|
|
+ if (context != null) {
|
|
|
+ context.router.push(const FacilityDetailPageRoute());
|
|
|
+ } else {
|
|
|
+ appRouter.push(const FacilityDetailPageRoute());
|
|
|
+ }
|
|
|
+ }
|
|
|
+
|
|
|
+ @override
|
|
|
+ Widget build(BuildContext context, WidgetRef ref) {
|
|
|
+ final viewModel = ref.watch(facilityDetailViewModelProvider.notifier);
|
|
|
+ final state = ref.watch(facilityDetailViewModelProvider);
|
|
|
+
|
|
|
+ return Scaffold(
|
|
|
+ appBar: MyAppBar.appBar(context, "Kids party room", backgroundColor: context.appColors.whiteBG),
|
|
|
+ backgroundColor: context.appColors.backgroundDark,
|
|
|
+ body: SingleChildScrollView(
|
|
|
+ scrollDirection: Axis.vertical,
|
|
|
+ physics: const BouncingScrollPhysics(),
|
|
|
+ child: Column(
|
|
|
+ mainAxisSize: MainAxisSize.max,
|
|
|
+ crossAxisAlignment: CrossAxisAlignment.center,
|
|
|
+ children: [
|
|
|
+ //顶部的信息展示
|
|
|
+ _buildHeaderWidget(context, ref),
|
|
|
+
|
|
|
+ //预定
|
|
|
+ _buildDetailItem(
|
|
|
+ context,
|
|
|
+ ref,
|
|
|
+ S.current.book,
|
|
|
+ Assets.facilityConfirmDateIcon,
|
|
|
+ 28.5,
|
|
|
+ 29,
|
|
|
+ "Tue,24 Oct 2023",
|
|
|
+ null,
|
|
|
+ "05:00 PM-10:00 PM",
|
|
|
+ null,
|
|
|
+ ),
|
|
|
+
|
|
|
+ //设施
|
|
|
+ _buildDetailItem(
|
|
|
+ context,
|
|
|
+ ref,
|
|
|
+ S.current.facility,
|
|
|
+ Assets.facilityConfirmFacilityIcon,
|
|
|
+ 25.0,
|
|
|
+ 30.5,
|
|
|
+ "Kids party room",
|
|
|
+ null,
|
|
|
+ "Blue room",
|
|
|
+ null,
|
|
|
+ ),
|
|
|
+
|
|
|
+ //付款
|
|
|
+ _buildDetailItem(
|
|
|
+ context,
|
|
|
+ ref,
|
|
|
+ S.current.payment,
|
|
|
+ Assets.facilityConfirmPaymentIcon,
|
|
|
+ 27.0,
|
|
|
+ 22.0,
|
|
|
+ "Booking Fee",
|
|
|
+ "10.80",
|
|
|
+ S.current.total,
|
|
|
+ "\$10.80",
|
|
|
+ ),
|
|
|
+
|
|
|
+ // 押金
|
|
|
+ _buildDetailItem(
|
|
|
+ context,
|
|
|
+ ref,
|
|
|
+ S.current.deposit,
|
|
|
+ Assets.facilityConfirmDepositIcon,
|
|
|
+ 28.0,
|
|
|
+ 26.5,
|
|
|
+ "On Hold",
|
|
|
+ "\$100.00",
|
|
|
+ null,
|
|
|
+ null,
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ Widget _buildHeaderWidget(BuildContext context, WidgetRef ref) {
|
|
|
+ return Container(
|
|
|
+ width: double.infinity,
|
|
|
+ color: context.appColors.whiteBG,
|
|
|
+ margin: const EdgeInsets.only(bottom: 7.5),
|
|
|
+ child: Column(
|
|
|
+ children: [
|
|
|
+ //成功图片
|
|
|
+ const MyAssetImage(
|
|
|
+ Assets.facilityPaymentSuccessIcon,
|
|
|
+ width: 54,
|
|
|
+ height: 54,
|
|
|
+ ).marginOnly(top: 11, bottom: 13),
|
|
|
+
|
|
|
+ //支付成功
|
|
|
+ MyTextView(
|
|
|
+ S.current.booking_successful,
|
|
|
+ fontSize: 18,
|
|
|
+ marginBottom: 3,
|
|
|
+ isFontMedium: true,
|
|
|
+ textColor: context.appColors.textPrimary,
|
|
|
+ ),
|
|
|
+ MyTextView(
|
|
|
+ S.current.have_fun,
|
|
|
+ fontSize: 18,
|
|
|
+ marginBottom: 19,
|
|
|
+ isFontMedium: true,
|
|
|
+ textColor: context.appColors.textPrimary,
|
|
|
+ ),
|
|
|
+
|
|
|
+ //支付金额
|
|
|
+ MyTextView(
|
|
|
+ S.current.fee_paid,
|
|
|
+ fontSize: 15,
|
|
|
+ isFontRegular: true,
|
|
|
+ textColor: context.appColors.textBlack,
|
|
|
+ ),
|
|
|
+ MyTextView(
|
|
|
+ "\$10.80",
|
|
|
+ fontSize: 15,
|
|
|
+ isFontRegular: true,
|
|
|
+ textColor: context.appColors.textPrimary,
|
|
|
+ ),
|
|
|
+
|
|
|
+ //付款类型与时间
|
|
|
+ Row(
|
|
|
+ mainAxisSize: MainAxisSize.min,
|
|
|
+ children: [
|
|
|
+ MyTextView(
|
|
|
+ "Master card ending",
|
|
|
+ fontSize: 15,
|
|
|
+ isFontRegular: true,
|
|
|
+ textColor: context.appColors.textBlack,
|
|
|
+ ),
|
|
|
+ MyTextView(
|
|
|
+ "9423",
|
|
|
+ fontSize: 15,
|
|
|
+ isFontMedium: true,
|
|
|
+ textColor: context.appColors.textBlack,
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ).marginOnly(top: 12),
|
|
|
+
|
|
|
+ Row(
|
|
|
+ mainAxisSize: MainAxisSize.min,
|
|
|
+ children: [
|
|
|
+ MyTextView(
|
|
|
+ S.current.paid_on,
|
|
|
+ fontSize: 15,
|
|
|
+ isFontRegular: true,
|
|
|
+ textColor: context.appColors.textBlack,
|
|
|
+ ),
|
|
|
+ MyTextView(
|
|
|
+ "24 Oct 2023 at 02:19 PM",
|
|
|
+ fontSize: 15,
|
|
|
+ isFontMedium: true,
|
|
|
+ textColor: context.appColors.textBlack,
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ).marginOnly(top: 5),
|
|
|
+
|
|
|
+ Divider(height: 0.5, color: context.appColors.dividerDefault).marginOnly(top: 14, bottom: 14),
|
|
|
+
|
|
|
+ //押金
|
|
|
+ MyTextView(
|
|
|
+ S.current.deposit_released_caps,
|
|
|
+ fontSize: 15,
|
|
|
+ isFontRegular: true,
|
|
|
+ textColor: context.appColors.textBlack,
|
|
|
+ ),
|
|
|
+ MyTextView(
|
|
|
+ "\$100.00",
|
|
|
+ fontSize: 15,
|
|
|
+ marginTop: 5,
|
|
|
+ isFontRegular: true,
|
|
|
+ textColor: context.appColors.textPrimary,
|
|
|
+ ),
|
|
|
+
|
|
|
+ const SizedBox(height: 23),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ //Item的列表
|
|
|
+ Widget _buildDetailItem(
|
|
|
+ BuildContext context,
|
|
|
+ WidgetRef ref,
|
|
|
+ String title,
|
|
|
+ String iconPath,
|
|
|
+ double iconWidth,
|
|
|
+ double iconHeight,
|
|
|
+ String line1Txt,
|
|
|
+ String? line1Content,
|
|
|
+ String? line2Txt,
|
|
|
+ String? line2Content,
|
|
|
+ ) {
|
|
|
+ return Container(
|
|
|
+ width: double.infinity,
|
|
|
+ height: 92.5,
|
|
|
+ padding: const EdgeInsets.only(left: 20, right: 20),
|
|
|
+ margin: const EdgeInsets.only(left: 15, right: 15, top: 7.5, bottom: 7.5),
|
|
|
+ decoration: BoxDecoration(
|
|
|
+ color: context.appColors.whiteBG,
|
|
|
+ borderRadius: BorderRadius.circular(6.0), // 圆角
|
|
|
+ boxShadow: [
|
|
|
+ BoxShadow(
|
|
|
+ color: const Color(0xFFB8BFD9).withOpacity(0.3), // 阴影颜色
|
|
|
+ offset: const Offset(0, 3), // 阴影的偏移量
|
|
|
+ blurRadius: 8.0, // 模糊半径
|
|
|
+ spreadRadius: 3.0, // 扩散半径
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ child: Center(
|
|
|
+ child: Column(
|
|
|
+ crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
+ mainAxisSize: MainAxisSize.min,
|
|
|
+ children: [
|
|
|
+ MyTextView(
|
|
|
+ title,
|
|
|
+ textColor: context.appColors.textBlack,
|
|
|
+ fontSize: 16,
|
|
|
+ marginBottom: 7,
|
|
|
+ isFontMedium: true,
|
|
|
+ ),
|
|
|
+ Row(
|
|
|
+ mainAxisSize: MainAxisSize.max,
|
|
|
+ children: [
|
|
|
+ MyAssetImage(
|
|
|
+ iconPath,
|
|
|
+ width: iconWidth,
|
|
|
+ height: iconHeight,
|
|
|
+ ).marginOnly(right: 15),
|
|
|
+ Column(
|
|
|
+ mainAxisSize: MainAxisSize.min,
|
|
|
+ children: [
|
|
|
+ Row(
|
|
|
+ children: [
|
|
|
+ MyTextView(
|
|
|
+ line1Txt,
|
|
|
+ textColor: context.appColors.textBlack,
|
|
|
+ fontSize: 14,
|
|
|
+ isFontRegular: true,
|
|
|
+ ).expanded(),
|
|
|
+ MyTextView(
|
|
|
+ line1Content ?? "",
|
|
|
+ textColor: context.appColors.textBlack,
|
|
|
+ fontSize: 14,
|
|
|
+ isFontRegular: true,
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ Visibility(
|
|
|
+ visible: line2Txt != null,
|
|
|
+ child: Row(
|
|
|
+ children: [
|
|
|
+ MyTextView(
|
|
|
+ line2Txt ?? "",
|
|
|
+ textColor: context.appColors.textBlack,
|
|
|
+ fontSize: 14,
|
|
|
+ isFontRegular: true,
|
|
|
+ ).expanded(),
|
|
|
+ MyTextView(
|
|
|
+ line2Content ?? "",
|
|
|
+ textColor: context.appColors.textBlack,
|
|
|
+ fontSize: 14,
|
|
|
+ isFontRegular: true,
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ).marginOnly(top: 6),
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ).expanded(),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ );
|
|
|
+ }
|
|
|
+}
|