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.

661 lines
20 KiB

4 years ago
import 'package:flutter/material.dart';
import 'package:huixiang/generated/l10n.dart';
import 'package:huixiang/view_widget/border_text.dart';
import 'package:huixiang/view_widget/pay_input_view.dart';
import 'package:huixiang/view_widget/round_button.dart';
import 'package:huixiang/view_widget/separator.dart';
class OrderDetailPage extends StatefulWidget {
@override
State<StatefulWidget> createState() {
return _OrderDetailPage();
}
}
class _OrderDetailPage extends State<OrderDetailPage> {
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(
title: Text(
S.of(context).jinxingzhongdedingdan,
style: TextStyle(color: Colors.white),
),
centerTitle: false,
backgroundColor: Color(0xFF3A405A),
brightness: Brightness.dark,
elevation: 0,
leading: GestureDetector(
onTap: () {
Navigator.of(context).pop();
},
child: Container(
alignment: Alignment.centerRight,
margin: EdgeInsets.only(left: 10),
padding: EdgeInsets.all(6),
child: Icon(
Icons.arrow_back_ios,
color: Colors.white,
size: 24,
),
),
),
titleSpacing: 2,
leadingWidth: 56,
bottom: PreferredSize(
preferredSize: Size(double.infinity, 88),
child: Container(
height: 88,
padding: EdgeInsets.fromLTRB(16, 0, 16, 14),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.end,
children: [
Expanded(
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Container(
height: 20,
width: 82,
decoration: BoxDecoration(
borderRadius: BorderRadius.circular(15),
border: Border.all(
width: 1,
color: Color(0xFF32A060),
),
),
child: Stack(
alignment: Alignment.lerp(
Alignment.centerLeft,
Alignment.centerRight,
0,
),
children: [
Positioned(
left: 0,
child: GestureDetector(
onTap: () {
setState(() {
type = 0;
});
},
child: RoundButton(
text: S.of(context).ziqu,
width: 42,
height: 20,
textColor: Colors.white,
padding: EdgeInsets.fromLTRB(8, 1, 8, 1),
backgroup: type == 0
? Color(0xFF32A060)
: Colors.transparent,
radius: 15,
),
),
),
Positioned(
right: 0,
child: GestureDetector(
onTap: () {
setState(() {
type = 1;
});
},
child: RoundButton(
text: S.of(context).waisong,
width: 42,
height: 20,
textColor: Colors.white,
padding: EdgeInsets.fromLTRB(8, 1, 8, 1),
backgroup: type == 1
? Color(0xFF32A060)
: Colors.transparent,
radius: 15,
),
),
),
],
),
),
Text(
S.of(context).qingzaiguidingshijianneizhifu,
style: TextStyle(
color: Colors.white,
fontSize: 12,
),
),
],
),
),
Container(
height: 33,
child: Row(
mainAxisSize: MainAxisSize.min,
children: [
AspectRatio(
aspectRatio: 1,
child: BorderText(
text: "02",
textColor: Colors.white,
fontSize: 21,
fontWeight: FontWeight.bold,
borderColor: Colors.white,
borderWidth: 1,
padding: EdgeInsets.all(2),
),
),
SizedBox(
width: 8,
),
Text(
":",
style: TextStyle(
color: Colors.white,
fontSize: 21,
),
),
SizedBox(
width: 8,
),
AspectRatio(
aspectRatio: 1,
child: BorderText(
text: "02",
textColor: Colors.white,
fontSize: 21,
fontWeight: FontWeight.bold,
borderColor: Colors.white,
borderWidth: 1,
padding: EdgeInsets.all(2),
),
),
],
),
)
],
),
),
),
),
body: Container(
child: Stack(
children: [
Container(
height: 36,
color: Color(0xFF3A405A),
),
SingleChildScrollView(
physics: BouncingScrollPhysics(),
child: Container(
child: Column(
children: [
buildAddress(),
buildCommodity(),
buildOrderInfo(),
Container(
height: 42,
),
],
),
),
),
],
),
),
);
}
var type = 0;
Widget buildAddress() {
return Container(
margin: EdgeInsets.only(left: 16, right: 16, top: 4, bottom: 2),
padding: EdgeInsets.all(20),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black.withAlpha(12),
offset: Offset(0, 3),
blurRadius: 14,
spreadRadius: 0,
),
],
borderRadius: BorderRadius.all(Radius.circular(8)),
),
child: Column(
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
children: [
Image.asset(
"assets/image/icon_location_address.png",
width: 28,
height: 28,
),
Expanded(
child: Text(
"前进麦味·天然烘焙(凯德1818店)",
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 14, color: Color(0xFF4C4C4C)),
),
),
Icon(
Icons.keyboard_arrow_right,
size: 16,
color: Colors.black,
)
],
),
Container(
margin: EdgeInsets.only(left: 28),
child: Text(
"武昌区中国铁建凯德1818蓝调步行街中北路109附33门牌号05",
overflow: TextOverflow.ellipsis,
style: TextStyle(fontSize: 10, color: Color(0xFFA29E9E)),
),
),
Container(
margin: EdgeInsets.only(top: 20, bottom: 16),
child: MySeparator(
width: 5,
height: 1,
color: Color(0xFFA29E9E),
),
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceEvenly,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Column(
children: [
Image.asset(
"assets/image/icon_order_cancel.png",
width: 24,
height: 24,
fit: BoxFit.contain,
),
SizedBox(
height: 8,
),
Text(
S.of(context).quxiaodingdan,
style: TextStyle(
color: Color(0xFF353535),
fontSize: 12,
),
)
],
),
GestureDetector(
onTap: () {
showModalBottomSheet(
context: context,
builder: (context) {
return PayInputWidget();
});
},
child: Column(
children: [
Image.asset(
"assets/image/icon_order_renminbi.png",
width: 24,
height: 24,
fit: BoxFit.contain,
),
SizedBox(
height: 8,
),
Text(
S.of(context).jixuzhifu,
style: TextStyle(color: Color(0xFF32A060), fontSize: 12),
)
],
),
),
],
),
],
),
);
}
Widget buildCommodity() {
return Stack(
alignment: Alignment.centerRight,
children: [
Container(
margin: EdgeInsets.only(left: 16, right: 16, top: 2, bottom: 8),
padding: EdgeInsets.only(left: 20, right: 20, top: 12, bottom: 12),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black.withAlpha(12),
offset: Offset(0, 1),
blurRadius: 12,
spreadRadius: 0)
],
borderRadius: BorderRadius.all(Radius.circular(8))),
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
children: commodityList(),
),
),
buildQrCode()
],
);
}
List<Widget> commodityList() {
return [
commodityItem(),
commodityItem(),
commodityItem(),
commodityItem(),
commodityItem(),
commodityItem(),
commodityItem(),
SizedBox(height: 20),
discountItem(Color(0xFF32A060)),
discountItem(Color(0xFFFF7A1A)),
Container(
margin: EdgeInsets.only(
top: 24,
bottom: 4,
),
child: MySeparator(
height: 1,
width: 5,
color: Colors.grey,
),
),
buildTotalPrice(),
];
}
Widget buildQrCode() {
return Container(
margin: EdgeInsets.only(right: 16),
child: Stack(
children: [
Container(
width: 94,
height: 33,
margin: EdgeInsets.only(left: 12),
padding: EdgeInsets.only(left: 16),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black.withAlpha(25),
offset: Offset(0, 1),
blurRadius: 12,
spreadRadius: 0)
],
borderRadius: BorderRadius.only(
topLeft: Radius.circular(2),
bottomLeft: Radius.circular(2),
)),
child: Row(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
S.of(context).qujianma,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 12,
color: Colors.black),
),
Icon(
Icons.keyboard_arrow_right,
color: Colors.black,
size: 16,
)
],
),
),
Container(
margin: EdgeInsets.only(top: 6, bottom: 6),
// padding: EdgeInsets.all(2),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black.withAlpha(25),
offset: Offset(0, 1),
blurRadius: 12,
spreadRadius: 0)
],
borderRadius: BorderRadius.all(Radius.circular(2))),
child: Icon(
Icons.qr_code,
size: 20,
color: Color(0xFF32A060),
)),
],
),
);
}
Widget buildOrderInfo() {
return Container(
margin: EdgeInsets.only(left: 16, right: 16, top: 16, bottom: 8),
padding: EdgeInsets.only(left: 20, right: 20, top: 12, bottom: 12),
decoration: BoxDecoration(
color: Colors.white,
boxShadow: [
BoxShadow(
color: Colors.black.withAlpha(12),
offset: Offset(0, 1),
blurRadius: 12,
spreadRadius: 0)
],
borderRadius: BorderRadius.all(Radius.circular(8))),
child: Column(
children: [
orderInfoItem(S.of(context).shoujihao, "13800138000"),
orderInfoItem(
S.of(context).beizhu, S.of(context).qingshurubeizhuyaoqiu),
orderInfoItem(S.of(context).fapiao, S.of(context).buzhichikaipiao),
orderInfoItem(S.of(context).zhifufangshi, S.of(context).yue),
],
),
);
}
Widget orderInfoItem(leftText, rightText) {
return Container(
margin: EdgeInsets.only(top: 8, bottom: 8),
child: Row(
mainAxisAlignment: MainAxisAlignment.center,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
leftText,
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 12,
color: Color(0xFF727272)),
),
Expanded(
child: Text(
rightText,
textAlign: TextAlign.end,
style: TextStyle(
fontSize: 12,
color: Color(0xFF353535),
),
),
flex: 1,
),
SizedBox(
width: 16,
),
Icon(
Icons.keyboard_arrow_right,
size: 16,
color: Colors.black,
)
],
),
);
}
Widget commodityItem() {
return Container(
margin: EdgeInsets.only(top: 8, bottom: 8),
child: Row(
children: [
Container(
child: Image.network(
"https://t7.baidu.com/it/u=1297102096,3476971300&fm=193&f=GIF",
width: 44,
fit: BoxFit.cover,
height: 44,
),
),
Expanded(
flex: 1,
child: Container(
margin: EdgeInsets.only(left: 16, right: 16),
height: 44,
child: Column(
mainAxisAlignment: MainAxisAlignment.spaceAround,
crossAxisAlignment: CrossAxisAlignment.start,
children: [
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Text(
"海盐牛角",
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 14,
color: Color(0xFF353535)),
),
Text(
"x2",
style:
TextStyle(fontSize: 12, color: Color(0xFF727272)),
),
],
),
Row(
mainAxisAlignment: MainAxisAlignment.spaceBetween,
crossAxisAlignment: CrossAxisAlignment.center,
children: [
Expanded(
flex: 1,
child: Text(
S.of(context).ge(200),
overflow: TextOverflow.ellipsis,
style: TextStyle(
fontSize: 12, color: Color(0xFFA29E9E)),
)),
Text(
S.of(context).yuan(8),
style: TextStyle(
fontWeight: FontWeight.bold,
fontSize: 12,
color: Color(0xFF4C4C4C)),
)
],
),
],
),
),
),
],
),
);
}
Widget discountItem(Color color) {
return Container(
margin: EdgeInsets.only(top: 9, bottom: 9),
child: Row(
children: [
Container(
padding: EdgeInsets.fromLTRB(4, 2, 4, 2),
decoration: BoxDecoration(
borderRadius: BorderRadius.all(Radius.circular(2)),
border: Border.all(
width: 1, color: color, style: BorderStyle.solid)),
child: Text(
S.of(context).peisongfei,
style: TextStyle(
fontSize: 10,
color: color,
),
),
),
SizedBox(
width: 27,
),
Expanded(
child: Text(
S.of(context).huodongjianmianpeisongfei(3),
style: TextStyle(
fontSize: 10,
color: Color(0xFFA29E9E),
),
),
flex: 1,
),
Text(
S.of(context).yuan(-3.0),
style: TextStyle(
fontSize: 12,
color: color,
),
),
],
),
);
}
Widget buildTotalPrice() {
return Container(
margin: EdgeInsets.only(top: 7, bottom: 11),
child: Row(
mainAxisAlignment: MainAxisAlignment.end,
crossAxisAlignment: CrossAxisAlignment.baseline,
textBaseline: TextBaseline.alphabetic,
children: [
Expanded(
child: Text(
S.of(context).huodongjianmianpeisongfei(3),
style: TextStyle(
fontSize: 10,
color: Color(0xFFA29E9E),
),
),
flex: 1,
),
Container(
child: Text(
S.of(context).jiesuanjine,
style: TextStyle(
fontSize: 10,
color: Color(0xFF353535),
),
),
),
Text(
"20.4",
textAlign: TextAlign.end,
style: TextStyle(
fontSize: 30,
color: Color(0xFF32A060),
),
)
],
),
);
}
}