huixiang_app/lib/order/order_detail_page.dart

import 'package:dio/dio.dart';
import 'package:flutter/material.dart';
import 'package:fluttertoast/fluttertoast.dart';
import 'package:huixiang/generated/l10n.dart';
import 'package:huixiang/retrofit/data/base_data.dart';
import 'package:huixiang/retrofit/data/order_info.dart';
import 'package:huixiang/retrofit/retrofit_api.dart';
import 'package:huixiang/view_widget/border_text.dart';
import 'package:huixiang/view_widget/pay_input_view.dart';
import 'package:huixiang/view_widget/round_button.dart';
import 'package:huixiang/view_widget/separator.dart';
import 'package:shared_preferences/shared_preferences.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class OrderDetailPage extends StatefulWidget {
  final arguments;

  OrderDetailPage({this.arguments});

  @override
  State<StatefulWidget> createState() {
    return _OrderDetailPage();
  }
}

class _OrderDetailPage extends State<OrderDetailPage> {
  ApiService apiService;

  @override
  void initState() {
    super.initState();

    SharedPreferences.getInstance().then((value) {
      apiService =
          ApiService(Dio(), context: context, token: value.getString("token"));
      queryDetails();
    });
  }

  OrderInfo orderInfo;

  queryDetails() async {
    BaseData baseData = await apiService.orderDetail(widget.arguments["id"]);
    if (baseData != null && baseData.isSuccess) {
      orderInfo = OrderInfo.fromJson(baseData.data);
      setState(() {});
    } else {
      Fluttertoast.showToast(msg: baseData.msg);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          S.of(context).jinxingzhongdedingdan,
          style: TextStyle(color: Colors.white),
        ),
        centerTitle: false,
        backgroundColor: Color(0xFF3A405A),
        brightness: Brightness.dark,
        elevation: 0,
        leading: GestureDetector(
          onTap: () {
            Navigator.of(context).pop();
          },
          child: Container(
            alignment: Alignment.centerRight,
            margin: EdgeInsets.only(left: 10.w),
            padding: EdgeInsets.all(6),
            child: Icon(
              Icons.arrow_back_ios,
              color: Colors.white,
              size: 24,
            ),
          ),
        ),
        titleSpacing: 2,
        leadingWidth: 56.w,
        bottom: PreferredSize(
          preferredSize: Size(double.infinity, 88.h),
          child: Container(
            height: 88.h,
            padding: EdgeInsets.fromLTRB(16.w, 0, 16.w, 14.h),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.end,
              crossAxisAlignment: CrossAxisAlignment.end,
              children: [
                Expanded(
                  child: Column(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Container(
                        height: 20.h,
                        width: 82.w,
                        decoration: BoxDecoration(
                          borderRadius: BorderRadius.circular(15),
                          border: Border.all(
                            width: 1.w,
                            color: Color(0xFF32A060),
                          ),
                        ),
                        child: Stack(
                          alignment: Alignment.lerp(
                            Alignment.centerLeft,
                            Alignment.centerRight,
                            0,
                          ),
                          children: [
                            Positioned(
                              left: 0,
                              child: GestureDetector(
                                onTap: () {
                                  setState(() {
                                    type = 0;
                                  });
                                },
                                child: RoundButton(
                                  text: S.of(context).ziqu,
                                  width: 42.w,
                                  height: 20.h,
                                  textColor: Colors.white,
                                  padding:
                                      EdgeInsets.fromLTRB(8.w, 1.h, 8.w, 1.h),
                                  backgroup: type == 0
                                      ? Color(0xFF32A060)
                                      : Colors.transparent,
                                  radius: 15,
                                ),
                              ),
                            ),
                            Positioned(
                              right: 0,
                              child: GestureDetector(
                                onTap: () {
                                  setState(() {
                                    type = 1;
                                  });
                                },
                                child: RoundButton(
                                  text: S.of(context).waisong,
                                  width: 42.w,
                                  height: 20.h,
                                  textColor: Colors.white,
                                  padding:
                                      EdgeInsets.fromLTRB(8.w, 1.h, 8.w, 1.h),
                                  backgroup: type == 1
                                      ? Color(0xFF32A060)
                                      : Colors.transparent,
                                  radius: 15,
                                ),
                              ),
                            ),
                          ],
                        ),
                      ),
                      Text(
                        S.of(context).qingzaiguidingshijianneizhifu,
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 12.sp,
                        ),
                      ),
                    ],
                  ),
                ),
                Container(
                  height: 33.h,
                  child: Row(
                    mainAxisSize: MainAxisSize.min,
                    children: [
                      AspectRatio(
                        aspectRatio: 1,
                        child: BorderText(
                          text: "02",
                          textColor: Colors.white,
                          fontSize: 21.sp,
                          fontWeight: FontWeight.bold,
                          borderColor: Colors.white,
                          borderWidth: 1,
                          padding: EdgeInsets.all(2),
                        ),
                      ),
                      SizedBox(
                        width: 8.w,
                      ),
                      Text(
                        ":",
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 21.sp,
                        ),
                      ),
                      SizedBox(
                        width: 8.w,
                      ),
                      AspectRatio(
                        aspectRatio: 1,
                        child: BorderText(
                          text: "02",
                          textColor: Colors.white,
                          fontSize: 21.sp,
                          fontWeight: FontWeight.bold,
                          borderColor: Colors.white,
                          borderWidth: 1,
                          padding: EdgeInsets.all(2),
                        ),
                      ),
                    ],
                  ),
                )
              ],
            ),
          ),
        ),
      ),
      body: Container(
        child: Stack(
          children: [
            Container(
              height: 36.h,
              color: Color(0xFF3A405A),
            ),
            SingleChildScrollView(
              physics: BouncingScrollPhysics(),
              child: Container(
                child: Column(
                  children: [
                    buildAddress(),
                    buildCommodity(),
                    buildOrderInfo(),
                    Container(
                      height: 42.h,
                    ),
                  ],
                ),
              ),
            ),
          ],
        ),
      ),
    );
  }

  var type = 0;

  Widget buildAddress() {
    return Container(
      margin: EdgeInsets.only(left: 16.w, right: 16.w, top: 4.h, bottom: 2.h),
      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.w,
                height: 28.h,
              ),
              Expanded(
                child: Text(
                  "前进麦味·天然烘焙(凯德1818店)",
                  overflow: TextOverflow.ellipsis,
                  style: TextStyle(
                    fontSize: 14.sp,
                    color: Color(0xFF4C4C4C),
                  ),
                ),
              ),
              Icon(
                Icons.keyboard_arrow_right,
                size: 16,
                color: Colors.black,
              )
            ],
          ),
          Container(
            margin: EdgeInsets.only(left: 28.w),
            child: Text(
              "武昌区中国铁建凯德1818蓝调步行街中北路109附33门牌号05",
              overflow: TextOverflow.ellipsis,
              style: TextStyle(
                fontSize: 10.sp,
                color: Color(0xFFA29E9E),
              ),
            ),
          ),
          Container(
            margin: EdgeInsets.only(top: 20.h, bottom: 16.h),
            child: MySeparator(
              width: 5.w,
              height: 1.h,
              color: Color(0xFFA29E9E),
            ),
          ),
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceEvenly,
            crossAxisAlignment: CrossAxisAlignment.center,
            children: [
              Column(
                children: [
                  Image.asset(
                    "assets/image/icon_order_cancel.png",
                    width: 24.w,
                    height: 24.h,
                    fit: BoxFit.contain,
                  ),
                  SizedBox(
                    height: 8.h,
                  ),
                  Text(
                    S.of(context).quxiaodingdan,
                    style: TextStyle(
                      color: Color(0xFF353535),
                      fontSize: 12.sp,
                    ),
                  )
                ],
              ),
              GestureDetector(
                onTap: () {
                  showModalBottomSheet(
                      context: context,
                      builder: (context) {
                        return PayInputWidget();
                      });
                },
                child: Column(
                  children: [
                    Image.asset(
                      "assets/image/icon_order_renminbi.png",
                      width: 24.w,
                      height: 24.h,
                      fit: BoxFit.contain,
                    ),
                    SizedBox(
                      height: 8.h,
                    ),
                    Text(
                      S.of(context).jixuzhifu,
                      style: TextStyle(
                        color: Color(0xFF32A060),
                        fontSize: 12.sp,
                      ),
                    )
                  ],
                ),
              ),
            ],
          ),
        ],
      ),
    );
  }

  Widget buildCommodity() {
    return Stack(
      alignment: Alignment.centerRight,
      children: [
        Container(
          margin:
              EdgeInsets.only(left: 16.w, right: 16.w, top: 2.h, bottom: 8.h),
          padding:
              EdgeInsets.only(left: 20.w, right: 20.w, top: 12.h, bottom: 12.h),
          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.h),
      discountItem(Color(0xFF32A060)),
      discountItem(Color(0xFFFF7A1A)),
      Container(
        margin: EdgeInsets.only(
          top: 24.h,
          bottom: 4.h,
        ),
        child: MySeparator(
          height: 1,
          width: 5.w,
          color: Colors.grey,
        ),
      ),
      buildTotalPrice(),
    ];
  }

  Widget buildQrCode() {
    return Container(
      margin: EdgeInsets.only(right: 16.w),
      child: Stack(
        children: [
          Container(
            width: 94.w,
            height: 33.h,
            margin: EdgeInsets.only(left: 12.w),
            padding: EdgeInsets.only(left: 16.w),
            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.sp,
                      color: Colors.black),
                ),
                Icon(
                  Icons.keyboard_arrow_right,
                  color: Colors.black,
                  size: 16,
                )
              ],
            ),
          ),
          Container(
              margin: EdgeInsets.only(top: 6.h, bottom: 6.h),
              // 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.w, right: 16.w, top: 16.h, bottom: 8.h),
      padding:
          EdgeInsets.only(left: 20.w, right: 20.w, top: 12.h, bottom: 12.h),
      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).shoujihao, "13800138000"),
          orderInfoItem(
              S.of(context).beizhu, S.of(context).qingshurubeizhuyaoqiu),
          orderInfoItem(S.of(context).fapiao, S.of(context).buzhichikaipiao),
          orderInfoItem(S.of(context).zhifufangshi, S.of(context).yue),
        ],
      ),
    );
  }

  Widget orderInfoItem(leftText, rightText) {
    return Container(
      margin: EdgeInsets.only(top: 8.h, bottom: 8.h),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.center,
        crossAxisAlignment: CrossAxisAlignment.center,
        children: [
          Text(
            leftText,
            style: TextStyle(
              fontWeight: FontWeight.bold,
              fontSize: 12.sp,
              color: Color(0xFF727272),
            ),
          ),
          Expanded(
            child: Text(
              rightText,
              textAlign: TextAlign.end,
              style: TextStyle(
                fontSize: 12.sp,
                color: Color(0xFF353535),
              ),
            ),
            flex: 1,
          ),
          SizedBox(
            width: 16.w,
          ),
          Icon(
            Icons.keyboard_arrow_right,
            size: 16,
            color: Colors.black,
          )
        ],
      ),
    );
  }

  Widget commodityItem() {
    return Container(
      margin: EdgeInsets.only(top: 8.h, bottom: 8.h),
      child: Row(
        children: [
          Container(
            child: Image.network(
              "https://t7.baidu.com/it/u=1297102096,3476971300&fm=193&f=GIF",
              width: 44.w,
              fit: BoxFit.cover,
              height: 44.h,
            ),
          ),
          Expanded(
            flex: 1,
            child: Container(
              margin: EdgeInsets.only(left: 16.w, right: 16.w),
              height: 44.h,
              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.sp,
                          color: Color(0xFF353535),
                        ),
                      ),
                      Text(
                        "x2",
                        style: TextStyle(
                          fontSize: 12.sp,
                          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.sp,
                              color: Color(0xFFA29E9E),
                            ),
                          )),
                      Text(
                        S.of(context).yuan(8),
                        style: TextStyle(
                          fontWeight: FontWeight.bold,
                          fontSize: 12.sp,
                          color: Color(0xFF4C4C4C),
                        ),
                      )
                    ],
                  ),
                ],
              ),
            ),
          ),
        ],
      ),
    );
  }

  Widget discountItem(Color color) {
    return Container(
      margin: EdgeInsets.only(top: 9.h, bottom: 9.h),
      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.sp,
                color: color,
              ),
            ),
          ),
          SizedBox(
            width: 27.w,
          ),
          Expanded(
            child: Text(
              S.of(context).huodongjianmianpeisongfei(3),
              style: TextStyle(
                fontSize: 10.sp,
                color: Color(0xFFA29E9E),
              ),
            ),
            flex: 1,
          ),
          Text(
            S.of(context).yuan(-3.0),
            style: TextStyle(
              fontSize: 12.sp,
              color: color,
            ),
          ),
        ],
      ),
    );
  }

  Widget buildTotalPrice() {
    return Container(
      margin: EdgeInsets.only(top: 7.h, bottom: 11.h),
      child: Row(
        mainAxisAlignment: MainAxisAlignment.end,
        crossAxisAlignment: CrossAxisAlignment.baseline,
        textBaseline: TextBaseline.alphabetic,
        children: [
          Expanded(
            child: Text(
              S.of(context).huodongjianmianpeisongfei(3),
              style: TextStyle(
                fontSize: 10.sp,
                color: Color(0xFFA29E9E),
              ),
            ),
            flex: 1,
          ),
          Container(
            child: Text(
              S.of(context).jiesuanjine,
              style: TextStyle(
                fontSize: 10.sp,
                color: Color(0xFF353535),
              ),
            ),
          ),
          Text(
            "20.4",
            textAlign: TextAlign.end,
            style: TextStyle(
              fontSize: 30.sp,
              color: Color(0xFF32A060),
            ),
          )
        ],
      ),
    );
  }
}