445 lines
19 KiB
Dart
445 lines
19 KiB
Dart
import 'package:flutter/material.dart';
|
|
import 'package:get/get.dart';
|
|
import 'package:qr_flutter/qr_flutter.dart';
|
|
|
|
import 'controller.dart';
|
|
|
|
class LoginPage extends StatefulWidget {
|
|
const LoginPage({super.key});
|
|
|
|
@override
|
|
State<LoginPage> createState() => _LoginPageState();
|
|
}
|
|
|
|
class _LoginPageState extends State<LoginPage> {
|
|
final LoginPageController _loginPageCtr = Get.put(LoginPageController());
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
appBar: AppBar(
|
|
leading: Obx(
|
|
() => _loginPageCtr.currentIndex.value == 0
|
|
? IconButton(
|
|
onPressed: () async {
|
|
_loginPageCtr.mobTextFieldNode.unfocus();
|
|
await Future.delayed(const Duration(milliseconds: 200));
|
|
Get.back();
|
|
},
|
|
icon: const Icon(Icons.close_outlined),
|
|
)
|
|
: IconButton(
|
|
onPressed: () => _loginPageCtr.previousPage(),
|
|
icon: const Icon(Icons.arrow_back),
|
|
),
|
|
),
|
|
actions: [
|
|
IconButton(
|
|
tooltip: '浏览器打开',
|
|
onPressed: () {
|
|
Get.offNamed(
|
|
'/webview',
|
|
parameters: {
|
|
'url': 'https://passport.bilibili.com/h5-app/passport/login',
|
|
'type': 'login',
|
|
'pageTitle': '登录bilibili',
|
|
},
|
|
);
|
|
},
|
|
icon: const Icon(Icons.language),
|
|
),
|
|
IconButton(
|
|
tooltip: '二维码登录',
|
|
onPressed: () {
|
|
showDialog(
|
|
context: context,
|
|
builder: (context) {
|
|
return StatefulBuilder(
|
|
builder: (context, StateSetter setState) {
|
|
return AlertDialog(
|
|
title: Row(
|
|
children: [
|
|
const Text('扫码登录'),
|
|
IconButton(
|
|
onPressed: () {
|
|
setState(() {});
|
|
},
|
|
icon: const Icon(Icons.refresh),
|
|
),
|
|
],
|
|
),
|
|
contentPadding: const EdgeInsets.fromLTRB(0, 0, 0, 4),
|
|
content: AspectRatio(
|
|
aspectRatio: 1,
|
|
child: Container(
|
|
width: 200,
|
|
padding: const EdgeInsets.all(12),
|
|
child: FutureBuilder(
|
|
future: _loginPageCtr.getWebQrcode(),
|
|
builder: (context, snapshot) {
|
|
if (snapshot.connectionState ==
|
|
ConnectionState.done) {
|
|
if (snapshot.data == null) {
|
|
return const SizedBox();
|
|
}
|
|
Map data = snapshot.data as Map;
|
|
return QrImageView(
|
|
data: data['data']['url'],
|
|
backgroundColor: Colors.transparent,
|
|
);
|
|
} else {
|
|
return const Center(
|
|
child: SizedBox(
|
|
width: 40,
|
|
height: 40,
|
|
child: CircularProgressIndicator(),
|
|
),
|
|
);
|
|
}
|
|
},
|
|
),
|
|
),
|
|
),
|
|
actions: [
|
|
TextButton(
|
|
onPressed: () {},
|
|
child: Obx(() {
|
|
return Text(
|
|
'有效期: ${_loginPageCtr.validSeconds.value}s',
|
|
style: Theme.of(context).textTheme.titleMedium,
|
|
);
|
|
}),
|
|
),
|
|
TextButton(
|
|
onPressed: () {},
|
|
child: Text(
|
|
'检查登录状态',
|
|
style: TextStyle(
|
|
fontSize: Theme.of(context)
|
|
.textTheme
|
|
.titleMedium!
|
|
.fontSize,
|
|
),
|
|
),
|
|
)
|
|
],
|
|
);
|
|
});
|
|
},
|
|
);
|
|
},
|
|
icon: const Icon(Icons.qr_code),
|
|
),
|
|
const SizedBox(width: 22),
|
|
],
|
|
),
|
|
body: PageView(
|
|
physics: const NeverScrollableScrollPhysics(),
|
|
controller: _loginPageCtr.pageViewController,
|
|
onPageChanged: (int index) => _loginPageCtr.onPageChange(index),
|
|
children: [
|
|
Padding(
|
|
padding: EdgeInsets.only(
|
|
left: 20,
|
|
right: 20,
|
|
top: 10,
|
|
bottom: MediaQuery.of(context).padding.bottom + 10,
|
|
),
|
|
child: Form(
|
|
key: _loginPageCtr.mobFormKey,
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisSize: MainAxisSize.max,
|
|
children: [
|
|
Text(
|
|
'登录',
|
|
style: Theme.of(context).textTheme.titleLarge!.copyWith(
|
|
letterSpacing: 1,
|
|
height: 2.1,
|
|
fontSize: 34,
|
|
fontWeight: FontWeight.w500),
|
|
),
|
|
Row(
|
|
children: [
|
|
Text(
|
|
'请使用您的 BiliBili 账号登录。',
|
|
style: Theme.of(context).textTheme.titleSmall!,
|
|
),
|
|
GestureDetector(
|
|
onTap: () {},
|
|
child: const Icon(Icons.info_outline, size: 16),
|
|
)
|
|
],
|
|
),
|
|
Container(
|
|
margin: const EdgeInsets.only(top: 38, bottom: 15),
|
|
child: TextFormField(
|
|
controller: _loginPageCtr.mobTextController,
|
|
focusNode: _loginPageCtr.mobTextFieldNode,
|
|
keyboardType: TextInputType.number,
|
|
decoration: InputDecoration(
|
|
isDense: true,
|
|
labelText: '输入手机号码',
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(6.0),
|
|
),
|
|
),
|
|
// 校验用户名
|
|
validator: (v) {
|
|
return v!.trim().isNotEmpty ? null : "手机号码不能为空";
|
|
},
|
|
onSaved: (val) => _loginPageCtr.tel = int.parse(val!),
|
|
onEditingComplete: () {
|
|
_loginPageCtr.nextStep();
|
|
},
|
|
),
|
|
),
|
|
const Spacer(),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
TextButton(onPressed: () {}, child: const Text('中国大陆')),
|
|
TextButton(
|
|
style: TextButton.styleFrom(
|
|
padding: const EdgeInsets.fromLTRB(20, 0, 20, 0),
|
|
foregroundColor:
|
|
Theme.of(context).colorScheme.onPrimary,
|
|
backgroundColor:
|
|
Theme.of(context).colorScheme.primary, // 设置按钮背景色
|
|
),
|
|
onPressed: () => _loginPageCtr.nextStep(),
|
|
child: const Text('下一步'),
|
|
)
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
Padding(
|
|
padding: EdgeInsets.only(
|
|
left: 20,
|
|
right: 20,
|
|
top: 10,
|
|
bottom: MediaQuery.of(context).padding.bottom + 10,
|
|
),
|
|
child: Obx(
|
|
() => _loginPageCtr.loginType.value == 0
|
|
? Form(
|
|
key: _loginPageCtr.passwordFormKey,
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisSize: MainAxisSize.max,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Text(
|
|
'密码登录',
|
|
style: Theme.of(context)
|
|
.textTheme
|
|
.titleLarge!
|
|
.copyWith(
|
|
letterSpacing: 1,
|
|
height: 2.1,
|
|
fontSize: 34,
|
|
fontWeight: FontWeight.w500),
|
|
),
|
|
const SizedBox(width: 4),
|
|
IconButton(
|
|
style: ButtonStyle(
|
|
backgroundColor:
|
|
WidgetStateProperty.resolveWith((states) {
|
|
return Theme.of(context)
|
|
.colorScheme
|
|
.primary
|
|
.withOpacity(0.1);
|
|
}),
|
|
),
|
|
onPressed: () =>
|
|
_loginPageCtr.changeLoginType(),
|
|
icon: const Icon(Icons.swap_vert_outlined),
|
|
)
|
|
],
|
|
),
|
|
Text(
|
|
'请输入您的 BiliBili 密码。',
|
|
style: Theme.of(context).textTheme.titleSmall!,
|
|
),
|
|
Container(
|
|
margin: const EdgeInsets.only(top: 38, bottom: 15),
|
|
child: TextFormField(
|
|
controller: _loginPageCtr.passwordTextController,
|
|
focusNode: _loginPageCtr.passwordTextFieldNode,
|
|
keyboardType: TextInputType.visiblePassword,
|
|
decoration: InputDecoration(
|
|
isDense: true,
|
|
labelText: '输入密码',
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(6.0),
|
|
),
|
|
),
|
|
// 校验用户名
|
|
validator: (v) {
|
|
return v!.trim().isNotEmpty ? null : "密码不能为空";
|
|
},
|
|
onSaved: (val) {
|
|
print(val);
|
|
},
|
|
),
|
|
),
|
|
const Spacer(),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.end,
|
|
children: [
|
|
TextButton(
|
|
onPressed: () => _loginPageCtr.previousPage(),
|
|
child: const Text('上一步'),
|
|
),
|
|
const SizedBox(width: 15),
|
|
TextButton(
|
|
style: TextButton.styleFrom(
|
|
padding:
|
|
const EdgeInsets.fromLTRB(20, 0, 20, 0),
|
|
foregroundColor:
|
|
Theme.of(context).colorScheme.onPrimary,
|
|
backgroundColor: Theme.of(context)
|
|
.colorScheme
|
|
.primary, // 设置按钮背景色
|
|
),
|
|
onPressed: () =>
|
|
_loginPageCtr.loginInByWebPassword(),
|
|
child: const Text('确认登录'),
|
|
)
|
|
],
|
|
),
|
|
],
|
|
),
|
|
)
|
|
: Form(
|
|
key: _loginPageCtr.msgCodeFormKey,
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
mainAxisSize: MainAxisSize.max,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Text(
|
|
'验证码登录',
|
|
style: Theme.of(context)
|
|
.textTheme
|
|
.titleLarge!
|
|
.copyWith(
|
|
letterSpacing: 1,
|
|
height: 2.1,
|
|
fontSize: 34,
|
|
fontWeight: FontWeight.w500),
|
|
),
|
|
const SizedBox(width: 4),
|
|
IconButton(
|
|
style: ButtonStyle(
|
|
backgroundColor:
|
|
WidgetStateProperty.resolveWith((states) {
|
|
return Theme.of(context)
|
|
.colorScheme
|
|
.primary
|
|
.withOpacity(0.1);
|
|
}),
|
|
),
|
|
onPressed: () =>
|
|
_loginPageCtr.changeLoginType(),
|
|
icon: const Icon(Icons.swap_vert_outlined),
|
|
)
|
|
],
|
|
),
|
|
Text(
|
|
'请输入收到到验证码。',
|
|
style: Theme.of(context).textTheme.titleSmall!,
|
|
),
|
|
Container(
|
|
margin: const EdgeInsets.only(top: 38, bottom: 15),
|
|
child: Stack(
|
|
children: [
|
|
TextFormField(
|
|
controller:
|
|
_loginPageCtr.msgCodeTextController,
|
|
focusNode: _loginPageCtr.msgCodeTextFieldNode,
|
|
maxLength: 6,
|
|
keyboardType: TextInputType.number,
|
|
decoration: InputDecoration(
|
|
isDense: true,
|
|
labelText: '输入验证码',
|
|
border: OutlineInputBorder(
|
|
borderRadius: BorderRadius.circular(6.0),
|
|
),
|
|
),
|
|
// 校验用户名
|
|
validator: (v) {
|
|
return v!.trim().isNotEmpty
|
|
? null
|
|
: "验证码不能为空";
|
|
},
|
|
onSaved: (val) => _loginPageCtr.webSmsCode =
|
|
int.parse(val!),
|
|
),
|
|
Obx(() {
|
|
return Positioned(
|
|
right: 8,
|
|
top: 0,
|
|
child: Center(
|
|
child: TextButton(
|
|
onPressed: _loginPageCtr
|
|
.smsCodeSendStatus.value
|
|
? null
|
|
: () =>
|
|
_loginPageCtr.getWebMsgCode(),
|
|
child: _loginPageCtr
|
|
.smsCodeSendStatus.value
|
|
? Text(
|
|
'重新获取(${_loginPageCtr.seconds.value}s)')
|
|
: const Text('获取验证码')),
|
|
),
|
|
);
|
|
})
|
|
],
|
|
),
|
|
),
|
|
const Spacer(),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.end,
|
|
children: [
|
|
TextButton(
|
|
onPressed: () => _loginPageCtr.previousPage(),
|
|
child: const Text('上一步'),
|
|
),
|
|
const SizedBox(width: 15),
|
|
TextButton(
|
|
style: TextButton.styleFrom(
|
|
padding:
|
|
const EdgeInsets.fromLTRB(20, 0, 20, 0),
|
|
foregroundColor:
|
|
Theme.of(context).colorScheme.onPrimary,
|
|
backgroundColor: Theme.of(context)
|
|
.colorScheme
|
|
.primary, // 设置按钮背景色
|
|
),
|
|
onPressed: () => _loginPageCtr.loginInByCode(),
|
|
child: const Text('确认登录'),
|
|
)
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|