|
|
|
|
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';
|
|
|
|
|
import 'package:bot_toast/bot_toast.dart';
|
|
|
|
|
import 'package:collection/src/iterable_extensions.dart';
|
|
|
|
|
import 'package:flutter/cupertino.dart';
|
|
|
|
|
import 'package:flutter/material.dart';
|
|
|
|
|
import 'package:flutter/services.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';
|
|
|
|
|
|
|
|
|
|
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, 00, 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;
|
|
|
|
|
}
|
|
|
|
|
}
|
