594 lines
19 KiB
Dart
594 lines
19 KiB
Dart
import 'dart:io';
|
||
|
||
import 'package:client_proxy_framework/client_proxy_framework.dart';
|
||
import 'package:flutter/material.dart';
|
||
import 'package:google_fonts/google_fonts.dart';
|
||
|
||
import '../../core/app_env.dart';
|
||
import '../../core/user/user_state.dart';
|
||
import '../../design/pencil_theme.dart';
|
||
import '../../widgets/pencil_chrome.dart';
|
||
|
||
/// `ETbdo` Purchase Point：黄渐变、Bonheur 标题、积分区 + [xiabiao]、双列档位 + [credit_tag] 角标。
|
||
/// 商品来自 [PaymentFlowCatalog.loadStoreActivities]；Android 走 [NativeIapCoordinator.purchaseGooglePlay]。
|
||
class PurchaseScreen extends StatefulWidget {
|
||
const PurchaseScreen({super.key});
|
||
|
||
@override
|
||
State<PurchaseScreen> createState() => _PurchaseScreenState();
|
||
}
|
||
|
||
class _PurchaseScreenState extends State<PurchaseScreen> {
|
||
List<PaymentProductItem> _products = [];
|
||
bool _loading = true;
|
||
String? _loadError;
|
||
bool _paying = false;
|
||
int? _selectedIndex;
|
||
|
||
@override
|
||
void initState() {
|
||
super.initState();
|
||
// Defer network + setState until after first frame so the route can paint and
|
||
// the main isolate stays responsive (avoids input ANR when opening this screen).
|
||
WidgetsBinding.instance.addPostFrameCallback((_) {
|
||
if (mounted) _loadProducts(isInitial: true);
|
||
});
|
||
}
|
||
|
||
Future<void> _loadProducts({bool isInitial = false}) async {
|
||
if (!isInitial) {
|
||
setState(() {
|
||
_loading = true;
|
||
_loadError = null;
|
||
});
|
||
}
|
||
final res = await PaymentFlowCatalog.loadStoreActivities();
|
||
if (!mounted) return;
|
||
if (!res.isSuccess || res.data == null) {
|
||
setState(() {
|
||
_loading = false;
|
||
_loadError = res.msg.isNotEmpty ? res.msg : 'Failed to load products';
|
||
_products = [];
|
||
});
|
||
return;
|
||
}
|
||
final list = res.data!.productList ?? [];
|
||
setState(() {
|
||
_loading = false;
|
||
_products = list;
|
||
});
|
||
}
|
||
|
||
Future<void> _onBuy(PaymentProductItem item, int index) async {
|
||
final uid = UserState.userId.value;
|
||
if (uid == null || uid.isEmpty) {
|
||
ScaffoldMessenger.of(context).showSnackBar(
|
||
const SnackBar(content: Text('Please sign in first.')),
|
||
);
|
||
return;
|
||
}
|
||
final aid = item.activityId;
|
||
final pid = item.productId;
|
||
if (aid == null || aid.isEmpty || pid == null || pid.isEmpty) {
|
||
ScaffoldMessenger.of(context).showSnackBar(
|
||
const SnackBar(content: Text('Product data is incomplete.')),
|
||
);
|
||
return;
|
||
}
|
||
|
||
if (!Platform.isAndroid) {
|
||
ScaffoldMessenger.of(context).showSnackBar(
|
||
const SnackBar(
|
||
content: Text(
|
||
'In-app purchases on iOS use the App Store flow. This build only wires Google Play on Android.',
|
||
),
|
||
),
|
||
);
|
||
return;
|
||
}
|
||
|
||
setState(() {
|
||
_paying = true;
|
||
_selectedIndex = index;
|
||
});
|
||
|
||
final sink = _PurchaseSink(
|
||
context: context,
|
||
onRefresh: () {
|
||
if (mounted) setState(() => _paying = false);
|
||
},
|
||
onSuccess: () {
|
||
if (mounted) setState(() {});
|
||
},
|
||
);
|
||
|
||
await NativeIapCoordinator.purchaseGooglePlay(
|
||
sink: sink,
|
||
userId: uid,
|
||
activityId: aid,
|
||
storeProductId: pid,
|
||
createPaymentApp: currentBackendAppType(),
|
||
);
|
||
|
||
if (mounted) {
|
||
setState(() {
|
||
_paying = false;
|
||
});
|
||
}
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Container(
|
||
decoration: const BoxDecoration(
|
||
gradient: PencilTheme.yellowWhitePageGradient,
|
||
),
|
||
child: Scaffold(
|
||
backgroundColor: Colors.transparent,
|
||
body: SafeArea(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.stretch,
|
||
children: [
|
||
Padding(
|
||
padding: const EdgeInsets.fromLTRB(8, 0, 16, 8),
|
||
child: Row(
|
||
children: [
|
||
PencilRoundCloseButton(
|
||
onPressed: () => Navigator.of(context).pop(),
|
||
),
|
||
const Spacer(),
|
||
],
|
||
),
|
||
),
|
||
Padding(
|
||
padding: const EdgeInsets.fromLTRB(20, 0, 20, 6),
|
||
child: Text(
|
||
'Purchase Point',
|
||
textAlign: TextAlign.center,
|
||
style: TextStyle(
|
||
fontFamily: 'BonheurRoyale',
|
||
fontSize: 44,
|
||
height: 1.05,
|
||
color: const Color(0xFF5C3D2E),
|
||
),
|
||
),
|
||
),
|
||
ValueListenableBuilder<int>(
|
||
valueListenable: UserState.credits,
|
||
builder: (_, credits, _) {
|
||
return _CreditHeaderSection(
|
||
creditsText: credits.toStringAsFixed(2),
|
||
);
|
||
},
|
||
),
|
||
Expanded(
|
||
child: _loading
|
||
? const Center(
|
||
child: CircularProgressIndicator(
|
||
color: PencilTheme.underlineGold,
|
||
),
|
||
)
|
||
: _loadError != null
|
||
? Center(
|
||
child: Padding(
|
||
padding: const EdgeInsets.all(24),
|
||
child: Column(
|
||
mainAxisSize: MainAxisSize.min,
|
||
children: [
|
||
Text(
|
||
_loadError!,
|
||
textAlign: TextAlign.center,
|
||
style: GoogleFonts.inter(
|
||
color: PencilTheme.stone600,
|
||
),
|
||
),
|
||
const SizedBox(height: 16),
|
||
TextButton(
|
||
onPressed: _loadProducts,
|
||
child: Text(
|
||
'Retry',
|
||
style: GoogleFonts.inter(
|
||
fontWeight: FontWeight.w600,
|
||
color: PencilTheme.underlineGold,
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
)
|
||
: _products.isEmpty
|
||
? Center(
|
||
child: Text(
|
||
'No products available',
|
||
style: GoogleFonts.inter(
|
||
color: PencilTheme.stone600,
|
||
),
|
||
),
|
||
)
|
||
: _ProductGrid(
|
||
products: _products,
|
||
paying: _paying,
|
||
selectedIndex: _selectedIndex,
|
||
onTap: _onBuy,
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|
||
class _PurchaseSink implements PaymentSettlementSink {
|
||
_PurchaseSink({
|
||
required this.context,
|
||
required this.onRefresh,
|
||
required this.onSuccess,
|
||
});
|
||
|
||
final BuildContext context;
|
||
final VoidCallback onRefresh;
|
||
final VoidCallback onSuccess;
|
||
|
||
@override
|
||
void onPaymentSettled(PaymentSettlement settlement) {
|
||
onRefresh();
|
||
if (!context.mounted) return;
|
||
|
||
switch (settlement.type) {
|
||
case PaymentFlowOutcomeType.success:
|
||
UserAccountRefresh.fetchAndNotify(
|
||
app: currentBackendAppType(),
|
||
userId: UserState.userId.value,
|
||
onAccount: (a) {
|
||
if (a.credits != null) UserState.setCredits(a.credits!);
|
||
},
|
||
);
|
||
ScaffoldMessenger.of(context).showSnackBar(
|
||
SnackBar(
|
||
content: Text(
|
||
settlement.message ?? 'Payment successful',
|
||
style: GoogleFonts.inter(),
|
||
),
|
||
),
|
||
);
|
||
onSuccess();
|
||
break;
|
||
case PaymentFlowOutcomeType.failure:
|
||
ScaffoldMessenger.of(context).showSnackBar(
|
||
SnackBar(
|
||
content: Text(
|
||
settlement.message ?? 'Payment failed',
|
||
style: GoogleFonts.inter(),
|
||
),
|
||
),
|
||
);
|
||
break;
|
||
case PaymentFlowOutcomeType.cancelled:
|
||
ScaffoldMessenger.of(context).showSnackBar(
|
||
SnackBar(
|
||
content: Text(
|
||
settlement.message ?? 'Cancelled',
|
||
style: GoogleFonts.inter(),
|
||
),
|
||
),
|
||
);
|
||
break;
|
||
case PaymentFlowOutcomeType.timeout:
|
||
case PaymentFlowOutcomeType.nativePendingHostVerification:
|
||
ScaffoldMessenger.of(context).showSnackBar(
|
||
SnackBar(
|
||
content: Text(
|
||
settlement.message ?? 'Payment pending',
|
||
style: GoogleFonts.inter(),
|
||
),
|
||
),
|
||
);
|
||
break;
|
||
}
|
||
}
|
||
}
|
||
|
||
class _CreditHeaderSection extends StatelessWidget {
|
||
const _CreditHeaderSection({required this.creditsText});
|
||
|
||
final String creditsText;
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Padding(
|
||
padding: const EdgeInsets.symmetric(horizontal: 16),
|
||
child: Column(
|
||
children: [
|
||
// Explicit height: as a non-flex child above [Expanded], this Column gets
|
||
// unbounded max height; [Stack] must have bounded constraints.
|
||
Container(
|
||
width: double.infinity,
|
||
height: 120,
|
||
decoration: const BoxDecoration(
|
||
color: Color(0xFFFCE952),
|
||
borderRadius: BorderRadius.only(
|
||
topLeft: Radius.circular(22),
|
||
topRight: Radius.circular(22),
|
||
),
|
||
),
|
||
child: Stack(
|
||
clipBehavior: Clip.none,
|
||
children: [
|
||
Positioned(
|
||
left: 17,
|
||
top: 11,
|
||
child: Container(
|
||
padding: const EdgeInsets.symmetric(
|
||
horizontal: 14,
|
||
vertical: 8,
|
||
),
|
||
decoration: BoxDecoration(
|
||
gradient: const LinearGradient(
|
||
begin: Alignment.topCenter,
|
||
end: Alignment.bottomCenter,
|
||
colors: [
|
||
Color(0xFFFAE238),
|
||
Color(0xFFF5BE5D),
|
||
],
|
||
),
|
||
borderRadius: BorderRadius.circular(999),
|
||
border: Border.all(color: Colors.white, width: 1.5),
|
||
),
|
||
child: Text(
|
||
'Credit :',
|
||
style: GoogleFonts.inter(
|
||
fontSize: 14,
|
||
fontWeight: FontWeight.w600,
|
||
color: Colors.white,
|
||
),
|
||
),
|
||
),
|
||
),
|
||
Positioned(
|
||
left: 0,
|
||
right: 0,
|
||
top: 56,
|
||
child: Text(
|
||
creditsText,
|
||
textAlign: TextAlign.center,
|
||
style: GoogleFonts.inter(
|
||
fontSize: 36,
|
||
fontWeight: FontWeight.w800,
|
||
color: const Color(0xFF1F2937),
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
Image.asset(
|
||
'assets/images/xiabiao.png',
|
||
width: 60,
|
||
height: 17,
|
||
fit: BoxFit.contain,
|
||
errorBuilder: (_, _, _) => const SizedBox(height: 17),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
}
|
||
}
|
||
|
||
class _ProductGrid extends StatelessWidget {
|
||
const _ProductGrid({
|
||
required this.products,
|
||
required this.paying,
|
||
required this.selectedIndex,
|
||
required this.onTap,
|
||
});
|
||
|
||
final List<PaymentProductItem> products;
|
||
final bool paying;
|
||
final int? selectedIndex;
|
||
final void Function(PaymentProductItem item, int index) onTap;
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return ListView.builder(
|
||
padding: const EdgeInsets.fromLTRB(16, 20, 16, 28),
|
||
itemCount: (products.length + 1) ~/ 2,
|
||
itemBuilder: (context, row) {
|
||
final i0 = row * 2;
|
||
final i1 = i0 + 1;
|
||
return Padding(
|
||
padding: const EdgeInsets.only(bottom: 20),
|
||
child: Row(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Expanded(
|
||
child: _ProductCard(
|
||
item: products[i0],
|
||
index: i0,
|
||
paying: paying,
|
||
selected: selectedIndex == i0,
|
||
onTap: onTap,
|
||
),
|
||
),
|
||
const SizedBox(width: 15),
|
||
Expanded(
|
||
child: i1 < products.length
|
||
? _ProductCard(
|
||
item: products[i1],
|
||
index: i1,
|
||
paying: paying,
|
||
selected: selectedIndex == i1,
|
||
onTap: onTap,
|
||
)
|
||
: const SizedBox.shrink(),
|
||
),
|
||
],
|
||
),
|
||
);
|
||
},
|
||
);
|
||
}
|
||
}
|
||
|
||
class _ProductCard extends StatelessWidget {
|
||
const _ProductCard({
|
||
required this.item,
|
||
required this.index,
|
||
required this.paying,
|
||
required this.selected,
|
||
required this.onTap,
|
||
});
|
||
|
||
final PaymentProductItem item;
|
||
final int index;
|
||
final bool paying;
|
||
final bool selected;
|
||
final void Function(PaymentProductItem item, int index) onTap;
|
||
|
||
static final _money = RegExp(r'[\d.]+');
|
||
|
||
static int? _discountPercent(String? actual, String? origin) {
|
||
final a = double.tryParse(_money.firstMatch(actual ?? '')?.group(0) ?? '');
|
||
final o = double.tryParse(_money.firstMatch(origin ?? '')?.group(0) ?? '');
|
||
if (a == null || o == null || o <= 0 || a >= o) return null;
|
||
return ((1 - a / o) * 100).round();
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
final rawTitle = item.title;
|
||
final title = (rawTitle != null && rawTitle.trim().isNotEmpty)
|
||
? rawTitle
|
||
: 'Credit';
|
||
final actual = item.actualAmount ?? '—';
|
||
final origin = item.originAmount;
|
||
final bonus = item.bonus;
|
||
final pct = _discountPercent(item.actualAmount, item.originAmount);
|
||
|
||
return Material(
|
||
color: const Color(0xE6FEE56A),
|
||
borderRadius: BorderRadius.circular(10),
|
||
child: InkWell(
|
||
onTap: paying ? null : () => onTap(item, index),
|
||
borderRadius: BorderRadius.circular(10),
|
||
child: SizedBox(
|
||
height: 125,
|
||
child: Stack(
|
||
clipBehavior: Clip.none,
|
||
children: [
|
||
Padding(
|
||
padding: const EdgeInsets.fromLTRB(12, 4, 12, 8),
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
children: [
|
||
Text(
|
||
title,
|
||
style: GoogleFonts.inter(
|
||
fontSize: 13,
|
||
fontWeight: FontWeight.w600,
|
||
color: PencilTheme.stone600,
|
||
),
|
||
),
|
||
const SizedBox(height: 8),
|
||
Text(
|
||
actual,
|
||
style: GoogleFonts.inter(
|
||
fontSize: 26,
|
||
fontWeight: FontWeight.w800,
|
||
color: const Color(0xFF0A0A0A),
|
||
),
|
||
),
|
||
if (origin != null && origin.isNotEmpty) ...[
|
||
const SizedBox(height: 6),
|
||
Container(
|
||
padding: const EdgeInsets.symmetric(
|
||
horizontal: 8,
|
||
vertical: 4,
|
||
),
|
||
decoration: BoxDecoration(
|
||
color: const Color(0x80FFE3E3),
|
||
borderRadius: BorderRadius.circular(8),
|
||
),
|
||
child: Text(
|
||
origin,
|
||
style: GoogleFonts.inter(
|
||
fontSize: 12,
|
||
fontWeight: FontWeight.w600,
|
||
color: const Color(0xFFDB6525),
|
||
decoration: TextDecoration.lineThrough,
|
||
decorationColor: const Color(0xFFDB6525),
|
||
),
|
||
),
|
||
),
|
||
],
|
||
if (bonus != null && bonus > 0) ...[
|
||
const SizedBox(height: 6),
|
||
Align(
|
||
alignment: Alignment.centerRight,
|
||
child: Text(
|
||
'+$bonus Bonus',
|
||
style: GoogleFonts.inter(
|
||
fontSize: 12,
|
||
fontWeight: FontWeight.w500,
|
||
color: PencilTheme.stone600,
|
||
),
|
||
),
|
||
),
|
||
],
|
||
],
|
||
),
|
||
),
|
||
if (pct != null && pct > 0)
|
||
Positioned(
|
||
right: -4,
|
||
top: -8,
|
||
child: SizedBox(
|
||
width: 60,
|
||
height: 33,
|
||
child: Stack(
|
||
alignment: Alignment.center,
|
||
children: [
|
||
Image.asset(
|
||
'assets/images/credit_tag.png',
|
||
fit: BoxFit.fill,
|
||
errorBuilder: (_, _, _) => const SizedBox.shrink(),
|
||
),
|
||
Padding(
|
||
padding: const EdgeInsets.only(top: 4),
|
||
child: Text(
|
||
'$pct% Off',
|
||
textAlign: TextAlign.center,
|
||
style: GoogleFonts.inter(
|
||
fontSize: 10,
|
||
fontWeight: FontWeight.w800,
|
||
fontStyle: FontStyle.italic,
|
||
color: Colors.white,
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
if (paying && selected)
|
||
Positioned.fill(
|
||
child: Container(
|
||
alignment: Alignment.center,
|
||
color: Colors.white24,
|
||
child: const SizedBox(
|
||
width: 24,
|
||
height: 24,
|
||
child: CircularProgressIndicator(strokeWidth: 2),
|
||
),
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
}
|