491 lines
16 KiB
Dart
491 lines
16 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/contribution_providers.dart';
|
|
|
|
class ContributionPage extends ConsumerWidget {
|
|
const ContributionPage({super.key});
|
|
|
|
// 设计色彩
|
|
static const Color _orange = Color(0xFFFF6B00);
|
|
static const Color _green = Color(0xFF22C55E);
|
|
static const Color _grayText = Color(0xFF6B7280);
|
|
static const Color _darkText = Color(0xFF1F2937);
|
|
static const Color _bgGray = Color(0xFFF3F4F6);
|
|
static const Color _lightGray = Color(0xFFF9FAFB);
|
|
|
|
@override
|
|
Widget build(BuildContext context, WidgetRef ref) {
|
|
final user = ref.watch(userNotifierProvider);
|
|
final accountSequence = user.accountSequence ?? '';
|
|
final contributionAsync = ref.watch(contributionProvider(accountSequence));
|
|
|
|
return Scaffold(
|
|
backgroundColor: const Color(0xFFF5F5F5),
|
|
body: SafeArea(
|
|
child: RefreshIndicator(
|
|
onRefresh: () async {
|
|
ref.invalidate(contributionProvider(accountSequence));
|
|
},
|
|
child: contributionAsync.when(
|
|
data: (contribution) {
|
|
return CustomScrollView(
|
|
slivers: [
|
|
// 顶部导航栏
|
|
SliverToBoxAdapter(child: _buildAppBar(context)),
|
|
// 内容
|
|
SliverPadding(
|
|
padding: const EdgeInsets.all(16),
|
|
sliver: SliverList(
|
|
delegate: SliverChildListDelegate([
|
|
// 总贡献值卡片
|
|
_buildTotalContributionCard(contribution),
|
|
const SizedBox(height: 16),
|
|
// 三栏统计
|
|
_buildThreeColumnStats(contribution),
|
|
const SizedBox(height: 16),
|
|
// 今日预估收益
|
|
_buildTodayEstimateCard(contribution),
|
|
const SizedBox(height: 16),
|
|
// 贡献值明细
|
|
_buildContributionDetailCard(contribution),
|
|
const SizedBox(height: 16),
|
|
// 团队层级统计
|
|
_buildTeamStatsCard(contribution),
|
|
const SizedBox(height: 16),
|
|
// 贡献值失效倒计时
|
|
_buildExpirationCard(contribution),
|
|
const SizedBox(height: 24),
|
|
]),
|
|
),
|
|
),
|
|
],
|
|
);
|
|
},
|
|
loading: () => const Center(child: CircularProgressIndicator()),
|
|
error: (error, _) => Center(
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
const Icon(Icons.error_outline, size: 48, color: AppColors.error),
|
|
const SizedBox(height: 16),
|
|
Text('加载失败: $error'),
|
|
const SizedBox(height: 16),
|
|
ElevatedButton(
|
|
onPressed: () => ref.invalidate(contributionProvider(accountSequence)),
|
|
child: const Text('重试'),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildAppBar(BuildContext context) {
|
|
return Container(
|
|
color: _lightGray,
|
|
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 12),
|
|
child: Row(
|
|
children: [
|
|
// Logo
|
|
Container(
|
|
width: 32,
|
|
height: 32,
|
|
decoration: BoxDecoration(
|
|
color: _orange.withOpacity(0.1),
|
|
borderRadius: BorderRadius.circular(8),
|
|
),
|
|
child: const Icon(Icons.eco, color: _orange, size: 20),
|
|
),
|
|
const SizedBox(width: 8),
|
|
const Text(
|
|
'榴莲生态',
|
|
style: TextStyle(
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.bold,
|
|
color: _darkText,
|
|
letterSpacing: 0.45,
|
|
),
|
|
),
|
|
const Spacer(),
|
|
// 客服
|
|
IconButton(
|
|
icon: const Icon(Icons.headset_mic_outlined, color: _grayText),
|
|
onPressed: () {},
|
|
),
|
|
// 通知（带红点）
|
|
Stack(
|
|
children: [
|
|
IconButton(
|
|
icon: const Icon(Icons.notifications_outlined, color: _grayText),
|
|
onPressed: () {},
|
|
),
|
|
Positioned(
|
|
right: 10,
|
|
top: 10,
|
|
child: Container(
|
|
width: 8,
|
|
height: 8,
|
|
decoration: const BoxDecoration(
|
|
color: Colors.red,
|
|
shape: BoxShape.circle,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildTotalContributionCard(contribution) {
|
|
final total = contribution?.effectiveContribution ?? '0';
|
|
return Container(
|
|
padding: const EdgeInsets.all(20),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(16),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
const Text(
|
|
'总贡献值',
|
|
style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: _grayText),
|
|
),
|
|
Icon(Icons.visibility_outlined, color: _grayText.withOpacity(0.5), size: 18),
|
|
],
|
|
),
|
|
const SizedBox(height: 8),
|
|
Text(
|
|
formatAmount(total),
|
|
style: const TextStyle(
|
|
fontSize: 30,
|
|
fontWeight: FontWeight.bold,
|
|
color: _orange,
|
|
letterSpacing: -0.75,
|
|
),
|
|
),
|
|
const SizedBox(height: 12),
|
|
// 有效期标签
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 12, vertical: 6),
|
|
decoration: BoxDecoration(
|
|
color: _lightGray,
|
|
borderRadius: BorderRadius.circular(999),
|
|
),
|
|
child: Row(
|
|
mainAxisSize: MainAxisSize.min,
|
|
children: [
|
|
Icon(Icons.info_outline, size: 14, color: _grayText.withOpacity(0.7)),
|
|
const SizedBox(width: 6),
|
|
Text(
|
|
'贡献值有效期: 剩余 730 天',
|
|
style: TextStyle(fontSize: 12, color: _grayText.withOpacity(0.9)),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildThreeColumnStats(contribution) {
|
|
return Container(
|
|
padding: const EdgeInsets.all(20),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(16),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
_buildStatColumn('个人贡献值', contribution?.personalContribution ?? '0', false),
|
|
_buildStatColumn('团队贡献值', contribution?.teamLevelContribution ?? '0', true),
|
|
_buildStatColumn('省市公司', contribution?.systemContribution ?? '0', true),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildStatColumn(String label, String value, bool showLeftBorder) {
|
|
return Expanded(
|
|
child: Container(
|
|
decoration: showLeftBorder
|
|
? const BoxDecoration(
|
|
border: Border(left: BorderSide(color: Color(0xFFE5E7EB), width: 1)),
|
|
)
|
|
: null,
|
|
padding: const EdgeInsets.symmetric(horizontal: 4),
|
|
child: Column(
|
|
children: [
|
|
Text(label, style: const TextStyle(fontSize: 12, color: _grayText)),
|
|
const SizedBox(height: 4),
|
|
Text(
|
|
formatAmount(value),
|
|
style: const TextStyle(fontSize: 14, fontWeight: FontWeight.bold, color: _darkText),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildTodayEstimateCard(contribution) {
|
|
return Container(
|
|
padding: const EdgeInsets.all(20),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(16),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
// 图标
|
|
Container(
|
|
width: 40,
|
|
height: 40,
|
|
decoration: BoxDecoration(
|
|
color: _green.withOpacity(0.1),
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: const Icon(Icons.trending_up, color: _green, size: 24),
|
|
),
|
|
const SizedBox(width: 12),
|
|
// 文字说明
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text(
|
|
'今日预估收益',
|
|
style: TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: _grayText),
|
|
),
|
|
Text(
|
|
'基于当前贡献值占比计算',
|
|
style: TextStyle(fontSize: 12, color: _grayText.withOpacity(0.7)),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
// 收益数值
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.end,
|
|
children: const [
|
|
Text.rich(
|
|
TextSpan(
|
|
children: [
|
|
TextSpan(
|
|
text: '+156.78 ',
|
|
style: TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: _green),
|
|
),
|
|
TextSpan(
|
|
text: '积分',
|
|
style: TextStyle(fontSize: 12, color: _green),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Text('股', style: TextStyle(fontSize: 12, color: _green)),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildContributionDetailCard(contribution) {
|
|
return Container(
|
|
padding: const EdgeInsets.all(20),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(16),
|
|
),
|
|
child: Column(
|
|
children: [
|
|
// 标题行
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
const Text(
|
|
'贡献值明细',
|
|
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: _darkText),
|
|
),
|
|
GestureDetector(
|
|
onTap: () {},
|
|
child: Row(
|
|
children: const [
|
|
Text('查看全部', style: TextStyle(fontSize: 12, color: _orange)),
|
|
Icon(Icons.chevron_right, size: 14, color: _orange),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 16),
|
|
// 明细列表
|
|
_buildDetailRow('认种榴莲树', '2024-01-15 14:30', '+22,617.00'),
|
|
const Divider(height: 24),
|
|
_buildDetailRow('团队奖励(5级)', '2024-01-15 09:12', '+1,130.85'),
|
|
const Divider(height: 24),
|
|
_buildDetailRow('直推奖励', '2024-01-14 18:45', '+565.43'),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildDetailRow(String title, String time, String amount) {
|
|
return Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(title, style: const TextStyle(fontSize: 14, fontWeight: FontWeight.w500, color: _darkText)),
|
|
const SizedBox(height: 2),
|
|
Text(time, style: const TextStyle(fontSize: 12, color: _grayText)),
|
|
],
|
|
),
|
|
Text(
|
|
amount,
|
|
style: const TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: _green),
|
|
),
|
|
],
|
|
);
|
|
}
|
|
|
|
Widget _buildTeamStatsCard(contribution) {
|
|
return Container(
|
|
padding: const EdgeInsets.all(20),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(16),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
const Text(
|
|
'团队层级统计',
|
|
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: _darkText),
|
|
),
|
|
const SizedBox(height: 16),
|
|
// 第一行
|
|
Row(
|
|
children: [
|
|
_buildTeamStatItem('直推人数', '${contribution?.directReferralAdoptedCount ?? 0}', '人'),
|
|
const SizedBox(width: 16),
|
|
_buildTeamStatItem('团队总人数', '128', '人'),
|
|
],
|
|
),
|
|
const SizedBox(height: 16),
|
|
// 第二行
|
|
Row(
|
|
children: [
|
|
_buildTeamStatItem('已解锁层级', '${contribution?.unlockedLevelDepth ?? 0}', '级'),
|
|
const SizedBox(width: 16),
|
|
_buildTeamStatItem('团队认种总数', '456', '棵'),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildTeamStatItem(String label, String value, String unit) {
|
|
return Expanded(
|
|
child: Container(
|
|
padding: const EdgeInsets.all(12),
|
|
decoration: BoxDecoration(
|
|
color: _bgGray,
|
|
borderRadius: BorderRadius.circular(12),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(label, style: const TextStyle(fontSize: 12, color: _grayText)),
|
|
const SizedBox(height: 4),
|
|
Text.rich(
|
|
TextSpan(
|
|
children: [
|
|
TextSpan(
|
|
text: '$value ',
|
|
style: const TextStyle(fontSize: 18, fontWeight: FontWeight.bold, color: _orange),
|
|
),
|
|
TextSpan(
|
|
text: unit,
|
|
style: const TextStyle(fontSize: 12, color: _grayText),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
Widget _buildExpirationCard(contribution) {
|
|
return Container(
|
|
padding: const EdgeInsets.all(20),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.circular(16),
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
// 标题
|
|
Row(
|
|
children: const [
|
|
Icon(Icons.timer_outlined, color: _orange, size: 24),
|
|
SizedBox(width: 8),
|
|
Text(
|
|
'贡献值失效倒计时',
|
|
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, color: _darkText),
|
|
),
|
|
],
|
|
),
|
|
const SizedBox(height: 12),
|
|
// 进度条
|
|
ClipRRect(
|
|
borderRadius: BorderRadius.circular(5),
|
|
child: LinearProgressIndicator(
|
|
value: 0.8,
|
|
minHeight: 10,
|
|
backgroundColor: _bgGray,
|
|
valueColor: const AlwaysStoppedAnimation<Color>(_orange),
|
|
),
|
|
),
|
|
const SizedBox(height: 12),
|
|
// 说明文字
|
|
const Text(
|
|
'您的贡献值将于 2026-01-15 失效',
|
|
style: TextStyle(fontSize: 12, color: _grayText),
|
|
),
|
|
const SizedBox(height: 8),
|
|
// 提示
|
|
Container(
|
|
padding: const EdgeInsets.symmetric(horizontal: 8, vertical: 4),
|
|
decoration: BoxDecoration(
|
|
color: _bgGray,
|
|
borderRadius: BorderRadius.circular(4),
|
|
),
|
|
child: const Text(
|
|
'* 运营账号贡献值永不失效',
|
|
style: TextStyle(fontSize: 10, color: _orange),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|