After Width: | Height: | Size: 4.3 KiB |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 1.7 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 7.3 KiB |
After Width: | Height: | Size: 1.6 KiB |
After Width: | Height: | Size: 4.3 KiB |
After Width: | Height: | Size: 4.3 KiB |
After Width: | Height: | Size: 1.1 KiB |
After Width: | Height: | Size: 772 B |
After Width: | Height: | Size: 936 B |
After Width: | Height: | Size: 998 B |
@ -0,0 +1,510 @@
|
||||
import 'package:flutter/material.dart'; |
||||
import 'package:flutter_screenutil/flutter_screenutil.dart'; |
||||
import 'package:huixiang/view_widget/my_appbar.dart'; |
||||
import 'package:pull_to_refresh/pull_to_refresh.dart'; |
||||
|
||||
import '../../../generated/l10n.dart'; |
||||
import '../../../retrofit/business_api.dart'; |
||||
import '../../../utils/font_weight.dart'; |
||||
import '../../../view_widget/classic_header.dart'; |
||||
import '../../../view_widget/my_footer.dart'; |
||||
|
||||
class VipRechargePage extends StatefulWidget { |
||||
final Map<String, dynamic> arguments; |
||||
|
||||
VipRechargePage({this.arguments}); |
||||
|
||||
@override |
||||
State<StatefulWidget> createState() { |
||||
return _VipRechargePage(); |
||||
} |
||||
} |
||||
|
||||
class _VipRechargePage extends State<VipRechargePage> { |
||||
BusinessApiService businessService; |
||||
final TextEditingController vipPhoneController = TextEditingController(); |
||||
final RefreshController refreshController = RefreshController(); |
||||
bool isKeyBoardShow = false; |
||||
FocusNode _focusNode = FocusNode(); |
||||
int selectIndex = 0; |
||||
int payIndex = 0; |
||||
|
||||
@override |
||||
void initState() { |
||||
super.initState(); |
||||
WidgetsBinding.instance.addPostFrameCallback((_) { |
||||
setState(() { |
||||
print("object: ${MediaQuery.of(context).viewInsets.bottom}"); |
||||
if (MediaQuery.of(context).viewInsets.bottom == 0) { |
||||
if (isKeyBoardShow) { |
||||
isKeyBoardShow = false; |
||||
//关闭键盘 软键盘关闭了, 清除输入控件的焦点, 否则重新进入页面会导致软键盘再弹出问题 |
||||
FocusScope.of(context).requestFocus(FocusNode()); |
||||
} |
||||
} else { |
||||
isKeyBoardShow = true; |
||||
} |
||||
}); |
||||
}); |
||||
} |
||||
|
||||
///离开页面记着销毁和清除 |
||||
@override |
||||
void dispose() { |
||||
_focusNode.unfocus(); |
||||
super.dispose(); |
||||
} |
||||
|
||||
@override |
||||
Widget build(BuildContext context) { |
||||
return GestureDetector( |
||||
behavior: HitTestBehavior.translucent, |
||||
onTap: () { |
||||
FocusScope.of(context).unfocus(); |
||||
}, |
||||
child: Scaffold( |
||||
resizeToAvoidBottomInset: false, |
||||
appBar: MyAppBar( |
||||
title: S.of(context).chongzhi, |
||||
titleColor: Colors.black, |
||||
background: Colors.white, |
||||
leadingColor: Colors.black, |
||||
brightness: Brightness.dark, |
||||
), |
||||
body:SmartRefresher( |
||||
enablePullDown: true, |
||||
enablePullUp: false, |
||||
header: MyHeader( |
||||
color: Color(0xFF30415B),), |
||||
footer: CustomFooter( |
||||
builder: (context, mode) { |
||||
return MyFooter(mode); |
||||
}, |
||||
), |
||||
controller: refreshController, |
||||
// onRefresh: _onRefresh, |
||||
physics: BouncingScrollPhysics(), |
||||
child: SingleChildScrollView( |
||||
physics: BouncingScrollPhysics(), |
||||
child: Container( |
||||
child: Column( |
||||
crossAxisAlignment: CrossAxisAlignment.start, |
||||
children: [ |
||||
Container( |
||||
decoration: BoxDecoration( |
||||
color: Colors.white, |
||||
boxShadow: [ |
||||
BoxShadow( |
||||
color: Color(0x0F06152E), |
||||
offset: Offset(0, 2), |
||||
blurRadius: 4, |
||||
spreadRadius: 0, |
||||
) |
||||
], |
||||
borderRadius: BorderRadius.circular(8), |
||||
), |
||||
padding: EdgeInsets.symmetric(horizontal: 16.w), |
||||
margin: EdgeInsets.only(bottom: 16.h,right: 16.w,left: 16.w,top: 8.h), |
||||
child: Row( |
||||
mainAxisAlignment: MainAxisAlignment.center, |
||||
children: [ |
||||
Expanded( |
||||
child: Text( |
||||
"会员", |
||||
style: TextStyle( |
||||
color: Color(0xFF1A1A1A), |
||||
fontSize: 14.sp, |
||||
fontWeight: FontWeight.w500, |
||||
), |
||||
), |
||||
), |
||||
Expanded( |
||||
child: TextField( |
||||
controller: vipPhoneController, |
||||
decoration: InputDecoration( |
||||
hintText: "请输入会员手机号", |
||||
hintTextDirection: TextDirection.rtl, |
||||
hintStyle: TextStyle( |
||||
color: Color(0xFF808080), |
||||
fontSize: 14.sp, |
||||
fontWeight: MyFontWeight.regular), |
||||
border: InputBorder.none, |
||||
contentPadding: EdgeInsets.only(left: 16.w), |
||||
), |
||||
textAlign: TextAlign.right, |
||||
style: TextStyle( |
||||
color: Color(0xFF808080), |
||||
fontSize: 14.sp, |
||||
fontWeight: MyFontWeight.regular), |
||||
), |
||||
), |
||||
], |
||||
)), |
||||
rechargeList(), |
||||
Container( |
||||
decoration: BoxDecoration( |
||||
color: Colors.white, |
||||
boxShadow: [ |
||||
BoxShadow( |
||||
color: Color(0x0F06152E), |
||||
offset: Offset(0, 2), |
||||
blurRadius: 4, |
||||
spreadRadius: 0, |
||||
) |
||||
], |
||||
borderRadius: BorderRadius.circular(8), |
||||
), |
||||
padding: EdgeInsets.all(16), |
||||
margin: EdgeInsets.only(bottom:24.h,right: 16.w,left: 16.w,), |
||||
child: Column( |
||||
children: [ |
||||
Row( |
||||
children: [ |
||||
Expanded( |
||||
child: Text( |
||||
"本次充值(元)", |
||||
style: TextStyle( |
||||
color: Color(0xFF1A1A1A), |
||||
fontSize: 14.sp, |
||||
fontWeight: FontWeight.w500, |
||||
), |
||||
), |
||||
), |
||||
Text( |
||||
"322", |
||||
style: TextStyle( |
||||
color: Color(0xFF1A1A1A), |
||||
fontSize: 14.sp, |
||||
fontWeight: FontWeight.w500, |
||||
), |
||||
), |
||||
], |
||||
), |
||||
Container( |
||||
width:double.infinity, |
||||
height: 1.h, |
||||
color: Color(0xFFEBECEF), |
||||
margin: EdgeInsets.symmetric(vertical: 16.h), |
||||
), |
||||
Row( |
||||
children: [ |
||||
Expanded( |
||||
child: Text( |
||||
"充后余额(元)", |
||||
style: TextStyle( |
||||
color: Color(0xFF1A1A1A), |
||||
fontSize: 14.sp, |
||||
fontWeight: FontWeight.w500, |
||||
), |
||||
), |
||||
), |
||||
Text( |
||||
"344", |
||||
style: TextStyle( |
||||
color: Color(0xFF1A1A1A), |
||||
fontSize: 14.sp, |
||||
fontWeight: FontWeight.w500, |
||||
), |
||||
), |
||||
], |
||||
), |
||||
], |
||||
), |
||||
), |
||||
Padding(padding:EdgeInsets.only(left: 16.w,bottom: 16.h), |
||||
child: |
||||
Text( |
||||
"充值方式", |
||||
style: TextStyle( |
||||
color: Colors.black, |
||||
fontSize: 15.sp, |
||||
fontWeight: MyFontWeight.bold, |
||||
), |
||||
)), |
||||
Padding(padding:EdgeInsets.only(left: 16.w,right: 10.w), |
||||
child: Row( |
||||
mainAxisAlignment: MainAxisAlignment.spaceBetween, |
||||
children: [ |
||||
Expanded(child:GestureDetector( |
||||
behavior: HitTestBehavior.opaque, |
||||
onTap: (){ |
||||
setState((){ |
||||
payIndex = 0; |
||||
}); |
||||
}, |
||||
child:Container( |
||||
decoration: BoxDecoration( |
||||
borderRadius: BorderRadius.circular(8), |
||||
border: Border.all( |
||||
color: |
||||
payIndex == 0 ? Color(0xFF30415B) : Color(0x29C5C5C5), |
||||
width:2, |
||||
), |
||||
color: |
||||
payIndex == 0 ? Color(0XFFEBF3FF) : Color(0xFFF9FAF8)), |
||||
padding: EdgeInsets.only(top: 21.h,bottom: 15.h,), |
||||
margin: EdgeInsets.only(right: 6.w), |
||||
child: Column( |
||||
children: [ |
||||
Image.asset( |
||||
"assets/image/bus_vip_xj.webp", |
||||
width: 45.w, |
||||
height:36.h, |
||||
), |
||||
Padding(padding:EdgeInsets.only(top: 15.h), |
||||
child: Text( |
||||
"现金支付", |
||||
style: TextStyle( |
||||
color: Color(0xFF1A1A1A), |
||||
fontSize: 14.sp, |
||||
fontWeight: MyFontWeight.regular, |
||||
), |
||||
)) |
||||
], |
||||
),), |
||||
)), |
||||
Expanded(child:GestureDetector( |
||||
behavior: HitTestBehavior.opaque, |
||||
onTap: (){ |
||||
setState((){ |
||||
payIndex = 1; |
||||
}); |
||||
}, |
||||
child:Container( |
||||
decoration: BoxDecoration( |
||||
borderRadius: BorderRadius.circular(8), |
||||
border: Border.all( |
||||
color: |
||||
payIndex == 1 ? Color(0xFF30415B) : Color(0x29C5C5C5), |
||||
width:2, |
||||
), |
||||
color: |
||||
payIndex == 1 ? Color(0XFFEBF3FF) : Color(0xFFF9FAF8)), |
||||
padding: EdgeInsets.only(top: 21.h,bottom: 15.h,), |
||||
margin: EdgeInsets.only(right: 6.w,left: 6.w), |
||||
child: Column( |
||||
children: [ |
||||
Image.asset( |
||||
"assets/image/bus_vip_alipay.webp", |
||||
width: 36.h, |
||||
height:36.h, |
||||
), |
||||
Padding(padding:EdgeInsets.only(top: 15.h), |
||||
child: Text( |
||||
"支付宝支付", |
||||
style: TextStyle( |
||||
color: Color(0xFF1A1A1A), |
||||
fontSize: 14.sp, |
||||
fontWeight: MyFontWeight.regular, |
||||
), |
||||
)) |
||||
], |
||||
),), |
||||
)), |
||||
Expanded(child:GestureDetector( |
||||
behavior: HitTestBehavior.opaque, |
||||
onTap: (){ |
||||
setState((){ |
||||
payIndex = 2; |
||||
}); |
||||
}, |
||||
child:Container( |
||||
decoration: BoxDecoration( |
||||
borderRadius: BorderRadius.circular(8), |
||||
border: Border.all( |
||||
color: |
||||
payIndex == 2 ? Color(0xFF30415B) : Color(0x29C5C5C5), |
||||
width:2, |
||||
), |
||||
color: |
||||
payIndex == 2 ? Color(0XFFEBF3FF) : Color(0xFFF9FAF8)), |
||||
padding: EdgeInsets.only(top: 21.h,bottom: 15.h,), |
||||
margin: EdgeInsets.only(right: 6.w,left: 6.w), |
||||
child: Column( |
||||
children: [ |
||||
Image.asset( |
||||
"assets/image/bus_vip_wx.webp", |
||||
width: 36.h, |
||||
height:36.h, |
||||
), |
||||
Padding(padding:EdgeInsets.only(top: 15.h), |
||||
child: Text( |
||||
"微信支付", |
||||
style: TextStyle( |
||||
color: Color(0xFF1A1A1A), |
||||
fontSize: 14.sp, |
||||
fontWeight: MyFontWeight.regular, |
||||
), |
||||
)) |
||||
], |
||||
),), |
||||
)), |
||||
], |
||||
),), |
||||
Align( |
||||
alignment: Alignment.bottomCenter, |
||||
child: Container( |
||||
color: Colors.white, |
||||
width: double.infinity, |
||||
margin: EdgeInsets.only(top: 132.h), |
||||
padding: EdgeInsets.only(top: 10.h,left: 16.w,right: 16.w,bottom:34.h), |
||||
child: Container( |
||||
alignment: Alignment.center, |
||||
padding: EdgeInsets.symmetric(vertical:16.h), |
||||
decoration: BoxDecoration( |
||||
color: Color(0xFF30415B), |
||||
borderRadius: BorderRadius.circular(27), |
||||
), |
||||
child: Text( |
||||
"确认充值", |
||||
style: TextStyle( |
||||
color: Colors.white, |
||||
fontSize: 16.sp, |
||||
fontWeight: MyFontWeight.bold, |
||||
), |
||||
), |
||||
), |
||||
)) |
||||
], |
||||
), |
||||
) |
||||
), |
||||
), |
||||
), |
||||
); |
||||
} |
||||
|
||||
Widget rechargeList() { |
||||
return Container( |
||||
margin: EdgeInsets.only(left:16.w,right: 16.w,bottom:16.h), |
||||
child: ListView.builder( |
||||
padding: EdgeInsets.zero, |
||||
itemCount: 3, |
||||
scrollDirection: Axis.vertical, |
||||
shrinkWrap: true, |
||||
physics: BouncingScrollPhysics(), |
||||
itemBuilder: (context, position) { |
||||
return GestureDetector( |
||||
onTap: () { |
||||
setState(() { |
||||
selectIndex = position; |
||||
}); |
||||
}, |
||||
child: rechargeItem(position)); |
||||
}, |
||||
), |
||||
); |
||||
// : NoDataView( |
||||
// src: "assets/image/xiao_fei.webp", |
||||
// isShowBtn: false, |
||||
// text: "暂无充值套餐~", |
||||
// fontSize: 16.sp, |
||||
// margin: EdgeInsets.only(top: 90.h, left: 60.w, right: 60.w), |
||||
// ); |
||||
} |
||||
|
||||
Widget rechargeItem(index) { |
||||
return Container( |
||||
width: double.infinity, |
||||
height: 69.h, |
||||
decoration: BoxDecoration( |
||||
borderRadius: BorderRadius.circular(8), |
||||
border: Border.all( |
||||
color: |
||||
selectIndex == index ? Color(0xFF30415B) : Color(0x29C5C5C5), |
||||
width:2, |
||||
), |
||||
color: |
||||
selectIndex == index ? Color(0XFFEBF3FF) : Color(0xFFF9FAF8)), |
||||
margin: EdgeInsets.only(bottom: 14.w), |
||||
padding: EdgeInsets.only(left: 16), |
||||
child: Flex( |
||||
direction: Axis.horizontal, |
||||
children: [ |
||||
Expanded( |
||||
flex: 1, |
||||
child: Container( |
||||
child: Text.rich( |
||||
TextSpan(children: [ |
||||
TextSpan( |
||||
text: "储值 ", |
||||
style: TextStyle( |
||||
fontSize: 12.sp, |
||||
color: selectIndex == index |
||||
? Color(0xFF4D4D4D) |
||||
: Color(0xFF868686), |
||||
fontWeight: MyFontWeight.regular), |
||||
), |
||||
TextSpan( |
||||
text: |
||||
"100", |
||||
style: TextStyle( |
||||
fontSize: 18.sp, |
||||
fontFamily: 'JDZhengHT', |
||||
color: selectIndex == index |
||||
? Color(0xFF353535) |
||||
: Color(0xFF302F3A), |
||||
fontWeight: MyFontWeight.medium), |
||||
),TextSpan( |
||||
text: |
||||
"元", |
||||
style: TextStyle( |
||||
fontSize: 18.sp, |
||||
fontFamily: 'JDZhengHT', |
||||
color: selectIndex == index |
||||
? Color(0xFF353535) |
||||
: Color(0xFF302F3A), |
||||
fontWeight: MyFontWeight.semi_bold), |
||||
), |
||||
]), |
||||
), |
||||
)), |
||||
Container( |
||||
width: 1.w, |
||||
height: 37.h, |
||||
color: |
||||
selectIndex == index ? Color(0xFF32A060) : Color(0xFF979797), |
||||
margin: EdgeInsets.only(right: 16.w, left: 12), |
||||
), |
||||
Expanded( |
||||
flex: 2, |
||||
child: |
||||
Text.rich( |
||||
TextSpan(children: [ |
||||
TextSpan( |
||||
text: "赠送 ", |
||||
style: TextStyle( |
||||
fontSize: 12.sp, |
||||
color: selectIndex == index |
||||
? Color(0xFF353535) |
||||
: Color(0xFF868686), |
||||
fontWeight: MyFontWeight.regular), |
||||
), |
||||
TextSpan( |
||||
text: |
||||
"120", |
||||
style: TextStyle( |
||||
fontSize: 18.sp, |
||||
fontFamily: 'JDZhengHT', |
||||
color: selectIndex == index |
||||
? Color(0xFF353535) |
||||
: Color(0xFF302F3A), |
||||
fontWeight: MyFontWeight.medium), |
||||
), |
||||
TextSpan( |
||||
text: |
||||
"元", |
||||
style: TextStyle( |
||||
fontSize: 18.sp, |
||||
fontFamily: 'JDZhengHT', |
||||
color: selectIndex == index |
||||
? Color(0xFF353535) |
||||
: Color(0xFF302F3A), |
||||
fontWeight: MyFontWeight.semi_bold), |
||||
), |
||||
]), |
||||
),) |
||||
], |
||||
)); |
||||
} |
||||
} |