You can not select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
634 lines
19 KiB
634 lines
19 KiB
import 'package:flutter/cupertino.dart';
|
|
import 'package:flutter/material.dart';
|
|
import 'package:flutter/rendering.dart';
|
|
import 'package:recook/widgets/custom_app_bar.dart';
|
|
import 'package:get/get.dart';
|
|
import 'package:recook/constants/styles.dart';
|
|
import 'package:recook/constants/header.dart';
|
|
import 'package:recook/widgets/custom_cache_image.dart';
|
|
import 'package:recook/widgets/custom_image_button.dart';
|
|
import 'package:velocity_x/velocity_x.dart';
|
|
|
|
class AirplaneDetailPage extends StatefulWidget {
|
|
AirplaneDetailPage({Key key}) : super(key: key);
|
|
|
|
@override
|
|
_AirplaneDetailPageState createState() => _AirplaneDetailPageState();
|
|
}
|
|
|
|
class _AirplaneDetailPageState extends State<AirplaneDetailPage> {
|
|
List<Item> _passengerList = [];
|
|
List<Item> _ChoosePassengerList = [];
|
|
String _contactNum = '';
|
|
|
|
@override
|
|
void initState() {
|
|
super.initState();
|
|
_passengerList
|
|
.add(Item(item: '张伟', choice: false, num: '12345678901234567890'));
|
|
_passengerList
|
|
.add(Item(item: '欧阳青青', choice: false, num: '12345678901234567'));
|
|
_passengerList
|
|
.add(Item(item: '小星星', choice: false, num: '12345678901234567890'));
|
|
_passengerList
|
|
.add(Item(item: '吕小树', choice: false, num: '12345678901234567890'));
|
|
}
|
|
|
|
@override
|
|
void dispose() {
|
|
super.dispose();
|
|
}
|
|
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: AppColor.frenchColor,
|
|
resizeToAvoidBottomInset: false,
|
|
appBar: CustomAppBar(
|
|
appBackground: Color(0xFFF9F9FB),
|
|
elevation: 0,
|
|
title: '上海-北京',
|
|
themeData: AppThemes.themeDataGrey.appBarTheme,
|
|
),
|
|
body: Container(
|
|
decoration: BoxDecoration(
|
|
gradient: LinearGradient(
|
|
begin: Alignment.topCenter,
|
|
end: Alignment.bottomCenter,
|
|
colors: [
|
|
Color(0xFFD5101A),
|
|
Color(0x03FE2E39),
|
|
],
|
|
stops: [0.0, 0.5],
|
|
)),
|
|
child: _bodyWidget(),
|
|
),
|
|
bottomNavigationBar: SafeArea(child: _bottomTool(true)),
|
|
);
|
|
}
|
|
|
|
_bodyWidget() {
|
|
return Container(
|
|
child: Column(
|
|
children: [
|
|
_information(),
|
|
_choosePassenger(),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
_bottomTool(bool bottom) {
|
|
return Container(
|
|
height: 50.rw,
|
|
color: Colors.white,
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
30.wb,
|
|
Text(
|
|
"订单金额",
|
|
style: TextStyle(fontSize: 14.rsp, color: Color(0xFF333333)),
|
|
),
|
|
Container(
|
|
padding: EdgeInsets.only(top: 3.rw),
|
|
child: Text(
|
|
"￥",
|
|
style: TextStyle(fontSize: 10.rsp, color: Color(0xFFD5101A)),
|
|
),
|
|
),
|
|
Text(
|
|
"0",
|
|
style: TextStyle(fontSize: 18.rsp, color: Color(0xFFD5101A)),
|
|
),
|
|
],
|
|
),
|
|
Row(
|
|
children: [
|
|
GestureDetector(
|
|
onTap: () {
|
|
bottom ? Get.bottomSheet(_bottomSheet()) : Get.back();
|
|
},
|
|
child: Row(
|
|
children: [
|
|
Text(
|
|
"明细",
|
|
style:
|
|
TextStyle(fontSize: 14.rsp, color: Color(0xFF999999)),
|
|
),
|
|
Container(
|
|
padding: EdgeInsets.only(top: 5.rw),
|
|
child: !bottom
|
|
? Icon(CupertinoIcons.chevron_down,
|
|
size: 16.rw, color: Color(0xFF999999))
|
|
: Icon(CupertinoIcons.chevron_up,
|
|
size: 16.rw, color: Color(0xFF999999)),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
20.wb,
|
|
CustomImageButton(
|
|
height: 34.rw,
|
|
width: 99.rw,
|
|
title: "提交订单",
|
|
boxDecoration: BoxDecoration(
|
|
gradient: LinearGradient(
|
|
begin: Alignment.centerLeft,
|
|
end: Alignment.centerRight,
|
|
colors: [
|
|
Color(0xFFF37211),
|
|
Color(0xFFF84A06),
|
|
],
|
|
),
|
|
borderRadius: BorderRadius.all(Radius.circular(22.rw)),
|
|
),
|
|
backgroundColor: Color(0xFFC92219),
|
|
color: Colors.white,
|
|
fontSize: 14.rsp,
|
|
onPressed: () {
|
|
//Get.to(AirplaneDetailPage());
|
|
},
|
|
),
|
|
30.wb
|
|
],
|
|
)
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
_bottomSheet() {
|
|
return Container(
|
|
height: 205.rw,
|
|
decoration: BoxDecoration(
|
|
color: AppColor.whiteColor,
|
|
borderRadius: BorderRadius.only(
|
|
topLeft: Radius.circular(22.rw), topRight: Radius.circular(22.rw)),
|
|
),
|
|
child: Column(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Container(
|
|
padding: EdgeInsets.symmetric(horizontal: 15.rw, vertical: 20.rw),
|
|
child: Column(
|
|
children: [
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Text(
|
|
"明细",
|
|
style:
|
|
TextStyle(fontSize: 16.rsp, color: Color(0xFF333333)),
|
|
),
|
|
Text(
|
|
"¥400 * 3张",
|
|
style:
|
|
TextStyle(fontSize: 16.rsp, color: Color(0xFF333333)),
|
|
),
|
|
],
|
|
),
|
|
39.hb,
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Text(
|
|
"基建",
|
|
style:
|
|
TextStyle(fontSize: 16.rsp, color: Color(0xFF333333)),
|
|
),
|
|
Text(
|
|
"¥50",
|
|
style:
|
|
TextStyle(fontSize: 16.rsp, color: Color(0xFF333333)),
|
|
),
|
|
],
|
|
),
|
|
39.hb,
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Text(
|
|
"燃油",
|
|
style:
|
|
TextStyle(fontSize: 16.rsp, color: Color(0xFF333333)),
|
|
),
|
|
Text(
|
|
"¥0",
|
|
style:
|
|
TextStyle(fontSize: 16.rsp, color: Color(0xFF333333)),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
_bottomTool(false)
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
_contract() {
|
|
return Container(
|
|
margin: EdgeInsets.only(top: 10.rw),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.all(Radius.circular(4.rw)),
|
|
color: Colors.white,
|
|
),
|
|
height: 42.rw,
|
|
child: Row(
|
|
children: [
|
|
20.wb,
|
|
Container(
|
|
child: CustomCacheImage(
|
|
borderRadius: BorderRadius.circular(5),
|
|
width: 10.rw,
|
|
height: 10.rw,
|
|
imageUrl: R.ASSETS_ORDER_ALERT_PNG,
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
10.wb,
|
|
Text(
|
|
"联系电话",
|
|
style: TextStyle(fontSize: 14.rsp, color: Color(0xFF333333)),
|
|
),
|
|
20.wb,
|
|
TextField(
|
|
decoration: InputDecoration(
|
|
contentPadding: EdgeInsets.only(left: 20.rw, bottom: 4.rw),
|
|
hintText: '用于接收取票信息',
|
|
border: InputBorder.none,
|
|
hintStyle:
|
|
AppTextStyle.generate(14 * 2.sp, color: Color(0xff666666)),
|
|
),
|
|
style: AppTextStyle.generate(14 * 2.sp),
|
|
maxLength: 15,
|
|
maxLines: 1,
|
|
onChanged: (text) {
|
|
_contactNum = text;
|
|
},
|
|
).expand(),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
_information() {
|
|
return Container(
|
|
margin: EdgeInsets.only(top: 10.rw, left: 10.rw, right: 10.rw),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.all(Radius.circular(4.rw)),
|
|
color: Colors.white,
|
|
),
|
|
height: 177.rw,
|
|
child: Column(
|
|
children: [
|
|
20.hb,
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Container(
|
|
child: Text(
|
|
"06月23日 后天",
|
|
style: TextStyle(fontSize: 12.rsp, color: Color(0xFF333333)),
|
|
),
|
|
)
|
|
],
|
|
),
|
|
20.hb,
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.center,
|
|
children: [
|
|
Text(
|
|
"21.00",
|
|
style:
|
|
TextStyle(fontSize: 24.rsp, color: Color(0xFF333333)),
|
|
),
|
|
Text(
|
|
"浦东T1",
|
|
textAlign: TextAlign.left,
|
|
style:
|
|
TextStyle(fontSize: 14.rsp, color: Color(0xFF333333)),
|
|
),
|
|
],
|
|
),
|
|
40.wb,
|
|
Container(
|
|
//height: 53.rw,
|
|
margin: EdgeInsets.only(bottom: 25.rw),
|
|
child: Column(
|
|
children: [
|
|
Text(
|
|
"2h25m",
|
|
style:
|
|
TextStyle(fontSize: 12.rsp, color: Color(0xFF333333)),
|
|
),
|
|
10.hb,
|
|
Container(
|
|
width: 68.rw,
|
|
height: 7.rw,
|
|
color: Colors.black,
|
|
),
|
|
],
|
|
),
|
|
),
|
|
40.wb,
|
|
Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Text(
|
|
"23.00",
|
|
style:
|
|
TextStyle(fontSize: 24.rsp, color: Color(0xFF333333)),
|
|
),
|
|
Text(
|
|
"大兴西北",
|
|
style:
|
|
TextStyle(fontSize: 14.rsp, color: Color(0xFF333333)),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
10.hb,
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Container(
|
|
child: CustomCacheImage(
|
|
borderRadius: BorderRadius.circular(5),
|
|
width: 10.rw,
|
|
height: 10.rw,
|
|
imageUrl: R.ASSETS_ORDER_ALERT_PNG,
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
Text(
|
|
"东方航空CA8685",
|
|
style: TextStyle(fontSize: 12.rsp, color: Color(0xFF333333)),
|
|
),
|
|
20.wb,
|
|
Text(
|
|
"波音747-aaaa (中)",
|
|
textAlign: TextAlign.left,
|
|
style: TextStyle(fontSize: 12.rsp, color: Color(0xFF666666)),
|
|
),
|
|
],
|
|
),
|
|
30.hb,
|
|
Divider(
|
|
color: Color(0x80DEE4E7),
|
|
height: 1.rw,
|
|
thickness: rSize(0.5),
|
|
indent: 15.rw,
|
|
endIndent: 15.rw,
|
|
),
|
|
30.hb,
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.center,
|
|
children: [
|
|
Text(
|
|
"成人¥700,",
|
|
style: TextStyle(fontSize: 14.rsp, color: Color(0xFF666666)),
|
|
),
|
|
Text(
|
|
"机建+燃油 ¥700",
|
|
style: TextStyle(fontSize: 14.rsp, color: Color(0xFF666666)),
|
|
),
|
|
20.wb,
|
|
Container(
|
|
child: CustomCacheImage(
|
|
borderRadius: BorderRadius.circular(5),
|
|
width: 10.rw,
|
|
height: 10.rw,
|
|
imageUrl: R.ASSETS_ORDER_ALERT_PNG,
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
_choosePassenger() {
|
|
return Container(
|
|
margin: EdgeInsets.only(top: 10.rw),
|
|
padding: EdgeInsets.symmetric(horizontal: 10.rw),
|
|
child: Column(
|
|
children: [
|
|
Container(
|
|
padding: EdgeInsets.symmetric(horizontal: 15.rw),
|
|
height:
|
|
_getHeight(_passengerList.length, _ChoosePassengerList.length),
|
|
decoration: BoxDecoration(
|
|
borderRadius: BorderRadius.all(Radius.circular(4.rw)),
|
|
color: Colors.white,
|
|
),
|
|
child: Column(
|
|
children: [
|
|
_choosePassenger1(),
|
|
],
|
|
),
|
|
),
|
|
_contract(),
|
|
],
|
|
),
|
|
).expand();
|
|
}
|
|
|
|
_getHeight(int top, int bottom) {
|
|
if (top < 5) {
|
|
if (bottom == 0) {
|
|
return 98.rw;
|
|
} else {
|
|
return 105.rw + bottom * 31.rw;
|
|
}
|
|
} else if (top > 5) {
|
|
if (bottom <= 8) {
|
|
return 105.rw + bottom * 31.rw + (top ~/ 4 - 1) * 53.rw;
|
|
} else {
|
|
return 105.rw + 8 * 31.rw + (top ~/ 4 - 1) * 53.rw;
|
|
}
|
|
}
|
|
}
|
|
|
|
Widget _getItemContainer(
|
|
Item item, index, VoidCallback onPressed, bool selected) {
|
|
return GestureDetector(
|
|
onTap: onPressed,
|
|
child: Container(
|
|
width: 68.rw,
|
|
height: 38.rw,
|
|
padding: EdgeInsets.only(top: 2.rw),
|
|
decoration: BoxDecoration(
|
|
color: Colors.white,
|
|
borderRadius: BorderRadius.all(Radius.circular(3.rw)),
|
|
border: Border.all(
|
|
color: selected ? Color(0xFFD5101A) : Color(0xFF999999),
|
|
width: 0.5.rw)),
|
|
child: Column(
|
|
mainAxisAlignment:
|
|
selected ? MainAxisAlignment.end : MainAxisAlignment.center,
|
|
children: [
|
|
Text(
|
|
item.item,
|
|
style: TextStyle(fontSize: 14.rsp, color: Color(0xFF666666)),
|
|
),
|
|
!selected ? 5.hb : SizedBox(),
|
|
selected
|
|
? Container(
|
|
//color: Colors.yellow,
|
|
margin: EdgeInsets.only(left: 10.rw),
|
|
alignment: Alignment.bottomRight,
|
|
width: 68.rw,
|
|
child: Container(
|
|
alignment: Alignment.center,
|
|
width: 14.rw,
|
|
height: 10.rw,
|
|
decoration: BoxDecoration(
|
|
color: Color(0xFFD5101A),
|
|
borderRadius: BorderRadius.only(
|
|
topLeft: Radius.circular(3.rw),
|
|
bottomRight: Radius.circular(3.rw)),
|
|
),
|
|
child: Icon(CupertinoIcons.check_mark,
|
|
size: 10, color: Colors.white),
|
|
),
|
|
)
|
|
: SizedBox(),
|
|
],
|
|
)),
|
|
);
|
|
}
|
|
|
|
_getPassengerItem(Item item, index, VoidCallback onPressed) {
|
|
return Container(
|
|
padding: EdgeInsets.only(top: 10.rw),
|
|
child: Row(
|
|
children: [
|
|
Container(
|
|
width: 80.rw,
|
|
child: Text(
|
|
item.item,
|
|
style: TextStyle(
|
|
fontSize: 16.rsp,
|
|
color: Color(0xFF333333),
|
|
fontWeight: FontWeight.bold),
|
|
),
|
|
),
|
|
20.wb,
|
|
Container(
|
|
width: 200.rw,
|
|
child: Text(
|
|
_getCardId(item.num),
|
|
style: TextStyle(fontSize: 16.rsp, color: Color(0xFF666666)),
|
|
),
|
|
),
|
|
30.wb,
|
|
Icon(CupertinoIcons.check_mark, size: 20, color: Colors.blue),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
_choosePassenger1() {
|
|
return CustomScrollView(
|
|
slivers: <Widget>[
|
|
SliverToBoxAdapter(
|
|
child: Container(
|
|
margin: EdgeInsets.only(top: 10.rw),
|
|
alignment: Alignment.centerLeft,
|
|
child: Text(
|
|
"选择乘客",
|
|
style: TextStyle(
|
|
fontSize: 16.rsp,
|
|
color: Color(0xFF333333),
|
|
fontWeight: FontWeight.bold),
|
|
),
|
|
),
|
|
),
|
|
SliverToBoxAdapter(child: 20.hb),
|
|
SliverGrid(
|
|
delegate:
|
|
SliverChildBuilderDelegate((BuildContext context, int index) {
|
|
return _getItemContainer(_passengerList[index], index, () {
|
|
setState(() {
|
|
_passengerList[index].choice = !_passengerList[index].choice;
|
|
if (_passengerList[index].choice) {
|
|
_ChoosePassengerList.add(_passengerList[index]);
|
|
} else {
|
|
if (_ChoosePassengerList.indexOf(_passengerList[index]) !=
|
|
-1) {
|
|
_ChoosePassengerList.removeAt(
|
|
_ChoosePassengerList.indexOf(_passengerList[index]));
|
|
}
|
|
}
|
|
setState(() {});
|
|
});
|
|
}, _passengerList[index].choice);
|
|
}, childCount: _passengerList.length),
|
|
gridDelegate: SliverGridDelegateWithFixedCrossAxisCount(
|
|
crossAxisCount: 4,
|
|
crossAxisSpacing: 10.rw,
|
|
mainAxisSpacing: 10.rw,
|
|
childAspectRatio: 1.789,
|
|
)),
|
|
SliverToBoxAdapter(child: 20.hb),
|
|
SliverList(
|
|
delegate: _ChoosePassengerList.length != 0
|
|
? SliverChildBuilderDelegate((content, index) {
|
|
return _getPassengerItem(_ChoosePassengerList[index], index,
|
|
() {
|
|
setState(() {
|
|
_ChoosePassengerList[index].choice =
|
|
!_ChoosePassengerList[index].choice;
|
|
for (var i = 0; i < _ChoosePassengerList.length; i++) {
|
|
if (_ChoosePassengerList[i].choice) {
|
|
_ChoosePassengerList.add(_ChoosePassengerList[i]);
|
|
}
|
|
}
|
|
});
|
|
});
|
|
}, childCount: _ChoosePassengerList.length)
|
|
: SliverChildBuilderDelegate((content, index) {
|
|
return SizedBox();
|
|
}, childCount: 0),
|
|
),
|
|
SliverToBoxAdapter(child: 20.hb),
|
|
],
|
|
).expand();
|
|
}
|
|
|
|
_getCardId(String id) {
|
|
String hear = id.substring(0, 4);
|
|
String foot = id.substring(id.length - 3);
|
|
String newId = '';
|
|
if (id.length > 7) {
|
|
for (var i = 0; i < id.length - 7; i++) {
|
|
newId += '*';
|
|
}
|
|
}
|
|
return hear + newId + foot;
|
|
}
|
|
}
|
|
|
|
class Item {
|
|
String item;
|
|
bool choice;
|
|
String num;
|
|
Item({
|
|
this.item,
|
|
this.choice,
|
|
this.num,
|
|
});
|
|
}
|