Skip to content

ethan / appframe

Go to a project
Toggle navigation
Toggle navigation pinning
Commit f8e3a816 by tanghuan
Options

增加登录UI，以及其它优化完善

1 parent 22b6cd9c
Expand all
Inline Side-by-side
Showing 36 changed files with 632 additions and 33 deletions
lib/bloc/login_main_cubit.dart 0 → 100644
import 'package:appframe/config/constant.dart';
import 'package:appframe/config/routes.dart';
import 'package:appframe/data/repositories/wechat_auth_repository.dart';
import 'package:equatable/equatable.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
import 'package:fluwx/fluwx.dart';
import 'package:shared_preferences/shared_preferences.dart';
import '../config/locator.dart';
class LoginMainState extends Equatable {
final bool agreed;
final bool showAgreed;
const LoginMainState({this.agreed = false, this.showAgreed = false});
@override
List<Object?> get props => [agreed, showAgreed];
LoginMainState copyWith({
bool? agreed,
bool? showAgreed,
}) {
return LoginMainState(
agreed: agreed ?? this.agreed,
showAgreed: showAgreed ?? this.showAgreed,
);
}
}
class LoginMainCubit extends Cubit<LoginMainState> {
late final Fluwx _fluwx;
late final WechatAuthRepository _wechatAuthRepository;
LoginMainCubit(super.initialState) {
_fluwx = getIt.get<Fluwx>();
_fluwx.addSubscriber(_responseListener);
_wechatAuthRepository = getIt<WechatAuthRepository>();
}
void toggleAgreed(bool value) {
emit(state.copyWith(agreed: value));
}
void confirmAgreed() {
emit(state.copyWith(agreed: true, showAgreed: false));
}
void cancelAgreed() {
emit(state.copyWith(showAgreed: false));
}
void wechatAuth() async {
if (!state.agreed) {
emit(state.copyWith(showAgreed: true));
return;
}
var result = await _fluwx.authBy(
which: NormalAuth(scope: 'snsapi_userinfo', state: 'wechat_sdk_test'),
);
if (!result) {
throw Exception('微信授权处理失败');
}
}
void goLoginPhone() {
router.go('/loginPhone');
}
void _responseListener(WeChatResponse response) async {
if (response is WeChatAuthResponse) {
dynamic resultData = await _wechatAuthRepository.codeToSk(response.code!);
var data = resultData['data'];
var role = data['roles'][0];
final sessionCode = data['sessionCode'];
final userCode = data['userCode'];
final classCode = role['classCode'];
final userType = role['userType'];
final stuId = role['stuId'];
var sharedPreferences = getIt.get<SharedPreferences>();
sharedPreferences.setString('auth_sessionCode', sessionCode);
sharedPreferences.setString('auth_userCode', userCode);
sharedPreferences.setString('auth_classCode', classCode);
sharedPreferences.setInt('auth_userType', userType);
sharedPreferences.setString('auth_stuId', stuId ?? '');
sharedPreferences.setString('auth_ip', Constant.h5Server);
router.go(
'/web',
extra: {
'ip': Constant.h5Server,
'sessionCode': sessionCode,
'userCode': userCode,
'classCode': classCode,
'userType': userType,
'stuId': stuId,
},
);
}
}
}
lib/bloc/login_phone_cubit.dart 0 → 100644
import 'dart:async';
import 'package:appframe/config/routes.dart';
import 'package:equatable/equatable.dart';
import 'package:flutter/material.dart';
import 'package:flutter_bloc/flutter_bloc.dart';
class LoginPhoneState extends Equatable {
final bool agreed;
final bool showAgreed;
final String phone;
final String password;
final bool allowSend;
final int seconds;
const LoginPhoneState(
{this.agreed = false,
this.showAgreed = false,
this.phone = '',
this.password = '',
this.allowSend = true,
this.seconds = 0});
LoginPhoneState copyWith({
bool? agreed,
bool? showAgreed,
String? phone,
String? password,
bool? allowSend,
int? seconds,
}) {
return LoginPhoneState(
agreed: agreed ?? this.agreed,
showAgreed: showAgreed ?? this.showAgreed,
phone: phone ?? this.phone,
password: password ?? this.password,
allowSend: allowSend ?? this.allowSend,
seconds: seconds ?? this.seconds,
);
}
@override
List<Object?> get props => [phone, password, agreed, showAgreed, allowSend, seconds];
}
class LoginPhoneCubit extends Cubit<LoginPhoneState> {
late TextEditingController _phoneController;
late TextEditingController _codeController;
Timer? _timer;
int countdown = 60; // 倒计时秒数
TextEditingController get phoneController => _phoneController;
TextEditingController get codeController => _codeController;
LoginPhoneCubit(super.initialState) {
_phoneController = TextEditingController();
_codeController = TextEditingController();
_phoneController.text = state.phone;
_codeController.text = state.password;
}
/// 开始倒计时
void startCountdown() {
countdown = 60;
emit(state.copyWith(allowSend: false, seconds: countdown));
_timer = Timer.periodic(Duration(seconds: 1), (timer) {
countdown--;
if (countdown <= 0) {
_timer?.cancel();
emit(state.copyWith(allowSend: true, seconds: 60));
} else {
emit(state.copyWith(seconds: countdown));
}
});
}
/// 发送验证码
void sendVerificationCode() {
if (state.allowSend) {
// 实际发送验证码的逻辑
startCountdown(); // 开始倒计时
}
}
void toggleAgreed(bool value) {
emit(state.copyWith(agreed: value));
}
void goLoginMain() {
router.go('/loginMain');
}
@override
Future<void> close() async {
try {
_phoneController.dispose();
} catch (e) {
print(e);
}
try {
_codeController.dispose();
} catch (e) {
print(e);
}
await super.close();
}
}
lib/bloc/web_cubit.dart
...@@ -141,30 +141,30 @@ class WebState extends Equatable { ...@@ -141,30 +141,30 @@ class WebState extends Equatable {
@override @override
List<Object?> get props => [ List<Object?> get props => [
loaded, loaded,
title, title,
beBack, beBack,
ip, ip,
sessionCode, sessionCode,
userCode, userCode,
classCode, classCode,
userType, userType,
stuId, stuId,
recorderIsInit, recorderIsInit,
recordState, recordState,
recordPath, recordPath,
playerIsInit, playerIsInit,
playState, playState,
playId, playId,
orientationCmdFlag, orientationCmdFlag,
orientationCmdMessage, orientationCmdMessage,
windowInfoCmdFlag, windowInfoCmdFlag,
windowInfoCmdMessage, windowInfoCmdMessage,
chooseImageCmdFlag, chooseImageCmdFlag,
chooseImageCmdMessage, chooseImageCmdMessage,
chooseVideoCmdFlag, chooseVideoCmdFlag,
chooseVideoCmdMessage, chooseVideoCmdMessage,
]; ];
} }
class WebCubit extends Cubit<WebState> { class WebCubit extends Cubit<WebState> {
...@@ -197,17 +197,21 @@ class WebCubit extends Cubit<WebState> { ...@@ -197,17 +197,21 @@ class WebCubit extends Cubit<WebState> {
// closeLocalPlayer(); // closeLocalPlayer();
}, },
onPageFinished: (String url) async { onPageFinished: (String url) async {
_controller.runJavaScript( print('onPageFinished--------------------------------->');
'document.querySelector("meta[name=viewport]").setAttribute("content", "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no")', print(url);
);
finishLoading(); if (url == '${Constant.localServerTestFileUrl}/login.html') {
return;
}
// 页面加载完成时，清空录音和音频（如果有打开过） // 页面加载完成时，清空录音和音频（如果有打开过）
await clearRecording(); await clearRecording();
await clearAudio(); await clearAudio();
print('onPageFinished--------------------------------->'); _controller.runJavaScript(
print(url); 'document.querySelector("meta[name=viewport]").setAttribute("content", "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no")',
);
finishLoading();
}, },
), ),
) )
...@@ -267,6 +271,10 @@ class WebCubit extends Cubit<WebState> { ...@@ -267,6 +271,10 @@ class WebCubit extends Cubit<WebState> {
router.go('/wechatAuth'); router.go('/wechatAuth');
} }
void goLogin() {
router.go('/loginMain');
}
//测试 //测试
void goAuth() { void goAuth() {
// String serverUrl = 'http://${state.ip}:${_server.port}/index.html'; // String serverUrl = 'http://${state.ip}:${_server.port}/index.html';
......
lib/config/constant.dart
...@@ -12,7 +12,7 @@ class Constant { ...@@ -12,7 +12,7 @@ class Constant {
static const int obsUploadChunkSize = 1024 * 1024 * 5; static const int obsUploadChunkSize = 1024 * 1024 * 5;
/// 测试阶段使用的 h5 服务地址 /// 测试阶段使用的 h5 服务地址
static const String h5Server = 'appdev-xj.banxiaoer.net'; // static const String h5Server = 'appdev-xj.banxiaoer.net';
// static const String h5Server = 'appdev-th.banxiaoer.net'; static const String h5Server = 'appdev-th.banxiaoer.net';
// static const String h5Server = '192.168.1.136'; // static const String h5Server = '192.168.1.136';
} }
lib/config/routes.dart
import 'package:appframe/ui/pages/link_page.dart'; import 'package:appframe/ui/pages/link_page.dart';
import 'package:appframe/ui/pages/login_main_page.dart';
import 'package:appframe/ui/pages/login_phone_page.dart';
import 'package:appframe/ui/pages/scan_code_page.dart'; import 'package:appframe/ui/pages/scan_code_page.dart';
import 'package:appframe/ui/pages/web_page.dart'; import 'package:appframe/ui/pages/web_page.dart';
import 'package:appframe/ui/pages/wechat_auth_page.dart'; import 'package:appframe/ui/pages/wechat_auth_page.dart';
...@@ -32,5 +34,17 @@ final GoRouter router = GoRouter( ...@@ -32,5 +34,17 @@ final GoRouter router = GoRouter(
return const LinkPage(); return const LinkPage();
}, },
), ),
GoRoute(
path: '/loginMain',
builder: (BuildContext context, GoRouterState state) {
return const LoginMainPage();
},
),
GoRoute(
path: '/loginPhone',
builder: (BuildContext context, GoRouterState state) {
return const LoginPhonePage();
},
),
], ],
); );
lib/data/repositories/message/go_login_handler.dart
...@@ -15,7 +15,7 @@ class GoLoginHandler extends MessageHandler { ...@@ -15,7 +15,7 @@ class GoLoginHandler extends MessageHandler {
@override @override
Future<dynamic> handleMessage(params) async { Future<dynamic> handleMessage(params) async {
_webCubit!.goWechatAuth(); _webCubit!.goLogin();
return; return;
} }
} }
lib/ui/pages/login_main_page.dart 0 → 100644
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();
}
}
}
lib/ui/widgets/login/login_page_agreed_widget.dart 0 → 100644
import 'package:flutter/material.dart';
class LoginPageAgreedWidget extends StatelessWidget {
const LoginPageAgreedWidget({super.key});
@override
Widget build(BuildContext context) {
return Text.rich(
TextSpan(
children: [
TextSpan(
text: '同意',
style: TextStyle(color: Color(0xFF999999), fontSize: 14),
),
TextSpan(
text: '《隐私保障》',
style: TextStyle(color: Color(0xFF7691FA), fontSize: 14),
),
TextSpan(
text: '和',
style: TextStyle(color: Color(0xFF999999), fontSize: 14),
),
TextSpan(
text: '《用户协议》',
style: TextStyle(color: Color(0xFF7691FA), fontSize: 14),
),
],
),
);
}
}
lib/ui/widgets/login/login_page_header_widget.dart 0 → 100644
import 'package:flutter/material.dart';
class LoginPageHeaderWidget extends StatelessWidget {
const LoginPageHeaderWidget({super.key});
@override
Widget build(BuildContext context) {
return Column(
mainAxisAlignment: MainAxisAlignment.start,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
'欢迎登录',
style: TextStyle(
fontSize: 25,
fontWeight: FontWeight.bold,
color: Color(0xFF000000),
),
),
SizedBox(height: 6),
Text(
'班小二，班级群必备效率工具',
style: TextStyle(
fontSize: 14,
color: Color(0xFF000000),
),
),
],
);
}
}
lib/ui/widgets/login/login_page_image_widget.dart 0 → 100644
import 'package:flutter/material.dart';
class LoginPageImageWidget extends StatelessWidget {
const LoginPageImageWidget({super.key});
@override
Widget build(BuildContext context) {
return Image.asset(
'assets/images/login/login_bg.png',
width: double.infinity,
fit: BoxFit.cover,
);
}
}
pubspec.yaml
...@@ -113,6 +113,7 @@ flutter: ...@@ -113,6 +113,7 @@ flutter:
assets: assets:
- assets/ - assets/
- assets/dist.zip - assets/dist.zip
- assets/images/login/
# An image asset can refer to one or more resolution-specific "variants", see # An image asset can refer to one or more resolution-specific "variants", see
# https://flutter.dev/to/resolution-aware-images # https://flutter.dev/to/resolution-aware-images
......
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!