454 lines
14 KiB
Dart
454 lines
14 KiB
Dart
/*
|
|
* @Author: Aimee~
|
|
* @Date: 2022-05-26 13:16:03
|
|
* @LastEditTime: 2022-06-06 17:32:27
|
|
* @LastEditors: Aimee
|
|
* @FilePath: /gl_dao/lib/pages/store/buy/buy.dart
|
|
* @Description: 订单确认页面
|
|
*/
|
|
import 'package:flutter/material.dart';
|
|
import 'package:get/get.dart';
|
|
|
|
import '../../../main_color.dart';
|
|
import '../../address/adds_list/adds_list_page.dart';
|
|
// import '../../components/yy_alert_dialog_with_divider.dart';
|
|
import '../checkout/checkout_page.dart';
|
|
|
|
class BuyPages extends StatefulWidget {
|
|
const BuyPages({Key? key}) : super(key: key);
|
|
|
|
@override
|
|
State<BuyPages> createState() => _BuyPagesState();
|
|
}
|
|
|
|
class _BuyPagesState extends State<BuyPages> {
|
|
@override
|
|
Widget build(BuildContext context) {
|
|
return Scaffold(
|
|
backgroundColor: Colors.white,
|
|
appBar: appBar(),
|
|
body: Stack(
|
|
children: [
|
|
Padding(
|
|
padding: const EdgeInsets.only(bottom: 60),
|
|
child: ListView(
|
|
children: [
|
|
// 地址
|
|
selectAddress(),
|
|
// 分割线 - 供应商购买信息
|
|
Container(
|
|
height: 16,
|
|
width: MediaQuery.of(context).size.width,
|
|
color: tMainBg,
|
|
),
|
|
purchaseInfo(),
|
|
Container(
|
|
height: 16,
|
|
width: MediaQuery.of(context).size.width,
|
|
color: tMainBg,
|
|
),
|
|
purchaseInfo(),
|
|
],
|
|
),
|
|
),
|
|
buttomButton(),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
// 自定义底部提交按钮
|
|
Widget buttomButton() {
|
|
return Positioned(
|
|
bottom: 0,
|
|
left: 0,
|
|
child: Container(
|
|
width: MediaQuery.of(context).size.width,
|
|
color: Colors.white,
|
|
child: SafeArea(
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Expanded(
|
|
flex: 1,
|
|
child: Container(
|
|
padding: const EdgeInsets.only(left: 20),
|
|
decoration: BoxDecoration(
|
|
border: Border(
|
|
top: BorderSide(
|
|
color: Colors.black.withOpacity(0.1),
|
|
),
|
|
),
|
|
),
|
|
width: double.infinity,
|
|
height: 59,
|
|
alignment: Alignment.centerLeft,
|
|
child: Row(
|
|
crossAxisAlignment: CrossAxisAlignment.end,
|
|
children: [
|
|
const Text(
|
|
'1999',
|
|
style: TextStyle(
|
|
fontSize: 26,
|
|
color: tMainRedColor,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
Container(
|
|
padding: const EdgeInsets.only(bottom: 2),
|
|
child: const Text(
|
|
' DT积分',
|
|
style: TextStyle(
|
|
fontSize: 13,
|
|
color: tMainRedColor,
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
GestureDetector(
|
|
onTap: () {
|
|
Get.to(const CheckoutPage());
|
|
// yYAlertDialogWithDivider(
|
|
// context,
|
|
// title: '订单提交成功',
|
|
// type: 'success',
|
|
// text1: '继续采购',
|
|
// text2: '查看订单',
|
|
// onCancel: onCancel,
|
|
// onSure: onSure,
|
|
// );
|
|
},
|
|
child: Container(
|
|
margin: const EdgeInsets.only(top: 1),
|
|
padding: const EdgeInsets.fromLTRB(26, 10, 26, 10),
|
|
height: 60,
|
|
alignment: Alignment.center,
|
|
decoration: const BoxDecoration(
|
|
gradient: LinearGradient(
|
|
colors: [tMainRedColor, tMainRedColor],
|
|
),
|
|
),
|
|
child: const Text(
|
|
'提交订单',
|
|
style: TextStyle(
|
|
fontSize: 17,
|
|
color: Colors.white,
|
|
fontWeight: FontWeight.w600,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
),
|
|
);
|
|
}
|
|
|
|
onCancel() {
|
|
// ignore: avoid_print
|
|
print('onCancel.....');
|
|
}
|
|
|
|
onSure() {
|
|
// ignore: avoid_print
|
|
print('onSure.....');
|
|
}
|
|
|
|
// 自定义购买信息
|
|
Widget purchaseInfo() {
|
|
return Container(
|
|
width: MediaQuery.of(context).size.width - 32,
|
|
margin: const EdgeInsets.only(
|
|
top: 16,
|
|
left: 16,
|
|
right: 16,
|
|
bottom: 0,
|
|
),
|
|
child: Column(
|
|
crossAxisAlignment: CrossAxisAlignment.start,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
Container(
|
|
height: 16,
|
|
width: 4,
|
|
color: tMainRedColor.withOpacity(0.5),
|
|
),
|
|
const SizedBox(width: 6),
|
|
const Text(
|
|
'供应商名称',
|
|
style: TextStyle(
|
|
fontSize: 16,
|
|
color: tTextColor333,
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
Container(
|
|
width: double.infinity,
|
|
height: 84,
|
|
margin: const EdgeInsets.only(top: 10),
|
|
padding: const EdgeInsets.all(10),
|
|
decoration: const BoxDecoration(
|
|
color: tMainBg,
|
|
borderRadius: BorderRadius.all(
|
|
Radius.circular(2),
|
|
),
|
|
),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Row(
|
|
children: [
|
|
for (var i = 0; i < 10; i++)
|
|
if (i < 4)
|
|
Container(
|
|
margin: const EdgeInsets.only(right: 10),
|
|
decoration: const BoxDecoration(
|
|
boxShadow: [
|
|
BoxShadow(
|
|
color: Colors.black12,
|
|
offset: Offset(0.0, 2.0), //阴影xy轴偏移量
|
|
blurRadius: 2.0, //阴影模糊程度
|
|
spreadRadius: 2.0 //阴影扩散程度
|
|
)
|
|
],
|
|
),
|
|
child: AspectRatio(
|
|
aspectRatio: 1.0 / 1.0, // 宽高比
|
|
child: ClipRRect(
|
|
child: Image.network(
|
|
'https://pics4.baidu.com/feed/a686c9177f3e6709d8176cf9c0a30a3af8dc5508.jpeg?token=b8f66e0570589dabfd098cd47d88927b',
|
|
fit: BoxFit.cover,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
Container(
|
|
padding: const EdgeInsets.only(left: 4),
|
|
child: Column(
|
|
children: const [
|
|
Text(
|
|
'...',
|
|
style: TextStyle(
|
|
color: tMainRedColor,
|
|
fontSize: 28,
|
|
),
|
|
),
|
|
SizedBox(height: 6),
|
|
Text(
|
|
'共4件',
|
|
style: TextStyle(
|
|
color: tTextColor333,
|
|
fontSize: 14,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Padding(
|
|
padding: const EdgeInsets.only(top: 16.0),
|
|
child: Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
Row(
|
|
children: const [
|
|
Text(
|
|
'支付方式:',
|
|
style: TextStyle(
|
|
fontSize: 14,
|
|
color: tTextColor666,
|
|
),
|
|
),
|
|
SizedBox(width: 10),
|
|
Text(
|
|
'DT积分',
|
|
style: TextStyle(
|
|
fontSize: 14,
|
|
color: tTextColor333,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
Row(
|
|
crossAxisAlignment: CrossAxisAlignment.end,
|
|
children: const [
|
|
Text(
|
|
'总价:',
|
|
style: TextStyle(
|
|
fontSize: 14,
|
|
color: tTextColor666,
|
|
),
|
|
),
|
|
SizedBox(width: 4),
|
|
Text(
|
|
'1500',
|
|
style: TextStyle(
|
|
fontSize: 17,
|
|
color: tMainRedColor,
|
|
fontWeight: FontWeight.bold,
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
),
|
|
Container(
|
|
padding: const EdgeInsets.only(
|
|
top: 16,
|
|
bottom: 16,
|
|
),
|
|
child: TextField(
|
|
cursorColor: Colors.black,
|
|
maxLength: 150, // 文字最长
|
|
maxLines: 3, // 最多显示三行
|
|
decoration: InputDecoration(
|
|
hintText: "请输入备注信息", // 提示语的表单
|
|
hintStyle: const TextStyle(
|
|
fontSize: 14,
|
|
),
|
|
filled: true,
|
|
fillColor: tMainBg,
|
|
border: const OutlineInputBorder(
|
|
borderRadius: BorderRadius.all(
|
|
Radius.circular(4.0),
|
|
),
|
|
),
|
|
enabledBorder: OutlineInputBorder(
|
|
borderSide: BorderSide(
|
|
color: Colors.grey.withOpacity(0.3),
|
|
width: 1,
|
|
style: BorderStyle.solid,
|
|
),
|
|
),
|
|
focusedBorder: OutlineInputBorder(
|
|
borderSide: BorderSide(
|
|
color: Colors.grey.withOpacity(0.3),
|
|
width: 1,
|
|
style: BorderStyle.solid,
|
|
),
|
|
),
|
|
),
|
|
),
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
// 自定义地址组件
|
|
Widget selectAddress() {
|
|
return Container(
|
|
width: MediaQuery.of(context).size.width - 32,
|
|
margin: const EdgeInsets.only(
|
|
top: 16,
|
|
left: 16,
|
|
right: 16,
|
|
bottom: 10,
|
|
),
|
|
padding: const EdgeInsets.only(top: 10),
|
|
child: Column(
|
|
children: [
|
|
Row(
|
|
children: const [
|
|
Text(
|
|
'张三丰',
|
|
style: TextStyle(
|
|
fontSize: 17,
|
|
color: tTextColor333,
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
SizedBox(width: 16),
|
|
Text(
|
|
'18823456789',
|
|
style: TextStyle(
|
|
fontSize: 17,
|
|
color: tTextColor333,
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
SizedBox(width: 10),
|
|
Icon(
|
|
Icons.edit_location_alt_outlined,
|
|
color: tMainRedColor,
|
|
size: 17,
|
|
)
|
|
],
|
|
),
|
|
Container(
|
|
padding: const EdgeInsets.only(
|
|
top: 12,
|
|
bottom: 8,
|
|
),
|
|
child: const Divider(height: 1),
|
|
),
|
|
Row(
|
|
mainAxisAlignment: MainAxisAlignment.spaceBetween,
|
|
children: [
|
|
SizedBox(
|
|
width: MediaQuery.of(context).size.width - 140,
|
|
child: const Text(
|
|
'张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰张三丰',
|
|
style: TextStyle(
|
|
fontSize: 14,
|
|
color: tTextColor666,
|
|
),
|
|
),
|
|
),
|
|
GestureDetector(
|
|
onTap: () {
|
|
Get.to(const AddressListPage());
|
|
},
|
|
child: Row(
|
|
children: const [
|
|
Text(
|
|
'切换地址',
|
|
style: TextStyle(
|
|
fontSize: 14,
|
|
color: tTextColor333,
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
Icon(
|
|
Icons.chevron_right,
|
|
color: tTextColor333,
|
|
size: 24,
|
|
)
|
|
],
|
|
),
|
|
),
|
|
],
|
|
),
|
|
],
|
|
),
|
|
);
|
|
}
|
|
|
|
// 自定义顶部导航
|
|
PreferredSizeWidget appBar() {
|
|
return AppBar(
|
|
backgroundColor: tMainRedColor,
|
|
title: const Text(
|
|
'确认订单',
|
|
style: TextStyle(
|
|
color: Colors.white,
|
|
fontSize: 18,
|
|
fontWeight: FontWeight.w500,
|
|
),
|
|
),
|
|
);
|
|
}
|
|
}
|