liangchengyou / wow_english

  import 'package:flutter/gestures.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/extension/string_extension.dart';

  import 'package:wow_english/common/widgets/textfield_customer_widget.dart';
  import 'package:wow_english/login/loginpage/bloc/login_bloc.dart';

  import 'package:wow_english/route/route.dart';

  class LoginPage extends StatelessWidget {

    const LoginPage({super.key});

  
    @override
    Widget build(BuildContext context) {

      return BlocProvider(
        create: (context) => LoginBloc(),
        child: _buildLoginViewWidget(),
      );
    }
  
    Widget _buildLoginViewWidget() => BlocBuilder<LoginBloc,LoginState> (
      builder: (context, state) {
        final bloc = BlocProvider.of<LoginBloc>(context);
        return Scaffold(

          body: SafeArea(
            child: ListView(

              children: [

                Container(
                  padding: EdgeInsets.only(top: 25.h),
                  child: Stack(
                    children: [
                      Positioned(
                          right: 29.w,
                          child: GestureDetector(
                            onTap: () => bloc.add(ChangeLoginTypeEvent()),
                            child: Container(
                              decoration: BoxDecoration(
                                image: DecorationImage(
                                    image: AssetImage(
                                        'login_logo'.assetPng
                                    ),
                                    fit: BoxFit.fill
                                ),
                              ),
                              padding: const EdgeInsets.symmetric(horizontal: 18.0),
                              child:  Text(
                                  bloc.loginType == LoginType.sms?'密码登陆':'验证码密码'
                              ),
                            ),
                          )
                      ),
                      Center(
                        child: Column(
                          children: [
                            Image.asset(
                              'wow_logo'.assetPng,
                              height: 81.h,

                              width: 131.w,
                            ),

                            Offstage(
                              offstage: bloc.loginType == LoginType.pwd,
                              child: _buildSmsViewWidget(),
                            ),
                            Offstage(
                              offstage: bloc.loginType == LoginType.sms,
                              child: _buildPwdViewWidget(),
                            ),

                            Row(
                              mainAxisAlignment: MainAxisAlignment.center,
                              children: [
                                GestureDetector(
                                  onTap: () => bloc.add(AgreementChangeEvent()),
                                  child: Icon(
                                      bloc.agreement ? Icons.check_circle_outlined:Icons.circle_outlined,
                                      color:bloc.agreement ? Colors.green:Colors.black),
                                ),
                                6.horizontalSpace,

                                RichText(
                                  text: TextSpan(
                                      children:[
                                        const TextSpan(
                                            text: '我已阅读并同意',
                                            style: TextStyle(
                                              fontSize: 12,
                                              color: Color(0xFF333333),
                                            )
                                        ),
                                        TextSpan(
                                            text: '《用户隐私协议》',
                                            style: const TextStyle(
                                              fontSize: 12,
                                              color: Color(0xFF333333),
                                            ),
                                            recognizer: TapGestureRecognizer()..onTap = (){
                                              Navigator.of(context).pushNamed(
                                                  AppRouteName.webView,
                                                  arguments: {
                                                    'urlStr':'https://www.zhihu.com',
                                                    'webViewTitle':'用户隐私协议'
                                                  });
                                            }),
                                        const TextSpan(
                                            text: '，',
                                            style: TextStyle(
                                                fontSize: 12,
                                                color: Color(0xFF333333)
                                            )
                                        ),
                                        TextSpan(
                                            text: '《儿童隐私政策》',
                                            style: const TextStyle(
                                                fontSize: 12,
                                                color: Color(0xFF333333)
                                            ),
                                            recognizer: TapGestureRecognizer()..onTap = (){
                                              Navigator.of(context).pushNamed(
                                                  AppRouteName.webView,
                                                  arguments: {
                                                    'urlStr':'https://www.zhihu.com',
                                                    'webViewTitle':'儿童隐私协议'
                                                  });
                                            })
                                      ]
                                  ),
                                )

                              ],
                            ),

                            GestureDetector(

                              onTap: () {
                                if (bloc.canLogin) {
                                  bloc.add(RequestLoginEvent());
                                }
                              },

                              child: Container(
                                decoration: BoxDecoration(
                                  image: DecorationImage(
                                      image: AssetImage(
                                          bloc.canLogin?'login_enter'.assetPng:'login_enter_dis'.assetPng
                                      ),
                                      fit: BoxFit.fill
                                  ),
                                ),
                                padding: const EdgeInsets.symmetric(

                                    horizontal: 28.0,
                                    vertical: 14.0

                                ),
                                child:  const Text(
                                    '登录'
                                ),
                              ),
                            )
                          ],
                        ),
                      )
                    ],

                  ),
                )
              ],
            ),
          ),
        );
      },
    );

  
    Widget _buildSmsViewWidget()=> BlocBuilder<LoginBloc,LoginState>(
        builder: (context,state){
          final bloc = BlocProvider.of<LoginBloc>(context);

          return Padding(

            padding: EdgeInsets.symmetric(horizontal: 135.w),

            child: Column(
              children: [
                15.verticalSpace,

                TextFieldCustomerWidget(

                  height: 55.h,
                  hitText: '请输入手机号',
                  textInputType: TextInputType.phone,
                  bgImageName: 'Input_layer_up',
                  onChangeValue: (String value) {
                    bloc.add(PhoneNumChangeEvent());
                  },
                  controller: bloc.phoneNumController,

                ),
                6.5.verticalSpace,
                const Text('未注册用户登录默认注册'),
                4.5.verticalSpace,
                Row(

                  mainAxisAlignment: MainAxisAlignment.spaceBetween,
                  children: [

                    Expanded(

                        child: TextFieldCustomerWidget(
                          height: 50.h,
                          hitText: '请输入验证码',
                          textInputType: TextInputType.number,
                          bgImageName: 'Input_layer_down',
                          onChangeValue: (String value) {
                            bloc.add(CheckFieldChangeEvent());
                          },
                          controller: bloc.checkNumController,
                        )

                    ),
                    GestureDetector(
                      onTap: () {
                        if (bloc.canSendSms) {

                          bloc.add(CountDownEvent());

                        }
                      },
                      child: Container(
                        decoration: BoxDecoration(
                          image: DecorationImage(
                              image: AssetImage(
                                  bloc.canSendSms?'securitycode'.assetPng:'securitycode_dis'.assetPng
                              ),
                              fit: BoxFit.fill
                          ),
                        ),
                        padding: const EdgeInsets.symmetric(horizontal:12.0,vertical: 15.0),

                        child:  Text(
                            !bloc.sendSmsIng  ? '获取验证码':'${bloc.countDown}s后在次获取'

                        ),
                      ),
                    )
                  ],

                )
              ],
            ),

          );
        });
  
    Widget _buildPwdViewWidget()=> BlocBuilder<LoginBloc,LoginState>(
        builder: (context,state){
          final bloc = BlocProvider.of<LoginBloc>(context);

          return Padding(
            padding: EdgeInsets.symmetric(horizontal: 90.w),
            child: Column(
              children: [
                15.verticalSpace,
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Image.asset(
                      'phone'.assetPng,
                      height: 45.h,
                      width: 35.w,
                    ),
                    10.5.horizontalSpace,
                    Expanded(

                        child: TextFieldCustomerWidget(

                          height: 50.h,
                          hitText: '请输入手机号',
                          textInputType: TextInputType.phone,
                          bgImageName: 'Input_layer_up',
                          onChangeValue: (String value) {
                            bloc.add(PhoneNumChangeEvent());
                          },
                          controller: bloc.phoneNumController,
                        )
                    ),

                    5.horizontalSpace,
                    SizedBox(
                      width: 100.w,
                      height: 55.h,
                    )
                  ],
                ),
                12.verticalSpace,
                Row(
                  mainAxisAlignment: MainAxisAlignment.center,
                  children: [
                    Image.asset(
                      'lock'.assetPng,
                      height: 34.h,
                      width: 31.w,
                    ),
                    10.5.horizontalSpace,
                    Expanded(

                        child: TextFieldCustomerWidget(
                          hitText: '请输入密码',
                          bgImageName: 'Input_layer_down',
                          onChangeValue: (String value) {
                            bloc.add(CheckFieldChangeEvent());
                          },
                          controller: bloc.checkNumController,
                        )

                    ),
                    5.horizontalSpace,
                    GestureDetector(

                      onTap: () {

                        Navigator.of(context).pushNamed(AppRouteName.fogPwd);

                      },

                      child: Container(
                        width: 100.w,
                        height: 55.h,
                        alignment: Alignment.centerLeft,
                        child: const Text(
                            '忘记密码 ?'

                        ),

                      ),

                    )
                  ],
                )
              ],
            ),

          );
        });

  }