359 lines
12 KiB
Dart
359 lines
12 KiB
Dart
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);
|
|
}
|
|
}
|
|
}
|