import 'package:flutter/cupertino.dart';
import 'package:flutter/material.dart';
import 'package:flutter/services.dart';
import 'package:bot_toast/bot_toast.dart';
import 'package:collection/src/iterable_extensions.dart';
import 'package:flutter_screenutil/src/size_extension.dart';
import 'package:get/get.dart';
import 'package:velocity_x/src/extensions/num_ext.dart';
import 'package:velocity_x/src/extensions/string_ext.dart';
import 'package:aku_new_community/extensions/num_ext.dart';
import 'package:aku_new_community/extensions/widget_list_ext.dart';
import 'package:aku_new_community/gen/assets.gen.dart';
import 'package:aku_new_community/pages/personal/wallet/pay_way_dialog.dart';
import 'package:aku_new_community/pages/personal/wallet/wallet_trade_record_page.dart';
import 'package:aku_new_community/widget/bee_scaffold.dart';
import 'package:aku_new_community/widget/buttons/bee_long_button.dart';
import 'package:aku_new_community/widget/others/user_tool.dart';
class WalletRechargePage extends StatefulWidget {
final initIndex;
const WalletRechargePage({Key? key, this.initIndex = 0}) : super(key: key);
@override
_WalletRechargePageState createState() => _WalletRechargePageState();
}
class _WalletRechargePageState extends State<WalletRechargePage>
with SingleTickerProviderStateMixin {
int _currentIndex = 0;
int _currentSelect = 0;
late TabController _tabController;
List<String> _tabs = ['余额充值', '积分充值'];
List<int> _balanceValue = [10, 20, 30, 50, 100, 200, 300, 500];
List<int> _pointValue = [10, 200, 300, 500, 1000, 2000, 5000, 10000];
int _rechargeValue = 0;
@override
void initState() {
_tabController =
TabController(length: 2, vsync: this, initialIndex: widget.initIndex);
_currentIndex = widget.initIndex;
_rechargeValue = widget.initIndex == 0 ? _balanceValue[0] : (_pointValue[0]~/10);
super.initState();
}
@override
Widget build(BuildContext context) {
return BeeScaffold(
title: '钱包充值',
actions: [
TextButton(
onPressed: () {
Get.to(()=>WalletTradeRecordPage());
},
child: '交易记录'
.text
.size(28.sp)
.color(Colors.black.withOpacity(0.85))
.make(),
),
],
body: Column(
children: [
Padding(
padding: EdgeInsets.symmetric(vertical: 24.w, horizontal: 32.w),
child: Row(
children: [
'余额:${UserTool.userProvider.userInfoModel!.balance ?? 0}'
.text
.size(32.sp)
.color(Colors.black.withOpacity(0.85))
.make(),
64.wb,
'积分:'
.text
.size(32.sp)
.color(Colors.black.withOpacity(0.85))
.make(),
'${UserTool.userProvider.userInfoModel!.points ?? 0}'
.text
.size(32.sp)
.color(Colors.black.withOpacity(0.85))
.make(),
],
),
),
Expanded(
child: Container(
padding: EdgeInsets.symmetric(horizontal: 32.w, vertical: 32.w),
decoration: BoxDecoration(color: Colors.white),
child: Column(
children: [
Row(
children: _tabs
.mapIndexed((index, element) => GestureDetector(
onTap: () {
_currentIndex = index;
_tabController.animateTo(_currentIndex);
setState(() {});
},
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
element.text
.size(28.sp)
.fontWeight(_currentIndex == index
? FontWeight.bold
: FontWeight.normal)
.color(Colors.black.withOpacity(
_currentIndex == index ? 0.85 : 0.65))
.make(),
8.hb,
AnimatedOpacity(
duration: Duration(microseconds: 500),
opacity: _currentIndex == index ? 1 : 0,
child: Container(
width: 40.w,
height: 8.w,
decoration: BoxDecoration(
color: Colors.black,
borderRadius:
BorderRadius.circular(4.w),
),
),
)
],
),
))
.toList()
.sepWidget(separate: 48.wb),
),
48.hb,
Expanded(
child: TabBarView(controller: _tabController, children: [
_balanceView(),
_pointView(),
]),
),
],
),
),
),
],
),
bottomNavi: Padding(
padding: EdgeInsets.only(
left: 32.w,
right: 32.w,
bottom: 32.w + MediaQuery.of(context).padding.bottom),
child: BeeLongButton(
onPressed: () async {
if (_currentSelect == 9) {
_rechargeValue = 0;
Get.bottomSheet(_customValueDialog(_currentIndex == 0));
} else {
Get.bottomSheet(PayWayDialog(
isBalance: _currentIndex == 0,
amount: _rechargeValue,
insufficientBalance: _rechargeValue >
(UserTool.userProvider.userInfoModel!.balance ?? 0)));
}
},
text: '下一步'),
),
);
}
Widget _balanceView() {
return GridView.count(
crossAxisCount: 3,
mainAxisSpacing: 20.w,
crossAxisSpacing: 20.w,
children: [
..._balanceValue
.mapIndexed((index, e) => _card(index, e, true))
.toList(),
_customValueCard(9, true)
],
);
}
Widget _pointView() {
return GridView.count(
mainAxisSpacing: 20.w,
crossAxisSpacing: 20.w,
crossAxisCount: 3,
children: [
..._pointValue
.mapIndexed((index, element) => _card(index, element, false))
.toList(),
_customValueCard(9, false)
],
);
}
Widget _card(int index, int value, bool isBalance) {
return GestureDetector(
onTap: () {
_currentSelect = index;
_rechargeValue = isBalance ? _balanceValue[index] : (_pointValue[index]~/10);
setState(() {});
},
child: Material(
color: Colors.transparent,
borderRadius: BorderRadius.circular(16.w),
child: Stack(
clipBehavior: Clip.antiAliasWithSaveLayer,
fit: StackFit.passthrough,
children: [
Container(
width: 214.w,
height: 202.w,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16.w),
color:
_currentSelect != index ? Color(0xFFF9F9F9) : Colors.black,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Offstage(
offstage: isBalance,
child: Assets.icons.intergral
.image(width: 48.w, height: 48.w)),
8.hb,
'$value '
.richText
.withTextSpanChildren([
'${isBalance ? '元' : '积分'} '
.textSpan
.size(26.sp)
.color(_currentSelect == index
? Color(0xFFFBE541)
: Colors.black.withOpacity(0.85))
.make(),
])
.color(_currentSelect == index
? Color(0xFFFBE541)
: Colors.black.withOpacity(0.85))
.size(40.w)
.make(),
16.hb,
Offstage(
offstage: isBalance,
child: '${value ~/ 10}元'
.text
.size(26.sp)
.color(_currentSelect == index
? Color(0xFFFBE541)
: Colors.black.withOpacity(0.85))
.make(),
),
],
),
),
AnimatedPositioned(
bottom: 0,
right: 0,
child: Offstage(
offstage: _currentSelect != index,
child: ClipPath(
clipper: _TriangleClipPath(),
child: Container(
width: 40.w,
height: 48.w,
color: Color(0xFFFBE541),
child: Transform.translate(
offset: Offset(10.w, 12.w),
child: Icon(
CupertinoIcons.checkmark_alt,
size: 24.w,
),
),
),
),
),
duration: Duration(microseconds: 500))
],
),
),
);
}
Widget _customValueCard(int index, bool isBalance) {
return GestureDetector(
onTap: () {
_currentSelect = index;
setState(() {});
},
child: Material(
color: Colors.transparent,
borderRadius: BorderRadius.circular(16.w),
child: Stack(
clipBehavior: Clip.antiAliasWithSaveLayer,
fit: StackFit.passthrough,
children: [
Container(
width: 214.w,
height: 202.w,
alignment: Alignment.center,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(16.w),
color:
_currentSelect != index ? Color(0xFFF9F9F9) : Colors.black,
),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
Offstage(
offstage: isBalance,
child: Assets.icons.intergral
.image(width: 48.w, height: 48.w)),
8.hb,
''
.richText
.withTextSpanChildren([
'${isBalance ? '其他金额' : '其他积分'} '
.textSpan
.size(26.sp)
.color(_currentSelect == index
? Color(0xFFFBE541)
: Colors.black.withOpacity(0.85))
.make(),
])
.color(_currentSelect == index
? Color(0xFFFBE541)
: Colors.black.withOpacity(0.85))
.size(40.w)
.make(),
16.hb,
Offstage(
offstage: isBalance,
child: '自定义'
.text
.size(26.sp)
.color(_currentSelect == index
? Color(0xFFFBE541)
: Colors.black.withOpacity(0.85))
.make(),
),
],
),
),
AnimatedPositioned(
bottom: 0,
right: 0,
child: Offstage(
offstage: _currentSelect != index,
child: ClipPath(
clipper: _TriangleClipPath(),
child: Container(
width: 40.w,
height: 48.w,
color: Color(0xFFFBE541),
child: Transform.translate(
offset: Offset(10.w, 12.w),
child: Icon(
CupertinoIcons.checkmark_alt,
size: 24.w,
),
),
),
),
),
duration: Duration(microseconds: 500))
],
),
),
);
}
Widget _customValueDialog(bool isBalance) {
return StatefulBuilder(
builder: (context, reSet) {
return Material(
color: Colors.transparent,
child: Container(
padding: EdgeInsets.symmetric(vertical: 24.w, horizontal: 32.w),
width: double.infinity,
color: Colors.white,
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
'${isBalance ? '充值金额' : '充值积分'}'
.text
.size(32.sp)
.bold
.isIntrinsic
.color(Colors.black.withOpacity(0.85))
.make(),
48.hb,
Container(
height: 88.w,
decoration: BoxDecoration(
color: Color(0xFFF5F5F5),
borderRadius: BorderRadius.circular(16.w)),
clipBehavior: Clip.antiAliasWithSaveLayer,
child: Row(
children: [
24.wb,
'¥'
.text
.size(24.sp)
.color(Colors.black.withOpacity(0.45))
.make(),
12.wb,
Expanded(
child: TextField(
autofocus: true,
onChanged: (text) {
if (text.trim().isNotEmpty) {
_rechargeValue = int.parse(text);
reSet(() {});
}
},
inputFormatters: [
FilteringTextInputFormatter.digitsOnly
],
keyboardType: TextInputType.number,
decoration: InputDecoration(border: InputBorder.none),
)),
Offstage(
offstage: isBalance,
child: Row(
children: [
Assets.icons.intergral
.image(width: 32.w, height: 32.w),
16.wb,
(_rechargeValue * 10)
.text
.size(32.sp)
.color(Colors.black.withOpacity(0.855))
.make(),
12.wb,
],
),
),
GestureDetector(
onTap: () {
if (_rechargeValue == 0) {
BotToast.showText(text: '金额不能为0');
return;
}
Get.back();
Get.bottomSheet(PayWayDialog(
insufficientBalance: (UserTool.userProvider
.userInfoModel!.balance ??
0) <
_rechargeValue,
isBalance: isBalance,
amount: _rechargeValue));
},
child: Material(
child: Container(
width: 132.w,
color: Color(0xFFFBE541),
child: Center(
child: '去支付'
.text
.size(28.sp)
.color(Colors.black.withOpacity(0.85))
.make(),
),
),
),
),
],
),
)
],
),
),
);
},
);
}
}
class _TriangleClipPath extends CustomClipper<Path> {
@override
Path getClip(Size size) {
Path path = Path();
path.moveTo(0, size.height);
path.lineTo(size.width, size.height);
path.lineTo(size.width, 0 + 5.w);
path.lineTo(0, size.height);
path.close();
return path;
}
@override
bool shouldReclip(covariant CustomClipper<Path> oldClipper) {
return false;
}
}