292 lines
10 KiB
Dart
292 lines
10 KiB
Dart
library;
|
||
|
||
import 'package:flutter/material.dart';
|
||
import 'package:shirne_dialog/shirne_dialog.dart';
|
||
|
||
import '../../behavior/custom_scroll_behavior.dart';
|
||
|
||
class OrderDetail extends StatefulWidget {
|
||
const OrderDetail({super.key});
|
||
|
||
@override
|
||
State<OrderDetail> createState() => _OrderDetailState();
|
||
}
|
||
|
||
class _OrderDetailState extends State<OrderDetail> with SingleTickerProviderStateMixin {
|
||
Widget emptyTip() {
|
||
return Column(
|
||
mainAxisAlignment: MainAxisAlignment.center,
|
||
spacing: 5.0,
|
||
children: [
|
||
Image.asset(
|
||
'assets/images/empty.png',
|
||
width: 100.0,
|
||
),
|
||
Text(
|
||
'还没有订单信息~',
|
||
style: TextStyle(color: Colors.grey, fontSize: 12.0),
|
||
)
|
||
],
|
||
);
|
||
}
|
||
|
||
@override
|
||
Widget build(BuildContext context) {
|
||
return Scaffold(
|
||
backgroundColor: Colors.grey[50],
|
||
appBar: AppBar(
|
||
backgroundColor: Color(0xFFFF5000),
|
||
foregroundColor: Colors.white,
|
||
title: Text('订单详情'),
|
||
titleSpacing: 1.0,
|
||
actions: [
|
||
IconButton(
|
||
icon: Icon(Icons.help, size: 18.0),
|
||
onPressed: () {},
|
||
),
|
||
],
|
||
),
|
||
body: ScrollConfiguration(
|
||
behavior: CustomScrollBehavior().copyWith(scrollbars: false),
|
||
child: ListView(
|
||
physics: BouncingScrollPhysics(),
|
||
padding: EdgeInsets.all(10.0),
|
||
children: [
|
||
Column(
|
||
spacing: 5.0,
|
||
children: [
|
||
Text.rich(
|
||
TextSpan(style: TextStyle(fontFamily: 'Arial'), children: [
|
||
WidgetSpan(
|
||
child: Icon(
|
||
Icons.info,
|
||
size: 16.0,
|
||
)),
|
||
TextSpan(text: ' 待支付, '),
|
||
TextSpan(text: ' 剩余 '),
|
||
TextSpan(
|
||
text: '00 : 29 : 55',
|
||
style: TextStyle(color: Colors.red),
|
||
),
|
||
]),
|
||
),
|
||
Text(
|
||
'超过30分钟未支付，订单将自动取消',
|
||
style: TextStyle(color: Colors.grey, fontSize: 12.0),
|
||
),
|
||
SizedBox(
|
||
height: 10.0,
|
||
),
|
||
],
|
||
),
|
||
// 商品信息
|
||
Container(
|
||
margin: EdgeInsets.only(bottom: 10.0),
|
||
padding: EdgeInsets.all(10.0),
|
||
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(15.0), boxShadow: [
|
||
BoxShadow(
|
||
color: Colors.black.withAlpha(10),
|
||
offset: Offset(0.0, 1.0),
|
||
blurRadius: 1.0,
|
||
spreadRadius: 0.0,
|
||
),
|
||
]),
|
||
child: Column(
|
||
spacing: 10.0,
|
||
children: [
|
||
Row(
|
||
children: [
|
||
Wrap(
|
||
crossAxisAlignment: WrapCrossAlignment.center,
|
||
spacing: 5.0,
|
||
children: [
|
||
ClipOval(
|
||
child: Image.asset(
|
||
'assets/images/avatar/img11.jpg',
|
||
width: 25.0,
|
||
),
|
||
),
|
||
Text('老白干自营旗舰店'),
|
||
Icon(
|
||
Icons.arrow_forward_ios_rounded,
|
||
color: Colors.grey,
|
||
size: 12.0,
|
||
),
|
||
],
|
||
),
|
||
Spacer(),
|
||
Text(
|
||
'待付款',
|
||
style: TextStyle(color: Colors.red),
|
||
)
|
||
],
|
||
),
|
||
Row(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
spacing: 10.0,
|
||
children: [
|
||
Image.network(
|
||
'https://img13.360buyimg.com/n1/jfs/t1/263909/5/4187/123220/676eb220F3e481086/0cee829b1894fc4c.jpg',
|
||
width: 80.0,
|
||
),
|
||
Expanded(
|
||
child: Column(
|
||
crossAxisAlignment: CrossAxisAlignment.start,
|
||
spacing: 5.0,
|
||
children: [
|
||
Text(
|
||
'茅台（MOUTAI）飞天 53度 酱香型白酒 500ml*2 海外版送礼袋年货送礼',
|
||
maxLines: 2,
|
||
overflow: TextOverflow.ellipsis,
|
||
),
|
||
Row(
|
||
children: [
|
||
Text(
|
||
'¥3800',
|
||
style: TextStyle(color: Colors.red),
|
||
),
|
||
Spacer(),
|
||
Text(
|
||
'x10',
|
||
style: TextStyle(color: Colors.grey),
|
||
),
|
||
],
|
||
),
|
||
],
|
||
),
|
||
)
|
||
],
|
||
),
|
||
],
|
||
),
|
||
),
|
||
// 订单信息
|
||
Container(
|
||
margin: EdgeInsets.only(bottom: 10.0),
|
||
padding: EdgeInsets.all(10.0),
|
||
decoration: BoxDecoration(color: Colors.white, borderRadius: BorderRadius.circular(15.0), boxShadow: [
|
||
BoxShadow(
|
||
color: Colors.black.withAlpha(10),
|
||
offset: Offset(0.0, 1.0),
|
||
blurRadius: 1.0,
|
||
spreadRadius: 0.0,
|
||
),
|
||
]),
|
||
child: Column(
|
||
spacing: 10.0,
|
||
children: [
|
||
Row(
|
||
children: [
|
||
Text(
|
||
'订单信息',
|
||
style: TextStyle(fontSize: 15.0, fontWeight: FontWeight.bold),
|
||
),
|
||
Spacer(),
|
||
InkWell(
|
||
child: Icon(
|
||
Icons.copy,
|
||
color: Colors.grey,
|
||
size: 14.0,
|
||
),
|
||
onTap: () {
|
||
MyDialog.toast('复制订单信息', icon: Icon(Icons.check_circle));
|
||
},
|
||
)
|
||
],
|
||
),
|
||
Column(
|
||
spacing: 5.0,
|
||
children: [
|
||
Row(
|
||
children: [
|
||
Text(
|
||
'订单号',
|
||
style: TextStyle(color: Colors.grey),
|
||
),
|
||
Spacer(),
|
||
Text('20250125k8ffk23j4j4318', style: TextStyle(fontSize: 12.0)),
|
||
],
|
||
),
|
||
Row(
|
||
children: [
|
||
Text(
|
||
'下单时间',
|
||
style: TextStyle(color: Colors.grey),
|
||
),
|
||
Spacer(),
|
||
Text('2025-01-25 17:00:28', style: TextStyle(fontSize: 12.0)),
|
||
],
|
||
),
|
||
Row(
|
||
children: [
|
||
Text(
|
||
'购买数量',
|
||
style: TextStyle(color: Colors.grey),
|
||
),
|
||
Spacer(),
|
||
Text('10', style: TextStyle(fontSize: 12.0)),
|
||
],
|
||
),
|
||
Row(
|
||
children: [
|
||
Text(
|
||
'订单金额',
|
||
style: TextStyle(color: Colors.grey),
|
||
),
|
||
Spacer(),
|
||
Text('¥3800', style: TextStyle(fontSize: 12.0)),
|
||
],
|
||
),
|
||
Row(
|
||
children: [
|
||
Text(
|
||
'实付金额',
|
||
style: TextStyle(color: Colors.grey),
|
||
),
|
||
Spacer(),
|
||
Text('¥38000', style: TextStyle(fontSize: 12.0)),
|
||
],
|
||
),
|
||
],
|
||
)
|
||
],
|
||
),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
// 底部固定按钮
|
||
bottomNavigationBar: SafeArea(
|
||
minimum: const EdgeInsets.all(10),
|
||
child: Container(
|
||
height: 50.0,
|
||
color: Colors.white,
|
||
padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
|
||
child: Row(
|
||
mainAxisAlignment: MainAxisAlignment.end,
|
||
children: [
|
||
ElevatedButton(
|
||
onPressed: () {},
|
||
style: ButtonStyle(
|
||
backgroundColor: WidgetStateProperty.all(Colors.white),
|
||
foregroundColor: WidgetStateProperty.all(Colors.black87),
|
||
),
|
||
child: const Text('取消订单'),
|
||
),
|
||
const SizedBox(width: 10.0),
|
||
ElevatedButton(
|
||
onPressed: () {},
|
||
style: ButtonStyle(
|
||
backgroundColor: WidgetStateProperty.all(Color(0xff07c160)),
|
||
foregroundColor: WidgetStateProperty.all(Colors.white),
|
||
),
|
||
child: const Text('去支付'),
|
||
),
|
||
],
|
||
),
|
||
),
|
||
),
|
||
);
|
||
}
|
||
}
|