flutter/lib/pages/order/detail.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('去支付'),
              ),
            ],
          ),
        ),
      ),
    );
  }
}