143 lines
5.2 KiB
Dart
143 lines
5.2 KiB
Dart
import 'package:flutter/material.dart';
|
||
import '../../../../app/i18n/app_localizations.dart';
|
||
import '../../../../app/theme/app_colors.dart';
|
||
import '../../../../app/theme/app_typography.dart';
|
||
import '../../../../app/theme/app_spacing.dart';
|
||
|
||
/// 充值页面
|
||
///
|
||
/// 法币充值到平台账户余额
|
||
/// 支付方式：银行卡、Apple Pay、Google Pay
|
||
class DepositPage extends StatefulWidget {
|
||
const DepositPage({super.key});
|
||
|
||
@override
|
||
State<DepositPage> createState() => _DepositPageState();
|
||
}
|
||
|
||
class _DepositPageState extends State<DepositPage> {
|
||
final _amountController = TextEditingController();
|
||
final _presets = [50, 100, 200, 500];
|
||
int? _selectedPreset;
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Scaffold(
|
||
appBar: AppBar(title: Text(context.t('deposit.title'))),
|
||
body: SingleChildScrollView(
|
||
padding: const EdgeInsets.all(20),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
// Current Balance
|
||
Container(
|
||
padding: const EdgeInsets.all(20),
|
||
decoration: BoxDecoration(
|
||
gradient: AppColors.primaryGradient,
|
||
borderRadius: AppSpacing.borderRadiusLg,
|
||
),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Text(context.t('deposit.currentBalance'), style: AppTypography.bodySmall.copyWith(color: Colors.white70)),
|
||
const SizedBox(height: 4),
|
||
Text('\$128.50', style: AppTypography.displayLarge.copyWith(color: Colors.white)),
|
||
],
|
||
),
|
||
),
|
||
const SizedBox(height: 24),
|
||
|
||
Text(context.t('deposit.amount'), style: AppTypography.h3),
|
||
const SizedBox(height: 12),
|
||
|
||
// Preset Amounts
|
||
Row(
|
||
children: _presets.map((amount) {
|
||
final isSelected = _selectedPreset == amount;
|
||
return Expanded(
|
||
child: GestureDetector(
|
||
onTap: () {
|
||
setState(() {
|
||
_selectedPreset = amount;
|
||
_amountController.text = amount.toString();
|
||
});
|
||
},
|
||
child: Container(
|
||
margin: const EdgeInsets.only(right: 8),
|
||
padding: const EdgeInsets.symmetric(vertical: 14),
|
||
decoration: BoxDecoration(
|
||
color: isSelected ? AppColors.primaryContainer : AppColors.surface,
|
||
borderRadius: AppSpacing.borderRadiusMd,
|
||
border: Border.all(
|
||
color: isSelected ? AppColors.primary : AppColors.border,
|
||
),
|
||
),
|
||
child: Center(
|
||
child: Text(
|
||
'\$$amount',
|
||
style: AppTypography.labelMedium.copyWith(
|
||
color: isSelected ? AppColors.primary : AppColors.textPrimary,
|
||
),
|
||
),
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}).toList(),
|
||
),
|
||
const SizedBox(height: 16),
|
||
|
||
// Custom Amount
|
||
TextField(
|
||
controller: _amountController,
|
||
keyboardType: const TextInputType.numberWithOptions(decimal: true),
|
||
decoration: InputDecoration(
|
||
labelText: context.t('deposit.custom'),
|
||
prefixText: '\$ ',
|
||
),
|
||
onChanged: (_) => setState(() => _selectedPreset = null),
|
||
),
|
||
const SizedBox(height: 24),
|
||
|
||
// Payment Method
|
||
Text(context.t('deposit.paymentMethod'), style: AppTypography.h3),
|
||
const SizedBox(height: 12),
|
||
_buildPaymentOption('Visa •••• 4242', Icons.credit_card_rounded, true),
|
||
_buildPaymentOption('Apple Pay', Icons.apple_rounded, false),
|
||
],
|
||
),
|
||
),
|
||
bottomNavigationBar: Container(
|
||
padding: const EdgeInsets.all(20),
|
||
child: SizedBox(
|
||
height: AppSpacing.buttonHeight,
|
||
child: ElevatedButton(
|
||
onPressed: _amountController.text.isNotEmpty ? () {} : null,
|
||
child: Text('${context.t('deposit.submit')} \$${_amountController.text.isNotEmpty ? _amountController.text : '0'}'),
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
|
||
Widget _buildPaymentOption(String name, IconData icon, bool selected) {
|
||
return Container(
|
||
margin: const EdgeInsets.only(bottom: 8),
|
||
padding: const EdgeInsets.all(14),
|
||
decoration: BoxDecoration(
|
||
color: AppColors.surface,
|
||
borderRadius: AppSpacing.borderRadiusMd,
|
||
border: Border.all(color: selected ? AppColors.primary : AppColors.borderLight),
|
||
),
|
||
child: Row(
|
||
children: [
|
||
Icon(icon, color: AppColors.textSecondary),
|
||
const SizedBox(width: 12),
|
||
Expanded(child: Text(name, style: AppTypography.labelMedium)),
|
||
if (selected) const Icon(Icons.check_circle_rounded, color: AppColors.primary, size: 20),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
}
|