heqiapp/platforms
2
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

feat(apps): establish shared mobile design system

Browse Source
This commit is contained in:
yanweidong
2026-08-10 23:31:44 +08:00
parent 7242048abf
commit a2383fc8a1
34 changed files with 2007 additions and 751 deletions
Download Patch File Download Diff File Expand all files Collapse all files

91
apps/user_app/lib/ui/features/auth/login_page.dart
View File

@@ -17,6 +17,7 @@ class _LoginPageState extends State<LoginPage> {
final _password = TextEditingController();
bool _submitting = false;
String? _error;
bool _obscurePassword = true;
@override
void dispose() {
@@ -44,28 +45,43 @@ class _LoginPageState extends State<LoginPage> {
body: SafeArea(
child: Center(
child: SingleChildScrollView(
padding: const EdgeInsets.all(24),
padding: const EdgeInsets.fromLTRB(24, 32, 24, 24),
child: ConstrainedBox(
constraints: const BoxConstraints(maxWidth: 420),
child: Column(
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Icon(
Icons.health_and_safety_rounded,
size: 68,
color: Theme.of(context).colorScheme.primary,
Align(
child: Container(
width: 72,
height: 72,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primaryContainer,
borderRadius: BorderRadius.circular(24),
),
child: Icon(
Icons.health_and_safety_rounded,
size: 38,
color: Theme.of(context).colorScheme.primary,
semanticLabel: '瓶安芯安全标识',
),
),
),
const SizedBox(height: 20),
const SizedBox(height: 24),
Text(
'瓶安芯',
textAlign: TextAlign.center,
style: Theme.of(
context,
).textTheme.headlineLarge?.copyWith(fontWeight: FontWeight.w900),
style: Theme.of(context).textTheme.headlineMedium,
),
const SizedBox(height: 8),
const Text('安全服务与生活采购', textAlign: TextAlign.center),
const SizedBox(height: 36),
Text(
'安全服务与生活采购',
textAlign: TextAlign.center,
style: Theme.of(context).textTheme.bodyLarge?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
const SizedBox(height: 40),
TextField(
controller: _phone,
keyboardType: TextInputType.phone,
@@ -78,19 +94,50 @@ class _LoginPageState extends State<LoginPage> {
const SizedBox(height: 14),
TextField(
controller: _password,
obscureText: true,
obscureText: _obscurePassword,
autofillHints: const [AutofillHints.password],
decoration: const InputDecoration(
onSubmitted: (_) => _submitting ? null : _login(),
decoration: InputDecoration(
labelText: '密码',
prefixIcon: Icon(Icons.lock_outline),
prefixIcon: const Icon(Icons.lock_outline),
suffixIcon: IconButton(
tooltip: _obscurePassword ? '显示密码' : '隐藏密码',
onPressed: () => setState(() => _obscurePassword = !_obscurePassword),
icon: Icon(
_obscurePassword
? Icons.visibility_outlined
: Icons.visibility_off_outlined,
),
),
),
),
if (_error != null) ...[
const SizedBox(height: 12),
Text(_error!, style: TextStyle(color: Theme.of(context).colorScheme.error)),
Semantics(
liveRegion: true,
child: Row(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Icon(
Icons.error_outline,
size: 20,
color: Theme.of(context).colorScheme.error,
),
const SizedBox(width: 8),
Expanded(
child: Text(
_error!,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Theme.of(context).colorScheme.error,
),
),
),
],
),
),
],
const SizedBox(height: 20),
ElevatedButton(
const SizedBox(height: 24),
FilledButton(
onPressed: _submitting ? null : _login,
child: _submitting
? const SizedBox.square(
@@ -103,11 +150,13 @@ class _LoginPageState extends State<LoginPage> {
onPressed: () => context.push('/register'),
child: const Text('首次使用？注册账号'),
),
const SizedBox(height: 12),
const Text(
'登录即表示同意用户协议和隐私政策',
const SizedBox(height: 8),
Text(
'登录即表示你已阅读并同意《用户协议》和《隐私政策》',
textAlign: TextAlign.center,
style: TextStyle(fontSize: 12),
style: Theme.of(context).textTheme.labelSmall?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
],
),

141
apps/user_app/lib/ui/features/auth/register_page.dart
View File

@@ -21,6 +21,7 @@ class _RegisterPageState extends State<RegisterPage> {
String _requestIdentity = '';
bool _busy = false;
String? _message;
bool _obscurePassword = true;
Future<void> _sendCode() async {
try {
@@ -70,53 +71,103 @@ class _RegisterPageState extends State<RegisterPage> {
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(title: const Text('注册用户')),
body: ListView(
padding: const EdgeInsets.all(20),
children: [
TextField(
controller: _phone,
keyboardType: TextInputType.phone,
decoration: const InputDecoration(labelText: '手机号'),
),
const SizedBox(height: 12),
TextField(
controller: _name,
decoration: const InputDecoration(labelText: '姓名'),
),
const SizedBox(height: 12),
TextField(
controller: _address,
decoration: const InputDecoration(labelText: '服务地址'),
),
const SizedBox(height: 12),
TextField(
controller: _password,
obscureText: true,
decoration: const InputDecoration(labelText: '登录密码'),
),
const SizedBox(height: 12),
Row(
children: [
Expanded(
child: TextField(
controller: _code,
keyboardType: TextInputType.number,
decoration: const InputDecoration(labelText: '验证码'),
appBar: AppBar(title: const Text('创建账号')),
body: SafeArea(
top: false,
child: ListView(
padding: const EdgeInsets.fromLTRB(20, 12, 20, 32),
children: [
Text('开始使用瓶安芯', style: Theme.of(context).textTheme.headlineSmall),
const SizedBox(height: 8),
Text(
'填写真实服务信息，便于校验所属服务区域。',
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
const SizedBox(height: 28),
TextField(
controller: _phone,
keyboardType: TextInputType.phone,
autofillHints: const [AutofillHints.telephoneNumber],
decoration: const InputDecoration(
labelText: '手机号',
prefixIcon: Icon(Icons.phone_outlined),
),
),
const SizedBox(height: 16),
TextField(
controller: _name,
autofillHints: const [AutofillHints.name],
decoration: const InputDecoration(
labelText: '姓名',
prefixIcon: Icon(Icons.person_outline),
),
),
const SizedBox(height: 16),
TextField(
controller: _address,
autofillHints: const [AutofillHints.fullStreetAddress],
decoration: const InputDecoration(
labelText: '服务地址',
helperText: '用于匹配气站与配送服务范围',
prefixIcon: Icon(Icons.location_on_outlined),
),
),
const SizedBox(height: 16),
TextField(
controller: _password,
obscureText: _obscurePassword,
autofillHints: const [AutofillHints.newPassword],
decoration: InputDecoration(
labelText: '登录密码',
prefixIcon: const Icon(Icons.lock_outline),
suffixIcon: IconButton(
tooltip: _obscurePassword ? '显示密码' : '隐藏密码',
onPressed: () => setState(() => _obscurePassword = !_obscurePassword),
icon: Icon(
_obscurePassword ? Icons.visibility_outlined : Icons.visibility_off_outlined,
),
),
),
const SizedBox(width: 10),
OutlinedButton(onPressed: _sendCode, child: const Text('获取验证码')),
],
),
if (_message != null)
Padding(padding: const EdgeInsets.only(top: 12), child: Text(_message!)),
const SizedBox(height: 24),
ElevatedButton(
onPressed: _busy || _requestIdentity.isEmpty ? null : _register,
child: const Text('创建账号'),
),
],
),
const SizedBox(height: 16),
Row(
children: [
Expanded(
child: TextField(
controller: _code,
keyboardType: TextInputType.number,
decoration: const InputDecoration(labelText: '验证码'),
),
),
const SizedBox(width: 10),
SizedBox(
width: 120,
child: OutlinedButton(
onPressed: _busy ? null : _sendCode,
child: const Text('获取验证码'),
),
),
],
),
if (_message != null)
Padding(
padding: const EdgeInsets.only(top: 12),
child: Semantics(liveRegion: true, child: Text(_message!)),
),
const SizedBox(height: 28),
FilledButton(
onPressed: _busy || _requestIdentity.isEmpty ? null : _register,
child: _busy
? const SizedBox.square(
dimension: 22,
child: CircularProgressIndicator(strokeWidth: 2),
)
: const Text('创建账号'),
),
],
),
),
);
}

56
apps/user_app/lib/ui/features/home/home_page.dart
View File

@@ -58,28 +58,37 @@ class _HomePageState extends State<HomePage> {
title: '今天也要安心用气',
description: '设备控制能力尚未开放，本页只展示真实服务与安全内容。',
),
Card(
margin: const EdgeInsets.symmetric(horizontal: 16),
child: Padding(
padding: const EdgeInsets.all(20),
AppGutter(
child: SurfaceSection(
child: Row(
children: [
Icon(
Icons.store_mall_directory_outlined,
size: 38,
color: Theme.of(context).colorScheme.primary,
Container(
width: 52,
height: 52,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primaryContainer,
borderRadius: BorderRadius.circular(16),
),
child: Icon(
Icons.store_mall_directory_outlined,
color: Theme.of(context).colorScheme.primary,
semanticLabel: '服务归属',
),
),
const SizedBox(width: 14),
const SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
const Text('当前服务归属', style: TextStyle(fontWeight: FontWeight.w800)),
Text('当前服务归属', style: Theme.of(context).textTheme.titleMedium),
const SizedBox(height: 4),
Text(
relation == null
? '尚未建立服务关系'
: '${relation['gas_name'] ?? ''} ${relation['delivery_name'] ?? ''}',
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
],
),
@@ -88,17 +97,30 @@ class _HomePageState extends State<HomePage> {
),
),
),
const Padding(
padding: EdgeInsets.fromLTRB(20, 26, 20, 8),
child: Text('安全公告', style: TextStyle(fontWeight: FontWeight.w800, fontSize: 18)),
const SizedBox(height: 32),
const AppGutter(
child: SectionHeader(title: '安全公告', description: '来自平台的最新安全提醒与服务信息'),
),
const SizedBox(height: 12),
if (contents.isEmpty)
const Padding(
padding: EdgeInsets.all(20),
child: Text('暂无已发布内容'),
const AppGutter(
child: SurfaceSection(child: Text('暂无已发布内容')),
)
else
...contents.take(6).map((item) => RecordCard(record: item)),
AppGutter(
child: SurfaceSection(
padding: EdgeInsets.zero,
child: Column(
children: [
for (var index = 0; index < contents.take(6).length; index++) ...[
RecordCard(record: contents[index]),
if (index < contents.take(6).length - 1)
const Divider(indent: 16, endIndent: 16),
],
],
),
),
),
],
),
);

106
apps/user_app/lib/ui/features/orders/orders_page.dart
View File

@@ -22,9 +22,17 @@ class OrdersPage extends StatelessWidget {
final action = await showModalBottomSheet<String>(
context: context,
builder: (context) => SafeArea(
top: false,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Padding(
padding: const EdgeInsets.fromLTRB(20, 4, 20, 12),
child: Align(
alignment: Alignment.centerLeft,
child: Text('订单操作', style: Theme.of(context).textTheme.titleLarge),
),
),
if (record.status == 16 || record.status == 18) ...[
ListTile(
title: const Text('支付宝支付'),
@@ -75,12 +83,8 @@ class OrdersPage extends StatelessWidget {
identity: record.identity,
requestNo: const Uuid().v7(),
channel: action,
payType: kIsWeb
? (action == 'alipay' ? 'wap' : 'jsapi')
: 'app',
openid: kIsWeb && action == 'wechat'
? Uri.base.queryParameters['openid'] ?? ''
: '',
payType: kIsWeb ? (action == 'alipay' ? 'wap' : 'jsapi') : 'app',
openid: kIsWeb && action == 'wechat' ? Uri.base.queryParameters['openid'] ?? '' : '',
);
await _launcher.launch(payment);
if (context.mounted) {
@@ -126,47 +130,53 @@ class OrdersPage extends StatelessWidget {
@override
Widget build(BuildContext context) => DefaultTabController(
length: 4,
child: Scaffold(
appBar: AppBar(
title: const Text('我的订单'),
bottom: const TabBar(
tabs: [
Tab(text: '商城'),
Tab(text: '供气'),
Tab(text: '退款'),
Tab(text: '工单'),
],
),
),
body: TabBarView(
children: [
RecordListPage(
title: '商城订单',
eyebrow: '交易',
viewModel: RecordListViewModel(repository.shopOrders),
onRecordTap: (record) =>
_openActions(context, record, 'shop'),
),
RecordListPage(
title: '供气订单',
eyebrow: '履约',
viewModel: RecordListViewModel(repository.gasOrders),
onRecordTap: (record) =>
_openActions(context, record, 'gas'),
),
RecordListPage(
title: '退款记录',
eyebrow: '资金',
viewModel: RecordListViewModel(repository.refunds),
),
RecordListPage(
title: '服务工单',
eyebrow: '服务',
viewModel: RecordListViewModel(repository.tickets),
),
],
),
length: 4,
child: Scaffold(
appBar: AppBar(
title: const Text('我的订单'),
bottom: const TabBar(
tabs: [
Tab(text: '商城'),
Tab(text: '供气'),
Tab(text: '退款'),
Tab(text: '工单'),
],
),
);
),
body: TabBarView(
children: [
RecordListPage(
title: '商城订单',
eyebrow: '交易',
description: '查看商城订单并处理待支付或退款事项',
embedded: true,
viewModel: RecordListViewModel(repository.shopOrders),
onRecordTap: (record) => _openActions(context, record, 'shop'),
),
RecordListPage(
title: '供气订单',
eyebrow: '履约',
description: '查看供气订单与当前履约状态',
embedded: true,
viewModel: RecordListViewModel(repository.gasOrders),
onRecordTap: (record) => _openActions(context, record, 'gas'),
),
RecordListPage(
title: '退款记录',
eyebrow: '资金',
description: '退款结果以服务端审核和资金流水为准',
embedded: true,
viewModel: RecordListViewModel(repository.refunds),
),
RecordListPage(
title: '服务工单',
eyebrow: '服务',
description: '查看维修、安装与其他服务工单',
embedded: true,
viewModel: RecordListViewModel(repository.tickets),
),
],
),
),
);
}

159
apps/user_app/lib/ui/features/profile/profile_page.dart
View File

@@ -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,
);
}

68
apps/user_app/lib/ui/features/shared/record_list_page.dart
View File

@@ -12,6 +12,7 @@ class RecordListPage extends StatefulWidget {
this.description,
this.floatingActionButton,
this.onRecordTap,
this.embedded = false,
super.key,
});
@@ -21,6 +22,7 @@ class RecordListPage extends StatefulWidget {
final RecordListViewModel viewModel;
final Widget? floatingActionButton;
final ValueChanged<ClientRecord>? onRecordTap;
final bool embedded;
@override
State<RecordListPage> createState() => _RecordListPageState();
@@ -40,10 +42,8 @@ class _RecordListPageState extends State<RecordListPage> {
}
@override
Widget build(BuildContext context) => Scaffold(
appBar: AppBar(title: Text(widget.title)),
floatingActionButton: widget.floatingActionButton,
body: ListenableBuilder(
Widget build(BuildContext context) {
final content = ListenableBuilder(
listenable: widget.viewModel,
builder: (context, _) {
final state = widget.viewModel;
@@ -62,24 +62,52 @@ class _RecordListPageState extends State<RecordListPage> {
child: CustomScrollView(
physics: const AlwaysScrollableScrollPhysics(),
slivers: [
SliverToBoxAdapter(
child: PageIntro(
eyebrow: widget.eyebrow,
title: widget.title,
description: widget.description,
if (!widget.embedded)
SliverToBoxAdapter(
child: PageIntro(
eyebrow: widget.eyebrow,
title: widget.title,
description: widget.description,
),
)
else
SliverToBoxAdapter(
child: Padding(
padding: const EdgeInsets.fromLTRB(20, 20, 20, 12),
child: Text(
widget.description ?? widget.title,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
),
),
),
if (state.records.isEmpty)
const SliverFillRemaining(
hasScrollBody: false,
child: EmptyState(title: '暂无记录', description: '服务端还没有可展示的数据'),
)
else
SliverList.builder(
itemCount: state.records.length,
itemBuilder: (context, index) => RecordCard(
record: state.records[index],
onTap: widget.onRecordTap == null ? null : () => widget.onRecordTap!(state.records[index]),
SliverPadding(
padding: const EdgeInsets.symmetric(horizontal: 20),
sliver: SliverToBoxAdapter(
child: SurfaceSection(
padding: EdgeInsets.zero,
child: Column(
children: [
for (var index = 0; index < state.records.length; index++) ...[
RecordCard(
record: state.records[index],
onTap: widget.onRecordTap == null
? null
: () => widget.onRecordTap!(state.records[index]),
),
if (index < state.records.length - 1)
const Divider(indent: 16, endIndent: 16),
],
],
),
),
),
),
const SliverPadding(padding: EdgeInsets.only(bottom: 24)),
@@ -87,6 +115,12 @@ class _RecordListPageState extends State<RecordListPage> {
),
);
},
),
);
);
if (widget.embedded) return content;
return Scaffold(
appBar: AppBar(title: Text(widget.title)),
floatingActionButton: widget.floatingActionButton,
body: content,
);
}
}

148
apps/user_app/lib/ui/features/shop/shop_page.dart
View File

@@ -33,26 +33,37 @@ class _ShopPageState extends State<ShopPage> {
}
final confirmed = await showModalBottomSheet<bool>(
context: context,
isScrollControlled: true,
showDragHandle: true,
builder: (context) => Padding(
padding: const EdgeInsets.fromLTRB(20, 4, 20, 30),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text(
'确认下单',
style: Theme.of(context).textTheme.titleLarge?.copyWith(fontWeight: FontWeight.w800),
),
const SizedBox(height: 12),
Text(product.title),
Text(addresses.first.title),
const SizedBox(height: 18),
ElevatedButton(
onPressed: () => Navigator.pop(context, true),
child: const Text('提交订单'),
),
],
builder: (context) => SafeArea(
top: false,
child: Padding(
padding: const EdgeInsets.fromLTRB(20, 4, 20, 20),
child: Column(
mainAxisSize: MainAxisSize.min,
crossAxisAlignment: CrossAxisAlignment.stretch,
children: [
Text('确认下单', style: Theme.of(context).textTheme.titleLarge),
const SizedBox(height: 20),
ListTile(
contentPadding: EdgeInsets.zero,
leading: const Icon(Icons.shopping_bag_outlined),
title: Text(product.title),
subtitle: Text(product.subtitle),
),
ListTile(
contentPadding: EdgeInsets.zero,
leading: const Icon(Icons.location_on_outlined),
title: const Text('配送地址'),
subtitle: Text(addresses.first.title),
),
const SizedBox(height: 20),
FilledButton(
onPressed: () => Navigator.pop(context, true),
child: const Text('提交订单'),
),
],
),
),
),
);
@@ -89,48 +100,22 @@ class _ShopPageState extends State<ShopPage> {
}
final products = snapshot.data ?? const [];
return ListView(
padding: const EdgeInsets.only(bottom: 24),
padding: const EdgeInsets.only(bottom: 32),
children: [
const PageIntro(eyebrow: '品质保障', title: '燃气安全商城', description: '价格和库存以服务端结算为准'),
if (products.isEmpty)
const EmptyState(title: '暂无商品', description: '目前没有上架且有库存的商品')
else
...products.map(
(product) => Card(
margin: const EdgeInsets.symmetric(horizontal: 16, vertical: 7),
child: Padding(
padding: const EdgeInsets.all(18),
child: Row(
children: [
Container(
width: 60,
height: 60,
decoration: BoxDecoration(
color: const Color(0xFFEAF1FF),
borderRadius: BorderRadius.circular(16),
),
child: const Icon(Icons.local_fire_department_outlined),
),
const SizedBox(width: 14),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
product.title,
style: const TextStyle(fontWeight: FontWeight.w800),
),
const SizedBox(height: 6),
Text(product.subtitle),
],
),
),
IconButton.filled(
onPressed: () => _buy(product),
icon: const Icon(Icons.add_shopping_cart),
),
AppGutter(
child: SurfaceSection(
padding: EdgeInsets.zero,
child: Column(
children: [
for (var index = 0; index < products.length; index++) ...[
_ProductRow(product: products[index], onBuy: () => _buy(products[index])),
if (index < products.length - 1) const Divider(indent: 92, endIndent: 16),
],
),
],
),
),
),
@@ -140,3 +125,56 @@ class _ShopPageState extends State<ShopPage> {
),
);
}
class _ProductRow extends StatelessWidget {
const _ProductRow({required this.product, required this.onBuy});
final ClientRecord product;
final VoidCallback onBuy;
@override
Widget build(BuildContext context) => Padding(
padding: const EdgeInsets.fromLTRB(16, 16, 12, 16),
child: Row(
children: [
Container(
width: 60,
height: 60,
decoration: BoxDecoration(
color: Theme.of(context).colorScheme.primaryContainer,
borderRadius: BorderRadius.circular(16),
),
child: Icon(
Icons.local_fire_department_outlined,
color: Theme.of(context).colorScheme.primary,
semanticLabel: '燃气安全商品',
),
),
const SizedBox(width: 16),
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(product.title, style: Theme.of(context).textTheme.titleMedium),
if (product.subtitle.isNotEmpty) ...[
const SizedBox(height: 4),
Text(
product.subtitle,
style: Theme.of(context).textTheme.bodyMedium?.copyWith(
color: Theme.of(context).colorScheme.onSurfaceVariant,
),
),
],
],
),
),
const SizedBox(width: 8),
IconButton.filled(
tooltip: '购买 ${product.title}',
onPressed: onBuy,
icon: const Icon(Icons.add_shopping_cart_outlined),
),
],
),
);
}