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), |
||||||
|
), |
||||||
|
]), |
||||||
|
),) |
||||||
|
], |
||||||
|
)); |
||||||
|
} |
||||||
|
} |