rwadurian/frontend/mining-app/lib/presentation/pages/asset/asset_page.dart

804 lines
25 KiB
Dart

import 'package:flutter/material.dart';
import 'package:flutter_riverpod/flutter_riverpod.dart';
import '../../../core/constants/app_colors.dart';
import '../../../core/utils/format_utils.dart';
import '../../providers/user_providers.dart';
import '../../providers/mining_providers.dart';
import '../../widgets/shimmer_loading.dart';
class AssetPage extends ConsumerWidget {
const AssetPage({super.key});
// 设计色彩
static const Color _orange = Color(0xFFFF6B00);
static const Color _green = Color(0xFF10B981);
static const Color _grayText = Color(0xFF6B7280);
static const Color _darkText = Color(0xFF1F2937);
static const Color _bgGray = Color(0xFFF3F4F6);
static const Color _riverBed = Color(0xFF4B5563);
static const Color _serenade = Color(0xFFFFF7ED);
static const Color _feta = Color(0xFFF0FDF4);
static const Color _scandal = Color(0xFFDCFCE7);
static const Color _jewel = Color(0xFF15803D);
@override
Widget build(BuildContext context, WidgetRef ref) {
final user = ref.watch(userNotifierProvider);
final accountSequence = user.accountSequence ?? '';
final accountAsync = ref.watch(shareAccountProvider(accountSequence));
return Scaffold(
backgroundColor: Colors.white,
body: SafeArea(
bottom: false,
child: LayoutBuilder(
builder: (context, constraints) {
return RefreshIndicator(
onRefresh: () async {
ref.invalidate(shareAccountProvider(accountSequence));
},
child: SingleChildScrollView(
physics: const AlwaysScrollableScrollPhysics(),
child: ConstrainedBox(
constraints: BoxConstraints(minHeight: constraints.maxHeight),
child: Column(
children: [
// 顶部导航栏
_buildAppBar(context, user),
// 内容
Padding(
padding: const EdgeInsets.symmetric(horizontal: 16),
child: Column(
children: [
const SizedBox(height: 8),
// 总资产卡片
accountAsync.when(
data: (account) => _buildTotalAssetCard(account),
loading: () => _buildLoadingCard(),
error: (_, __) => _buildErrorCard('资产加载失败'),
),
const SizedBox(height: 24),
// 快捷操作按钮
_buildQuickActions(),
const SizedBox(height: 24),
// 资产列表
accountAsync.when(
data: (account) => _buildAssetList(account),
loading: () => _buildAssetListSkeleton(),
error: (_, __) => const SizedBox.shrink(),
),
const SizedBox(height: 24),
// 收益统计
_buildEarningsCard(),
const SizedBox(height: 24),
// 账户列表
accountAsync.when(
data: (account) => _buildAccountList(account),
loading: () => _buildAssetListSkeleton(),
error: (_, __) => const SizedBox.shrink(),
),
const SizedBox(height: 100),
],
),
),
],
),
),
),
);
},
),
),
);
}
Widget _buildAppBar(BuildContext context, user) {
return Container(
color: _bgGray.withOpacity(0.9),
padding: const EdgeInsets.symmetric(horizontal: 20, vertical: 12),
child: Row(
children: [
// 头像
Container(
width: 36,
height: 36,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(18),
border: Border.all(color: _green, width: 2),
),
child: ClipRRect(
borderRadius: BorderRadius.circular(16),
child: Center(
child: Text(
user.nickname?.substring(0, 1) ?? 'U',
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: _darkText,
),
),
),
),
),
const Spacer(),
// 标题
const Text(
'我的资产',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Color(0xFF111827),
),
),
const Spacer(),
// 设置按钮
Container(
width: 36,
height: 36,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(18),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 4,
offset: const Offset(0, 2),
),
],
),
child: const Icon(Icons.settings_outlined, size: 20, color: _grayText),
),
const SizedBox(width: 12),
// 通知按钮
Container(
width: 36,
height: 36,
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(18),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 4,
offset: const Offset(0, 2),
),
],
),
child: Stack(
children: [
const Center(
child: Icon(Icons.notifications_outlined, size: 20, color: _grayText),
),
Positioned(
right: 8,
top: 8,
child: Container(
width: 8,
height: 8,
decoration: const BoxDecoration(
color: Colors.red,
shape: BoxShape.circle,
),
),
),
],
),
),
],
),
);
}
Widget _buildTotalAssetCard(account) {
final totalAsset = account?.tradingBalance ?? '88888.88';
return Container(
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(20),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.04),
blurRadius: 30,
offset: const Offset(0, 8),
),
],
),
child: Stack(
children: [
// 背景装饰圆
Positioned(
right: -20,
top: -40,
child: Container(
width: 128,
height: 128,
decoration: BoxDecoration(
color: _serenade,
borderRadius: BorderRadius.circular(64),
),
),
),
// 顶部渐变条
Positioned(
top: 0,
left: 0,
right: 0,
child: Container(
height: 4,
decoration: BoxDecoration(
gradient: const LinearGradient(
colors: [Color(0xFFFF6B00), Color(0xFFFDBA74)],
),
borderRadius: const BorderRadius.only(
topLeft: Radius.circular(20),
topRight: Radius.circular(20),
),
),
),
),
// 内容
Padding(
padding: const EdgeInsets.fromLTRB(24, 20, 24, 24),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 标题行
Row(
children: [
const Text(
'总资产估值',
style: TextStyle(
fontSize: 14,
color: _grayText,
),
),
const SizedBox(width: 8),
Icon(
Icons.visibility_outlined,
size: 14,
color: _grayText.withOpacity(0.5),
),
],
),
const SizedBox(height: 8),
// 金额
Text(
'¥ ${formatAmount(totalAsset)}',
style: const TextStyle(
fontSize: 30,
fontWeight: FontWeight.bold,
color: _orange,
letterSpacing: -0.75,
),
),
const SizedBox(height: 4),
// USDT估值
const Text(
'≈ 12,345.67 USDT',
style: TextStyle(
fontSize: 14,
color: Color(0xFF9CA3AF),
),
),
const SizedBox(height: 12),
// 今日收益
Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
decoration: BoxDecoration(
color: _feta,
borderRadius: BorderRadius.circular(8),
),
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
Icon(Icons.trending_up, size: 14, color: _green),
const SizedBox(width: 6),
Text(
'+¥ 156.78 今日',
style: TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
color: _green,
),
),
],
),
),
],
),
),
],
),
);
}
Widget _buildQuickActions() {
return Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: [
_buildQuickActionItem(Icons.add, '接收', _orange),
_buildQuickActionItem(Icons.remove, '发送', _orange),
_buildQuickActionItem(Icons.swap_horiz, '划转', _orange),
_buildQuickActionItem(Icons.download, '提现', _orange),
],
);
}
Widget _buildQuickActionItem(IconData icon, String label, Color color) {
return Column(
children: [
Container(
width: 48,
height: 48,
decoration: BoxDecoration(
color: _serenade,
borderRadius: BorderRadius.circular(16),
),
child: Icon(icon, color: color, size: 24),
),
const SizedBox(height: 8),
Text(
label,
style: const TextStyle(
fontSize: 12,
fontWeight: FontWeight.w500,
color: _riverBed,
),
),
],
);
}
Widget _buildAssetList(account) {
return Column(
children: [
// 积分股
_buildAssetItem(
icon: Icons.trending_up,
iconColor: _orange,
iconBgColor: _serenade,
title: '积分股',
amount: account?.miningBalance ?? '123456.78',
valueInCny: '¥15,234.56',
tag: '含倍数资产: 246,913.56',
growthText: '每秒 +0.0015',
),
const SizedBox(height: 16),
// 绿积分
_buildAssetItem(
icon: Icons.eco,
iconColor: _green,
iconBgColor: _feta,
title: '绿积分',
amount: account?.tradingBalance ?? '88888.88',
valueInCny: '¥10,986.54',
badge: '可提现',
badgeColor: _jewel,
badgeBgColor: _scandal,
),
const SizedBox(height: 16),
// 待分配积分股
_buildAssetItem(
icon: Icons.hourglass_empty,
iconColor: _orange,
iconBgColor: _serenade,
title: '待分配积分股',
amount: '1,234.56',
subtitle: '次日开始参与分配',
),
],
);
}
Widget _buildAssetItem({
required IconData icon,
required Color iconColor,
required Color iconBgColor,
required String title,
required String amount,
String? valueInCny,
String? tag,
String? growthText,
String? badge,
Color? badgeColor,
Color? badgeBgColor,
String? subtitle,
}) {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 2,
offset: const Offset(0, 1),
),
],
),
child: Row(
children: [
// 图标
Container(
width: 40,
height: 40,
decoration: BoxDecoration(
color: iconBgColor,
borderRadius: BorderRadius.circular(12),
),
child: Icon(icon, color: iconColor, size: 24),
),
const SizedBox(width: 12),
// 内容
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
// 标题行
Row(
children: [
Text(
title,
style: const TextStyle(
fontSize: 16,
fontWeight: FontWeight.bold,
color: Color(0xFF111827),
),
),
if (badge != null) ...[
const SizedBox(width: 7),
Container(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
decoration: BoxDecoration(
color: badgeBgColor ?? _scandal,
borderRadius: BorderRadius.circular(9999),
),
child: Text(
badge,
style: TextStyle(
fontSize: 10,
fontWeight: FontWeight.w500,
color: badgeColor ?? _jewel,
),
),
),
],
],
),
const SizedBox(height: 2),
// 数量
Text(
formatAmount(amount),
style: const TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Color(0xFF111827),
),
),
// 估值
if (valueInCny != null)
Text(
'$valueInCny',
style: const TextStyle(
fontSize: 12,
color: Color(0xFF9CA3AF),
),
),
// 副标题
if (subtitle != null)
Padding(
padding: const EdgeInsets.only(top: 3),
child: Text(
subtitle,
style: const TextStyle(
fontSize: 12,
color: Color(0xFF9CA3AF),
),
),
),
// 标签行
if (tag != null || growthText != null)
Padding(
padding: const EdgeInsets.only(top: 8),
child: Row(
children: [
if (tag != null)
Container(
padding: const EdgeInsets.symmetric(horizontal: 6, vertical: 2),
decoration: BoxDecoration(
color: _serenade,
borderRadius: BorderRadius.circular(12),
),
child: Text(
tag,
style: const TextStyle(
fontSize: 10,
color: _orange,
),
),
),
if (growthText != null) ...[
const SizedBox(width: 8),
Row(
children: [
Icon(Icons.bolt, size: 12, color: _green),
Text(
growthText,
style: TextStyle(
fontSize: 10,
color: _green,
),
),
],
),
],
],
),
),
],
),
),
// 箭头
Icon(Icons.chevron_right, size: 14, color: _grayText.withOpacity(0.5)),
],
),
);
}
Widget _buildEarningsCard() {
return Container(
padding: const EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 2,
offset: const Offset(0, 1),
),
],
),
child: Column(
children: [
// 标题
Row(
children: [
Container(
width: 4,
height: 20,
decoration: BoxDecoration(
color: _orange,
borderRadius: BorderRadius.circular(2),
),
),
const SizedBox(width: 8),
const Text(
'收益统计',
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: _darkText,
),
),
],
),
const SizedBox(height: 16),
// 统计数据
Row(
children: [
_buildEarningsItem('累计收益', '12,345.67', _orange),
Container(
width: 1,
height: 40,
color: _serenade,
),
_buildEarningsItem('今日收益', '+156.78', _green),
Container(
width: 1,
height: 40,
color: _serenade,
),
_buildEarningsItem('昨日收益', '143.21', const Color(0xFF9CA3AF)),
],
),
],
),
);
}
Widget _buildEarningsItem(String label, String value, Color valueColor) {
return Expanded(
child: Column(
children: [
Text(
label,
style: const TextStyle(
fontSize: 12,
color: _grayText,
),
textAlign: TextAlign.center,
),
const SizedBox(height: 4),
Text(
value,
style: TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: valueColor,
),
textAlign: TextAlign.center,
),
],
),
);
}
Widget _buildAccountList(account) {
return Column(
children: [
// 交易账户
_buildAccountItem(
icon: Icons.account_balance_wallet,
iconColor: _orange,
title: '交易账户',
balance: account?.tradingBalance ?? '5678.90',
unit: '绿积分',
status: '正常',
statusColor: _green,
statusBgColor: _feta,
),
const SizedBox(height: 16),
// 提现账户
_buildAccountItem(
icon: Icons.savings,
iconColor: _orange,
title: '提现账户',
balance: '1,234.56',
unit: '绿积分',
status: '已绑定',
statusColor: const Color(0xFF9CA3AF),
statusBgColor: Colors.white,
statusBorder: true,
),
],
);
}
Widget _buildAccountItem({
required IconData icon,
required Color iconColor,
required String title,
required String balance,
required String unit,
required String status,
required Color statusColor,
required Color statusBgColor,
bool statusBorder = false,
}) {
return Container(
padding: const EdgeInsets.all(16),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
boxShadow: [
BoxShadow(
color: Colors.black.withOpacity(0.05),
blurRadius: 2,
offset: const Offset(0, 1),
),
],
),
child: Row(
children: [
// 图标
Container(
width: 36,
height: 36,
decoration: BoxDecoration(
color: _serenade,
borderRadius: BorderRadius.circular(18),
),
child: Icon(icon, color: iconColor, size: 20),
),
const SizedBox(width: 12),
// 内容
Expanded(
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Text(
title,
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.w500,
color: Color(0xFF111827),
),
),
const SizedBox(height: 2),
RichText(
text: TextSpan(
children: [
TextSpan(
text: '$balance ',
style: const TextStyle(
fontSize: 14,
fontWeight: FontWeight.bold,
color: _orange,
),
),
TextSpan(
text: unit,
style: const TextStyle(
fontSize: 12,
color: Color(0xFF9CA3AF),
),
),
],
),
),
],
),
),
// 状态标签
Container(
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 2),
decoration: BoxDecoration(
color: statusBgColor,
borderRadius: BorderRadius.circular(9999),
border: statusBorder ? Border.all(color: const Color(0xFFE5E7EB)) : null,
),
child: Text(
status,
style: TextStyle(
fontSize: 10,
color: statusColor,
),
),
),
const SizedBox(width: 8),
// 箭头
Icon(Icons.chevron_right, size: 14, color: _grayText.withOpacity(0.5)),
],
),
);
}
Widget _buildLoadingCard() {
return const AssetCardSkeleton();
}
Widget _buildAssetListSkeleton() {
return Column(
children: const [
AssetItemSkeleton(),
SizedBox(height: 16),
AssetItemSkeleton(),
SizedBox(height: 16),
AssetItemSkeleton(),
],
);
}
Widget _buildErrorCard(String message) {
return Container(
padding: const EdgeInsets.all(32),
decoration: BoxDecoration(
color: Colors.white,
borderRadius: BorderRadius.circular(16),
),
child: Center(
child: Column(
children: [
const Icon(Icons.error_outline, size: 48, color: AppColors.error),
const SizedBox(height: 8),
Text(message),
],
),
),
);
}
}