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 723 additions and 38 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
......@@ -197,17 +197,21 @@ class WebCubit extends Cubit<WebState> {
// closeLocalPlayer();
},
onPageFinished: (String url) async {
_controller.runJavaScript(
'document.querySelector("meta[name=viewport]").setAttribute("content", "width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no")',
);
finishLoading();
print('onPageFinished--------------------------------->');
print(url);
if (url == '${Constant.localServerTestFileUrl}/login.html') {
return;
}
// 页面加载完成时，清空录音和音频（如果有打开过）
await clearRecording();
await clearAudio();
print('onPageFinished--------------------------------->');
print(url);
_controller.runJavaScript(
'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> {
router.go('/wechatAuth');
}
void goLogin() {
router.go('/loginMain');
}
//测试
void goAuth() {
// String serverUrl = 'http://${state.ip}:${_server.port}/index.html';
......
lib/config/constant.dart
......@@ -12,7 +12,7 @@ class Constant {
static const int obsUploadChunkSize = 1024 * 1024 * 5;
/// 测试阶段使用的 h5 服务地址
static const String h5Server = 'appdev-xj.banxiaoer.net';
// static const String h5Server = 'appdev-th.banxiaoer.net';
// static const String h5Server = 'appdev-xj.banxiaoer.net';
static const String h5Server = 'appdev-th.banxiaoer.net';
// 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/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/web_page.dart';
import 'package:appframe/ui/pages/wechat_auth_page.dart';
......@@ -32,5 +34,17 @@ final GoRouter router = GoRouter(
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 {
@override
Future<dynamic> handleMessage(params) async {
_webCubit!.goWechatAuth();
_webCubit!.goLogin();
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/pages/web_page.dart
......@@ -62,24 +62,104 @@ class WebPage extends StatelessWidget {
},
)
: null,
actions: [
Builder(
builder: (BuildContext context) {
return IconButton(
icon: const Icon(Icons.more_vert),
onPressed: () {
showModalBottomSheet(
context: context,
builder: (BuildContext context) {
return SizedBox(
height: 300,
child: Column(
children: [
// actions: [
// Builder(
// builder: (BuildContext context) {
// return IconButton(
// icon: const Icon(Icons.more_vert),
// onPressed: () {
// showModalBottomSheet(
// context: context,
// builder: (BuildContext context) {
// return SizedBox(
// height: 300,
// child: Column(
// children: [
// ListTile(
// leading: const Icon(Icons.chat_outlined),
// title: const Text('微信授权'),
// onTap: () {
// Navigator.pop(context);
// ctx.read<WebCubit>().goWechatAuth();
// },
// ),
// ListTile(
// leading: const Icon(Icons.accessibility_new),
// title: const Text('身份认证'),
// onTap: () {
// Navigator.pop(context);
// ctx.read<WebCubit>().goAuth();
// },
// ),
// ListTile(
// leading: const Icon(Icons.app_blocking_sharp),
// title: const Text('打开小程序'),
// onTap: () {
// Navigator.pop(context);
// ctx.read<WebCubit>().goMiniProgram();
// },
// ),
// ListTile(
// leading: const Icon(Icons.refresh),
// title: const Text('刷新'),
// onTap: () {
// Navigator.pop(context);
// ctx.read<WebCubit>().refresh();
// },
// ),
// ListTile(
// leading: const Icon(Icons.cleaning_services),
// title: const Text('清理缓存'),
// onTap: () {
// Navigator.pop(context);
// ctx.read<WebCubit>().clearStorage();
// },
// ),
// ],
// ),
// );
// },
// );
// },
// );
// },
// ),
// ],
),
endDrawer: Drawer(
width: MediaQuery.of(ctx).size.width * 0.8,
child: ListView(padding: EdgeInsets.zero, children: [
// DrawerHeader(
// decoration: BoxDecoration(
// color: Theme.of(ctx).colorScheme.primary,
// ),
// child: Text('设置',
// style: TextStyle(
// color: Theme.of(ctx).colorScheme.onPrimary,
// fontSize: 24,
// ))),
ListTile(
tileColor: Theme.of(ctx).colorScheme.primary,
title: Text('设置',
style: TextStyle(
color: Theme.of(ctx).colorScheme.onPrimary,
fontSize: 24,
)
),
),
ListTile(
leading: const Icon(Icons.login),
title: const Text('登录界面'),
onTap: () {
Navigator.pop(ctx);
ctx.read<WebCubit>().goLogin();
},
),
ListTile(
leading: const Icon(Icons.chat_outlined),
title: const Text('微信授权'),
onTap: () {
Navigator.pop(context);
Navigator.pop(ctx);
ctx.read<WebCubit>().goWechatAuth();
},
),
......@@ -87,7 +167,7 @@ class WebPage extends StatelessWidget {
leading: const Icon(Icons.accessibility_new),
title: const Text('身份认证'),
onTap: () {
Navigator.pop(context);
Navigator.pop(ctx);
ctx.read<WebCubit>().goAuth();
},
),
......@@ -95,7 +175,7 @@ class WebPage extends StatelessWidget {
leading: const Icon(Icons.app_blocking_sharp),
title: const Text('打开小程序'),
onTap: () {
Navigator.pop(context);
Navigator.pop(ctx);
ctx.read<WebCubit>().goMiniProgram();
},
),
......@@ -103,7 +183,7 @@ class WebPage extends StatelessWidget {
leading: const Icon(Icons.refresh),
title: const Text('刷新'),
onTap: () {
Navigator.pop(context);
Navigator.pop(ctx);
ctx.read<WebCubit>().refresh();
},
),
......@@ -111,21 +191,11 @@ class WebPage extends StatelessWidget {
leading: const Icon(Icons.cleaning_services),
title: const Text('清理缓存'),
onTap: () {
Navigator.pop(context);
Navigator.pop(ctx);
ctx.read<WebCubit>().clearStorage();
},
),
],
),
);
},
);
},
);
},
),
],
),
])),
body: state.loaded
? SizedBox(
height: MediaQuery.of(ctx).size.height - 120, // 减去100像素留空
......@@ -150,3 +220,19 @@ class WebPage extends StatelessWidget {
);
}
}
class LoginMainState {
final bool loaded;
final bool orientationCmdFlag;
final bool windowInfoCmdFlag;
final bool chooseImageCmdFlag;
final bool chooseVideoCmdFlag;
LoginMainState({
required this.loaded,
required this.orientationCmdFlag,
required this.windowInfoCmdFlag,
required this.chooseImageCmdFlag,
required this.chooseVideoCmdFlag,
});
}
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:
assets:
- assets/
- assets/dist.zip
- assets/images/login/
# An image asset can refer to one or more resolution-specific "variants", see
# 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!