login_main_page.dart 9.7 KB
import 'package:appframe/bloc/login_main_cubit.dart';
import 'package:appframe/ui/widgets/login/login_page_agreed_widget.dart';
import 'package:appframe/ui/widgets/login/login_page_header_widget.dart';
import 'package:appframe/ui/widgets/login/login_page_image_widget.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';

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

  @override
  Widget build(BuildContext context) {
    return BlocProvider(
      create: (context) => LoginMainCubit(LoginMainState()),
      child: BlocConsumer<LoginMainCubit, LoginMainState>(builder: (context, state) {
        var loginMainCubit = context.read<LoginMainCubit>();
        return Scaffold(
          resizeToAvoidBottomInset: true,
          backgroundColor: Colors.white,
          body: SafeArea(
            top: false,
            child: SingleChildScrollView(
                child: Column(
              children: [
                LoginPageImageWidget(),
                Transform.translate(
                  offset: Offset(0, -40), // 向上移动40像素
                  child: Container(
                    decoration: BoxDecoration(
                      borderRadius: BorderRadius.vertical(top: Radius.circular(20)),
                      color: Colors.white, // 设置背景色
                    ),
                    padding: const EdgeInsets.symmetric(horizontal: 24.0),
                    child: Column(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        SizedBox(height: 30),
                        // _buildHeader(),
                        LoginPageHeaderWidget(),
                        SizedBox(height: 25),
                        _buildLoginButtons(context, loginMainCubit, state.agreed),
                        SizedBox(height: 20),
                        _buildAgreement(context, loginMainCubit, state.agreed),
                      ],
                    ),
                  ),
                ),
              ],
            )),
          ),
        );
      }, listener: (context, state) {
        if (state.showAgreed) {
          _showAgreementDialog(context, context.read<LoginMainCubit>());
        }
      }),
    );
  }

  Widget _buildHeader() {
    return Column(
      mainAxisAlignment: MainAxisAlignment.start,
      crossAxisAlignment: CrossAxisAlignment.start,
      children: [
        Text(
          '欢迎登录',
          style: TextStyle(
            fontSize: 25,
            fontWeight: FontWeight.bold,
            color: Colors.black87,
          ),
        ),
        SizedBox(height: 6),
        Text(
          '班小二,班级群必备效率工具',
          style: TextStyle(
            fontSize: 14,
            color: Colors.black87,
          ),
        ),
      ],
    );
  }

  Widget _buildLoginButtons(BuildContext context, LoginMainCubit loginMainCubit, bool agreed) {
    return Column(
      children: [
        SizedBox(
          width: double.infinity,
          height: 47,
          child: ElevatedButton(
            onPressed: () {
              loginMainCubit.wechatAuth();
            },
            style: ElevatedButton.styleFrom(
              backgroundColor: Color(0xFF00CB60),
              foregroundColor: Colors.white,
              textStyle: TextStyle(fontSize: 19),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(23.5),
              ),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Image.asset('assets/images/login/wechat_white_icon.png'),
                SizedBox(width: 6),
                Text('微信登录'),
              ],
            ),
          ),
        ),
        SizedBox(height: 15),
        SizedBox(
          width: double.infinity,
          height: 47,
          child: ElevatedButton(
            onPressed: () {
              loginMainCubit.goLoginPhone();
            },
            style: ElevatedButton.styleFrom(
              backgroundColor: Color(0xFF7691FA),
              foregroundColor: Colors.white,
              textStyle: TextStyle(fontSize: 19),
              shape: RoundedRectangleBorder(
                borderRadius: BorderRadius.circular(23.5),
              ),
            ),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.center,
              children: [
                Image.asset('assets/images/login/phone_white_icon.png'),
                // SizedBox(width: 8),
                Text('手机号登录'),
              ],
            ),
          ),
        ),
      ],
    );
  }

  Widget _buildAgreement(BuildContext context, LoginMainCubit loginMainCubit, bool agreed) {
    return Padding(
      padding: const EdgeInsets.only(bottom: 32.0),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        children: [
          Theme(
            data: Theme.of(context).copyWith(
              checkboxTheme: CheckboxThemeData(
                shape: CircleBorder(
                  side: BorderSide(width: 0.5, color: Color(0xFF999999)),
                ),
                fillColor: WidgetStateProperty.resolveWith<Color>(
                  (Set<WidgetState> states) {
                    if (states.contains(WidgetState.selected)) {
                      return Color(0xFF7691FA); // 选中时的颜色
                    }
                    return Colors.white; // 未选中时的颜色
                  },
                ),
                checkColor: WidgetStateProperty.all<Color>(Colors.white),
                side: BorderSide(width: 0.5, color: Color(0xFF999999)),
              ),
              cardColor: Colors.white,
              unselectedWidgetColor: Color(0xFF999999),
            ),
            child: Checkbox(
              value: agreed,
              onChanged: (bool? value) {
                loginMainCubit.toggleAgreed(value!);
              },
              materialTapTargetSize: MaterialTapTargetSize.shrinkWrap, // 缩小点击区域,减小间隔
            ),
          ),
          LoginPageAgreedWidget(),
        ],
      ),
    );
  }

  Future<void> _showAgreementDialog(BuildContext context, LoginMainCubit loginMainCubit) async {
    final result = await showDialog(
      context: context,
      barrierDismissible: false,
      builder: (BuildContext context) {
        return AlertDialog(
          shape: RoundedRectangleBorder(
            borderRadius: BorderRadius.all(
              Radius.circular(5),
            ),
          ),
          title: Text(
            '个人信息保护指引',
            style: TextStyle(
              fontSize: 17,
              color: Color(0xFF000000),
              // fontWeight: FontWeight.bold,
            ),
            textAlign: TextAlign.center,
          ),
          content: Text.rich(
            TextSpan(
              children: [
                TextSpan(
                  text: '感谢使用班小二APP,为保护您的个人权益,请仔细阅读并充分理解',
                  style: TextStyle(color: Color(0xFF666666), fontSize: 14),
                ),
                TextSpan(
                  text: '《班小二数据据安全和隐私政策》',
                  style: TextStyle(color: Color(0xFF7691FA), fontSize: 14),
                ),
                TextSpan(
                  text: '与',
                  style: TextStyle(color: Color(0xFF666666), fontSize: 14),
                ),
                TextSpan(
                  text: '《用户协议》',
                  style: TextStyle(color: Color(0xFF7691FA), fontSize: 14),
                ),
                TextSpan(
                  text: '。如您同意上述文件的全部内容,请点击“同意”以继续。',
                  style: TextStyle(color: Color(0xFF666666), fontSize: 14),
                ),
              ],
            ),
          ),
          actions: [
            Table(
              children: [
                TableRow(
                  children: [
                    TableCell(
                      child: TextButton(
                        onPressed: () {
                          Navigator.of(context).pop();
                        },
                        style: TextButton.styleFrom(
                          foregroundColor: Color(0xFF666666),
                          textStyle: TextStyle(fontSize: 17),
                          padding: EdgeInsets.zero,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.zero,
                          ),
                        ),
                        child: Text('放弃登录'),
                      ),
                    ),
                    TableCell(
                      child: TextButton(
                        onPressed: () {
                          Navigator.of(context).pop('OK');
                        },
                        style: TextButton.styleFrom(
                          foregroundColor: Color(0xFF7691FA),
                          textStyle: TextStyle(fontSize: 17),
                          minimumSize: Size.fromHeight(40),
                          padding: EdgeInsets.zero,
                          shape: RoundedRectangleBorder(
                            borderRadius: BorderRadius.zero,
                          ),
                        ),
                        child: Text('同意'),
                      ),
                    ),
                  ],
                ),
              ],
            ),
          ],
        );
      },
    );
    if (result != null) {
      loginMainCubit.confirmAgreed();
    } else {
      loginMainCubit.cancelAgreed();
    }
  }
}