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:flutter_hooks/flutter_hooks.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 { final String? bookingId; const FacilityDetailPage({Key? key, required this.bookingId}) : super(key: key); //启动当前页面 static void startInstance({BuildContext? context, required String? bookingId}) { if (context != null) { context.router.push(FacilityDetailPageRoute(bookingId: bookingId)); } else { appRouter.push(FacilityDetailPageRoute(bookingId: bookingId)); } } //启动当前页面并回退至设施首页 static void startWithPop2Main({required String? bookingId}) { appRouter.pushAndPopUntil( FacilityDetailPageRoute(bookingId: bookingId), predicate: (route) { return route.settings.name == 'FacilityPageRoute'; }, ); } @override Widget build(BuildContext context, WidgetRef ref) { final viewModel = ref.watch(facilityDetailViewModelProvider.notifier); final state = ref.watch(facilityDetailViewModelProvider); useEffect(() { // 组件挂载时执行 - 执行接口请求 Future.microtask(() => viewModel.fetchFacilityDetail(bookingId)); return () { // 组件卸载时执行 }; }, []); return Scaffold( appBar: MyAppBar.appBar(context, state.detail?.facility?.type?.name ?? "", backgroundColor: context.appColors.backgroundWhite), 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, state.detail?.booking?.date ?? "", null, "${state.detail?.booking?.start ?? ""}-${state.detail?.booking?.end ?? ""}", null, ), //设施 _buildDetailItem( context, ref, S.current.facility, Assets.facilityConfirmFacilityIcon, 25.0, 30.5, state.detail?.facility?.type?.name ?? "", null, state.detail?.facility?.name ?? "", null, ), //付款 _buildDetailItem( context, ref, S.current.payment, Assets.facilityConfirmPaymentIcon, 27.0, 22.0, S.current.booking_fee, state.detail?.timePeriod?.price ?? "", S.current.total, "\$${state.detail?.timePeriod?.price ?? ""}", ), // 押金 _buildDetailItem( context, ref, S.current.deposit, Assets.facilityConfirmDepositIcon, 28.0, 26.5, S.current.on_hold, "\$${state.detail?.timePeriod?.deposit ?? ""}", null, null, ), ], ), ), ); } Widget _buildHeaderWidget(BuildContext context, WidgetRef ref) { final state = ref.watch(facilityDetailViewModelProvider); 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( "\$${state.detail?.timePeriod?.price ?? ""}", 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( " ${state.detail?.booking?.date ?? ""}", fontSize: 15, isFontMedium: true, textColor: context.appColors.textBlack, ), ], ).marginOnly(top: 5), //退还押金的布局展示 Visibility( visible: state.detail?.booking?.depositRefund != "0.00", child: Column( children: [ 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( "\$${state.detail?.booking?.depositRefund ?? ""}", fontSize: 15, marginTop: 5, isFontRegular: true, textColor: context.appColors.textPrimary, ), Divider(height: 0.5, color: context.appColors.dividerDefault).marginOnly(top: 14, bottom: 14), //押金付款于时间 Row( mainAxisSize: MainAxisSize.min, children: [ MyTextView( S.current.hold_started_on, fontSize: 15, isFontRegular: true, textColor: context.appColors.textBlack, ), MyTextView( " ${state.detail?.booking?.date ?? ""}", fontSize: 15, isFontMedium: true, textColor: context.appColors.textBlack, ), ], ).marginOnly(top: 5), //押金退款于时间 Row( mainAxisSize: MainAxisSize.min, children: [ MyTextView( S.current.released_on, fontSize: 15, isFontRegular: true, textColor: context.appColors.textBlack, ), MyTextView( " ${state.detail?.booking?.depositRefundAt ?? ""}", fontSize: 15, isFontMedium: true, textColor: context.appColors.textBlack, ), ], ).marginOnly(top: 5), ], ), ), 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(), ], ), ], ), ), ); } }