huixiang_app/lib/mine/vip_detail_page.dart

import 'package:barcode_widget/barcode_widget.dart';
import 'package:flutter/material.dart';
import 'package:huixiang/generated/l10n.dart';
import 'package:huixiang/view_widget/round_button.dart';
import 'package:flutter_screenutil/flutter_screenutil.dart';

class VipDetailPage extends StatefulWidget {
  @override
  State<StatefulWidget> createState() {
    return _VipDetailPage();
  }
}

class _VipDetailPage extends State<VipDetailPage> {
  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: Text(
          S.of(context).huiyuankaxiangqing,
          style: TextStyle(color: Colors.white, fontWeight: FontWeight.bold),
        ),
        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),
            padding: EdgeInsets.all(6),
            child: Icon(
              Icons.arrow_back_ios,
              color: Colors.white,
              size: 24,
            ),
          ),
        ),
        titleSpacing: 2,
        leadingWidth: 56,
      ),
      body: Column(
        children: [
          Stack(
            children: [
              Container(
                height: 150,
                color: Color(0xFF3A405A),
              ),
              buildAddress(),
            ],
          ),
          Padding(
            padding: EdgeInsets.only(left: 16, top: 35, bottom: 32),
            child: Row(
              children: [
                Text(
                  "历史订单",
                  overflow: TextOverflow.ellipsis,
                  maxLines: 2,
                  style: TextStyle(
                    fontSize: 16,
                    fontWeight: FontWeight.bold,
                    color: Colors.black,
                  ),
                ),
                SizedBox(
                  width: 8,
                ),
                Image.asset(
                  "assets/image/icon_history.png",
                ),
              ],
            ),
          ),
          Expanded(
            child: ListView.builder(
              itemBuilder: (context, position) {
                return GestureDetector(
                  onTap: () {
                    // Navigator.of(context).pushNamed('/router/vip_details_page');
                  },
                  child: historyItem(),
                );
              },
              itemCount: 5,
            ),
          )
        ],
      ),
    );
  }

  Widget buildAddress() {
    return Container(
      margin: EdgeInsets.fromLTRB(16, 8, 16, 8),
      // margin: EdgeInsets.all(16),
      child: Stack(
        // alignment: Alignment.center,
        children: [
          Image.asset(
            "assets/image/icon_vip_bj.png",
            fit: BoxFit.fill, //填充剩余空间
            height: 220,
          ),
          Container(
            padding: EdgeInsets.only(left: 16, right: 16),
            child: Column(
              mainAxisAlignment: MainAxisAlignment.start,
              crossAxisAlignment: CrossAxisAlignment.start,
              children: [
                SizedBox(height: 16),
                Row(
                  children: [
                    ClipOval(
                      child: Image.asset(
                        "assets/image/icon_vip_name.png",
                      ),
                      clipBehavior: Clip.hardEdge,
                    ),
                    SizedBox(
                      width: 12,
                    ),
                    Expanded(
                      child: Container(
                        height: 54,
                        child: Column(
                          mainAxisAlignment: MainAxisAlignment.spaceEvenly,
                          crossAxisAlignment: CrossAxisAlignment.start,
                          children: [
                            Row(
                              mainAxisAlignment: MainAxisAlignment.spaceBetween,
                              crossAxisAlignment: CrossAxisAlignment.center,
                              children: [
                                Text(
                                  "百年川椒火锅店",
                                  overflow: TextOverflow.ellipsis,
                                  maxLines: 2,
                                  style: TextStyle(
                                    fontSize: 20,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.black,
                                  ),
                                ),
                                Image.asset(
                                  "assets/image/icon_vip.png",
                                ),
                              ],
                            ),
                            Text.rich(
                              TextSpan(children: [
                                TextSpan(
                                  text: "会员卡",
                                  style: TextStyle(
                                      fontSize: 12,
                                      fontWeight: FontWeight.bold,
                                      color: Colors.black),
                                ),
                              ]),
                              textDirection: TextDirection.ltr,
                            ),
                          ],
                        ),
                      ),
                      flex: 1,
                    )
                  ],
                ),
                SizedBox(height: 26),
                Padding(
                  padding: EdgeInsets.only(left: 32, right: 32),
                  child: Row(
                    mainAxisAlignment: MainAxisAlignment.spaceBetween,
                    crossAxisAlignment: CrossAxisAlignment.start,
                    children: [
                      Column(
                        children: [
                          Text.rich(
                            TextSpan(children: [
                              TextSpan(
                                text: "¥ 0.00",
                                style: TextStyle(
                                    fontSize: 24,
                                    fontWeight: FontWeight.w500,
                                    color: Colors.black),
                              ),
                            ]),
                          ),
                          GestureDetector(
                            onTap: () {
                              Navigator.of(context)
                                  .pushNamed('/router/vip_balance');
                            },
                            child: Row(
                              children: [
                                Text.rich(
                                  TextSpan(children: [
                                    TextSpan(
                                      text: S.of(context).yue,
                                      style: TextStyle(
                                          fontSize: 14,
                                          fontWeight: FontWeight.bold,
                                          color: Colors.black),
                                    ),
                                  ]),
                                  textDirection: TextDirection.ltr,
                                ),
                                Icon(
                                  Icons.keyboard_arrow_right,
                                  color: Colors.black,
                                  size: 22.5,
                                ),
                              ],
                            ),
                          ),
                        ],
                      ),
                      Column(
                        children: [
                          Text.rich(
                            TextSpan(children: [
                              TextSpan(
                                text: "0",
                                style: TextStyle(
                                    fontSize: 24,
                                    fontWeight: FontWeight.w500,
                                    color: Colors.black),
                              ),
                            ]),
                          ),
                          SizedBox(
                            height: 5,
                          ),
                          Text.rich(
                            TextSpan(children: [
                              TextSpan(
                                text: S.of(context).jifen,
                                style: TextStyle(
                                    fontSize: 14,
                                    fontWeight: FontWeight.bold,
                                    color: Colors.black),
                              ),
                            ]),
                          ),
                        ],
                      ),
                    ],
                  ),
                ),
                Column(
                  children: [
                    Padding(
                      padding: EdgeInsets.only(top: 5, bottom: 5),
                      child: Text(
                        "2673 7132 6323 6786",
                        style: TextStyle(color: Colors.black, wordSpacing: 50),
                      ),
                    ),
                    BarcodeWidget(
                      barcode: Barcode.code128(),
                      data: '2673713263236786',
                      height: 30,
                      color: Colors.black,
                      drawText: false,
                    )
                  ],
                )
              ],
            ),
          ),
        ],
      ),
    );
  }

  Widget historyItem() {
    return Container(
      // margin: EdgeInsets.fromLTRB(16, 8, 16, 8),
      child: Column(
        mainAxisAlignment: MainAxisAlignment.spaceAround,
        crossAxisAlignment: CrossAxisAlignment.start,
        children: [
          Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                width: 19.w,
                height: 19.h,
                margin: EdgeInsets.only(left: 12, top: 12),
                alignment: Alignment.center,
                decoration: new BoxDecoration(
                  color: Color(0xff32A060),
                  borderRadius: BorderRadius.circular(2),
                ),
                child: Text("自",
                    style: TextStyle(
                        fontSize: 12,
                        fontWeight: FontWeight.bold,
                        color: Colors.white)),
              ),
              Expanded(
                child: Container(
                  width: double.infinity,
                  margin: EdgeInsets.only(left: 6, top: 12),
                  alignment: Alignment.centerLeft,
                  child: Text(
                    "前进麦味·天然烘焙(凯德1818店)",
                    style: TextStyle(
                      fontWeight: FontWeight.bold,
                      fontSize: 14,
                      color: Color(0xFF353535),
                    ),
                  ),
                ),
                flex: 1,
              ),
              Padding(
                padding: EdgeInsets.only(top: 12, right: 12),
                child: Text(S.of(context).yiwancheng,
                    style: TextStyle(
                        fontSize: 14,
                        fontWeight: FontWeight.bold,
                        color: Color(0xff32A060))),
              ),
            ],
          ),
          Container(
            margin: EdgeInsets.only(left: 37),
            child: Row(
              mainAxisAlignment: MainAxisAlignment.spaceBetween,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [
                Column(
                  mainAxisAlignment: MainAxisAlignment.spaceAround,
                  crossAxisAlignment: CrossAxisAlignment.start,
                  children: [
                    Text(
                      S.of(context).xiadanshijian_("2020.01.20~2020.1.21"),
                      style: TextStyle(
                        fontSize: 10,
                        color: Color(0xFF727272),
                      ),
                    ),
                    SizedBox(
                      height: 8,
                    ),
                    Column(
                      mainAxisAlignment: MainAxisAlignment.spaceAround,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Image.network(
                          "https://t7.baidu.com/it/u=1348120667,563487140&fm=193&f=GIF",
                          width: 75,
                          height: 75,
                          fit: BoxFit.contain,
                        ),
                        SizedBox(
                          height: 4,
                        ),
                        Text(
                          "桑葚椰汁水果茶",
                          style: TextStyle(
                            fontSize: 10,
                            color: Color(0xFF353535),
                          ),
                        ),
                      ],
                    ),
                  ],
                ),
                Padding(
                  padding: EdgeInsets.only(right: 22),
                  child: Image.asset(
                    "assets/image/icon_more.png",
                    fit: BoxFit.fill,
                    alignment: Alignment.centerRight,
                    width: 24,
                    height: 24,
                  ),
                )
              ],
            ),
          ),
          SizedBox(
            height: 12,
          ),
          Container(
            margin: EdgeInsets.only(right: 12, bottom: 12),
            child: Directionality(
                textDirection: TextDirection.rtl,
                child: Column(
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.start,
                      crossAxisAlignment: CrossAxisAlignment.start,
                      children: [
                        Text.rich(TextSpan(children: [
                          TextSpan(
                            text: "合计:",
                            style: TextStyle(
                              fontSize: 12,
                              color: Color(0xFF868686),
                            ),
                          ),
                          TextSpan(
                            text: S.of(context).yuan("58.2"),
                            style: TextStyle(
                              fontSize: 12,
                              fontWeight: FontWeight.bold,
                              color: Colors.black,
                            ),
                          ),
                        ])),
                        SizedBox(
                          width: 4,
                        ),
                        Text.rich(TextSpan(children: [
                          TextSpan(
                            text: "共",
                            style: TextStyle(
                              fontSize: 12,
                              color: Color(0xFF868686),
                            ),
                          ),
                          TextSpan(
                            text: "5",
                            style: TextStyle(
                              fontSize: 12,
                              fontWeight: FontWeight.bold,
                              color: Colors.black,
                            ),
                          ),
                          TextSpan(
                            text: "件",
                            style: TextStyle(
                              fontSize: 12,
                              color: Color(0xFF868686),
                            ),
                          ),
                        ])),
                      ],
                    ),
                    SizedBox(
                      height: 8,
                    ),
                    Row(
                      children: [
                        RoundButton(
                          text: "再来一单",
                          textColor: Colors.white,
                          fontSize: 12,
                          backgroup: Color(0xFF32A060),
                          radius: 2,
                          padding: EdgeInsets.fromLTRB(17, 4, 17, 4),
                        ),
                        Container(
                          width: 72,
                          height: 24,
                          margin: EdgeInsets.only(right: 10),
                          child: TextButton(
                            onPressed: () {},
                            style: ButtonStyle(
                              padding:
                                  MaterialStateProperty.all(EdgeInsets.zero),
                              side: MaterialStateProperty.all(
                                BorderSide(
                                    color: Color(0xff32A060), width: 0.5),
                              ),
                            ),
                            child: Text(
                              "删除一单",
                              style: TextStyle(
                                  color: Color(0xff32A060), fontSize: 12),
                            ),
                          ),
                        ),
                        Expanded(
                          flex: 1,
                          child: Container(
                            margin: EdgeInsets.only(left: 37),
                            alignment: Alignment.centerLeft,
                            child: Text(
                              "取单号 201",
                              style: TextStyle(
                                  fontSize: 16,
                                  fontWeight: FontWeight.bold,
                                  color: Colors.black),
                            ),
                          ),
                        ),
                      ],
                    ),
                  ],
                )),
          ),
        ],
      ),
    );
  }
}