time_widget.dart 4.21 KB
import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';
import 'package:wow_english/common/blocs/timerbloc/timer_bloc.dart';
import 'package:wow_english/common/extension/string_extension.dart';
import 'package:wow_english/common/widgets/timer_ticker.dart';
import 'package:wow_english/pages/login/forgetpwd/bloc/forget_pwd_home_bloc.dart';
import 'package:wow_english/pages/login/loginpage/bloc/login_bloc.dart';

class TimerWidget extends StatelessWidget {
  const TimerWidget({super.key, required this.canSendSms,this.sendSmsEvent,this.pageType = 0});

  final int pageType;
  final bool canSendSms;
  final Function()? sendSmsEvent;

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (_) => TimerBloc(ticker: const TimerTicker()),
      child: TimerWidgetView(
        pageType: pageType,
        canSendSms: canSendSms,
        sendSmsEvent: sendSmsEvent,
      ),
    );
  }
}

class TimerWidgetView extends StatelessWidget {
  final bool canSendSms;
  final int pageType;
  final Function()? sendSmsEvent;
  const TimerWidgetView({super.key, required this.canSendSms,this.sendSmsEvent,this.pageType = 0});

  @override
  Widget build(BuildContext context) {
    return MultiBlocListener(
      listeners: [
        if(pageType == 0) ...[//登陆
          BlocListener<TimerBloc,TimerState>(
              listener: (context, s) {
                if (s is FinishedState) {
                  ///重置计时器
                  context.read<TimerBloc>().add(ResetEvent());
                }
              }),
          BlocListener<LoginBloc,LoginState>(
              listener: (context, s) {
                if (s is SmsCodeRequestState) {
                  final bloc = BlocProvider.of<TimerBloc>(context);
                  ///开始倒计时
                  bloc.add(StartEvent(duration: bloc.state.duration));
                }
              }),
        ] else if (pageType == 1) ...[//忘记密码
          BlocListener<TimerBloc,TimerState>(
              listener: (context, s) {
                if (s is FinishedState) {
                  ///重置计时器
                  context.read<TimerBloc>().add(ResetEvent());
                }
              }),
          BlocListener<ForgetPwdHomeBloc,ForgetPwdHomeState>(
              listener: (context, s) {
                if (s is SendSmsCodeState) {
                  final bloc = BlocProvider.of<TimerBloc>(context);
                  ///开始倒计时
                  bloc.add(StartEvent(duration: bloc.state.duration));
                }
              }),
        ]
      ],
      child: _buildCountdownWidget(),
    );
  }

  Widget _buildCountdownWidget() => BlocBuilder<TimerBloc,TimerState>(
    buildWhen: (prev, state) => prev.runtimeType != state.runtimeType,
    builder: (context,state) {
      final bloc = BlocProvider.of<TimerBloc>(context);
      return GestureDetector(
        onTap: () {
          if (canSendSms && !bloc.isCountTimer ) {
            sendSmsEvent?.call();
          }
        },
        child: Container(
          decoration: BoxDecoration(
            image: DecorationImage(
                image: AssetImage(
                    canSendSms && !bloc.isCountTimer ? 'securitycode'.assetPng:'securitycode_dis'.assetPng
                ),
                fit: BoxFit.fill
            ),
          ),
          padding: EdgeInsets.symmetric(horizontal:12.w,vertical: 15.h),
          child: Row(
            children: [
              if (state is RunningState)...[
                const TimerText()
              ] else ...[
                Text('获取验证码',
                  style: TextStyle(
                      fontSize: 12.sp
                  ),)
              ]
            ],
          ),
        ),
      );
    },
  );
}

class TimerText extends StatelessWidget {
  const TimerText({super.key});

  @override
  Widget build(BuildContext context) {
    final duration = context.select((TimerBloc bloc) => bloc.state.duration);
    final secondsStr = duration.toString().padLeft(2, '0');
    return Text(
      '${secondsStr}s后再次获取',
      style: TextStyle(
        fontSize: 12.sp
      ),
    );
  }
}