231 lines
8.1 KiB
Dart
231 lines
8.1 KiB
Dart
import 'package:flutter/material.dart';
|
||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||
import 'package:flutter_screenutil/flutter_screenutil.dart';
|
||
import 'package:go_router/go_router.dart';
|
||
import 'package:new_learn/core/api/my_point/api.dart';
|
||
import 'package:new_learn/core/api/my_point/model.dart';
|
||
import 'package:new_learn/core/logger/app_talker.dart';
|
||
import 'package:new_learn/core/providers/user_provider.dart';
|
||
import 'package:new_learn/core/components/common_paged_list.dart';
|
||
|
||
/// ============================================================
|
||
/// 【MyPointPage】我的积分页（点「我的」tab 的"我的积分"进入）
|
||
///
|
||
/// 一、数据来源（对齐 Vue3 端 api/userPoint/index.ts）：
|
||
/// 1. 顶部积分卡：当前总积分来自 Riverpod 全局用户
|
||
/// currentUser.userPoints（登录时已拉取，无需再请求接口）
|
||
/// 2. 积分明细列表：GetUserPointRecordPagedList（游标分页，见下方）
|
||
///
|
||
/// 二、列表为什么用 CommonPagedList：
|
||
/// 积分记录可能几千条，必须懒加载（只渲染屏幕可见行）+ 上拉分页。
|
||
/// 组件基于 infinite_scroll_pagination 封装（Flutter Favorite 认证），
|
||
/// 已内置：下拉刷新 / 触底加载 / 防重入 / 失败重试 / 空状态 / 没有更多。
|
||
/// 页面只做两件事：load（调接口）+ buildItem（画每一行）。
|
||
///
|
||
/// 三、页码分页：
|
||
/// CommonPagedList 的 load 只给 pageKey（首页 1，之后 +1），业务把
|
||
/// pageKey 当 pageIndex 用。hasNext 用 total 判断：总条数 > 已请求条数。
|
||
/// 对应 Vue3 端 type.ts 的 UserPointRecordRequest{pageIndex,pageSize}。
|
||
///
|
||
/// 四、高频坑：
|
||
/// 1. 列表要包在 Expanded 里（Column 里无限高度会报 unbounded height）；
|
||
/// 2. 积分正负号决定颜色：points>0 绿色加分，<0 橙色扣分；
|
||
/// 3. bizTime 后端直接给字符串，不需要自己格式化；
|
||
/// 4. go_router ShellRoute push 出来的页面不自动显示返回箭头
|
||
/// （issue #144687），必须手动加 leading，见 build 里 AppBar。
|
||
/// ============================================================
|
||
class MyPointPage extends ConsumerStatefulWidget {
|
||
const MyPointPage({super.key});
|
||
|
||
@override
|
||
ConsumerState<MyPointPage> createState() => _MyPointPageState();
|
||
}
|
||
|
||
class _MyPointPageState extends ConsumerState<MyPointPage> {
|
||
/// 每页条数（CommonPagedList 无 pageSize 概念，由业务在 load 里自定）
|
||
static const int _pageSize = 10;
|
||
|
||
@override
|
||
void initState() {
|
||
super.initState();
|
||
talker.debug('打开页面：我的积分');
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
// 全局用户：当前总积分（登录后才有值；未登录 0）
|
||
final user = ref.watch(currentUserProvider).value;
|
||
|
||
return Scaffold(
|
||
appBar: AppBar(
|
||
title: const Text('我的积分'),
|
||
// go_router 已知 issue #144687：从 ShellRoute（4 tab）内 push 出来的
|
||
// 页面，AppBar 不自动显示返回箭头。这里手动加：
|
||
// 能 pop（正常从"我的"进入）→ pop 回上一页；
|
||
// 不能 pop（如 Web 深链/刷新直达）→ 兜底回"我的"tab。
|
||
leading: IconButton(
|
||
icon: const Icon(Icons.arrow_back),
|
||
onPressed: () =>
|
||
context.canPop() ? context.pop() : context.go('/my'),
|
||
),
|
||
),
|
||
body: Column(
|
||
children: [
|
||
// ---------- 顶部积分卡 ----------
|
||
_PointHeaderCard(totalPoints: user?.userPoints ?? 0),
|
||
// ---------- 积分明细列表（分页） ----------
|
||
Expanded(
|
||
child: CommonPagedList<UserPointRecord>(
|
||
load: (page) async {
|
||
talker.debug('加载积分记录：pageIndex=$page pageSize=$_pageSize');
|
||
// pageKey 当 pageIndex；CommonPagedList 从 1 开始递增
|
||
final res = await UserPointApi.instance.getRecordPage(
|
||
pageIndex: page,
|
||
pageSize: _pageSize,
|
||
);
|
||
return PagingResult<UserPointRecord>(
|
||
data: res.data,
|
||
hasNext: res.total > page * _pageSize,
|
||
);
|
||
},
|
||
buildItem: (context, item, index) => _RecordRow(record: item),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|
||
/// 顶部积分卡：当前总积分
|
||
class _PointHeaderCard extends StatelessWidget {
|
||
const _PointHeaderCard({required this.totalPoints});
|
||
|
||
final double totalPoints;
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Container(
|
||
width: double.infinity,
|
||
margin: EdgeInsets.fromLTRB(16.w, 12.h, 16.w, 12.h),
|
||
padding: EdgeInsets.symmetric(horizontal: 20.w, vertical: 18.h),
|
||
decoration: BoxDecoration(
|
||
gradient: const LinearGradient(
|
||
colors: [Color(0xFFFF9800), Color(0xFFFFB74D)],
|
||
begin: Alignment.topLeft,
|
||
end: Alignment.bottomRight,
|
||
),
|
||
borderRadius: BorderRadius.circular(16.r),
|
||
),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Text(
|
||
'当前积分',
|
||
style: TextStyle(fontSize: 13.sp, color: Colors.white.withValues(alpha: 0.9)),
|
||
),
|
||
SizedBox(height: 6.h),
|
||
Text(
|
||
// 积分可能是小数（接口返回 105.5）
|
||
totalPoints.toString(),
|
||
style: TextStyle(
|
||
fontSize: 34.sp,
|
||
color: Colors.white,
|
||
fontWeight: FontWeight.bold,
|
||
),
|
||
),
|
||
SizedBox(height: 8.h),
|
||
Text(
|
||
'积分明细 · 变动随时记录',
|
||
style: TextStyle(
|
||
fontSize: 12.sp,
|
||
color: Colors.white70,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|
||
/// 单条积分记录行
|
||
class _RecordRow extends StatelessWidget {
|
||
const _RecordRow({required this.record});
|
||
|
||
final UserPointRecord record;
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
// 正负号决定颜色：加分绿 / 扣分橙 / 0 灰
|
||
final isAdd = record.points > 0;
|
||
final isSub = record.points < 0;
|
||
final Color signColor = isAdd
|
||
? const Color(0xFF2E7D32)
|
||
: (isSub ? const Color(0xFFE65100) : const Color(0xFF9E9E9E));
|
||
final Color iconBg = isAdd
|
||
? const Color(0xFFE8F5E9)
|
||
: (isSub ? const Color(0xFFFFF3E0) : const Color(0xFFF5F5F5));
|
||
final String sign = isAdd ? '+' : (isSub ? '-' : '');
|
||
|
||
return Padding(
|
||
padding: EdgeInsets.symmetric(horizontal: 16.w, vertical: 10.h),
|
||
child: Row(
|
||
children: [
|
||
// 左侧圆形图标（加减符号）
|
||
Container(
|
||
width: 40.w,
|
||
height: 40.h,
|
||
decoration: BoxDecoration(
|
||
color: iconBg,
|
||
shape: BoxShape.circle,
|
||
),
|
||
alignment: Alignment.center,
|
||
child: Text(
|
||
sign,
|
||
style: TextStyle(
|
||
fontSize: 22.sp,
|
||
color: signColor,
|
||
fontWeight: FontWeight.bold,
|
||
),
|
||
),
|
||
),
|
||
SizedBox(width: 12.w),
|
||
// 中间：说明 + 时间
|
||
Expanded(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Text(
|
||
record.pointMessage,
|
||
maxLines: 1,
|
||
overflow: TextOverflow.ellipsis,
|
||
style: TextStyle(
|
||
fontSize: 15.sp,
|
||
fontWeight: FontWeight.w500,
|
||
color: const Color(0xFF333333),
|
||
),
|
||
),
|
||
SizedBox(height: 4.h),
|
||
Text(
|
||
record.bizTime,
|
||
style: TextStyle(fontSize: 12.sp, color: const Color(0xFF999999)),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
SizedBox(width: 8.w),
|
||
// 右侧：积分变动值
|
||
Text(
|
||
'$sign${record.points.abs()}',
|
||
style: TextStyle(
|
||
fontSize: 16.sp,
|
||
fontWeight: FontWeight.bold,
|
||
color: signColor,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
}
|