payment 支付信息，支付确认，支付成功

packages/cpt_payment/lib/modules/add_card/add_card_page.dart

@@ -0,0 +1,33 @@
+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 '../../router/page/payment_page_router.dart';
+import 'add_card_view_model.dart';
+
+@RoutePage()
+class AddCardPage extends HookConsumerWidget {
+  const AddCardPage({Key? key}) : super(key: key);
+
+  //启动当前页面
+  static void startInstance({BuildContext? context}) {
+    if (context != null) {
+      context.router.push(const AddCardPageRoute());
+    } else {
+      appRouter.push(const AddCardPageRoute());
+    }
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final viewModel = ref.watch(addCardViewModelProvider.notifier);
+
+    return Scaffold(
+      appBar: AppBar(title: Text("Profile Edit Page")),
+      body: Center(
+        child: Text("Profile Edit Page"),
+      ),
+    );
+  }
+}

packages/cpt_payment/lib/modules/add_card/add_card_state.dart

@@ -0,0 +1,3 @@
+class AddCardState{
+
+}

packages/cpt_payment/lib/modules/add_card/add_card_view_model.dart

@@ -0,0 +1,13 @@
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+
+import 'add_card_state.dart';
+
+part 'add_card_view_model.g.dart';
+
+@riverpod
+class AddCardViewModel extends _$AddCardViewModel {
+  @override
+  AddCardState build() {
+    return AddCardState();
+  }
+}

packages/cpt_payment/lib/modules/add_card/add_card_view_model.g.dart

@@ -0,0 +1,26 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'add_card_view_model.dart';
+
+// **************************************************************************
+// RiverpodGenerator
+// **************************************************************************
+
+String _$addCardViewModelHash() => r'5e7c5e5596a80e95d8dbcc1eb05daa4023684eb9';
+
+/// See also [AddCardViewModel].
+@ProviderFor(AddCardViewModel)
+final addCardViewModelProvider =
+    AutoDisposeNotifierProvider<AddCardViewModel, AddCardState>.internal(
+  AddCardViewModel.new,
+  name: r'addCardViewModelProvider',
+  debugGetCreateSourceHash: const bool.fromEnvironment('dart.vm.product')
+      ? null
+      : _$addCardViewModelHash,
+  dependencies: null,
+  allTransitiveDependencies: null,
+);
+
+typedef _$AddCardViewModel = AutoDisposeNotifier<AddCardState>;
+// ignore_for_file: type=lint
+// ignore_for_file: subtype_of_sealed_class, invalid_use_of_internal_member, invalid_use_of_visible_for_testing_member, deprecated_member_use_from_same_package

packages/cpt_payment/lib/modules/choose_card/choose_card_page.dart

@@ -0,0 +1,33 @@
+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 '../../router/page/payment_page_router.dart';
+import 'choose_card_view_model.dart';
+
+@RoutePage()
+class ChooseCardPage extends HookConsumerWidget {
+  const ChooseCardPage({Key? key}) : super(key: key);
+
+  //启动当前页面
+  static void startInstance({BuildContext? context}) {
+    if (context != null) {
+      context.router.push(const ChooseCardPageRoute());
+    } else {
+      appRouter.push(const ChooseCardPageRoute());
+    }
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final _viewModel = ref.watch(chooseCardViewModelProvider.notifier);
+
+    return Scaffold(
+      appBar: AppBar(title: Text("Profile Edit Page")),
+      body: Center(
+        child: Text("Profile Edit Page"),
+      ),
+    );
+  }
+}

packages/cpt_payment/lib/modules/choose_card/choose_card_state.dart

@@ -0,0 +1,3 @@
+class ChooseCardState{
+
+}

packages/cpt_payment/lib/modules/choose_card/choose_card_view_model.dart

@@ -0,0 +1,13 @@
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+
+import 'choose_card_state.dart';
+
+part 'choose_card_view_model.g.dart';
+
+@riverpod
+class ChooseCardViewModel extends _$ChooseCardViewModel {
+  @override
+  ChooseCardState build() {
+    return ChooseCardState();
+  }
+}

packages/cpt_payment/lib/modules/choose_card/choose_card_view_model.g.dart

@@ -0,0 +1,27 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'choose_card_view_model.dart';
+
+// **************************************************************************
+// RiverpodGenerator
+// **************************************************************************
+
+String _$chooseCardViewModelHash() =>
+    r'2a690cc283527d4b52eff532a80fb1c9c6a397d8';
+
+/// See also [ChooseCardViewModel].
+@ProviderFor(ChooseCardViewModel)
+final chooseCardViewModelProvider =
+    AutoDisposeNotifierProvider<ChooseCardViewModel, ChooseCardState>.internal(
+  ChooseCardViewModel.new,
+  name: r'chooseCardViewModelProvider',
+  debugGetCreateSourceHash: const bool.fromEnvironment('dart.vm.product')
+      ? null
+      : _$chooseCardViewModelHash,
+  dependencies: null,
+  allTransitiveDependencies: null,
+);
+
+typedef _$ChooseCardViewModel = AutoDisposeNotifier<ChooseCardState>;
+// ignore_for_file: type=lint
+// ignore_for_file: subtype_of_sealed_class, invalid_use_of_internal_member, invalid_use_of_visible_for_testing_member, deprecated_member_use_from_same_package

packages/cpt_payment/lib/modules/payment/condo/payment/condo_payment_screen.dart

@@ -1,4 +1,5 @@
 import 'package:auto_route/auto_route.dart';
+import 'package:cpt_payment/modules/payment_info/payment_info_page.dart';
 import 'package:flutter/material.dart';
 import 'package:flutter_hooks/flutter_hooks.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
@@ -43,7 +44,8 @@ class CondoPaymentScreen extends HookConsumerWidget {
                 delegate: SliverChildBuilderDelegate(
                       (context, index) {
                     return CondoPaymentItem(index: index, item: state.datas[index]).onTap(() {
-
+                      //去信息页面
+                      PaymentInfoPage.startInstance(context: context);
                     });
                   },
                   childCount: state.datas.length,

packages/cpt_payment/lib/modules/payment/manage/manage_view_model.g.dart

@@ -6,7 +6,7 @@ part of 'manage_view_model.dart';
 // RiverpodGenerator
 // **************************************************************************
 
-String _$manageViewModelHash() => r'9e6b2c00e4ed57279830e8738a899e01543b4783';
+String _$manageViewModelHash() => r'293b21a526990c4b60cd1875304d814dbd719f8e';
 
 /// See also [ManageViewModel].
 @ProviderFor(ManageViewModel)

packages/cpt_payment/lib/modules/payment_confirm/payment_confirm_page.dart

@@ -0,0 +1,169 @@
+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 '../../router/page/payment_page_router.dart';
+import 'payment_confirm_view_model.dart';
+
+@RoutePage()
+class PaymentConfirmPage extends HookConsumerWidget {
+  const PaymentConfirmPage({Key? key}) : super(key: key);
+
+  //启动当前页面
+  static void startInstance({BuildContext? context}) {
+    if (context != null) {
+      context.router.push(const PaymentConfirmPageRoute());
+    } else {
+      appRouter.push(const PaymentConfirmPageRoute());
+    }
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final viewModel = ref.watch(paymentConfirmViewModelProvider.notifier);
+    final state = ref.watch(paymentConfirmViewModelProvider);
+
+    return Scaffold(
+      appBar: MyAppBar.appBar(context, "付款的标题"),
+      backgroundColor: context.appColors.whiteBG,
+      body: Column(
+        mainAxisSize: MainAxisSize.max,
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          SingleChildScrollView(
+            scrollDirection: Axis.vertical,
+            physics: const BouncingScrollPhysics(),
+            child: Column(
+              crossAxisAlignment: CrossAxisAlignment.start,
+              children: [
+                //金额
+                Row(
+                  children: [
+                    const MyAssetImage(Assets.paymentInfoDetails, width: 27, height: 27),
+                    MyTextView(
+                      S.current.payment_details,
+                      textColor: context.appColors.textBlack,
+                      fontSize: 17,
+                      marginLeft: 14,
+                      isFontMedium: true,
+                    ).expanded(),
+                  ],
+                ).marginOnly(top: 15, left: 15, right: 15),
+
+                Row(
+                  children: [
+                    MyTextView(
+                      "SGD",
+                      textColor: context.appColors.textBlack,
+                      fontSize: 18,
+                      isFontRegular: true,
+                    ),
+                    MyTextView(
+                      "\$21.80",
+                      textColor: context.appColors.textPrimary,
+                      fontSize: 22,
+                      marginLeft: 12,
+                      isFontMedium: true,
+                    ).expanded(),
+                  ],
+                ).marginOnly(top: 20, left: 15, right: 15),
+
+                Container(
+                  height: 0.5,
+                  margin: const EdgeInsets.only(top: 22, bottom: 13.5, left: 15, right: 15),
+                  color: context.appColors.dividerDefault,
+                ),
+
+                // DESC
+                Row(
+                  children: [
+                    const MyAssetImage(Assets.paymentInfoNotes, width: 27, height: 27),
+                    MyTextView(
+                      S.current.notes_to_recipient,
+                      textColor: context.appColors.textBlack,
+                      fontSize: 17,
+                      marginLeft: 14,
+                      isFontMedium: true,
+                    ).expanded(),
+                  ],
+                ).marginOnly(left: 15, right: 15),
+
+                MyTextView(
+                  "The money has already been paid",
+                  textColor: context.appColors.textPrimary,
+                  fontSize: 16,
+                  marginTop: 15,
+                  marginBottom: 20,
+                  marginLeft: 15,
+                  marginRight: 15,
+                  isFontRegular: true,
+                ),
+
+                _paymentInfo(context),
+              ],
+            ),
+          ).expanded(),
+
+          // 底部按钮
+          MyButton(
+            onPressed: viewModel.doPayment,
+            text: S.current.proceed_with_payment,
+            textColor: Colors.white,
+            backgroundColor: context.appColors.btnBgDefault,
+            fontWeight: FontWeight.w500,
+            type: ClickType.throttle,
+            fontSize: 16,
+            minHeight: 50,
+            radius: 0,
+          ).marginOnly(top: 15),
+        ],
+      ),
+    );
+  }
+
+  //底部的支付信息
+  Widget _paymentInfo(BuildContext context) {
+    return Container(
+        height: 75,
+        padding: const EdgeInsets.symmetric(horizontal: 20),
+        color: context.appColors.backgroundDark,
+        child: Row(
+          children: [
+            const MyAssetImage(
+              Assets.paymentMasterCardIcon,
+              height: 34,
+              width: 56,
+            ),
+            MyTextView(
+              "Ending 9423",
+              marginLeft: 15,
+              marginRight: 15,
+              textColor: context.appColors.textBlack,
+              fontSize: 15,
+              isFontMedium: true,
+            ).expanded(),
+            MyTextView(
+              S.current.change,
+              textColor: Colors.white,
+              backgroundColor: context.appColors.btnBgDefault,
+              paddingRight: 16,
+              paddingLeft: 16,
+              paddingTop: 8,
+              paddingBottom: 8,
+              cornerRadius: 7,
+              fontSize: 15,
+              isFontMedium: true,
+            )
+          ],
+        ));
+  }
+}

packages/cpt_payment/lib/modules/payment_confirm/payment_confirm_state.dart

@@ -0,0 +1,3 @@
+class PaymentConfirmState{
+
+}

packages/cpt_payment/lib/modules/payment_confirm/payment_confirm_view_model.dart

@@ -0,0 +1,21 @@
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+
+import '../payment_success/payment_success_page.dart';
+import 'payment_confirm_state.dart';
+
+part 'payment_confirm_view_model.g.dart';
+
+@riverpod
+class PaymentConfirmViewModel extends _$PaymentConfirmViewModel {
+  @override
+  PaymentConfirmState build() {
+    return PaymentConfirmState();
+  }
+
+  //执行支付
+  void doPayment() {
+
+
+    PaymentSuccessPage.startWithPop();
+  }
+}

packages/cpt_payment/lib/modules/payment_confirm/payment_confirm_view_model.g.dart

@@ -0,0 +1,27 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'payment_confirm_view_model.dart';
+
+// **************************************************************************
+// RiverpodGenerator
+// **************************************************************************
+
+String _$paymentConfirmViewModelHash() =>
+    r'26ef4699c914cade800b8ac812b34acda0988cd2';
+
+/// See also [PaymentConfirmViewModel].
+@ProviderFor(PaymentConfirmViewModel)
+final paymentConfirmViewModelProvider = AutoDisposeNotifierProvider<
+    PaymentConfirmViewModel, PaymentConfirmState>.internal(
+  PaymentConfirmViewModel.new,
+  name: r'paymentConfirmViewModelProvider',
+  debugGetCreateSourceHash: const bool.fromEnvironment('dart.vm.product')
+      ? null
+      : _$paymentConfirmViewModelHash,
+  dependencies: null,
+  allTransitiveDependencies: null,
+);
+
+typedef _$PaymentConfirmViewModel = AutoDisposeNotifier<PaymentConfirmState>;
+// ignore_for_file: type=lint
+// ignore_for_file: subtype_of_sealed_class, invalid_use_of_internal_member, invalid_use_of_visible_for_testing_member, deprecated_member_use_from_same_package

packages/cpt_payment/lib/modules/payment_info/payment_info_page.dart

@@ -0,0 +1,184 @@
+import 'package:cpt_payment/modules/payment/condo/active/condo_active_screen.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: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_button.dart';
+import 'package:widgets/my_load_image.dart';
+import 'package:widgets/my_text_view.dart';
+import 'package:widgets/widget_export.dart';
+import '../../router/page/payment_page_router.dart';
+import 'payment_info_view_model.dart';
+
+@RoutePage()
+class PaymentInfoPage extends HookConsumerWidget {
+  const PaymentInfoPage({Key? key}) : super(key: key);
+
+  //启动当前页面
+  static void startInstance({BuildContext? context}) {
+    if (context != null) {
+      context.router.push(const PaymentInfoPageRoute());
+    } else {
+      appRouter.push(const PaymentInfoPageRoute());
+    }
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final viewModel = ref.watch(paymentInfoViewModelProvider.notifier);
+    final state = ref.watch(paymentInfoViewModelProvider);
+    final noteCount = useState(0);
+
+    return Scaffold(
+      appBar: MyAppBar.appBar(context, "付款的标题"),
+      backgroundColor: context.appColors.whiteBG,
+      body: Column(
+        mainAxisSize: MainAxisSize.max,
+        crossAxisAlignment: CrossAxisAlignment.start,
+        children: [
+          SingleChildScrollView(
+                  scrollDirection: Axis.vertical,
+                  physics: const BouncingScrollPhysics(),
+                  child: Column(
+                    crossAxisAlignment: CrossAxisAlignment.start,
+                    children: [
+                      //金额
+                      Row(
+                        children: [
+                          const MyAssetImage(Assets.paymentInfoDetails, width: 27, height: 27),
+                          MyTextView(
+                            S.current.payment_details,
+                            textColor: context.appColors.textBlack,
+                            fontSize: 17,
+                            marginLeft: 14,
+                            isFontMedium: true,
+                          ).expanded(),
+                        ],
+                      ).marginOnly(top: 15),
+
+                      Row(
+                        children: [
+                          MyTextView(
+                            "SGD",
+                            textColor: context.appColors.textBlack,
+                            fontSize: 18,
+                            isFontRegular: true,
+                          ),
+                          MyTextView(
+                            "\$21.80",
+                            textColor: context.appColors.textPrimary,
+                            fontSize: 22,
+                            marginLeft: 12,
+                            isFontMedium: true,
+                          ).expanded(),
+                        ],
+                      ).marginOnly(top: 20),
+
+                      Container(
+                        height: 0.5,
+                        margin: const EdgeInsets.only(top: 22,bottom: 13.5),
+                        color: context.appColors.dividerDefault,
+                      ),
+
+                      // DESC
+                      Row(
+                        children: [
+                          const MyAssetImage(Assets.paymentInfoNotes, width: 27, height: 27),
+                          MyTextView(
+                            S.current.notes_to_recipient,
+                            textColor: context.appColors.textBlack,
+                            fontSize: 17,
+                            marginLeft: 14,
+                            isFontMedium: true,
+                          ).expanded(),
+                        ],
+                      ),
+
+                      //大文本框
+                      IgnoreKeyboardDismiss(
+                        child: Container(
+                          height: 177,
+                          margin: const EdgeInsets.only(top: 24),
+                          padding: const EdgeInsets.symmetric(vertical: 15, horizontal: 15),
+                          decoration: BoxDecoration(
+                            color: context.appColors.authFiledBG,
+                            borderRadius: const BorderRadius.all(Radius.circular(5)),
+                          ),
+                          child: Stack(
+                            children: [
+                              TextField(
+                                cursorColor: context.appColors.authFiledText,
+                                cursorWidth: 1.5,
+                                autofocus: false,
+                                enabled: true,
+                                focusNode: state.formData["note"]!['focusNode'],
+                                controller: state.formData["note"]!['controller'],
+                                decoration: InputDecoration(
+                                  isDense: true,
+                                  isCollapsed: true,
+                                  border: InputBorder.none,
+                                  hintText: state.formData["note"]!['hintText'],
+                                  hintStyle: TextStyle(
+                                    color: context.appColors.authFiledHint,
+                                    fontSize: 16.0,
+                                    fontWeight: FontWeight.w500,
+                                  ),
+                                ),
+                                style: TextStyle(
+                                  color: context.appColors.authFiledText,
+                                  fontSize: 16.0,
+                                  fontWeight: FontWeight.w500,
+                                ),
+                                textInputAction: TextInputAction.done,
+                                onSubmitted: (value) {
+                                  FocusScope.of(context).unfocus();
+                                },
+                                maxLines: null,
+                                expands: true,
+                                onChanged: (text) {
+                                  // 当文本改变时，更新字符数量
+                                  noteCount.value = text.length;
+                                },
+                              ),
+                              Positioned(
+                                bottom: 0.0,
+                                right: 0.0,
+                                child: Text(
+                                  S.current.characters(noteCount.value),
+                                  style: TextStyle(
+                                    color: context.appColors.textBlack,
+                                    fontSize: 15.0,
+                                  ),
+                                ),
+                              ),
+                            ],
+                          ),
+                        ),
+                      ),
+                    ],
+                  ).paddingSymmetric(horizontal: 15))
+              .expanded(),
+
+          // 底部按钮
+          MyButton(
+            onPressed: viewModel.gotoConfirmPage,
+            text: S.current.next,
+            textColor: Colors.white,
+            backgroundColor: context.appColors.btnBgDefault,
+            fontWeight: FontWeight.w500,
+            type: ClickType.throttle,
+            fontSize: 16,
+            minHeight: 50,
+            radius: 0,
+          ).marginOnly(top: 15),
+        ],
+      ),
+    );
+  }
+}

packages/cpt_payment/lib/modules/payment_info/payment_info_state.dart

@@ -0,0 +1,25 @@
+import 'package:cs_resources/generated/l10n.dart';
+import 'package:flutter/material.dart';
+
+class PaymentInfoState{
+
+  //表单的校验与数据
+  final Map<String, Map<String, dynamic>> formData;
+
+  // ===================================  Begin  ↓  ===================================
+
+  PaymentInfoState({
+    Map<String, Map<String, dynamic>>? formData,
+  }) : formData = formData ??
+      {
+        'note': {
+          'value': '',
+          'controller': TextEditingController(),
+          'focusNode': FocusNode(),
+          'hintText': S.current.type_here,
+          'obsecure': false,
+        },
+      };
+
+
+}

packages/cpt_payment/lib/modules/payment_info/payment_info_view_model.dart

@@ -0,0 +1,19 @@
+import 'package:cpt_payment/modules/payment_confirm/payment_confirm_page.dart';
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+
+import 'payment_info_state.dart';
+
+part 'payment_info_view_model.g.dart';
+
+@riverpod
+class PaymentInfoViewModel extends _$PaymentInfoViewModel {
+  @override
+  PaymentInfoState build() {
+    return PaymentInfoState();
+  }
+
+  //去确定页面
+  void gotoConfirmPage() {
+    PaymentConfirmPage.startInstance();
+  }
+}

packages/cpt_payment/lib/modules/payment_info/payment_info_view_model.g.dart

@@ -0,0 +1,27 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'payment_info_view_model.dart';
+
+// **************************************************************************
+// RiverpodGenerator
+// **************************************************************************
+
+String _$paymentInfoViewModelHash() =>
+    r'f653c43001ec0c83f0e85f41b0b14919b14a78a5';
+
+/// See also [PaymentInfoViewModel].
+@ProviderFor(PaymentInfoViewModel)
+final paymentInfoViewModelProvider = AutoDisposeNotifierProvider<
+    PaymentInfoViewModel, PaymentInfoState>.internal(
+  PaymentInfoViewModel.new,
+  name: r'paymentInfoViewModelProvider',
+  debugGetCreateSourceHash: const bool.fromEnvironment('dart.vm.product')
+      ? null
+      : _$paymentInfoViewModelHash,
+  dependencies: null,
+  allTransitiveDependencies: null,
+);
+
+typedef _$PaymentInfoViewModel = AutoDisposeNotifier<PaymentInfoState>;
+// ignore_for_file: type=lint
+// ignore_for_file: subtype_of_sealed_class, invalid_use_of_internal_member, invalid_use_of_visible_for_testing_member, deprecated_member_use_from_same_package

packages/cpt_payment/lib/modules/payment_success/payment_success_page.dart

@@ -0,0 +1,116 @@
+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/payment_page_router.dart';
+import 'payment_success_view_model.dart';
+
+@RoutePage()
+class PaymentSuccessPage extends HookConsumerWidget {
+  const PaymentSuccessPage({Key? key}) : super(key: key);
+
+
+  //启动并关闭其他栈
+  static void startWithPop() {
+    appRouter.pushAndPopUntil(
+      const PaymentSuccessPageRoute(),
+      predicate: (route) {
+        return route.settings.name == 'PaymentPageRoute';
+      },
+    );
+  }
+
+  @override
+  Widget build(BuildContext context, WidgetRef ref) {
+    final viewModel = ref.watch(paymentSuccessViewModelProvider.notifier);
+
+    return Scaffold(
+      appBar: MyAppBar.appBar(context, "付款的标题"),
+      backgroundColor: context.appColors.whiteBG,
+      body: SizedBox(
+        width: double.infinity,
+        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.fee_paid,
+              marginTop: 40,
+              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),
+
+            const SizedBox(height: 23),
+          ],
+        ),
+      ),
+    );
+  }
+}

packages/cpt_payment/lib/modules/payment_success/payment_success_state.dart

@@ -0,0 +1,3 @@
+class PaymentSuccessState{
+
+}

packages/cpt_payment/lib/modules/payment_success/payment_success_view_model.dart

@@ -0,0 +1,13 @@
+import 'package:riverpod_annotation/riverpod_annotation.dart';
+
+import 'payment_success_state.dart';
+
+part 'payment_success_view_model.g.dart';
+
+@riverpod
+class PaymentSuccessViewModel extends _$PaymentSuccessViewModel {
+  @override
+  PaymentSuccessState build() {
+    return PaymentSuccessState();
+  }
+}

packages/cpt_payment/lib/modules/payment_success/payment_success_view_model.g.dart

@@ -0,0 +1,27 @@
+// GENERATED CODE - DO NOT MODIFY BY HAND
+
+part of 'payment_success_view_model.dart';
+
+// **************************************************************************
+// RiverpodGenerator
+// **************************************************************************
+
+String _$paymentSuccessViewModelHash() =>
+    r'ac260fa59e53f82ebd16ac2050134cd1991ca395';
+
+/// See also [PaymentSuccessViewModel].
+@ProviderFor(PaymentSuccessViewModel)
+final paymentSuccessViewModelProvider = AutoDisposeNotifierProvider<
+    PaymentSuccessViewModel, PaymentSuccessState>.internal(
+  PaymentSuccessViewModel.new,
+  name: r'paymentSuccessViewModelProvider',
+  debugGetCreateSourceHash: const bool.fromEnvironment('dart.vm.product')
+      ? null
+      : _$paymentSuccessViewModelHash,
+  dependencies: null,
+  allTransitiveDependencies: null,
+);
+
+typedef _$PaymentSuccessViewModel = AutoDisposeNotifier<PaymentSuccessState>;
+// ignore_for_file: type=lint
+// ignore_for_file: subtype_of_sealed_class, invalid_use_of_internal_member, invalid_use_of_visible_for_testing_member, deprecated_member_use_from_same_package

packages/cpt_payment/lib/router/component/payment_component_service.dart

@@ -1,15 +1,14 @@
 /*
  * Community 组件的组件路由
  */
-import 'package:flutter/cupertino.dart';
+import 'package:cpt_payment/modules/add_card/add_card_page.dart';
+import 'package:cpt_payment/modules/choose_card/choose_card_page.dart';
 import 'package:router/componentRouter/payment_service.dart';
-import 'package:flutter/material.dart';
 import 'package:hooks_riverpod/hooks_riverpod.dart';
 import 'package:riverpod_annotation/riverpod_annotation.dart';
 
 import '../../modules/payment/payment_page.dart';
 
-
 part 'payment_component_service.g.dart';
 
 @Riverpod(keepAlive: true)
@@ -18,9 +17,18 @@ PaymentService paymentService(Ref ref) {
 }
 
 class PaymentComponentService extends PaymentService {
-
   @override
   void startPaymentPage() {
     PaymentPage.startInstance();
   }
+
+  @override
+  void startAddCardPage() {
+    AddCardPage.startInstance();
+  }
+
+  @override
+  void startChooseCardPage() {
+    ChooseCardPage.startInstance();
+  }
 }

packages/cpt_payment/lib/router/page/payment_page_router.dart

@@ -9,6 +9,11 @@ import '../../modules/payment/manage/manage_screen.dart';
 import '../../modules/payment/condo/active/condo_active_screen.dart';
 import '../../modules/payment/condo/history/condo_history_screen.dart';
 import '../../modules/payment/condo/payment/condo_payment_screen.dart';
+import '../../modules/payment_info/payment_info_page.dart';
+import '../../modules/payment_confirm/payment_confirm_page.dart';
+import '../../modules/payment_success/payment_success_page.dart';
+import '../../modules/add_card/add_card_page.dart';
+import '../../modules/choose_card/choose_card_page.dart';
 
 part 'payment_page_router.gr.dart';
 
@@ -31,5 +36,10 @@ class PaymentPageRouter extends _$PaymentPageRouter {
             AutoRoute(page: ManagePageRoute.page, path: 'manage'),
           ],
         ),
+        CustomRoute(page: PaymentInfoPageRoute.page, path: RouterPath.paymentInfo, transitionsBuilder: applySlideTransition),
+        CustomRoute(page: PaymentConfirmPageRoute.page, path: RouterPath.paymentConfirm, transitionsBuilder: applySlideTransition),
+        CustomRoute(page: PaymentSuccessPageRoute.page, path: RouterPath.paymentSuccess, transitionsBuilder: applySlideTransition),
+        CustomRoute(page: AddCardPageRoute.page, path: RouterPath.paymentAddCard, transitionsBuilder: applySlideTransition),
+        CustomRoute(page: ChooseCardPageRoute.page, path: RouterPath.paymentChooseCard, transitionsBuilder: applySlideTransition),
       ];
 }

packages/cpt_payment/lib/router/page/payment_page_router.gr.dart

@@ -15,6 +15,18 @@ abstract class _$PaymentPageRouter extends RootStackRouter {
 
   @override
   final Map<String, PageFactory> pagesMap = {
+    AddCardPageRoute.name: (routeData) {
+      return AutoRoutePage<dynamic>(
+        routeData: routeData,
+        child: const AddCardPage(),
+      );
+    },
+    ChooseCardPageRoute.name: (routeData) {
+      return AutoRoutePage<dynamic>(
+        routeData: routeData,
+        child: const ChooseCardPage(),
+      );
+    },
     CondoActivePageRoute.name: (routeData) {
       return AutoRoutePage<dynamic>(
         routeData: routeData,
@@ -45,16 +57,62 @@ abstract class _$PaymentPageRouter extends RootStackRouter {
         child: ManageScreen(),
       );
     },
+    PaymentConfirmPageRoute.name: (routeData) {
+      return AutoRoutePage<dynamic>(
+        routeData: routeData,
+        child: const PaymentConfirmPage(),
+      );
+    },
+    PaymentInfoPageRoute.name: (routeData) {
+      return AutoRoutePage<dynamic>(
+        routeData: routeData,
+        child: const PaymentInfoPage(),
+      );
+    },
     PaymentPageRoute.name: (routeData) {
       return AutoRoutePage<dynamic>(
         routeData: routeData,
         child: const PaymentPage(),
       );
     },
+    PaymentSuccessPageRoute.name: (routeData) {
+      return AutoRoutePage<dynamic>(
+        routeData: routeData,
+        child: const PaymentSuccessPage(),
+      );
+    },
   };
 }
 
 /// generated route for
+/// [AddCardPage]
+class AddCardPageRoute extends PageRouteInfo<void> {
+  const AddCardPageRoute({List<PageRouteInfo>? children})
+      : super(
+          AddCardPageRoute.name,
+          initialChildren: children,
+        );
+
+  static const String name = 'AddCardPageRoute';
+
+  static const PageInfo<void> page = PageInfo<void>(name);
+}
+
+/// generated route for
+/// [ChooseCardPage]
+class ChooseCardPageRoute extends PageRouteInfo<void> {
+  const ChooseCardPageRoute({List<PageRouteInfo>? children})
+      : super(
+          ChooseCardPageRoute.name,
+          initialChildren: children,
+        );
+
+  static const String name = 'ChooseCardPageRoute';
+
+  static const PageInfo<void> page = PageInfo<void>(name);
+}
+
+/// generated route for
 /// [CondoActiveScreen]
 class CondoActivePageRoute extends PageRouteInfo<void> {
   const CondoActivePageRoute({List<PageRouteInfo>? children})
@@ -125,6 +183,34 @@ class ManagePageRoute extends PageRouteInfo<void> {
 }
 
 /// generated route for
+/// [PaymentConfirmPage]
+class PaymentConfirmPageRoute extends PageRouteInfo<void> {
+  const PaymentConfirmPageRoute({List<PageRouteInfo>? children})
+      : super(
+          PaymentConfirmPageRoute.name,
+          initialChildren: children,
+        );
+
+  static const String name = 'PaymentConfirmPageRoute';
+
+  static const PageInfo<void> page = PageInfo<void>(name);
+}
+
+/// generated route for
+/// [PaymentInfoPage]
+class PaymentInfoPageRoute extends PageRouteInfo<void> {
+  const PaymentInfoPageRoute({List<PageRouteInfo>? children})
+      : super(
+          PaymentInfoPageRoute.name,
+          initialChildren: children,
+        );
+
+  static const String name = 'PaymentInfoPageRoute';
+
+  static const PageInfo<void> page = PageInfo<void>(name);
+}
+
+/// generated route for
 /// [PaymentPage]
 class PaymentPageRoute extends PageRouteInfo<void> {
   const PaymentPageRoute({List<PageRouteInfo>? children})
@@ -137,3 +223,17 @@ class PaymentPageRoute extends PageRouteInfo<void> {
 
   static const PageInfo<void> page = PageInfo<void>(name);
 }
+
+/// generated route for
+/// [PaymentSuccessPage]
+class PaymentSuccessPageRoute extends PageRouteInfo<void> {
+  const PaymentSuccessPageRoute({List<PageRouteInfo>? children})
+      : super(
+          PaymentSuccessPageRoute.name,
+          initialChildren: children,
+        );
+
+  static const String name = 'PaymentSuccessPageRoute';
+
+  static const PageInfo<void> page = PageInfo<void>(name);
+}

packages/cs_resources/lib/generated/assets.dart

@@ -122,15 +122,22 @@ class Assets {
   static const String noticeBoardAnnouncementIcon = 'assets/notice_board/announcement_icon.png';
   static const String noticeBoardDocumentsIcon = 'assets/notice_board/documents_icon.png';
   static const String noticeBoardEventIcon = 'assets/notice_board/event_icon.png';
+  static const String paymentAmericanExpressIcon = 'assets/payment/american_express_icon.webp';
+  static const String paymentCardName = 'assets/payment/card_name.webp';
+  static const String paymentCardNumber = 'assets/payment/card_number.webp';
   static const String paymentCondoIcon = 'assets/payment/condo_icon.webp';
   static const String paymentInfoBusiness = 'assets/payment/info_business.webp';
   static const String paymentInfoCardGroup = 'assets/payment/info_card_group.webp';
   static const String paymentInfoCashBack = 'assets/payment/info_cash_back.webp';
+  static const String paymentInfoDetails = 'assets/payment/info_details.webp';
   static const String paymentInfoIcon = 'assets/payment/info_icon.webp';
+  static const String paymentInfoNotes = 'assets/payment/info_notes.webp';
   static const String paymentInfoRewards = 'assets/payment/info_rewards.webp';
   static const String paymentInfoTopImage = 'assets/payment/info_top_image.webp';
   static const String paymentManageIcon = 'assets/payment/manage_icon.webp';
+  static const String paymentMasterCardIcon = 'assets/payment/master_card_icon.webp';
   static const String paymentTitleQuestionIcon = 'assets/payment/title_question_icon.webp';
+  static const String paymentVisaIcon = 'assets/payment/visa_icon.webp';
   static const String profileEditDialogDelete = 'assets/profile/edit_dialog_delete.webp';
   static const String profileEditDialogUpload = 'assets/profile/edit_dialog_upload.webp';
   static const String profileEditProfileAdd = 'assets/profile/edit_profile_add.webp';

packages/cs_router/lib/componentRouter/payment_service.dart

@@ -5,4 +5,8 @@ abstract class PaymentService {
 
   void startPaymentPage();
 
+  void startChooseCardPage();
+
+  void startAddCardPage();
+
 }

packages/cs_router/lib/path/router_path.dart

@@ -75,6 +75,11 @@ class RouterPath {
 
   //支付
   static const payment = '/payment';
+  static const paymentInfo = '/payment/info';
+  static const paymentConfirm = '/payment/confirm';
+  static const paymentSuccess = '/payment/success';
+  static const paymentAddCard = '/payment/add';
+  static const paymentChooseCard = '/payment/choose';
 
   //房屋资产
   static const property = '/property';