feat(apps): establish shared mobile design system
This commit is contained in:
@@ -5,6 +5,7 @@ import 'package:uuid/uuid.dart';
|
||||
import '../../../app/dependencies.dart';
|
||||
import '../../../data/repositories/client_repository.dart';
|
||||
import '../../../domain/models/client_models.dart';
|
||||
import '../../core/widgets.dart';
|
||||
|
||||
class ProfilePage extends StatefulWidget {
|
||||
const ProfilePage({required this.session, required this.repository, super.key});
|
||||
@@ -90,86 +91,118 @@ class _ProfilePageState extends State<ProfilePage> {
|
||||
future: _future,
|
||||
builder: (context, snapshot) {
|
||||
if (!snapshot.hasData) {
|
||||
if (snapshot.hasError) return Center(child: Text(snapshot.error.toString()));
|
||||
if (snapshot.hasError) {
|
||||
return EmptyState(
|
||||
title: '个人信息加载失败',
|
||||
description: '请检查网络后重新进入本页',
|
||||
onRetry: () => setState(() => _future = _load()),
|
||||
);
|
||||
}
|
||||
return const Center(child: CircularProgressIndicator());
|
||||
}
|
||||
final (profile, wallet) = snapshot.data!;
|
||||
return ListView(
|
||||
padding: const EdgeInsets.all(16),
|
||||
padding: const EdgeInsets.fromLTRB(20, 12, 20, 32),
|
||||
children: [
|
||||
Card(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(20),
|
||||
child: Row(
|
||||
children: [
|
||||
CircleAvatar(
|
||||
radius: 30,
|
||||
child: Text(profile.name.isEmpty ? '用' : profile.name.substring(0, 1)),
|
||||
),
|
||||
const SizedBox(width: 14),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text(
|
||||
profile.name,
|
||||
style: Theme.of(
|
||||
context,
|
||||
).textTheme.titleLarge?.copyWith(fontWeight: FontWeight.w800),
|
||||
),
|
||||
Text(profile.phone),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
Card(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(20),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
const Column(
|
||||
SurfaceSection(
|
||||
child: Row(
|
||||
children: [
|
||||
CircleAvatar(
|
||||
radius: 28,
|
||||
backgroundColor: Theme.of(context).colorScheme.primaryContainer,
|
||||
foregroundColor: Theme.of(context).colorScheme.primary,
|
||||
child: Text(profile.name.isEmpty ? '用' : profile.name.substring(0, 1)),
|
||||
),
|
||||
const SizedBox(width: 16),
|
||||
Expanded(
|
||||
child: Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text('钱包余额'),
|
||||
SizedBox(height: 4),
|
||||
Text('充值结果以服务端确认为准', style: TextStyle(fontSize: 12)),
|
||||
Text(profile.name, style: Theme.of(context).textTheme.titleLarge),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
profile.phone,
|
||||
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
Text(
|
||||
moneyText(wallet.balance),
|
||||
style: Theme.of(
|
||||
context,
|
||||
).textTheme.headlineSmall?.copyWith(fontWeight: FontWeight.w900),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
_item(Icons.location_on_outlined, '地址管理', _addAddress),
|
||||
_item(Icons.description_outlined, '供气合同', () => context.push('/records/contracts')),
|
||||
_item(
|
||||
Icons.account_balance_wallet_outlined,
|
||||
'钱包流水',
|
||||
() => context.push('/records/wallet'),
|
||||
const SizedBox(height: 28),
|
||||
Text('资产概览', style: Theme.of(context).textTheme.titleMedium),
|
||||
const SizedBox(height: 12),
|
||||
SurfaceSection(
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
||||
children: [
|
||||
Column(
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
Text('钱包余额', style: Theme.of(context).textTheme.titleMedium),
|
||||
const SizedBox(height: 4),
|
||||
Text(
|
||||
'以服务端资金流水为准',
|
||||
style: Theme.of(context).textTheme.labelSmall?.copyWith(
|
||||
color: Theme.of(context).colorScheme.onSurfaceVariant,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
Text(
|
||||
moneyText(wallet.balance),
|
||||
style: Theme.of(context).textTheme.headlineSmall?.copyWith(
|
||||
color: Theme.of(context).colorScheme.primary,
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 28),
|
||||
Text('账户与服务', style: Theme.of(context).textTheme.titleMedium),
|
||||
const SizedBox(height: 12),
|
||||
SurfaceSection(
|
||||
padding: EdgeInsets.zero,
|
||||
child: Column(
|
||||
children: [
|
||||
_item(Icons.location_on_outlined, '地址管理', _addAddress),
|
||||
const Divider(indent: 56),
|
||||
_item(
|
||||
Icons.description_outlined,
|
||||
'供气合同',
|
||||
() => context.push('/records/contracts'),
|
||||
),
|
||||
const Divider(indent: 56),
|
||||
_item(
|
||||
Icons.account_balance_wallet_outlined,
|
||||
'钱包流水',
|
||||
() => context.push('/records/wallet'),
|
||||
),
|
||||
const Divider(indent: 56),
|
||||
_item(Icons.build_outlined, '申请维修', _createTicket),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(height: 24),
|
||||
TextButton.icon(
|
||||
style: TextButton.styleFrom(foregroundColor: Theme.of(context).colorScheme.error),
|
||||
onPressed: widget.session.logout,
|
||||
icon: const Icon(Icons.logout),
|
||||
label: const Text('退出登录'),
|
||||
),
|
||||
_item(Icons.build_outlined, '申请维修', _createTicket),
|
||||
_item(Icons.logout, '退出登录', widget.session.logout),
|
||||
],
|
||||
);
|
||||
},
|
||||
),
|
||||
);
|
||||
|
||||
Widget _item(IconData icon, String title, VoidCallback onTap) => Card(
|
||||
child: ListTile(
|
||||
leading: Icon(icon),
|
||||
title: Text(title),
|
||||
trailing: const Icon(Icons.chevron_right),
|
||||
onTap: onTap,
|
||||
),
|
||||
Widget _item(IconData icon, String title, VoidCallback onTap) => ListTile(
|
||||
leading: Icon(icon),
|
||||
title: Text(title),
|
||||
trailing: const Icon(Icons.chevron_right),
|
||||
onTap: onTap,
|
||||
);
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user