first commit
This commit is contained in:
@@ -0,0 +1,358 @@
|
||||
import 'package:flutter/material.dart';
|
||||
import 'package:flutter_riverpod/flutter_riverpod.dart';
|
||||
|
||||
import '../../core/network/api_exception.dart';
|
||||
import '../../providers/bill_edit_provider.dart';
|
||||
import '../../providers/category_provider.dart';
|
||||
import '../../utils/amount_input_formatter.dart';
|
||||
import '../../utils/date_util.dart';
|
||||
import '../../utils/toast.dart';
|
||||
import '../../widgets/category_picker_grid.dart';
|
||||
import '../../widgets/state_views.dart';
|
||||
|
||||
/// 账单编辑页（复刻 uniApp pages/bill/detail.vue 的编辑能力，并补上删除）
|
||||
class BillEditPage extends ConsumerStatefulWidget {
|
||||
const BillEditPage({super.key, required this.billId});
|
||||
|
||||
final int billId;
|
||||
|
||||
@override
|
||||
ConsumerState<BillEditPage> createState() => _BillEditPageState();
|
||||
}
|
||||
|
||||
class _BillEditPageState extends ConsumerState<BillEditPage> {
|
||||
final _amountController = TextEditingController();
|
||||
final _descriptionController = TextEditingController();
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
_amountController.dispose();
|
||||
_descriptionController.dispose();
|
||||
super.dispose();
|
||||
}
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
final state = ref.watch(billEditProvider(widget.billId));
|
||||
final notifier = ref.read(billEditProvider(widget.billId).notifier);
|
||||
|
||||
// 服务端数据回填时同步非受控输入框（与记账页同一套 revision 机制）
|
||||
ref.listen<int>(
|
||||
billEditProvider(widget.billId).select((s) => s.revision),
|
||||
(prev, next) {
|
||||
if (prev == next) return;
|
||||
final s = ref.read(billEditProvider(widget.billId));
|
||||
_amountController.text = s.amount?.toStringAsFixed(2) ?? '';
|
||||
_descriptionController.text = s.description;
|
||||
},
|
||||
);
|
||||
|
||||
return Scaffold(
|
||||
appBar: AppBar(title: const Text('编辑账单')),
|
||||
body: Container(
|
||||
width: double.infinity,
|
||||
height: double.infinity,
|
||||
decoration: const BoxDecoration(
|
||||
gradient: LinearGradient(
|
||||
begin: Alignment.topLeft,
|
||||
end: Alignment.bottomRight,
|
||||
colors: [Color(0xFFFFE5CC), Color(0xFFFFD4A8), Color(0xFFFFC08A)],
|
||||
),
|
||||
),
|
||||
child: _body(state, notifier),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _body(BillEditState state, BillEditNotifier notifier) {
|
||||
if (state.loading) {
|
||||
return const Center(child: LoadingView(tip: '账单加载中...'));
|
||||
}
|
||||
if (state.loadError != null) {
|
||||
return Center(
|
||||
child: Padding(
|
||||
padding: const EdgeInsets.all(24),
|
||||
child: ErrorView(message: state.loadError!, onRetry: notifier.reload),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
return ListView(
|
||||
padding: const EdgeInsets.all(16),
|
||||
children: [
|
||||
_sectionLabel('账单类型'),
|
||||
_typeSelector(state, notifier),
|
||||
const SizedBox(height: 16),
|
||||
_sectionLabel('分类'),
|
||||
_categorySection(state, notifier),
|
||||
const SizedBox(height: 16),
|
||||
_sectionLabel('金额'),
|
||||
_amountField(state, notifier),
|
||||
const SizedBox(height: 16),
|
||||
_sectionLabel('日期'),
|
||||
_dateField(state, notifier),
|
||||
const SizedBox(height: 16),
|
||||
_sectionLabel('备注'),
|
||||
_descriptionField(notifier),
|
||||
const SizedBox(height: 28),
|
||||
_footer(state, notifier),
|
||||
const SizedBox(height: 40),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _sectionLabel(String text) => Padding(
|
||||
padding: const EdgeInsets.only(bottom: 8, left: 4),
|
||||
child: Text(
|
||||
text,
|
||||
style: const TextStyle(
|
||||
fontSize: 14,
|
||||
fontWeight: FontWeight.w600,
|
||||
color: Color(0xFF5D4037),
|
||||
),
|
||||
),
|
||||
);
|
||||
|
||||
// ---- 类型 ----
|
||||
Widget _typeSelector(BillEditState state, BillEditNotifier notifier) {
|
||||
return Row(
|
||||
children: [
|
||||
_typeCard('📤', '支出', 1, state, notifier),
|
||||
const SizedBox(width: 10),
|
||||
_typeCard('📥', '收入', 2, state, notifier),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _typeCard(
|
||||
String icon,
|
||||
String label,
|
||||
int type,
|
||||
BillEditState state,
|
||||
BillEditNotifier notifier,
|
||||
) {
|
||||
final active = state.type == type;
|
||||
return Expanded(
|
||||
child: GestureDetector(
|
||||
onTap: () => notifier.setType(type),
|
||||
child: AnimatedContainer(
|
||||
duration: const Duration(milliseconds: 200),
|
||||
padding: const EdgeInsets.symmetric(vertical: 12),
|
||||
decoration: BoxDecoration(
|
||||
color: active ? Colors.white : Colors.white.withValues(alpha: 0.5),
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
border: Border.all(
|
||||
color: active ? const Color(0xFFC8956E) : Colors.transparent,
|
||||
width: 2,
|
||||
),
|
||||
),
|
||||
child: Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Text(icon, style: const TextStyle(fontSize: 20)),
|
||||
const SizedBox(width: 8),
|
||||
Text(
|
||||
label,
|
||||
style: TextStyle(
|
||||
fontSize: 15,
|
||||
fontWeight: FontWeight.bold,
|
||||
color: active ? const Color(0xFF5D4037) : const Color(0xFF8D6E63),
|
||||
),
|
||||
),
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// ---- 分类 ----
|
||||
Widget _categorySection(BillEditState state, BillEditNotifier notifier) {
|
||||
return Consumer(
|
||||
builder: (context, ref, _) {
|
||||
final categoriesAsync = ref.watch(categoriesProvider(state.type));
|
||||
return categoriesAsync.when(
|
||||
loading: () => const LoadingView(padding: EdgeInsets.all(20)),
|
||||
error: (e, _) => ErrorView(message: asApiException(e).message),
|
||||
data: (categories) => CategoryPickerGrid(
|
||||
categories: categories,
|
||||
selectedId: state.categoryId,
|
||||
onSelect: notifier.setCategory,
|
||||
crossAxisCount: 4,
|
||||
),
|
||||
);
|
||||
},
|
||||
);
|
||||
}
|
||||
|
||||
// ---- 金额 ----
|
||||
Widget _amountField(BillEditState state, BillEditNotifier notifier) {
|
||||
return TextField(
|
||||
controller: _amountController,
|
||||
keyboardType: const TextInputType.numberWithOptions(decimal: true),
|
||||
inputFormatters: [AmountInputFormatter()],
|
||||
style: const TextStyle(fontSize: 20, fontWeight: FontWeight.bold, color: Color(0xFF5D4037)),
|
||||
decoration: InputDecoration(
|
||||
hintText: '请输入金额',
|
||||
prefixText: '¥ ',
|
||||
prefixStyle: const TextStyle(
|
||||
fontSize: 18,
|
||||
color: Color(0xFFC8956E),
|
||||
fontWeight: FontWeight.bold,
|
||||
),
|
||||
filled: true,
|
||||
fillColor: Colors.white,
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
borderSide: BorderSide.none,
|
||||
),
|
||||
),
|
||||
onChanged: (v) => notifier.setAmount(double.tryParse(v)),
|
||||
);
|
||||
}
|
||||
|
||||
// ---- 日期 ----
|
||||
Widget _dateField(BillEditState state, BillEditNotifier notifier) {
|
||||
return GestureDetector(
|
||||
onTap: () async {
|
||||
final initial = DateTime.tryParse(state.billDate) ?? DateTime.now();
|
||||
final picked = await showDatePicker(
|
||||
context: context,
|
||||
initialDate: initial,
|
||||
firstDate: DateTime(2000),
|
||||
lastDate: DateTime(2100),
|
||||
);
|
||||
if (picked != null) notifier.setDate(formatDate(picked));
|
||||
},
|
||||
child: Container(
|
||||
padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 14),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
),
|
||||
child: Row(
|
||||
children: [
|
||||
Text(state.billDate, style: const TextStyle(fontSize: 15, color: Color(0xFF5D4037))),
|
||||
const Spacer(),
|
||||
const Icon(Icons.chevron_right, color: Color(0xFF8D6E63)),
|
||||
],
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
// ---- 备注 ----
|
||||
Widget _descriptionField(BillEditNotifier notifier) {
|
||||
return TextField(
|
||||
controller: _descriptionController,
|
||||
maxLines: 3,
|
||||
maxLength: 200,
|
||||
style: const TextStyle(fontSize: 15, color: Color(0xFF5D4037)),
|
||||
decoration: InputDecoration(
|
||||
hintText: '请输入备注（可选）',
|
||||
filled: true,
|
||||
fillColor: Colors.white,
|
||||
border: OutlineInputBorder(
|
||||
borderRadius: BorderRadius.circular(14),
|
||||
borderSide: BorderSide.none,
|
||||
),
|
||||
),
|
||||
onChanged: notifier.setDescription,
|
||||
);
|
||||
}
|
||||
|
||||
// ---- 底部：删除 + 保存 ----
|
||||
Widget _footer(BillEditState state, BillEditNotifier notifier) {
|
||||
final busy = state.submitting;
|
||||
return Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: SizedBox(
|
||||
height: 48,
|
||||
child: OutlinedButton(
|
||||
style: OutlinedButton.styleFrom(
|
||||
backgroundColor: Colors.white,
|
||||
foregroundColor: const Color(0xFFD32F2F),
|
||||
side: const BorderSide(color: Color(0xFFE0C9A6)),
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24)),
|
||||
),
|
||||
onPressed: busy ? null : () => _confirmDelete(notifier),
|
||||
child: const Text('删除', style: TextStyle(fontSize: 15, fontWeight: FontWeight.w600)),
|
||||
),
|
||||
),
|
||||
),
|
||||
const SizedBox(width: 12),
|
||||
Expanded(
|
||||
flex: 2,
|
||||
child: SizedBox(
|
||||
height: 48,
|
||||
child: FilledButton(
|
||||
style: FilledButton.styleFrom(
|
||||
backgroundColor: const Color(0xFFC8956E),
|
||||
foregroundColor: Colors.white,
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(24)),
|
||||
),
|
||||
onPressed: busy ? null : () => _save(notifier),
|
||||
child: busy
|
||||
? const SizedBox(
|
||||
width: 22,
|
||||
height: 22,
|
||||
child: CircularProgressIndicator(strokeWidth: 2.5, color: Colors.white),
|
||||
)
|
||||
: const Text(
|
||||
'保 存',
|
||||
style: TextStyle(fontSize: 16, fontWeight: FontWeight.bold, letterSpacing: 3),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Future<void> _save(BillEditNotifier notifier) async {
|
||||
try {
|
||||
await notifier.save();
|
||||
if (!mounted) return;
|
||||
showToast(context, '✅ 已保存');
|
||||
Navigator.of(context).pop();
|
||||
} on ApiException catch (e) {
|
||||
if (mounted) showToast(context, e.message, error: true);
|
||||
} catch (_) {
|
||||
if (mounted) showToast(context, '保存失败，请重试', error: true);
|
||||
}
|
||||
}
|
||||
|
||||
Future<void> _confirmDelete(BillEditNotifier notifier) async {
|
||||
final confirmed = await showDialog<bool>(
|
||||
context: context,
|
||||
builder: (dialogContext) => AlertDialog(
|
||||
title: const Text('确认删除'),
|
||||
content: const Text('确定要删除这笔账单吗？删除后无法恢复'),
|
||||
shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16)),
|
||||
actions: [
|
||||
TextButton(
|
||||
onPressed: () => Navigator.pop(dialogContext, false),
|
||||
child: const Text('取消', style: TextStyle(color: Color(0xFF8D6E63))),
|
||||
),
|
||||
TextButton(
|
||||
onPressed: () => Navigator.pop(dialogContext, true),
|
||||
child: const Text('删除', style: TextStyle(color: Color(0xFFD32F2F))),
|
||||
),
|
||||
],
|
||||
),
|
||||
);
|
||||
if (confirmed != true) return;
|
||||
|
||||
try {
|
||||
await notifier.remove();
|
||||
if (!mounted) return;
|
||||
showToast(context, '已删除');
|
||||
Navigator.of(context).pop();
|
||||
} on ApiException catch (e) {
|
||||
if (mounted) showToast(context, e.message, error: true);
|
||||
} catch (_) {
|
||||
if (mounted) showToast(context, '删除失败，请重试', error: true);
|
||||
}
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user