YYHome/packages/cpt_payment/lib/modules/payment/payment_page.dart

import 'package:cpt_payment/modules/payment/payment_view_model.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:cs_resources/theme/theme_config.dart';
import 'package:flutter/material.dart';
import 'package:auto_route/auto_route.dart';
import 'package:flutter/services.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:shared/utils/log_utils.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';

@RoutePage()
class PaymentPage extends HookConsumerWidget {
  const PaymentPage({Key? key}) : super(key: key);

  //启动当前页面
  static void startInstance({BuildContext? context}) {
    if (context != null) {
      context.router.push(const PaymentPageRoute());
    } else {
      appRouter.push(const PaymentPageRoute());
    }
  }

  @override
  Widget build(BuildContext context, WidgetRef ref) {
    final viewModel = ref.watch(paymentViewModelProvider.notifier);
    int selectedInnerIndex = 1; // 1-3索引记录当前的值

    return Scaffold(
      appBar: MyAppBar.appBar(
        context,
        S.current.payment,
        backgroundColor: context.appColors.whiteBG,
      ),
      backgroundColor: context.appColors.backgroundDark,
      body: AutoTabsRouter.pageView(
        routes: const [
          InfoPageRoute(),
          CondoPaymentPageRoute(),
          CondoActivePageRoute(),
          CondoHistoryPageRoute(),
          ManagePageRoute(),
        ],
        builder: (context, child, pageController) {
          final tabsRouter = AutoTabsRouter.of(context);

          pageController.addListener(() {
            //监听赋值内部的选中索引
            if (tabsRouter.activeIndex >= 1 && tabsRouter.activeIndex <= 3) {
              selectedInnerIndex = tabsRouter.activeIndex;
            }
          });

          return Column(
            children: [
              Container(
                color: context.appColors.whiteBG,
                height: 120,
                child: Row(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  children: [
                    _buildTopCategory(
                      context,
                      Assets.paymentInfoIcon,
                      34,
                      41,
                      "Info",
                      tabsRouter.activeIndex == 0,
                    ).onTap(
                      () {
                        tabsRouter.setActiveIndex(0);
                      },
                    ),
                    _buildTopCategory(
                      context,
                      Assets.paymentCondoIcon,
                      48,
                      43,
                      "Condo",
                      tabsRouter.activeIndex == 1 || tabsRouter.activeIndex == 2 || tabsRouter.activeIndex == 3,
                    ).onTap(
                      () {
                        tabsRouter.setActiveIndex(selectedInnerIndex);
                      },
                    ),
                    _buildTopCategory(
                      context,
                      Assets.paymentManageIcon,
                      52,
                      46.5,
                      "Manage",
                      tabsRouter.activeIndex == 4,
                    ).onTap(
                      () {
                        tabsRouter.setActiveIndex(4);
                      },
                    ),
                  ],
                ),
              ),
              Expanded(
                child: Stack(
                  children: [
                    //真正页面
                    child,

                    //顶部的子Tab
                    Visibility(
                      visible: tabsRouter.activeIndex >= 1 && tabsRouter.activeIndex <= 3,
                      child: Row(
                        mainAxisAlignment: MainAxisAlignment.spaceAround,
                        children: [
                          _buildInnerTab(
                            context,
                            S.current.payment,
                            tabsRouter.activeIndex == 1,
                          ).onTap(() {
                            tabsRouter.setActiveIndex(1);
                          }),
                          _buildInnerTab(
                            context,
                            S.current.facility_active,
                            tabsRouter.activeIndex == 2,
                          ).onTap(() {
                            tabsRouter.setActiveIndex(2);
                          }),
                          _buildInnerTab(
                            context,
                            S.current.history,
                            tabsRouter.activeIndex == 3,
                          ).onTap(() {
                            tabsRouter.setActiveIndex(3);
                          }),
                        ],
                      ).marginOnly(top: 14, bottom: 17),
                    ),
                  ],
                ),
              ),
            ],
          );
        },
      ),
    );
  }

  //顶部的Tab布局
  Widget _buildTopCategory(BuildContext context, String iconPath, double iconWidth, double iconHeight, String title, bool isSelected) {
    return Column(
      mainAxisAlignment: MainAxisAlignment.center,
      crossAxisAlignment: CrossAxisAlignment.center,
      children: <Widget>[
        Container(
          width: 70,
          height: 70,
          decoration: BoxDecoration(
            color: context.appColors.lightBlueBg, // 设置圆形背景颜色
            shape: BoxShape.circle, // 设置为圆形
            boxShadow: isSelected
                ? [
                    BoxShadow(
                      color: context.appColors.tabLightBlueShadow, // 设置阴影颜色
                      blurRadius: 5, // 设置模糊半径
                      spreadRadius: 0.05, // 控制阴影扩散
                      offset: const Offset(0, 4), // 设置阴影偏移量
                    ),
                  ]
                : [], // 未选中时无阴影,
          ),
          child: Center(
            child: MyAssetImage(iconPath, width: iconWidth, height: iconHeight),
          ),
        ),
        const SizedBox(height: 7),
        MyTextView(
          title,
          fontSize: 15,
          isFontMedium: true,
          textColor: isSelected ? context.appColors.tabTextSelectedDefault : context.appColors.tabTextUnSelectedDefault,
        ),
      ],
    );
  }

  //内部的Tab布局
  Widget _buildInnerTab(BuildContext context, String title, bool isSelected) {
    return MyTextView(
      title,
      fontSize: 16,
      isFontMedium: true,
      textColor: isSelected ? Colors.white : context.appColors.tabTextUnSelectedDefault,
      backgroundColor: isSelected ? context.appColors.btnBgDefault : Colors.transparent,
      cornerRadius: 16.5,
      paddingLeft: 20,
      paddingRight: 20,
      paddingTop: 8,
      paddingBottom: 8,
    );
  }
}