|
@@ -0,0 +1,304 @@
|
|
|
|
+
|
|
|
|
+import 'package:cpt_auth/modules/sign_up/sign_up_state.dart';
|
|
|
|
+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/gestures.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_button.dart';
|
|
|
|
+import 'package:widgets/my_load_image.dart';
|
|
|
|
+import 'package:widgets/my_text_field.dart';
|
|
|
|
+import 'package:widgets/my_text_view.dart';
|
|
|
|
+import 'package:widgets/widget_export.dart';
|
|
|
|
+
|
|
|
|
+import '../../router/page/auth_page_router.dart';
|
|
|
|
+import 'sign_up_view_model.dart';
|
|
|
|
+
|
|
|
|
+@RoutePage()
|
|
|
|
+class SignUpPage extends HookConsumerWidget {
|
|
|
|
+ const SignUpPage({Key? key}) : super(key: key);
|
|
|
|
+
|
|
|
|
+ //启动当前页面
|
|
|
|
+ static void startInstance({BuildContext? context}) {
|
|
|
|
+ if (context != null) {
|
|
|
|
+ context.router.push(const SignUpPageRoute());
|
|
|
|
+ } else {
|
|
|
|
+ appRouter.push(const SignUpPageRoute());
|
|
|
|
+ }
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ @override
|
|
|
|
+ Widget build(BuildContext context, WidgetRef ref) {
|
|
|
|
+ final viewModel = ref.read(signUpViewModelProvider.notifier);
|
|
|
|
+ final state = ref.watch(signUpViewModelProvider);
|
|
|
|
+
|
|
|
|
+ return Scaffold(
|
|
|
|
+ appBar: MyAppBar.appBar(context, ""),
|
|
|
|
+ backgroundColor: context.appColors.backgroundDefault,
|
|
|
|
+ body: SingleChildScrollView(
|
|
|
|
+ scrollDirection: Axis.vertical,
|
|
|
|
+ physics: const BouncingScrollPhysics(),
|
|
|
|
+ child: Container(
|
|
|
|
+ margin: const EdgeInsets.symmetric(horizontal: 38),
|
|
|
|
+ width: double.infinity,
|
|
|
|
+ child: Column(
|
|
|
|
+ mainAxisSize: MainAxisSize.max,
|
|
|
|
+ crossAxisAlignment: CrossAxisAlignment.center,
|
|
|
|
+ children: [
|
|
|
|
+ //顶部图片
|
|
|
|
+ const MyAssetImage(
|
|
|
|
+ Assets.authSignUpInputImg,
|
|
|
|
+ width: 260,
|
|
|
|
+ height: 170,
|
|
|
|
+ ).marginOnly(top: 22, bottom: 34),
|
|
|
|
+
|
|
|
|
+ // 表单 - 名
|
|
|
|
+ _buildInputLayout(
|
|
|
|
+ context,
|
|
|
|
+ state,
|
|
|
|
+ "first_name",
|
|
|
|
+ textInputType: TextInputType.text,
|
|
|
|
+ textInputAction: TextInputAction.next,
|
|
|
|
+ errorText: state.firstNameErrorText,
|
|
|
|
+ onSubmit: (formKey, value) {
|
|
|
|
+ state.formData[formKey]!['focusNode'].unfocus();
|
|
|
|
+ FocusScope.of(context).requestFocus(state.formData['last_name']!['focusNode']);
|
|
|
|
+ },
|
|
|
|
+ ),
|
|
|
|
+
|
|
|
|
+ // 表单 - 姓
|
|
|
|
+ _buildInputLayout(
|
|
|
|
+ context,
|
|
|
|
+ state,
|
|
|
|
+ "last_name",
|
|
|
|
+ marginTop: 15,
|
|
|
|
+ textInputType: TextInputType.text,
|
|
|
|
+ textInputAction: TextInputAction.next,
|
|
|
|
+ errorText: state.lastNameErrorText,
|
|
|
|
+ onSubmit: (formKey, value) {
|
|
|
|
+ state.formData[formKey]!['focusNode'].unfocus();
|
|
|
|
+ FocusScope.of(context).requestFocus(state.formData['email']!['focusNode']);
|
|
|
|
+ },
|
|
|
|
+ ),
|
|
|
|
+
|
|
|
|
+ // 表单 - 邮箱
|
|
|
|
+ _buildInputLayout(
|
|
|
|
+ context,
|
|
|
|
+ state,
|
|
|
|
+ "email",
|
|
|
|
+ marginTop: 15,
|
|
|
|
+ textInputType: TextInputType.emailAddress,
|
|
|
|
+ textInputAction: TextInputAction.next,
|
|
|
|
+ errorText: state.emailErrorText,
|
|
|
|
+ onSubmit: (formKey, value) {
|
|
|
|
+ state.formData[formKey]!['focusNode'].unfocus();
|
|
|
|
+ FocusScope.of(context).requestFocus(state.formData['phone']!['focusNode']);
|
|
|
|
+ },
|
|
|
|
+ ),
|
|
|
|
+
|
|
|
|
+ // 表单 - 电话
|
|
|
|
+ Row(
|
|
|
|
+ mainAxisSize: MainAxisSize.max,
|
|
|
|
+ crossAxisAlignment: CrossAxisAlignment.center,
|
|
|
|
+ children: [
|
|
|
|
+ const MyAssetImage(
|
|
|
|
+ Assets.authCountrySg,
|
|
|
|
+ width: 45,
|
|
|
|
+ height: 30,
|
|
|
|
+ ),
|
|
|
|
+ MyTextView(
|
|
|
|
+ "+65",
|
|
|
|
+ textColor: context.appColors.textBlack,
|
|
|
|
+ fontSize: 20,
|
|
|
|
+ marginLeft: 15,
|
|
|
|
+ marginRight: 12,
|
|
|
|
+ isFontMedium: true,
|
|
|
|
+ ),
|
|
|
|
+ //电话输入框
|
|
|
|
+ _buildInputLayout(
|
|
|
|
+ context,
|
|
|
|
+ state,
|
|
|
|
+ "phone",
|
|
|
|
+ marginTop: 15,
|
|
|
|
+ textInputType: TextInputType.number,
|
|
|
|
+ textInputAction: TextInputAction.next,
|
|
|
|
+ errorText: state.phoneErrorText,
|
|
|
|
+ onSubmit: (formKey, value) {
|
|
|
|
+ state.formData[formKey]!['focusNode'].unfocus();
|
|
|
|
+ FocusScope.of(context).requestFocus(state.formData['password']!['focusNode']);
|
|
|
|
+ },
|
|
|
|
+ ).expanded(),
|
|
|
|
+ ],
|
|
|
|
+ ),
|
|
|
|
+
|
|
|
|
+ // 表单 - 重置密码
|
|
|
|
+ _buildInputLayout(
|
|
|
|
+ context,
|
|
|
|
+ state,
|
|
|
|
+ "password",
|
|
|
|
+ marginTop: 15,
|
|
|
|
+ obscureText: !state.pwdVisibility,
|
|
|
|
+ errorText: state.passwordErrorText,
|
|
|
|
+ textInputAction: TextInputAction.next,
|
|
|
|
+ showRightIcon: true,
|
|
|
|
+ rightWidget: IconButton(
|
|
|
|
+ highlightColor: Colors.transparent,
|
|
|
|
+ splashColor: Colors.transparent,
|
|
|
|
+ icon: state.pwdVisibility
|
|
|
|
+ ? const MyAssetImage(
|
|
|
|
+ Assets.authPasswordHide,
|
|
|
|
+ width: 22.5,
|
|
|
|
+ height: 16.5,
|
|
|
|
+ )
|
|
|
|
+ : const MyAssetImage(
|
|
|
|
+ Assets.authPasswordShow,
|
|
|
|
+ width: 22.5,
|
|
|
|
+ height: 16.5,
|
|
|
|
+ ),
|
|
|
|
+ onPressed: () {
|
|
|
|
+ viewModel.switchPwdVisibility();
|
|
|
|
+ },
|
|
|
|
+ ),
|
|
|
|
+ onSubmit: (formKey, value) {
|
|
|
|
+ state.formData[formKey]!['focusNode'].unfocus();
|
|
|
|
+ FocusScope.of(context).requestFocus(state.formData['confirm_password']!['focusNode']);
|
|
|
|
+ },
|
|
|
|
+ ),
|
|
|
|
+
|
|
|
|
+ // 表单 - 确认密码
|
|
|
|
+ _buildInputLayout(
|
|
|
|
+ context,
|
|
|
|
+ state,
|
|
|
|
+ "confirm_password",
|
|
|
|
+ marginTop: 15,
|
|
|
|
+ obscureText: !state.confirmPwdVisibility,
|
|
|
|
+ errorText: state.confirmPasswordErrorText,
|
|
|
|
+ showRightIcon: true,
|
|
|
|
+ rightWidget: IconButton(
|
|
|
|
+ highlightColor: Colors.transparent,
|
|
|
|
+ splashColor: Colors.transparent,
|
|
|
|
+ icon: state.confirmPwdVisibility
|
|
|
|
+ ? const MyAssetImage(
|
|
|
|
+ Assets.authPasswordHide,
|
|
|
|
+ width: 22.5,
|
|
|
|
+ height: 16.5,
|
|
|
|
+ )
|
|
|
|
+ : const MyAssetImage(
|
|
|
|
+ Assets.authPasswordShow,
|
|
|
|
+ width: 22.5,
|
|
|
|
+ height: 16.5,
|
|
|
|
+ ),
|
|
|
|
+ onPressed: () {
|
|
|
|
+ viewModel.switchConfirmPwdVisibility();
|
|
|
|
+ },
|
|
|
|
+ ),
|
|
|
|
+ onSubmit: (formKey, value) {
|
|
|
|
+ state.formData[formKey]!['focusNode'].unfocus();
|
|
|
|
+ viewModel.submitSignUp();
|
|
|
|
+ },
|
|
|
|
+ ),
|
|
|
|
+
|
|
|
|
+ MyButton(
|
|
|
|
+ onPressed: viewModel.submitSignUp,
|
|
|
|
+ text: S.current.next,
|
|
|
|
+ textColor: Colors.white,
|
|
|
|
+ backgroundColor: context.appColors.btnBgDefault,
|
|
|
|
+ fontWeight: FontWeight.w500,
|
|
|
|
+ type: ClickType.throttle,
|
|
|
|
+ fontSize: 16,
|
|
|
|
+ minHeight: 50,
|
|
|
|
+ radius: 5,
|
|
|
|
+ ).marginOnly(top: 25, bottom: 25),
|
|
|
|
+
|
|
|
|
+ //同意协议
|
|
|
|
+ Row(
|
|
|
|
+ mainAxisSize: MainAxisSize.min,
|
|
|
|
+ children: [
|
|
|
|
+ MyAssetImage(
|
|
|
|
+ state.isAgreeTerms ? Assets.baseServiceCheckBoxChecked : Assets.baseServiceCheckBoxUncheck,
|
|
|
|
+ width: 15.5,
|
|
|
|
+ height: 15.5,
|
|
|
|
+ ).onTap(viewModel.switchAgreeTerms, padding: 10),
|
|
|
|
+ RichText(
|
|
|
|
+ text: TextSpan(
|
|
|
|
+ children: [
|
|
|
|
+ TextSpan(
|
|
|
|
+ text: S.current.agree_to,
|
|
|
|
+ style: TextStyle(color: context.appColors.textDarkGray, fontWeight: FontWeight.w500, fontSize: 15), // 灰色文本
|
|
|
|
+ ),
|
|
|
|
+ const TextSpan(
|
|
|
|
+ text: " ",
|
|
|
|
+ ),
|
|
|
|
+ TextSpan(
|
|
|
|
+ text: S.current.terms_of_service,
|
|
|
|
+ style: TextStyle(color: context.appColors.textPrimary, fontWeight: FontWeight.w500, fontSize: 15), // 蓝色文本
|
|
|
|
+ recognizer: TapGestureRecognizer()..onTap = viewModel.gotoTermsPage,
|
|
|
|
+ ),
|
|
|
|
+ ],
|
|
|
|
+ ),
|
|
|
|
+ ),
|
|
|
|
+ ],
|
|
|
|
+ ).marginOnly(bottom: 35),
|
|
|
|
+
|
|
|
|
+ ],
|
|
|
|
+ ),
|
|
|
|
+ ),
|
|
|
|
+ ),
|
|
|
|
+ );
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+ /// 输入框
|
|
|
|
+ Widget _buildInputLayout(
|
|
|
|
+ BuildContext context,
|
|
|
|
+ SignUpState state,
|
|
|
|
+ String key, {
|
|
|
|
+ double marginTop = 0,
|
|
|
|
+ bool? showRightIcon = false, //是否展示右侧的布局
|
|
|
|
+ Widget? rightWidget, //右侧的布局
|
|
|
|
+ TextInputType textInputType = TextInputType.text,
|
|
|
|
+ String? errorText,
|
|
|
|
+ bool obscureText = false,
|
|
|
|
+ TextInputAction textInputAction = TextInputAction.done,
|
|
|
|
+ Function? onSubmit,
|
|
|
|
+ }) {
|
|
|
|
+ return IgnoreKeyboardDismiss(
|
|
|
|
+ child: MyTextField(
|
|
|
|
+ key,
|
|
|
|
+ fillBackgroundColor: context.appColors.authFiledBG,
|
|
|
|
+ state.formData[key]!['value'],
|
|
|
|
+ hintText: state.formData[key]!['hintText'],
|
|
|
|
+ hintStyle: TextStyle(
|
|
|
|
+ color: context.appColors.authFiledHint,
|
|
|
|
+ fontSize: 16.0,
|
|
|
|
+ fontWeight: FontWeight.w500,
|
|
|
|
+ ),
|
|
|
|
+ controller: state.formData[key]!['controller'],
|
|
|
|
+ focusNode: state.formData[key]!['focusNode'],
|
|
|
|
+ margin: EdgeInsets.only(top: marginTop),
|
|
|
|
+ padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 3),
|
|
|
|
+ showDivider: false,
|
|
|
|
+ height: 44,
|
|
|
|
+ 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,
|
|
|
|
+ ),
|
|
|
|
+ );
|
|
|
|
+ }
|
|
|
|
+
|
|
|
|
+}
|