145 lines
5.1 KiB
Dart
145 lines
5.1 KiB
Dart
import 'package:flutter/material.dart';
|
|
import '../../../../app/theme/app_colors.dart';
|
|
import '../../../../app/theme/app_typography.dart';
|
|
import '../../../../app/theme/app_spacing.dart';
|
|
|
|
/// A6. 支付方式选择页
|
|
///
|
|
/// 选择支付方式：信用卡/借记卡、Apple Pay、Google Pay
|
|
/// 后端自动完成：法币→稳定币→链上原子交换（消费者无感知）
|
|
class PaymentPage extends StatefulWidget {
|
|
const PaymentPage({super.key});
|
|
|
|
@override
|
|
State<PaymentPage> createState() => _PaymentPageState();
|
|
}
|
|
|
|
class _PaymentPageState extends State<PaymentPage> {
|
|
int _selectedMethod = 0;
|
|
|
|
final _methods = const [
|
|
_PaymentMethod('Visa •••• 4242', Icons.credit_card_rounded, 'visa'),
|
|
_PaymentMethod('Apple Pay', Icons.apple_rounded, 'apple_pay'),
|
|
_PaymentMethod('Google Pay', Icons.account_balance_wallet_rounded, 'google_pay'),
|
|
_PaymentMethod('银行转账', Icons.account_balance_rounded, 'bank'),
|
|
];
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
appBar: AppBar(title: const Text('选择支付方式')),
|
|
body: Column(
|
|
children: [
|
|
// Order Summary
|
|
Container(
|
|
margin: const EdgeInsets.all(20),
|
|
padding: AppSpacing.cardPadding,
|
|
decoration: BoxDecoration(
|
|
color: AppColors.surface,
|
|
borderRadius: AppSpacing.borderRadiusMd,
|
|
border: Border.all(color: AppColors.borderLight),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
Container(
|
|
width: 48,
|
|
height: 48,
|
|
decoration: BoxDecoration(
|
|
color: AppColors.primarySurface,
|
|
borderRadius: AppSpacing.borderRadiusSm,
|
|
),
|
|
child: const Icon(Icons.confirmation_number_rounded, color: AppColors.primary),
|
|
),
|
|
const SizedBox(width: 12),
|
|
Expanded(
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text('星巴克 \$25 礼品卡', style: AppTypography.labelMedium),
|
|
const SizedBox(height: 2),
|
|
Text('面值 \$25.00', style: AppTypography.bodySmall),
|
|
],
|
|
),
|
|
),
|
|
Text('\$21.25', style: AppTypography.priceMedium),
|
|
],
|
|
),
|
|
),
|
|
|
|
// Payment Methods
|
|
Expanded(
|
|
child: ListView.builder(
|
|
padding: const EdgeInsets.symmetric(horizontal: 20),
|
|
itemCount: _methods.length,
|
|
itemBuilder: (context, index) {
|
|
final method = _methods[index];
|
|
final isSelected = _selectedMethod == index;
|
|
return GestureDetector(
|
|
onTap: () => setState(() => _selectedMethod = index),
|
|
child: Container(
|
|
margin: const EdgeInsets.only(bottom: 10),
|
|
padding: const EdgeInsets.all(16),
|
|
decoration: BoxDecoration(
|
|
color: AppColors.surface,
|
|
borderRadius: AppSpacing.borderRadiusMd,
|
|
border: Border.all(
|
|
color: isSelected ? AppColors.primary : AppColors.borderLight,
|
|
width: isSelected ? 1.5 : 1,
|
|
),
|
|
),
|
|
child: Row(
|
|
children: [
|
|
Icon(method.icon, color: isSelected ? AppColors.primary : AppColors.textSecondary, size: 24),
|
|
const SizedBox(width: 14),
|
|
Expanded(
|
|
child: Text(method.name, style: AppTypography.labelMedium),
|
|
),
|
|
if (isSelected)
|
|
const Icon(Icons.check_circle_rounded, color: AppColors.primary, size: 22),
|
|
],
|
|
),
|
|
),
|
|
);
|
|
},
|
|
),
|
|
),
|
|
|
|
// Add new method
|
|
Padding(
|
|
padding: const EdgeInsets.symmetric(horizontal: 20),
|
|
child: TextButton.icon(
|
|
onPressed: () {},
|
|
icon: const Icon(Icons.add_rounded),
|
|
label: const Text('添加新支付方式'),
|
|
),
|
|
),
|
|
|
|
// Pay Button
|
|
Container(
|
|
padding: const EdgeInsets.all(20),
|
|
child: SizedBox(
|
|
width: double.infinity,
|
|
height: AppSpacing.buttonHeight,
|
|
child: ElevatedButton(
|
|
onPressed: () {
|
|
// 后端自动完成法币→稳定币→链上原子交换
|
|
Navigator.pushNamed(context, '/payment-success');
|
|
},
|
|
child: const Text('确认支付 \$21.25'),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
}
|
|
|
|
class _PaymentMethod {
|
|
final String name;
|
|
final IconData icon;
|
|
final String type;
|
|
|
|
const _PaymentMethod(this.name, this.icon, this.type);
|
|
}
|