194 lines
6.5 KiB
Dart
194 lines
6.5 KiB
Dart
import 'package:flutter/material.dart';
|
|
import '../../../../app/theme/app_colors.dart';
|
|
import '../../../../app/theme/app_typography.dart';
|
|
import '../../../../app/theme/app_spacing.dart';
|
|
import '../../../../shared/widgets/genex_button.dart';
|
|
|
|
/// A6. 账户模块 - 我的余额
|
|
///
|
|
/// 总余额(美元显示)、可提现金额、冻结金额、充值/提现
|
|
/// 交易记录时间线
|
|
class WalletPage extends StatelessWidget {
|
|
const WalletPage({super.key});
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
appBar: AppBar(
|
|
title: const Text('我的余额'),
|
|
),
|
|
body: SingleChildScrollView(
|
|
child: Column(
|
|
children: [
|
|
// Balance Card
|
|
_buildBalanceCard(),
|
|
|
|
// Quick Actions
|
|
Padding(
|
|
padding: AppSpacing.pagePadding,
|
|
child: Row(
|
|
children: [
|
|
Expanded(
|
|
child: GenexButton(
|
|
label: '充值',
|
|
icon: Icons.add_rounded,
|
|
variant: GenexButtonVariant.primary,
|
|
onPressed: () {
|
|
Navigator.pushNamed(context, '/wallet/deposit');
|
|
},
|
|
),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: GenexButton(
|
|
label: '提现',
|
|
icon: Icons.account_balance_rounded,
|
|
variant: GenexButtonVariant.outline,
|
|
onPressed: () {
|
|
Navigator.pushNamed(context, '/wallet/withdraw');
|
|
},
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
const SizedBox(height: 24),
|
|
|
|
// Transaction History
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 20),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Text('交易记录', style: AppTypography.h3),
|
|
GestureDetector(
|
|
onTap: () {
|
|
Navigator.pushNamed(context, '/wallet/records');
|
|
},
|
|
child: Row(
|
|
children: [
|
|
Text('筛选', style: AppTypography.labelSmall.copyWith(
|
|
color: AppColors.textTertiary,
|
|
)),
|
|
const Icon(Icons.filter_list_rounded, size: 16,
|
|
color: AppColors.textTertiary),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
const SizedBox(height: 12),
|
|
|
|
// Transaction List
|
|
_buildTransactionList(),
|
|
|
|
const SizedBox(height: 80),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildBalanceCard() {
|
|
return Container(
|
|
margin: const EdgeInsets.fromLTRB(20, 16, 20, 16),
|
|
padding: const EdgeInsets.all(24),
|
|
decoration: BoxDecoration(
|
|
gradient: AppColors.cardGradient,
|
|
borderRadius: AppSpacing.borderRadiusLg,
|
|
boxShadow: AppSpacing.shadowPrimary,
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text('总余额', style: AppTypography.bodySmall.copyWith(
|
|
color: Colors.white70,
|
|
)),
|
|
const SizedBox(height: 8),
|
|
Text(
|
|
'\$1,234.56',
|
|
style: AppTypography.displayLarge.copyWith(
|
|
color: Colors.white,
|
|
fontSize: 36,
|
|
),
|
|
),
|
|
const SizedBox(height: 20),
|
|
Row(
|
|
children: [
|
|
_balanceItem('可提现', '\$1,034.56'),
|
|
const SizedBox(width: 32),
|
|
_balanceItem('冻结中', '\$200.00'),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _balanceItem(String label, String value) {
|
|
return Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(label, style: AppTypography.caption.copyWith(color: Colors.white54)),
|
|
const SizedBox(height: 4),
|
|
Text(value, style: AppTypography.labelMedium.copyWith(color: Colors.white)),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _buildTransactionList() {
|
|
final transactions = [
|
|
('买入 星巴克 \$25 礼品卡', '-\$21.25', Icons.shopping_cart_rounded, AppColors.textPrimary, '今天 14:32'),
|
|
('卖出 Amazon \$50 购物券', '+\$42.50', Icons.sell_rounded, AppColors.success, '今天 10:15'),
|
|
('充值', '+\$500.00', Icons.add_circle_outline_rounded, AppColors.info, '昨天 09:20'),
|
|
('转赠 Target 券', '-\$30.00', Icons.card_giftcard_rounded, AppColors.textPrimary, '02/07 16:45'),
|
|
('核销 Nike 运动券', '使用', Icons.check_circle_outline_rounded, AppColors.success, '02/06 12:00'),
|
|
('提现', '-\$200.00', Icons.account_balance_rounded, AppColors.textPrimary, '02/05 08:30'),
|
|
];
|
|
|
|
return ListView.separated(
|
|
shrinkWrap: true,
|
|
physics: const NeverScrollableScrollPhysics(),
|
|
padding: const EdgeInsets.symmetric(horizontal: 20),
|
|
itemCount: transactions.length,
|
|
separatorBuilder: (_, __) => const Divider(indent: 56),
|
|
itemBuilder: (context, index) {
|
|
final (title, amount, icon, color, time) = transactions[index];
|
|
return Padding(
|
|
padding: const EdgeInsets.symmetric(vertical: 8),
|
|
child: Row(
|
|
children: [
|
|
Container(
|
|
width: 40,
|
|
height: 40,
|
|
decoration: BoxDecoration(
|
|
color: color.withValues(alpha: 0.1),
|
|
shape: BoxShape.circle,
|
|
),
|
|
child: Icon(icon, size: 20, color: color),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(title, style: AppTypography.labelMedium),
|
|
Text(time, style: AppTypography.caption),
|
|
],
|
|
),
|
|
),
|
|
Text(
|
|
amount,
|
|
style: AppTypography.labelMedium.copyWith(
|
|
color: amount.startsWith('+') ? AppColors.success : AppColors.textPrimary,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
},
|
|
);
|
|
}
|
|
}
|