andyesfly/smart_grid_iot_app_flutter
1
0 Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat: 新增订单拨号功能，重构订单页与登录页

Browse Source
This commit is contained in:
andyesfly committed 2026-10-21 11:58:36 +08:00
1 parent 774403785c
commit 411ec8be23
9 files changed
+875 -482
Download Patch File Download Diff File Expand all files Collapse all files

No files matched your search

lib/features/auth/presentation/login_page.dart
+271 -387
View File
@@ -5,6 +5,7 @@ import 'package:flutter_riverpod/flutter_riverpod.dart';
import 'package:go_router/go_router.dart';
import '../../../core/env.dart';
import '../../../core/network/api_response.dart';
import '../../../core/providers.dart';
import '../../../core/theme/app_colors.dart';
import '../../../core/theme/app_dimens.dart';
@@ -20,10 +21,11 @@ import '../application/session_controller.dart';
/// `--dart-define=ENABLE_SERVER_SETTINGS=true` 打开。
const _serverSettingsEnabled = bool.fromEnvironment('ENABLE_SERVER_SETTINGS');
/// 登录页，对应源 `pages/login/index.vue`。
/// 登录页：手机号 + 密码。
///
/// **与源的差异（已与用户确认）**：源为「手机号 + 验证码」，后端只支持
/// 「手机号 + 密码」，故此处改为手机号 + 密码，并新增注册入口。
/// 后端 `/worker-app/auth/login` 只支持手机号 + 密码（源 uni-app 的
/// 「手机号 + 验证码」已按后端能力调整）。页面只保留登录必需元素，
/// 注册入口作为次要操作放在卡片底部。
class LoginPage extends ConsumerStatefulWidget {
const LoginPage({super.key});
@@ -35,18 +37,10 @@ class _LoginPageState extends ConsumerState<LoginPage> {
final _phone = TextEditingController();
final _password = TextEditingController();
bool _agree = false;
bool _obscure = true;
bool _loading = false;
String _error = '';
@override
void initState() {
super.initState();
_phone.addListener(_onChanged);
_password.addListener(_onChanged);
}
@override
void dispose() {
_phone.dispose();
@@ -54,18 +48,31 @@ class _LoginPageState extends ConsumerState<LoginPage> {
super.dispose();
}
void _onChanged() => setState(() {});
bool get _canLogin =>
_phone.text.length == 11 && _password.text.length >= 6 && _agree;
Future<void> _handleLogin() async {
if (!_canLogin) {
if (!_agree) _error = '请先阅读并同意服务协议与隐私政策';
setState(() {});
if (_loading) return;
final phone = _phone.text.trim();
final password = _password.text;
// 按钮始终可点，校验失败给出明确提示，避免「点了没反应」。
if (phone.isEmpty) {
setState(() => _error = '请输入手机号');
return;
}
if (phone.length != 11) {
setState(() => _error = '请输入 11 位手机号');
return;
}
if (password.isEmpty) {
setState(() => _error = '请输入密码');
return;
}
if (password.length < 6) {
setState(() => _error = '密码至少 6 位');
return;
}
FocusScope.of(context).unfocus();
setState(() {
_loading = true;
_error = '';
@@ -73,13 +80,22 @@ class _LoginPageState extends ConsumerState<LoginPage> {
try {
await ref
.read(sessionProvider.notifier)
.login(phone: _phone.text.trim(), password: _password.text);
.login(phone: phone, password: password);
if (!mounted) return;
context.go('/tabs');
} on AuthException catch (e) {
// 后端返回的业务错误（如手机号或密码错误）
if (mounted) setState(() => _error = e.message);
} on ApiException catch (e) {
if (!mounted) return;
final base = ref.read(apiBaseUrlProvider);
setState(
() => _error = kDebugMode
? '无法连接服务端：${e.message}\n$base'
: '网络异常，请检查网络后重试',
);
} catch (_) {
if (mounted) setState(() => _error = '网络异常，请检查服务端地址');
if (mounted) setState(() => _error = '网络异常，请检查网络后重试');
} finally {
if (mounted) setState(() => _loading = false);
}
@@ -88,53 +104,57 @@ class _LoginPageState extends ConsumerState<LoginPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
body: Container(
decoration: const BoxDecoration(
gradient: LinearGradient(
begin: Alignment.topCenter,
end: Alignment.bottomCenter,
colors: [Color(0xFFF0F4FF), Color(0xFFFAF9FE)],
),
),
child: Stack(
children: [
Positioned.fill(
child: SingleChildScrollView(
padding: const EdgeInsets.fromLTRB(24, 80, 24, 60),
child: Column(
children: [
_buildLogoSection(),
_buildFormSection(),
_buildOtherLogin(),
_buildAgreement(),
const SizedBox(height: 24),
_buildRegisterEntry(),
],
),
),
),
// 测试用「服务端设置」入口：调试版常显，release 需显式开关
if (kDebugMode || _serverSettingsEnabled)
Positioned(
top: 0,
right: 0,
child: SafeArea(
child: GestureDetector(
onTap: _openServerSettings,
behavior: HitTestBehavior.opaque,
child: const Padding(
padding: EdgeInsets.all(12),
child: XIcon(
'settings',
size: 22,
color: AppColors.textMuted,
backgroundColor: AppColors.bgPage,
body: Stack(
children: [
Positioned.fill(
child: SafeArea(
child: LayoutBuilder(
builder: (context, constraints) => SingleChildScrollView(
padding: const EdgeInsets.fromLTRB(24, 32, 24, 32),
child: ConstrainedBox(
constraints: BoxConstraints(
minHeight: constraints.maxHeight - 64,
),
child: Center(
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 400),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
_buildBrand(),
const SizedBox(height: 28),
_buildFormCard(),
const SizedBox(height: 20),
_buildAgreementHint(),
],
),
),
),
),
),
),
],
),
),
),
// 测试用「服务端设置」入口：调试版常显，release 需显式开关
if (kDebugMode || _serverSettingsEnabled)
Positioned(
top: 0,
right: 0,
child: SafeArea(
child: IconButton(
onPressed: _openServerSettings,
tooltip: '服务端设置',
icon: const XIcon(
'settings',
size: 20,
color: AppColors.textMuted,
),
),
),
),
],
),
);
}
@@ -151,331 +171,175 @@ class _LoginPageState extends ConsumerState<LoginPage> {
// ---- 各区块 ----
Widget _buildLogoSection() {
return Padding(
padding: const EdgeInsets.only(bottom: 48),
child: Column(
children: [
// .logo 96×96 / #0052ff / radius 20 / 0 8px 24px rgba(0,82,255,.3)
Container(
width: 96,
height: 96,
margin: const EdgeInsets.only(bottom: 24),
decoration: BoxDecoration(
color: AppColors.primary,
borderRadius: BorderRadius.circular(20),
boxShadow: const [
BoxShadow(
color: Color(0x4D0052FF),
blurRadius: 24,
offset: Offset(0, 8),
),
],
),
alignment: Alignment.center,
child: const XIcon('shandian', size: 48, color: Colors.white),
Widget _buildBrand() {
return Column(
children: [
Container(
width: 64,
height: 64,
decoration: BoxDecoration(
color: AppColors.primary,
borderRadius: BorderRadius.circular(18),
boxShadow: AppShadows.primaryButton,
),
Padding(
padding: const EdgeInsets.only(bottom: 8),
child: Text(
'VoltLink',
style: AppTypography.displayMd.copyWith(
color: AppColors.onSurface,
),
),
alignment: Alignment.center,
child: const XIcon('shandian', size: 34, color: Colors.white),
),
const SizedBox(height: 16),
Text(
'VoltLink',
style: AppTypography.navLargeTitle.copyWith(
color: AppColors.onSurface,
),
const Text(
'欢迎回到 VoltLink',
style: TextStyle(fontSize: 16, color: AppColors.textMuted),
),
],
),
),
const SizedBox(height: 6),
const Text(
'电网作业电工端',
style: TextStyle(fontSize: 14, color: AppColors.textMuted),
),
],
);
}
Widget _buildFormSection() {
return Padding(
padding: const EdgeInsets.only(bottom: 48),
child: Column(
children: [
// .input-group：白底 / radius 16 / padding 1px
Container(
decoration: BoxDecoration(
color: AppColors.surfaceContainerLowest,
borderRadius: BorderRadius.circular(AppRadius.xl),
),
child: Column(
children: [
_buildPhoneRow(),
_buildPasswordRow(),
],
),
),
const SizedBox(height: 24),
_buildLoginButton(),
if (_error.isNotEmpty)
Padding(
padding: const EdgeInsets.only(top: 14),
child: Text(
_error,
textAlign: TextAlign.center,
style: const TextStyle(fontSize: 13, color: AppColors.error),
),
),
],
),
);
}
/// 手机号行：+86 国家码 + 分隔线 + 输入框。
Widget _buildPhoneRow() {
Widget _buildFormCard() {
return Container(
height: 56,
decoration: const BoxDecoration(
border: Border(bottom: BorderSide(color: AppColors.surfaceContainerHighest)),
padding: const EdgeInsets.fromLTRB(20, 24, 20, 20),
decoration: BoxDecoration(
color: AppColors.surfaceContainerLowest,
borderRadius: BorderRadius.circular(20),
border: Border.all(color: AppColors.borderSoft),
boxShadow: AppShadows.soft,
),
child: Row(
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Padding(
padding: const EdgeInsets.symmetric(horizontal: 20),
child: Row(
children: [
Text(
'+86',
style: AppTypography.bodyLg.copyWith(
fontWeight: FontWeight.w600,
color: AppColors.onSurface,
),
),
const SizedBox(width: 4),
const Text(
'▼',
style: TextStyle(fontSize: 12, color: AppColors.textMuted),
),
],
Text(
'登录',
style: AppTypography.headlineMd.copyWith(
color: AppColors.onSurface,
),
),
Container(width: 1, height: 32, color: AppColors.surfaceContainerHighest),
Expanded(
child: TextField(
controller: _phone,
keyboardType: TextInputType.phone,
maxLength: 11,
style: const TextStyle(fontSize: 17, color: AppColors.onSurface),
cursorColor: AppColors.primary,
decoration: _inputDecoration('请输入手机号码'),
const SizedBox(height: 4),
const Text(
'使用注册手机号和密码登录',
style: TextStyle(fontSize: 13, color: AppColors.textMuted),
),
const SizedBox(height: 20),
_buildLabel('手机号'),
const SizedBox(height: 8),
TextField(
controller: _phone,
keyboardType: TextInputType.phone,
textInputAction: TextInputAction.next,
maxLength: 11,
style: const TextStyle(fontSize: 16, color: AppColors.onSurface),
cursorColor: AppColors.primary,
decoration: _fieldDecoration(
hint: '请输入手机号',
icon: Icons.phone_iphone_rounded,
),
),
const SizedBox(height: 16),
_buildLabel('密码'),
const SizedBox(height: 8),
TextField(
controller: _password,
obscureText: _obscure,
textInputAction: TextInputAction.done,
onSubmitted: (_) => _handleLogin(),
style: const TextStyle(fontSize: 16, color: AppColors.onSurface),
cursorColor: AppColors.primary,
decoration: _fieldDecoration(
hint: '请输入密码（至少 6 位）',
icon: Icons.lock_outline_rounded,
suffix: IconButton(
onPressed: () => setState(() => _obscure = !_obscure),
tooltip: _obscure ? '显示密码' : '隐藏密码',
icon: Icon(
_obscure
? Icons.visibility_off_outlined
: Icons.visibility_outlined,
size: 20,
color: AppColors.textMuted,
),
),
),
),
if (_error.isNotEmpty) ...[
const SizedBox(height: 14),
_buildError(),
],
const SizedBox(height: 20),
XPrimaryButton(
label: '登录',
onPressed: _handleLogin,
loading: _loading,
height: 52,
radius: AppRadius.lg,
shadows: AppShadows.primaryButton,
),
const SizedBox(height: 16),
_buildRegisterEntry(),
],
),
);
}
/// 密码行：源为「验证码 + 获取验证码」，后端改为密码，右侧按钮换成明文切换。
Widget _buildPasswordRow() {
return SizedBox(
height: 56,
child: Row(
children: [
Expanded(
child: TextField(
controller: _password,
obscureText: _obscure,
style: const TextStyle(fontSize: 17, color: AppColors.onSurface),
cursorColor: AppColors.primary,
decoration: _inputDecoration('请输入密码（至少 6 位）'),
),
),
GestureDetector(
onTap: () => setState(() => _obscure = !_obscure),
behavior: HitTestBehavior.opaque,
child: Padding(
padding: const EdgeInsets.symmetric(
horizontal: 20,
vertical: 12,
),
child: Text(
_obscure ? '显示' : '隐藏',
style: const TextStyle(
fontSize: 15,
fontWeight: FontWeight.w500,
color: AppColors.primary,
),
),
),
),
],
),
);
}
InputDecoration _inputDecoration(String hint) => InputDecoration(
isDense: true,
border: InputBorder.none,
counterText: '',
contentPadding: const EdgeInsets.symmetric(horizontal: 20),
hintText: hint,
hintStyle: const TextStyle(fontSize: 17, color: AppColors.textPlaceholder),
Widget _buildLabel(String text) => Text(
text,
style: AppTypography.bodySm.copyWith(color: AppColors.onSurfaceVariant),
);
Widget _buildLoginButton() {
final enabled = _canLogin && !_loading;
return GestureDetector(
onTap: enabled ? _handleLogin : null,
behavior: HitTestBehavior.opaque,
child: AnimatedContainer(
duration: const Duration(milliseconds: 120),
height: 56,
decoration: BoxDecoration(
color: enabled ? AppColors.primary : AppColors.textPlaceholder,
borderRadius: BorderRadius.circular(AppRadius.xl),
boxShadow: enabled
? const [
BoxShadow(
color: Color(0x4D0052FF),
blurRadius: 20,
offset: Offset(0, 8),
),
]
: null,
),
alignment: Alignment.center,
child: _loading
? const SizedBox(
width: 22,
height: 22,
child: CircularProgressIndicator(
strokeWidth: 2,
valueColor: AlwaysStoppedAnimation(Colors.white),
),
)
: Row(
mainAxisSize: MainAxisSize.min,
children: const [
Text(
'立即登录',
style: TextStyle(
fontSize: 17,
fontWeight: FontWeight.w600,
color: Colors.white,
),
),
SizedBox(width: 8),
Text(
'→',
style: TextStyle(
fontSize: 20,
fontWeight: FontWeight.w300,
color: Colors.white,
),
),
],
),
InputDecoration _fieldDecoration({
required String hint,
required IconData icon,
Widget? suffix,
}) {
final border = OutlineInputBorder(
borderRadius: BorderRadius.circular(AppRadius.lg),
borderSide: BorderSide.none,
);
return InputDecoration(
hintText: hint,
hintStyle: const TextStyle(fontSize: 15, color: AppColors.textPlaceholder),
prefixIcon: Icon(icon, size: 20, color: AppColors.textMuted),
prefixIconConstraints: const BoxConstraints(minWidth: 46, minHeight: 46),
suffixIcon: suffix,
filled: true,
fillColor: AppColors.surfaceContainerLow,
counterText: '',
contentPadding: const EdgeInsets.symmetric(vertical: 16),
border: border,
enabledBorder: border,
focusedBorder: border.copyWith(
borderSide: const BorderSide(color: AppColors.primary, width: 1.4),
),
);
}
Widget _buildOtherLogin() {
return Padding(
padding: const EdgeInsets.only(bottom: 48),
child: Column(
children: [
const Padding(
padding: EdgeInsets.only(bottom: 24),
child: Row(
children: [
Expanded(
child: SizedBox(
height: 1,
child: ColoredBox(color: AppColors.surfaceContainerHighest),
),
),
Padding(
padding: EdgeInsets.symmetric(horizontal: 16),
child: Text(
'微信快捷登录',
style: TextStyle(fontSize: 13, color: AppColors.textMuted),
),
),
Expanded(
child: SizedBox(
height: 1,
child: ColoredBox(color: AppColors.surfaceContainerHighest),
),
),
],
),
),
GestureDetector(
onTap: () => showAppToast('微信登录暂未开放'),
behavior: HitTestBehavior.opaque,
child: Container(
width: 56,
height: 56,
decoration: const BoxDecoration(
color: Color(0xFF07C160),
shape: BoxShape.circle,
),
alignment: Alignment.center,
child: const XIcon('weixin', size: 32, color: Colors.white),
),
),
],
Widget _buildError() {
return Container(
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 10),
decoration: BoxDecoration(
color: AppColors.errorContainer,
borderRadius: BorderRadius.circular(AppRadius.regular + 2),
),
);
}
Widget _buildAgreement() {
return Padding(
padding: const EdgeInsets.symmetric(horizontal: 8),
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
GestureDetector(
onTap: () => setState(() => _agree = !_agree),
behavior: HitTestBehavior.opaque,
child: Container(
width: 20,
height: 20,
margin: const EdgeInsets.only(top: 1),
decoration: BoxDecoration(
color: _agree ? AppColors.primary : Colors.transparent,
border: Border.all(
color: _agree ? AppColors.primary : AppColors.textPlaceholder,
width: 2,
),
borderRadius: BorderRadius.circular(6),
),
alignment: Alignment.center,
child: _agree
? const Text(
'✓',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w600,
color: Colors.white,
height: 1,
),
)
: null,
),
const Icon(
Icons.error_outline_rounded,
size: 16,
color: AppColors.error,
),
const SizedBox(width: 12),
const SizedBox(width: 8),
Expanded(
child: RichText(
text: TextSpan(
style: const TextStyle(
fontSize: 13,
height: 1.6,
color: AppColors.textMuted,
),
children: [
const TextSpan(text: '我已阅读并同意'),
_link('《VoltLink服务协议》'),
const TextSpan(text: '与'),
_link('《隐私政策》'),
const TextSpan(text: '，并授权 VoltLink 在登录时获取我的相关信息。'),
],
child: Text(
_error,
style: const TextStyle(
fontSize: 13,
height: 1.4,
color: AppColors.onErrorContainer,
),
),
),
@@ -484,39 +348,59 @@ class _LoginPageState extends ConsumerState<LoginPage> {
);
}
Widget _buildRegisterEntry() {
return Center(
child: GestureDetector(
onTap: () => context.push('/register'),
behavior: HitTestBehavior.opaque,
child: Padding(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 6),
child: Text.rich(
TextSpan(
style: const TextStyle(fontSize: 14, color: AppColors.textMuted),
children: const [
TextSpan(text: '还没有账号？'),
TextSpan(
text: '立即注册',
style: TextStyle(
fontWeight: FontWeight.w600,
color: AppColors.primary,
),
),
],
),
),
),
),
);
}
/// 极简版不再放协议勾选框：登录即视为同意，文案置底。
Widget _buildAgreementHint() {
return Text.rich(
TextSpan(
style: const TextStyle(
fontSize: 12,
height: 1.6,
color: AppColors.textMuted,
),
children: [
const TextSpan(text: '登录即表示你已阅读并同意'),
_link('《服务协议》'),
const TextSpan(text: '与'),
_link('《隐私政策》'),
],
),
textAlign: TextAlign.center,
);
}
TextSpan _link(String text) => TextSpan(
text: text,
style: const TextStyle(color: AppColors.primary),
recognizer: TapGestureRecognizer()
..onTap = () => showAppToast('$text 暂未开放'),
);
Widget _buildRegisterEntry() {
return Row(
mainAxisAlignment: MainAxisAlignment.center,
children: [
const Text(
'还没有账号？',
style: TextStyle(fontSize: 14, color: AppColors.textMuted),
),
GestureDetector(
onTap: () => context.push('/register'),
behavior: HitTestBehavior.opaque,
child: const Padding(
padding: EdgeInsets.symmetric(vertical: 6, horizontal: 4),
child: Text(
'立即注册',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.w600,
color: AppColors.primary,
),
),
),
),
],
);
}
}
/// 调试版「服务端设置」弹窗：只让改 IP 与端口，
@@ -618,7 +502,7 @@ class _ServerSettingsSheetState extends ConsumerState<_ServerSettingsSheet> {
_buildField(
label: '服务端 IP',
controller: _host,
hintText: '如 192.168.3.29',
hintText: '如 192.168.21.184',
keyboardType: TextInputType.url,
),
const SizedBox(height: 16),