|
@@ -1,9 +1,21 @@
|
|
|
+import 'package:cpt_payment/modules/choose_card/choose_card_page.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/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_view.dart';
|
|
|
+import 'package:widgets/my_text_field.dart';
|
|
|
+import 'package:widgets/widget_export.dart';
|
|
|
|
|
|
import '../../router/page/payment_page_router.dart';
|
|
|
+import 'add_card_state.dart';
|
|
|
import 'add_card_view_model.dart';
|
|
|
|
|
|
@RoutePage()
|
|
@@ -21,12 +33,189 @@ class AddCardPage extends HookConsumerWidget {
|
|
|
|
|
|
@override
|
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
|
- final viewModel = ref.watch(addCardViewModelProvider.notifier);
|
|
|
+ final viewModel = ref.read(addCardViewModelProvider.notifier);
|
|
|
+ final state = ref.watch(addCardViewModelProvider);
|
|
|
|
|
|
return Scaffold(
|
|
|
- appBar: AppBar(title: Text("Profile Edit Page")),
|
|
|
- body: Center(
|
|
|
- child: Text("Profile Edit Page"),
|
|
|
+ appBar: MyAppBar.appBar(context, S.current.add_new_card),
|
|
|
+ backgroundColor: context.appColors.whiteBG,
|
|
|
+ body: SizedBox(
|
|
|
+ width: double.infinity,
|
|
|
+ child: Column(
|
|
|
+ mainAxisSize: MainAxisSize.max,
|
|
|
+ crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
+ children: [
|
|
|
+ SingleChildScrollView(
|
|
|
+ scrollDirection: Axis.vertical,
|
|
|
+ physics: const BouncingScrollPhysics(),
|
|
|
+ child: Column(
|
|
|
+ crossAxisAlignment: CrossAxisAlignment.start,
|
|
|
+ children: [
|
|
|
+ const Row(
|
|
|
+ mainAxisAlignment: MainAxisAlignment.spaceAround,
|
|
|
+ children: [
|
|
|
+ MyAssetImage(Assets.paymentMasterCardIcon, width: 51, height: 30.5),
|
|
|
+ MyAssetImage(Assets.paymentVisaIcon, width: 78.5, height: 25.5),
|
|
|
+ MyAssetImage(Assets.paymentAmericanExpressIcon, width: 47, height: 29),
|
|
|
+ ],
|
|
|
+ ).marginOnly(left: 20, right: 20, top: 32, bottom: 32),
|
|
|
+
|
|
|
+ //信用卡
|
|
|
+ MyTextView(
|
|
|
+ S.current.credit_debit_card,
|
|
|
+ fontSize: 17,
|
|
|
+ marginLeft: 15,
|
|
|
+ marginRight: 15,
|
|
|
+ textColor: context.appColors.textBlack,
|
|
|
+ isFontMedium: true,
|
|
|
+ ),
|
|
|
+
|
|
|
+ //持卡人姓名
|
|
|
+ _buildInputLayout(
|
|
|
+ context,
|
|
|
+ state,
|
|
|
+ "card_name",
|
|
|
+ margin: const EdgeInsets.only(left: 15, right: 15, top: 16),
|
|
|
+ leftIcon: Assets.paymentCardName,
|
|
|
+ textInputType: TextInputType.text,
|
|
|
+ textInputAction: TextInputAction.next,
|
|
|
+ onSubmit: (formKey, value) {
|
|
|
+ state.formData[formKey]!['focusNode'].unfocus();
|
|
|
+ FocusScope.of(context).requestFocus(state.formData['card_number']!['focusNode']);
|
|
|
+ },
|
|
|
+ ),
|
|
|
+
|
|
|
+ //卡号
|
|
|
+ _buildInputLayout(
|
|
|
+ context,
|
|
|
+ state,
|
|
|
+ "card_number",
|
|
|
+ margin: const EdgeInsets.only(left: 15, right: 15, top: 10, bottom: 21),
|
|
|
+ leftIcon: Assets.paymentCardNumber,
|
|
|
+ textInputType: TextInputType.number,
|
|
|
+ textInputAction: TextInputAction.next,
|
|
|
+ onSubmit: (formKey, value) {
|
|
|
+ state.formData[formKey]!['focusNode'].unfocus();
|
|
|
+ FocusScope.of(context).requestFocus(state.formData['month']!['focusNode']);
|
|
|
+ },
|
|
|
+ ),
|
|
|
+
|
|
|
+ //月份,年份,验证码
|
|
|
+ Row(
|
|
|
+ children: [
|
|
|
+ //月份
|
|
|
+ _buildInputLayout(
|
|
|
+ context,
|
|
|
+ state,
|
|
|
+ "month",
|
|
|
+ margin: const EdgeInsets.only(left: 15),
|
|
|
+ showLeftIcon: false,
|
|
|
+ textInputType: TextInputType.number,
|
|
|
+ textInputAction: TextInputAction.next,
|
|
|
+ onSubmit: (formKey, value) {
|
|
|
+ state.formData[formKey]!['focusNode'].unfocus();
|
|
|
+ FocusScope.of(context).requestFocus(state.formData['year']!['focusNode']);
|
|
|
+ },
|
|
|
+ ).expanded(),
|
|
|
+
|
|
|
+ //年份
|
|
|
+ _buildInputLayout(
|
|
|
+ context,
|
|
|
+ state,
|
|
|
+ "year",
|
|
|
+ margin: const EdgeInsets.only(left: 8.5, right: 8.5),
|
|
|
+ showLeftIcon: false,
|
|
|
+ textInputType: TextInputType.number,
|
|
|
+ textInputAction: TextInputAction.next,
|
|
|
+ onSubmit: (formKey, value) {
|
|
|
+ state.formData[formKey]!['focusNode'].unfocus();
|
|
|
+ FocusScope.of(context).requestFocus(state.formData['cyc']!['focusNode']);
|
|
|
+ },
|
|
|
+ ).expanded(),
|
|
|
+
|
|
|
+ //验证码
|
|
|
+ _buildInputLayout(
|
|
|
+ context,
|
|
|
+ state,
|
|
|
+ "cyc",
|
|
|
+ margin: const EdgeInsets.only(right: 15),
|
|
|
+ showLeftIcon: false,
|
|
|
+ textInputType: TextInputType.number,
|
|
|
+ textInputAction: TextInputAction.next,
|
|
|
+ onSubmit: (formKey, value) {
|
|
|
+ state.formData[formKey]!['focusNode'].unfocus();
|
|
|
+ },
|
|
|
+ ).expanded(),
|
|
|
+ ],
|
|
|
+ )
|
|
|
+ ],
|
|
|
+ )).expanded(),
|
|
|
+
|
|
|
+ //底部按钮
|
|
|
+ MyButton(
|
|
|
+ onPressed: viewModel.addCard,
|
|
|
+ text: S.current.add_card,
|
|
|
+ textColor: Colors.white,
|
|
|
+ backgroundColor: context.appColors.btnBgDefault,
|
|
|
+ fontWeight: FontWeight.w500,
|
|
|
+ type: ClickType.throttle,
|
|
|
+ fontSize: 16,
|
|
|
+ minHeight: 50,
|
|
|
+ radius: 0,
|
|
|
+ ),
|
|
|
+ ],
|
|
|
+ ),
|
|
|
+ ),
|
|
|
+ );
|
|
|
+ }
|
|
|
+
|
|
|
+ Widget _buildInputLayout(
|
|
|
+ BuildContext context,
|
|
|
+ AddCardState state,
|
|
|
+ String key, {
|
|
|
+ EdgeInsetsGeometry? margin,
|
|
|
+ bool showRightIcon = false, //是否展示右侧的布局
|
|
|
+ bool showLeftIcon = true, //是否展示左侧侧的布局
|
|
|
+ Widget? rightWidget, //右侧的布局
|
|
|
+ TextInputType textInputType = TextInputType.text,
|
|
|
+ String? leftIcon,
|
|
|
+ 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.authFiledHintDark,
|
|
|
+ fontSize: 16.0,
|
|
|
+ fontWeight: FontWeight.w400,
|
|
|
+ ),
|
|
|
+ controller: state.formData[key]!['controller'],
|
|
|
+ focusNode: state.formData[key]!['focusNode'],
|
|
|
+ margin: margin ?? EdgeInsets.zero,
|
|
|
+ padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 3),
|
|
|
+ showDivider: false,
|
|
|
+ height: 44,
|
|
|
+ style: TextStyle(
|
|
|
+ color: context.appColors.authFiledText,
|
|
|
+ fontSize: 16.0,
|
|
|
+ fontWeight: FontWeight.w400,
|
|
|
+ ),
|
|
|
+ inputType: textInputType,
|
|
|
+ textInputAction: textInputAction,
|
|
|
+ onSubmit: onSubmit,
|
|
|
+ cursorColor: context.appColors.authFiledText,
|
|
|
+ obscureText: obscureText,
|
|
|
+ errorText: errorText,
|
|
|
+ showLeftIcon: showLeftIcon,
|
|
|
+ leftWidget: showLeftIcon ? MyAssetImage(leftIcon ?? "", width: 27, height: 27) : const SizedBox(),
|
|
|
+ showRightIcon: showRightIcon,
|
|
|
+ rightWidget: rightWidget,
|
|
|
),
|
|
|
);
|
|
|
}
|