470 lines
15 KiB
Dart
470 lines
15 KiB
Dart
import 'package:cached_network_image/cached_network_image.dart';
|
||
import 'package:flutter/material.dart';
|
||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
||
import 'package:new_learn/core/api/class/api.dart';
|
||
import 'package:new_learn/core/api/class/model.dart';
|
||
import 'package:new_learn/core/components/common_paged_list.dart';
|
||
import 'package:new_learn/core/components/user_circle_avatar.dart';
|
||
import 'package:new_learn/core/providers/user_provider.dart';
|
||
import 'package:new_learn/core/utils/img_url.dart';
|
||
import 'package:new_learn/features/class/widgets/point_rank_widgets.dart';
|
||
|
||
/// ============================================================
|
||
/// 【PointRankView】「积分排行」子页 —— 对标 Vue pointRank.vue
|
||
///
|
||
/// 一、Vue 源结构：
|
||
/// 海报图 → 分类(本班级/同年级/同云校) → 子 tab(总榜/本周/上周/今日/昨天)
|
||
/// → 规则排序栏 → 排行列表(RankItem) → 底部「我的排名」卡 → 积分规则弹窗。
|
||
///
|
||
/// 二、数据对接（已接通）：
|
||
/// - 人数统计 → getUserCount
|
||
/// - 榜单列表 → getUserRankPagedList（游标分页，CommonPagedList）
|
||
/// - 我的排名 → 同一接口返回的 myRank
|
||
/// - 分类/子tab/排序切换 → 通过 ValueKey 重建列表，自动重新拉第一页
|
||
///
|
||
/// 三、组件已抽离到 widgets/point_rank_widgets.dart（RankRow/EnergyRuleModal/
|
||
/// RuleSection/TriangleClipper），本文件只保留页面状态与数据逻辑。
|
||
///
|
||
/// 四、换算规则：rpx → /2 后接 .w/.h/.sp/.r
|
||
/// ============================================================
|
||
class PointRankView extends ConsumerStatefulWidget {
|
||
const PointRankView({super.key});
|
||
|
||
@override
|
||
ConsumerState<PointRankView> createState() => _PointRankViewState();
|
||
}
|
||
|
||
class _PointRankViewState extends ConsumerState<PointRankView> {
|
||
static const Color _primary = Color(0xFF3D7DF5);
|
||
static const int _pageSize = 20;
|
||
|
||
int _activeCategory = 0; // 0 本班级 / 1 同年级 / 2 同云校
|
||
int _activeSubTab = 0; // 总榜/本周/上周/今日/昨天
|
||
bool _sortDesc = true; // true 积分倒序 / false 正序
|
||
bool _showRule = false;
|
||
|
||
int? _classCount;
|
||
int? _gradeCount;
|
||
int? _cloudCount;
|
||
|
||
UserRank? _myRank;
|
||
int _prevRankPageId = 0;
|
||
|
||
static const List<String> _categories = ['本班级', '同年级', '同云校'];
|
||
static const List<String> _subTabs = ['总榜', '本周', '上周', '今日', '昨天'];
|
||
|
||
@override
|
||
void initState() {
|
||
super.initState();
|
||
_fetchUserCount();
|
||
}
|
||
|
||
Future<void> _fetchUserCount() async {
|
||
try {
|
||
final res = await UserRankApi.instance.getUserCount();
|
||
if (!mounted) return;
|
||
setState(() {
|
||
_classCount = res.classUserCount;
|
||
_gradeCount = res.gradeUserCount;
|
||
_cloudCount = res.cloudSchoolUserCount;
|
||
});
|
||
} catch (_) {
|
||
// 人数统计失败静默处理
|
||
}
|
||
}
|
||
|
||
Future<PagingResult<UserRank>> _loadRank(int page) async {
|
||
final prev = page == 1 ? 0 : _prevRankPageId;
|
||
final res = await UserRankApi.instance.getRankPage(
|
||
pageIndex: page,
|
||
pageSize: _pageSize,
|
||
prevPageId: prev,
|
||
userRankType: _activeSubTab,
|
||
userClass: _activeCategory,
|
||
desc: _sortDesc,
|
||
);
|
||
if (res.userRanks.isNotEmpty) {
|
||
_prevRankPageId = res.userRanks.last.userId;
|
||
}
|
||
if (page == 1 && mounted) {
|
||
setState(() => _myRank = res.myRank);
|
||
}
|
||
return PagingResult<UserRank>(
|
||
data: res.userRanks,
|
||
hasNext: res.userRanks.length >= _pageSize,
|
||
);
|
||
}
|
||
|
||
String _countText(int? count) => count == null ? '--' : '$count';
|
||
|
||
String _formatPoints(double p) {
|
||
if (p == p.roundToDouble()) return p.toInt().toString();
|
||
return p.toString();
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final currentUserId = ref.watch(currentUserProvider).value?.userId ?? 0;
|
||
return Stack(
|
||
children: [
|
||
Column(
|
||
children: [
|
||
_buildPoster(),
|
||
_buildCategoryBar(),
|
||
Expanded(child: _buildRankListContainer(currentUserId)),
|
||
],
|
||
),
|
||
if (_myRank != null)
|
||
Positioned(left: 0, right: 0, bottom: 0, child: _buildMyRankCard()),
|
||
if (_showRule)
|
||
EnergyRuleModal(onClose: () => setState(() => _showRule = false)),
|
||
],
|
||
);
|
||
}
|
||
|
||
Widget _buildPoster() {
|
||
return Container(
|
||
margin: EdgeInsets.only(top: 22.h),
|
||
alignment: Alignment.center,
|
||
child: CachedNetworkImage(
|
||
imageUrl: ImgUrl.build(
|
||
'/StaticResource/2026-07-29/pointRankPoster1785291500821.png',
|
||
),
|
||
width: 170.w,
|
||
height: 30.h,
|
||
fit: BoxFit.fill,
|
||
errorWidget: (_, _, _) => const SizedBox(width: 170, height: 30),
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildCategoryBar() {
|
||
return Container(
|
||
margin: EdgeInsets.only(top: 20.h),
|
||
padding: EdgeInsets.symmetric(horizontal: 14.w),
|
||
child: Row(
|
||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||
children: [
|
||
for (int i = 0; i < _categories.length; i++) _buildCategoryItem(i),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildCategoryItem(int index) {
|
||
final active = _activeCategory == index;
|
||
final countText = switch (index) {
|
||
0 => _countText(_classCount),
|
||
1 => _countText(_gradeCount),
|
||
_ => _countText(_cloudCount),
|
||
};
|
||
return GestureDetector(
|
||
onTap: () {
|
||
if (_activeCategory == index) return;
|
||
setState(() => _activeCategory = index);
|
||
},
|
||
child: Column(
|
||
children: [
|
||
Container(
|
||
width: 105.w,
|
||
height: 45.h,
|
||
decoration: BoxDecoration(
|
||
color: active
|
||
? Colors.white
|
||
: Colors.white.withValues(alpha: 0.5),
|
||
borderRadius: BorderRadius.circular(8.r),
|
||
// 始终保留 1px border 占位，避免激活/未激活切换时 content 区域差 2px 抖动
|
||
border: Border.all(
|
||
color: active ? Colors.transparent : Colors.white,
|
||
width: 1,
|
||
),
|
||
),
|
||
// Web 端回退字体行高偏大，固定高度可能溢出 → 内容放不下时自动缩小
|
||
child: FittedBox(
|
||
fit: BoxFit.scaleDown,
|
||
child: Column(
|
||
mainAxisAlignment: MainAxisAlignment.center,
|
||
children: [
|
||
Text(
|
||
_categories[index],
|
||
style: TextStyle(
|
||
fontSize: 13,
|
||
fontWeight: FontWeight.w500,
|
||
color: active ? _primary : const Color(0xFF687FAD),
|
||
),
|
||
),
|
||
// SizedBox(height: 0.5.h),
|
||
Text(
|
||
'$countText人',
|
||
style: TextStyle(
|
||
fontSize: 11,
|
||
color: active ? _primary : const Color(0xFF687FAD),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
// 始终渲染三角形占位，visible 切换避免外层 Column 高度变化抖动
|
||
Visibility(
|
||
visible: active,
|
||
maintainSize: true,
|
||
maintainAnimation: true,
|
||
maintainState: true,
|
||
child: _buildTriangle(),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildTriangle() {
|
||
return ClipPath(
|
||
clipper: TriangleClipper(),
|
||
child: Container(width: 14.w, height: 8.h, color: Colors.white),
|
||
);
|
||
}
|
||
|
||
Widget _buildRankListContainer(int currentUserId) {
|
||
return Container(
|
||
margin: EdgeInsets.only(top: 8.h),
|
||
decoration: const BoxDecoration(
|
||
color: Colors.white,
|
||
borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
|
||
),
|
||
child: Column(
|
||
children: [
|
||
_buildSubTabList(),
|
||
_buildRuleSortBar(),
|
||
Expanded(
|
||
child: CommonPagedList<UserRank>(
|
||
// 分类/子tab/排序变化 → 重建列表，自动重拉第一页
|
||
key: ValueKey('rank-$_activeCategory-$_activeSubTab-$_sortDesc'),
|
||
load: _loadRank,
|
||
padding: EdgeInsets.fromLTRB(14.w, 13.h, 14.w, 121.h),
|
||
emptyWidget: Center(
|
||
child: Text(
|
||
'暂无积分排行',
|
||
style: TextStyle(
|
||
fontSize: 14.sp,
|
||
color: const Color(0xFF999999),
|
||
),
|
||
),
|
||
),
|
||
buildItem: (context, item, index) {
|
||
final isSelf = item.userId != 0 && item.userId == currentUserId;
|
||
return RankRow(
|
||
item: item,
|
||
category: _activeCategory,
|
||
isSelf: isSelf,
|
||
);
|
||
},
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildSubTabList() {
|
||
return Container(
|
||
margin: EdgeInsets.only(top: 12.h),
|
||
padding: EdgeInsets.symmetric(horizontal: 25.w),
|
||
child: Row(
|
||
mainAxisAlignment: MainAxisAlignment.spaceAround,
|
||
children: [
|
||
for (int i = 0; i < _subTabs.length; i++) _buildSubTabItem(i),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildSubTabItem(int index) {
|
||
final active = _activeSubTab == index;
|
||
return GestureDetector(
|
||
onTap: () {
|
||
if (_activeSubTab == index) return;
|
||
setState(() => _activeSubTab = index);
|
||
},
|
||
child: Container(
|
||
width: 52.w,
|
||
height: 32.h,
|
||
alignment: Alignment.center,
|
||
decoration: BoxDecoration(
|
||
color: active ? _primary : const Color(0xFFF5F8FA),
|
||
borderRadius: BorderRadius.circular(20.r),
|
||
),
|
||
child: Text(
|
||
_subTabs[index],
|
||
style: TextStyle(
|
||
fontSize: 14,
|
||
fontWeight: active ? FontWeight.w500 : FontWeight.w400,
|
||
color: active ? Colors.white : const Color(0xFF687FAD),
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildRuleSortBar() {
|
||
return Container(
|
||
margin: EdgeInsets.only(top: 21.h),
|
||
padding: EdgeInsets.symmetric(horizontal: 14.w),
|
||
child: Row(
|
||
children: [
|
||
Expanded(
|
||
child: GestureDetector(
|
||
onTap: () => setState(() => _showRule = true),
|
||
child: Row(
|
||
children: [
|
||
const Flexible(
|
||
child: Text(
|
||
'积分数值越高排名越靠前，同分并列同名次',
|
||
maxLines: 1,
|
||
overflow: TextOverflow.ellipsis,
|
||
style: TextStyle(fontSize: 12, color: Color(0xFF687FAD)),
|
||
),
|
||
),
|
||
SizedBox(width: 4.w),
|
||
const Icon(
|
||
Icons.info_outline,
|
||
size: 13,
|
||
color: Color(0xFF687FAD),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
GestureDetector(
|
||
onTap: () => setState(() => _sortDesc = !_sortDesc),
|
||
child: Row(
|
||
children: [
|
||
Text(
|
||
_sortDesc ? '积分倒序' : '积分正序',
|
||
style: const TextStyle(
|
||
fontSize: 14,
|
||
fontWeight: FontWeight.w500,
|
||
color: _primary,
|
||
),
|
||
),
|
||
SizedBox(width: 5.w),
|
||
_buildSortIcons(),
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildSortIcons() {
|
||
final up = _sortDesc
|
||
? '/StaticResource/2026-07-29/reverseOrder_up_icon1785291938907.png'
|
||
: '/StaticResource/2026-07-29/properOrder_up_icon1785291938906.png';
|
||
final down = _sortDesc
|
||
? '/StaticResource/2026-07-29/reverseOrder_down_icon1785291938905.png'
|
||
: '/StaticResource/2026-07-29/properOrder_down_icon1785291938907.png';
|
||
return Column(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
CachedNetworkImage(
|
||
imageUrl: ImgUrl.build(up),
|
||
width: 12.w,
|
||
height: 7.h,
|
||
fit: BoxFit.contain,
|
||
),
|
||
CachedNetworkImage(
|
||
imageUrl: ImgUrl.build(down),
|
||
width: 12.w,
|
||
height: 7.h,
|
||
fit: BoxFit.contain,
|
||
),
|
||
],
|
||
);
|
||
}
|
||
|
||
Widget _buildMyRankCard() {
|
||
final rank = _myRank!;
|
||
return Container(
|
||
height: 70.h,
|
||
padding: EdgeInsets.fromLTRB(10.w, 0, 14.w, 0),
|
||
decoration: const BoxDecoration(
|
||
gradient: LinearGradient(
|
||
begin: Alignment.topCenter,
|
||
end: Alignment.bottomCenter,
|
||
colors: [Color(0xFFD6EEFF), Color(0xFFFFFFFF)],
|
||
),
|
||
borderRadius: BorderRadius.vertical(top: Radius.circular(16)),
|
||
),
|
||
child: Row(
|
||
children: [
|
||
SizedBox(
|
||
width: 50.w,
|
||
child: Column(
|
||
mainAxisAlignment: MainAxisAlignment.center,
|
||
children: [
|
||
Text(
|
||
'${rank.rank}',
|
||
style: const TextStyle(
|
||
fontSize: 16,
|
||
fontWeight: FontWeight.bold,
|
||
color: Color(0xFF1D2B47),
|
||
),
|
||
),
|
||
SizedBox(height: 8.h),
|
||
const Text(
|
||
'我的排名',
|
||
style: TextStyle(fontSize: 9, color: Color(0xFF687FAD)),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
UserCircleAvatar(url: _avatarUrl(rank.userAvatar), radius: 22.w),
|
||
SizedBox(width: 10.w),
|
||
Expanded(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
mainAxisAlignment: MainAxisAlignment.center,
|
||
children: [
|
||
Text(
|
||
rank.userName.isEmpty ? '我' : rank.userName,
|
||
overflow: TextOverflow.ellipsis,
|
||
style: TextStyle(
|
||
fontSize: 15,
|
||
fontWeight: FontWeight.bold,
|
||
color: Color(0xFF1D2B47),
|
||
),
|
||
),
|
||
if (_activeCategory != 0 && rank.userClassName.isNotEmpty) ...[
|
||
SizedBox(height: 3.h),
|
||
Text(
|
||
rank.userClassName,
|
||
style: TextStyle(fontSize: 12, color: Color(0xFF687FAD)),
|
||
),
|
||
],
|
||
],
|
||
),
|
||
),
|
||
Text(
|
||
_formatPoints(rank.points),
|
||
style: TextStyle(
|
||
fontSize: 16,
|
||
fontWeight: FontWeight.w500,
|
||
color: _primary,
|
||
),
|
||
),
|
||
SizedBox(width: 25.w),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
|
||
static String _avatarUrl(String? raw) {
|
||
final url = ImgUrl.build(raw);
|
||
return url.isEmpty
|
||
? ImgUrl.build('/StaticResource/2026-04-11/default_avatar.png')
|
||
: url;
|
||
}
|
||
}
|