abu/flutter
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

1、订单页调整

Browse Source
This commit is contained in:
cuiyouliang 2025-09-03 17:36:45 +08:00
parent 01be7fdd12
commit fd71158f9d
1 changed files with 339 additions and 89 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

424
lib/pages/order/detail.dart
View File

@ -20,6 +20,9 @@ class OrderDetail extends StatefulWidget {
class _OrderDetailState extends State<OrderDetail> with SingleTickerProviderStateMixin { class _OrderDetailState extends State<OrderDetail> with SingleTickerProviderStateMixin {
late String _orderId; late String _orderId;
dynamic orderGoodsInfo; dynamic orderGoodsInfo;
int _initialSeconds = 30 * 60;// 存储初始秒数
bool _countdownFinished = false; // 新增标志位，用于跟踪倒计时是否结束
@override @override
void initState() { void initState() {
super.initState(); super.initState();
@ -39,17 +42,303 @@ class _OrderDetailState extends State<OrderDetail> with SingleTickerProviderStat
Get.back(); Get.back();
} }
} }
// 计算时间
int handleTime() { // 显示支付结果弹框
String dbTime = '2025-08-21 15:07:31.293'; void _showPaymentResultDialog() {
DateTime orderTime = DateTime.parse(dbTime);
// 计算过期时间 = 下单时间 + 15分钟 showDialog(
DateTime expireTime = orderTime.add(const Duration(minutes: 15)); context: context,
// 剩余秒数 barrierDismissible: false,
int remainSeconds = expireTime.difference(DateTime.now()).inSeconds; barrierColor: Colors.black54,
if (remainSeconds < 0) remainSeconds = 0; builder: (BuildContext context) {
return remainSeconds; return Dialog(
backgroundColor: Colors.white,
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(16.0),
),
child: Padding(
padding: const EdgeInsets.all(20.0),
child: Column(
mainAxisSize: MainAxisSize.min,
children: [
// 图标
Container(
width: 60,
height: 60,
decoration: BoxDecoration(
color: Color(0xFFFFF8E6),
shape: BoxShape.circle,
),
child: Icon(
Icons.payment,
size: 32,
color: Color(0xFFFFA500),
),
),
SizedBox(height: 16),
// 标题
Text(
'支付确认',
style: TextStyle(
fontSize: 18,
fontWeight: FontWeight.bold,
color: Colors.black87,
),
),
SizedBox(height: 8),
// 描述
Text(
'请确认您的支付状态',
style: TextStyle(
fontSize: 14,
color: Colors.grey[600],
),
textAlign: TextAlign.center,
),
SizedBox(height: 24),
// 按钮区域
Row(
children: [
// 支付遇到问题按钮
Expanded(
child: OutlinedButton(
onPressed: () {
Navigator.of(context).pop();
_checkOrderStatus();
},
style: OutlinedButton.styleFrom(
backgroundColor: Colors.white,
foregroundColor: Colors.grey[700],
side: BorderSide(color: Colors.grey[300]!),
padding: EdgeInsets.symmetric(vertical: 12),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
),
child: Text('支付遇到问题'),
),
),
SizedBox(width: 12),
// 支付完成按钮
Expanded(
child: ElevatedButton(
onPressed: () {
Navigator.of(context).pop();
_checkOrderStatus();
},
style: ElevatedButton.styleFrom(
backgroundColor: Color(0xFFFF5000),
foregroundColor: Colors.white,
padding: EdgeInsets.symmetric(vertical: 12),
shape: RoundedRectangleBorder(
borderRadius: BorderRadius.circular(8),
),
),
child: Text('支付完成'),
),
),
],
),
],
),
),
);
},
).then((value) {
});
} }
// 检查订单状态
void _checkOrderStatus() async {
try {
// 调用接口查询订单状态
final res = await Http.get('${ShopApi.goodsOrderDetail}/$_orderId');
if (res['data'] != null) {
setState(() {
orderGoodsInfo = res['data'];
});
// todo 根据状态进行不同的操作
int status = orderGoodsInfo?['orderStatus'] ?? 0;
if (status == 2) { // 已支付
MyDialog.toast('支付成功');
} else {
MyDialog.toast('支付尚未完成，请稍后查看');
}
}
} catch (e) {
print('查询订单状态失败: $e');
MyDialog.toast('查询订单状态失败，请稍后重试');
}
}
// 获取订单状态文本
String getOrderStatusText(int status) {
switch (status) {
case 0:
return '待支付';
case 1:
return '支付中';
case 2:
return '已支付';
case 3:
return '已取消';
case 4:
return '已退款';
case 10:
return '无效订单';
default:
return '未知状态';
}
}
// 获取订单状态颜色
Color getOrderStatusColor(int status) {
switch (status) {
case 0:
return Colors.orange;
case 1:
return Colors.blue;
case 2:
return Colors.green;
case 3:
case 4:
case 10:
return Colors.grey;
default:
return Colors.black;
}
}
// 构建底部按钮
Widget buildBottomButtons() {
if (orderGoodsInfo == null) return SizedBox.shrink();
int orderStatus = orderGoodsInfo?['orderStatus'] ?? 0;
switch (orderStatus) {
case 0: // 待支付
return Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
ElevatedButton(
onPressed: () {
// 取消订单逻辑
_cancelOrder();
},
style: ButtonStyle(
backgroundColor: WidgetStateProperty.all(Colors.white),
foregroundColor: WidgetStateProperty.all(Colors.black87),
),
child: const Text('取消订单'),
),
const SizedBox(width: 10.0),
ElevatedButton(
onPressed: () {
// 打开微信小程序的某个页面地址，如pages/index/index
Wxsdk.openMiniApp(orderId: _orderId);
// 拉起支付后显示支付结果弹框
Future.delayed(Duration(milliseconds: 1500), () {
_showPaymentResultDialog();
});
},
style: ButtonStyle(
backgroundColor: WidgetStateProperty.all(Color(0xff07c160)),
foregroundColor: WidgetStateProperty.all(Colors.white),
),
child: const Text('去支付'),
),
],
);
case 1: // 支付中
return Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
ElevatedButton(
onPressed: () {
// 刷新订单状态
getOrderDetail(orderId: _orderId);
},
style: ButtonStyle(
backgroundColor: WidgetStateProperty.all(Colors.blue),
foregroundColor: WidgetStateProperty.all(Colors.white),
),
child: const Text('支付中'),
),
],
);
case 2: // 已支付
return Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
const SizedBox(width: 10.0),
ElevatedButton(
onPressed: () {
},
style: ButtonStyle(
backgroundColor: WidgetStateProperty.all(Color(0xFFFF5000)),
foregroundColor: WidgetStateProperty.all(Colors.white),
),
child: const Text('已支付'),
),
],
);
case 3: // 已取消
case 10: // 无效订单
return Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
const SizedBox(width: 10.0),
ElevatedButton(
onPressed: () {
},
style: ButtonStyle(
backgroundColor: WidgetStateProperty.all(Color(0xFFFF5000)),
foregroundColor: WidgetStateProperty.all(Colors.white),
),
child: const Text('已取消'),
),
],
);
case 4: // 已退款
return Row(
mainAxisAlignment: MainAxisAlignment.end,
children: [
const SizedBox(width: 10.0),
ElevatedButton(
onPressed: () {
},
style: ButtonStyle(
backgroundColor: WidgetStateProperty.all(Color(0xFFFF5000)),
foregroundColor: WidgetStateProperty.all(Colors.white),
),
child: const Text('已退款'),
),
],
);
default:
return SizedBox.shrink();
}
}
// 取消订单
void _cancelOrder() {
print('取消订单: $_orderId');
// 实现取消订单的逻辑
}
Widget emptyTip() { Widget emptyTip() {
return Column( return Column(
mainAxisAlignment: MainAxisAlignment.center, mainAxisAlignment: MainAxisAlignment.center,
@ -69,6 +358,22 @@ class _OrderDetailState extends State<OrderDetail> with SingleTickerProviderStat
@override @override
Widget build(BuildContext context) { Widget build(BuildContext context) {
if (orderGoodsInfo == null) {
return Scaffold(
backgroundColor: Colors.grey[50],
appBar: AppBar(
backgroundColor: Color(0xFFFF5000),
foregroundColor: Colors.white,
title: Text('订单详情'),
titleSpacing: 1.0,
),
body: Center(child: CircularProgressIndicator()),
);
}
int orderStatus = orderGoodsInfo?['orderStatus'] ?? 0;
bool showCountdown = orderStatus == 0; // 只有待支付状态显示倒计时
return Scaffold( return Scaffold(
backgroundColor: Colors.grey[50], backgroundColor: Colors.grey[50],
appBar: AppBar( appBar: AppBar(
@ -76,12 +381,6 @@ class _OrderDetailState extends State<OrderDetail> with SingleTickerProviderStat
foregroundColor: Colors.white, foregroundColor: Colors.white,
title: Text('订单详情'), title: Text('订单详情'),
titleSpacing: 1.0, titleSpacing: 1.0,
// actions: [
// IconButton(
// icon: Icon(Icons.help, size: 18.0),
// onPressed: () {},
// ),
// ],
), ),
body: ScrollConfiguration( body: ScrollConfiguration(
behavior: CustomScrollBehavior().copyWith(scrollbars: false), behavior: CustomScrollBehavior().copyWith(scrollbars: false),
@ -89,6 +388,7 @@ class _OrderDetailState extends State<OrderDetail> with SingleTickerProviderStat
physics: BouncingScrollPhysics(), physics: BouncingScrollPhysics(),
padding: EdgeInsets.all(10.0), padding: EdgeInsets.all(10.0),
children: [ children: [
if (showCountdown)
Column( Column(
spacing: 5.0, spacing: 5.0,
children: [ children: [
@ -100,17 +400,12 @@ class _OrderDetailState extends State<OrderDetail> with SingleTickerProviderStat
size: 16.0, size: 16.0,
)), )),
TextSpan(text: '待支付, '), TextSpan(text: '待支付, '),
TextSpan(text: ' 剩余 '), TextSpan(text: _countdownFinished ? '倒计时已结束' : ' 剩余 '),
// TextSpan( if (!_countdownFinished)
// text: '00 : 29 : 55',
// style: TextStyle(color: Colors.red),
// ),
WidgetSpan( WidgetSpan(
alignment: PlaceholderAlignment.middle, alignment: PlaceholderAlignment.middle,
child: Countdown( child: Countdown(
// createtime seconds: _initialSeconds, // 直接使用30分钟的秒数
// seconds: 15 * 60, // 15分钟
seconds: handleTime(),
build: (_, double time) { build: (_, double time) {
int m = ((time % 3600) ~/ 60).toInt(); int m = ((time % 3600) ~/ 60).toInt();
int s = (time % 60).toInt(); int s = (time % 60).toInt();
@ -124,13 +419,18 @@ class _OrderDetailState extends State<OrderDetail> with SingleTickerProviderStat
interval: const Duration(seconds: 1), interval: const Duration(seconds: 1),
onFinished: () { onFinished: () {
print("倒计时结束"); print("倒计时结束");
setState(() {
_countdownFinished = true; // 倒计时结束时更新标志位
});
}, },
), ),
), ),
]), ]),
), ),
Text( Text(
'超过30分钟未支付，订单将自动取消', _countdownFinished
? '订单已自动取消'
: '超过30分钟未支付，订单将自动取消',
style: TextStyle(color: Colors.grey, fontSize: 12.0), style: TextStyle(color: Colors.grey, fontSize: 12.0),
), ),
SizedBox( SizedBox(
@ -155,29 +455,10 @@ class _OrderDetailState extends State<OrderDetail> with SingleTickerProviderStat
children: [ children: [
Row( Row(
children: [ children: [
/* Wrap(
crossAxisAlignment: WrapCrossAlignment.center,
spacing: 5.0,
children: [
ClipOval(
child: Image.asset(
'assets/images/avatar/img11.jpg',
width: 25.0,
),
),
Text('${orderGoodsInfo['contactUserName']}'),
//contactUserName
Icon(
Icons.arrow_forward_ios_rounded,
color: Colors.grey,
size: 12.0,
),
],
),*/
Spacer(), Spacer(),
Text( Text(
'待付款', getOrderStatusText(orderStatus),
style: TextStyle(color: Colors.red), style: TextStyle(color: getOrderStatusColor(orderStatus)),
) )
], ],
), ),
@ -185,13 +466,8 @@ class _OrderDetailState extends State<OrderDetail> with SingleTickerProviderStat
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
spacing: 10.0, spacing: 10.0,
children: [ children: [
/* SvgPicture.asset(
'assets/images/svg/kefu.svg',
height: 36.0,
width: 36.0,
)*/
Image.network( Image.network(
'${orderGoodsInfo['productInfo'][0]['pic']}', '${orderGoodsInfo?['productInfo'][0]['pic']}',
width: 80.0, width: 80.0,
), ),
Expanded( Expanded(
@ -199,21 +475,20 @@ class _OrderDetailState extends State<OrderDetail> with SingleTickerProviderStat
crossAxisAlignment: CrossAxisAlignment.start, crossAxisAlignment: CrossAxisAlignment.start,
spacing: 5.0, spacing: 5.0,
children: [ children: [
// Text('${orderGoodsInfo['contactUserName']}'),
Text( Text(
'${orderGoodsInfo['productInfo'][0]['productName']}', '${orderGoodsInfo?['productInfo'][0]['productName']}',
maxLines: 2, maxLines: 2,
overflow: TextOverflow.ellipsis, overflow: TextOverflow.ellipsis,
), ),
Row( Row(
children: [ children: [
Text( Text(
'¥${orderGoodsInfo['productInfo'][0]['salePrice']}', '¥${orderGoodsInfo?['productInfo'][0]['salePrice']}',
style: TextStyle(color: Colors.red), style: TextStyle(color: Colors.red),
), ),
Spacer(), Spacer(),
Text( Text(
'x1', 'x${orderGoodsInfo?['productInfo'][0]['buyNum'] ?? 1}',
style: TextStyle(color: Colors.grey), style: TextStyle(color: Colors.grey),
), ),
], ],
@ -270,7 +545,7 @@ class _OrderDetailState extends State<OrderDetail> with SingleTickerProviderStat
style: TextStyle(color: Colors.grey), style: TextStyle(color: Colors.grey),
), ),
Spacer(), Spacer(),
Text(orderGoodsInfo['orderId'], style: TextStyle(fontSize: 12.0)), Text(orderGoodsInfo?['orderId'] ?? '', style: TextStyle(fontSize: 12.0)),
], ],
), ),
Row( Row(
@ -280,7 +555,7 @@ class _OrderDetailState extends State<OrderDetail> with SingleTickerProviderStat
style: TextStyle(color: Colors.grey), style: TextStyle(color: Colors.grey),
), ),
Spacer(), Spacer(),
Text(orderGoodsInfo['createTime'], style: TextStyle(fontSize: 12.0)), Text(orderGoodsInfo?['createTime'] ?? '', style: TextStyle(fontSize: 12.0)),
], ],
), ),
Row( Row(
@ -290,8 +565,7 @@ class _OrderDetailState extends State<OrderDetail> with SingleTickerProviderStat
style: TextStyle(color: Colors.grey), style: TextStyle(color: Colors.grey),
), ),
Spacer(), Spacer(),
// 添加空值安全检查 Text((orderGoodsInfo?['productInfo'][0]['buyNum'] ?? 0).toString(),
Text((orderGoodsInfo['productInfo'][0]['buyNum'] ?? 0).toString(),
style: TextStyle(fontSize: 12.0)), style: TextStyle(fontSize: 12.0)),
], ],
), ),
@ -302,7 +576,7 @@ class _OrderDetailState extends State<OrderDetail> with SingleTickerProviderStat
style: TextStyle(color: Colors.grey), style: TextStyle(color: Colors.grey),
), ),
Spacer(), Spacer(),
Text('¥${orderGoodsInfo['totalAmount']??'0.00'}', style: TextStyle(fontSize: 12.0)), Text('¥${orderGoodsInfo?['totalAmount']??'0.00'}', style: TextStyle(fontSize: 12.0)),
], ],
), ),
Row( Row(
@ -312,7 +586,7 @@ class _OrderDetailState extends State<OrderDetail> with SingleTickerProviderStat
style: TextStyle(color: Colors.grey), style: TextStyle(color: Colors.grey),
), ),
Spacer(), Spacer(),
Text('¥${orderGoodsInfo['payAmount']??'0.00'}', style: TextStyle(fontSize: 12.0)), Text('¥${orderGoodsInfo?['payAmount']??'0.00'}', style: TextStyle(fontSize: 12.0)),
], ],
), ),
], ],
@ -330,31 +604,7 @@ class _OrderDetailState extends State<OrderDetail> with SingleTickerProviderStat
height: 50.0, height: 50.0,
color: Colors.white, color: Colors.white,
padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0), padding: const EdgeInsets.symmetric(horizontal: 10.0, vertical: 5.0),
child: Row( child: buildBottomButtons(),
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: () {
//打开微信小程序的某个页面地址，如pages/index/index
Wxsdk.openMiniApp(orderId:_orderId);
},
style: ButtonStyle(
backgroundColor: WidgetStateProperty.all(Color(0xff07c160)),
foregroundColor: WidgetStateProperty.all(Colors.white),
),
child: const Text('去支付'),
),
],
),
), ),
), ),
); );