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:plugin_platform/engine/toast/toast_engine.dart'; import 'package:router/ext/auto_router_extensions.dart'; import 'package:shared/utils/date_time_utils.dart'; import 'package:shared/utils/util.dart'; import 'package:widgets/ext/ex_widget.dart'; import 'package:widgets/my_appbar.dart'; import 'package:widgets/my_button.dart'; import 'package:widgets/my_text_field.dart'; import 'package:widgets/my_text_view.dart'; import 'package:widgets/shatter/form_require_text.dart'; import 'package:widgets/shatter/picker_container.dart'; import 'package:widgets/widget_export.dart'; import '../../router/page/form_page_router.dart'; import 'vm/apply_view_model.dart'; @RoutePage() class GuestVehiclePage extends HookConsumerWidget { const GuestVehiclePage({Key? key}) : super(key: key); //启动当前页面 static void startInstance({BuildContext? context}) { if (context != null) { context.router.push(const GuestVehiclePageRoute()); } else { appRouter.push(const GuestVehiclePageRoute()); } } @override Widget build(BuildContext context, WidgetRef ref) { final viewModel = ref.watch(applyViewModelProvider.notifier); final state = ref.watch(applyViewModelProvider); // 使用 useState 来持久化 TextEditingController 和 FocusNode final TextEditingController vehicleNumController = useTextEditingController(); final TextEditingController vehicleInfoController = useTextEditingController(); final TextEditingController guestNameController = useTextEditingController(); final TextEditingController guestPhoneController = useTextEditingController(); final FocusNode vehicleNumFocusNode = useFocusNode(); final FocusNode vehicleInfoFocusNode = useFocusNode(); final FocusNode guestNameFocusNode = useFocusNode(); final FocusNode guestPhoneFocusNode = useFocusNode(); useEffect(() { //赋值State的值 Future.microtask(() { vehicleNumController.text = state.formContentDetail.vehicleNumber ?? ""; vehicleInfoController.text = state.formContentDetail.vehicleMakeModelColour ?? ""; guestNameController.text = state.formContentDetail.guestName ?? ""; guestPhoneController.text = state.formContentDetail.guestMobileNumber ?? ""; }); return () {}; }, []); return WillPopScope( child: Scaffold( appBar: MyAppBar.appBar(context, state.detailPage?['title']), backgroundColor: context.appColors.backgroundWhite, body: Column( crossAxisAlignment: CrossAxisAlignment.start, children: [ SingleChildScrollView( scrollDirection: Axis.vertical, physics: const BouncingScrollPhysics(), child: Container( width: double.infinity, child: Column( mainAxisSize: MainAxisSize.max, crossAxisAlignment: CrossAxisAlignment.start, children: [ //下拉选 - 访问时间 FormRequireText( text: S.current.date_of_entry, textColor: context.appColors.textBlack, fontSize: 17, fontWeight: FontWeight.w500, ).marginOnly(top: 30, bottom: 16, left: 15, right: 15), PickerContainer( hint: S.current.choose_date, enable: state.enableEdit, content: state.formContentDetail.dateOfEntry, onClick: () { viewModel.pickDate(null, (date) { viewModel.updateFormContentDetail((content) { content.dateOfEntry = DateTimeUtils.formatDate(date, format: 'yyyy-MM-dd'); }); }); }, ).marginOnly(left: 15, right: 15), //输入框 - 车牌号 FormRequireText( text: S.current.vehicle_number, textColor: context.appColors.textBlack, fontSize: 17, fontWeight: FontWeight.w500, ).marginOnly(top: 14, bottom: 16, left: 15, right: 15), // 表单 _buildInputLayout( context, "vehicle_num", enable: state.enableEdit, textInputType: TextInputType.text, textInputAction: TextInputAction.next, controller: vehicleNumController, focusNode: vehicleNumFocusNode, onSubmit: (formKey, value) { vehicleNumFocusNode.unfocus(); FocusScope.of(context).requestFocus(vehicleInfoFocusNode); }, ), //输入框 - 车辆信息 FormRequireText( text: S.current.vehicle_make_model_colour, textColor: context.appColors.textBlack, fontSize: 17, fontWeight: FontWeight.w500, ).marginOnly(top: 14, bottom: 16, left: 15, right: 15), // 表单 _buildInputLayout( context, "vehicle_info", enable: state.enableEdit, textInputType: TextInputType.text, textInputAction: TextInputAction.next, controller: vehicleInfoController, focusNode: vehicleInfoFocusNode, onSubmit: (formKey, value) { vehicleInfoFocusNode.unfocus(); FocusScope.of(context).requestFocus(guestNameFocusNode); }, ), //输入框 - 访客姓名 FormRequireText( text: S.current.guest_name, textColor: context.appColors.textBlack, fontSize: 17, fontWeight: FontWeight.w500, ).marginOnly(top: 14, bottom: 16, left: 15, right: 15), // 表单 _buildInputLayout( context, "guest_name", enable: state.enableEdit, textInputType: TextInputType.text, textInputAction: TextInputAction.next, controller: guestNameController, focusNode: guestNameFocusNode, onSubmit: (formKey, value) { guestNameFocusNode.unfocus(); FocusScope.of(context).requestFocus(guestPhoneFocusNode); }, ), //输入框 - 访客电话 FormRequireText( text: S.current.guest_mobile_number, textColor: context.appColors.textBlack, fontSize: 17, fontWeight: FontWeight.w500, ).marginOnly(top: 14, bottom: 16, left: 15, right: 15), // 表单 _buildInputLayout( context, "guest_phone", enable: state.enableEdit, textInputType: TextInputType.phone, textInputAction: TextInputAction.done, controller: guestPhoneController, focusNode: guestPhoneFocusNode, onSubmit: (formKey, value) { guestPhoneFocusNode.unfocus(); }, ), ], ), ), ).expanded(), //底部按钮 MyButton( onPressed: () { vehicleNumFocusNode.unfocus(); vehicleInfoFocusNode.unfocus(); guestNameFocusNode.unfocus(); guestPhoneFocusNode.unfocus(); if (state.enableEdit) { String? vehicleNumber = vehicleNumController.text; String? vehicleMakeModelColour = vehicleInfoController.text; String? guestName = guestNameController.text; String? guestMobileNumber = guestPhoneController.text; //校验数据 final dateOfEntry = state.formContentDetail.dateOfEntry; if (Utils.isEmpty(dateOfEntry)) { ToastEngine.show("Select date of entry"); return; } if (Utils.isEmpty(vehicleNumber)) { ToastEngine.show("Enter vehicle number"); return; } if (Utils.isEmpty(vehicleMakeModelColour)) { ToastEngine.show("Enter vehicle make/model/ colour"); return; } if (Utils.isEmpty(guestName)) { ToastEngine.show("Enter guest name"); return; } if (Utils.isEmpty(guestMobileNumber)) { ToastEngine.show("Enter guest mobile number"); return; } //存入本表单数据 viewModel.updateFormContentDetail((content) { content.vehicleNumber = vehicleNumber; content.vehicleMakeModelColour = vehicleMakeModelColour; content.guestName = guestName; content.guestMobileNumber = guestMobileNumber; }); } viewModel.gotoNextPage(); }, text: S.current.next, textColor: Colors.white, backgroundColor: context.appColors.btnBgDefault, fontWeight: FontWeight.w500, type: ClickType.throttle, fontSize: 16, minHeight: 50, radius: 0, ), ], )), onWillPop: () async { viewModel.handlePopAction(); return true; }); } Widget _buildInputLayout( BuildContext context, String key, { double marginTop = 0, bool? showRightIcon = false, //是否展示右侧的布局 Widget? rightWidget, //右侧的布局 TextInputType textInputType = TextInputType.text, String? errorText, bool obscureText = false, required TextEditingController? controller, required FocusNode focusNode, bool enable = true, TextInputAction textInputAction = TextInputAction.done, Function? onSubmit, }) { return IgnoreKeyboardDismiss( child: MyTextField( key, fillBackgroundColor: context.appColors.authFiledBG, "", hintStyle: TextStyle( color: context.appColors.authFiledHint, fontSize: 16.0, fontWeight: FontWeight.w500, ), controller: controller, focusNode: focusNode, margin: EdgeInsets.only(top: marginTop, left: 15, right: 15), padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 3), showDivider: false, height: 44, enabled: enable, style: TextStyle( color: context.appColors.authFiledText, fontSize: 16.0, fontWeight: FontWeight.w500, ), inputType: textInputType, textInputAction: textInputAction, onSubmit: onSubmit, cursorColor: context.appColors.authFiledText, obscureText: obscureText, errorText: errorText, showLeftIcon: true, showRightIcon: showRightIcon, rightWidget: rightWidget, ), ); } }