huixiang_app/lib/order/exchange_order_detail_page.dart

import 'package:flutter/material.dart';
import 'package:huixiang/generated/l10n.dart';
import 'package:huixiang/view_widget/separator.dart';

class ExchangeOrderDetailPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _ExchangeOrderDetailPage();
  }
}

class _ExchangeOrderDetailPage extends State<ExchangeOrderDetailPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          S.of(context).yiwanchengdingdan,
          style: TextStyle(color: Colors.black),
        ),
        centerTitle: false,
        backgroundColor: Color(0xFFF7F7F7),
        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.black,
              size: 24,
            ),
          ),
        ),
        titleSpacing: 2,
        leadingWidth: 56,
      ),
      body: SingleChildScrollView(
        child: Container(
          child: Column(
            children: [
              buildAddress(),
              buildCommodity(),
              buildOrderInfo(),
              Container(
                height: 42,
              ),
            ],
          ),
        ),
      ),
    );
  }

  Widget buildAddress() {
    return Container(
      margin: EdgeInsets.only(left: 16, right: 16, top: 16, bottom: 8),
      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(0xFFC4C4C4)),
              )),
              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)),
            ),
          )
        ],
      ),
    );
  }

  Widget buildCommodity() {
    return Stack(
      alignment: Alignment.centerRight,
      children: [
        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(
            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).dingdanhao, "9475665861333"),
          orderInfoItem(S.of(context).xiadanshijian, "2021.03.08 13:12:44"),
          orderInfoItem(S.of(context).peisongfuwu, "美团配送"),
          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.spaceBetween,
        crossAxisAlignment: CrossAxisAlignment.baseline,
        textBaseline: TextBaseline.alphabetic,
        children: [
          Text(
            leftText,
            style: TextStyle(
                fontWeight: FontWeight.bold,
                fontSize: 12,
                color: Color(0xFF727272)),
          ),
          Text(
            rightText,
            style: TextStyle(
              fontSize: 12,
              color: Color(0xFF353535),
            ),
          )
        ],
      ),
    );
  }

  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),
            ),
          )
        ],
      ),
    );
  }
}