gl_dao/lib/pages/store/checkout/checkout_page.dart

// ignore_for_file: unnecessary_const

/*
 * @Author: Aimee~
 * @Date: 2022-06-06 09:14:27
 * @LastEditTime: 2022-06-06 15:45:05
 * @LastEditors: Aimee
 * @FilePath: /gl_dao/lib/pages/store/checkout/checkout_page.dart
 * @Description: 收银台
 */

// import 'package:flutter/cupertino.dart';

import 'package:flutter/material.dart';

import '../../../main_color.dart';
import '../../components/yy_alert_dialog_with_divider.dart';

class CheckoutPage extends StatefulWidget {
  const CheckoutPage({Key? key}) : super(key: key);

  @override
  State<CheckoutPage> createState() => _CheckoutPageState();
}

class _CheckoutPageState extends State<CheckoutPage> {
  String defaultValue = "A";

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: appBar(),
      body: Stack(
        children: [
          Column(
            mainAxisAlignment: MainAxisAlignment.start,
            crossAxisAlignment: CrossAxisAlignment.start,
            children: [
              Container(
                width: MediaQuery.of(context).size.width,
                padding: const EdgeInsets.fromLTRB(0, 30, 0, 50),
                decoration: const BoxDecoration(
                  gradient: LinearGradient(
                    begin: Alignment.topCenter,
                    end: Alignment.bottomCenter,
                    colors: [
                      tMainRedColor,
                      Colors.red,
                    ],
                  ),
                ),
                child: Column(
                  mainAxisAlignment: MainAxisAlignment.center,
                  crossAxisAlignment: CrossAxisAlignment.center,
                  children: [
                    Row(
                      mainAxisAlignment: MainAxisAlignment.center,
                      crossAxisAlignment: CrossAxisAlignment.end,
                      children: [
                        const Text(
                          '1999',
                          style: TextStyle(
                            fontSize: 34,
                            color: Colors.white,
                            fontWeight: FontWeight.bold,
                          ),
                        ),
                        Container(
                          padding: const EdgeInsets.only(bottom: 5),
                          child: const Text(
                            ' DT积分',
                            style: TextStyle(
                              fontSize: 14,
                              color: Colors.white,
                            ),
                          ),
                        ),
                      ],
                    ),
                    const SizedBox(height: 26),
                    Container(
                      padding: const EdgeInsets.only(
                        left: 12,
                        right: 12,
                        top: 4,
                        bottom: 4,
                      ),
                      decoration: BoxDecoration(
                        borderRadius: BorderRadius.circular(150.0),
                        color: Colors.white.withOpacity(0.2),
                      ),
                      child: const Text(
                        '订单编号:202206061232334322122 ',
                        textAlign: TextAlign.center,
                        style: TextStyle(
                          color: Colors.white,
                          fontSize: 13,
                        ),
                      ),
                    ),
                  ],
                ),
              ),
              const SizedBox(height: 26),
              Column(
                children: [
                  Row(
                    children: [
                      const SizedBox(
                        width: 16,
                      ),
                      Container(
                        height: 16,
                        width: 4,
                        color: tMainRedColor.withOpacity(0.5),
                      ),
                      const SizedBox(width: 6),
                      const Text(
                        '支付方式',
                        style: TextStyle(
                          fontSize: 16,
                          color: tTextColor333,
                          fontWeight: FontWeight.w500,
                        ),
                      ),
                      const SizedBox(
                        height: 26,
                      ),
                    ],
                  ),
                  RadioListTile(
                    value: 'A',
                    groupValue: defaultValue,
                    title: const Text(
                      "DT积分支付",
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.w400,
                      ),
                    ),
                    activeColor: tMainRedColor,
                    subtitle: const Text(
                      "使用DT积分 方便快捷 升值快",
                      style: TextStyle(
                        fontSize: 12,
                      ),
                    ),
                    secondary: SizedBox(
                      width: 44,
                      height: 44,
                      child: ClipOval(
                        child: Image.network(
                          'https://www.itying.com/images/flutter/1.png',
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                    controlAffinity: ListTileControlAffinity.trailing,
                    onChanged: (v) {
                      setState(() {
                        defaultValue = v.toString();
                      });
                    },
                  ),
                  const Divider(),
                  RadioListTile(
                    value: 'B',
                    groupValue: defaultValue,
                    title: const Text(
                      "微信支付",
                      style: TextStyle(
                        fontSize: 16,
                        fontWeight: FontWeight.w400,
                      ),
                    ),
                    activeColor: tMainRedColor,
                    subtitle: const Text(
                      "使用DT积分 方便快捷 升值快",
                      style: TextStyle(
                        fontSize: 12,
                      ),
                    ),
                    secondary: SizedBox(
                      width: 44,
                      height: 44,
                      child: ClipOval(
                        child: Image.network(
                          'https://www.itying.com/images/flutter/1.png',
                          fit: BoxFit.cover,
                        ),
                      ),
                    ),
                    controlAffinity: ListTileControlAffinity.trailing,
                    onChanged: (v) {
                      setState(() {
                        defaultValue = v.toString();
                      });
                    },
                  ),
                  const Divider(),
                ],
              ),
            ],
          ),
          buttomButton(),
        ],
      ),
    );
  }

  // 自定义底部提交按钮
  Widget buttomButton() {
    return Positioned(
      bottom: 0,
      left: 0,
      child: Container(
        width: MediaQuery.of(context).size.width * 0.8,
        margin: EdgeInsets.only(left: MediaQuery.of(context).size.width * 0.1),
        decoration: const BoxDecoration(
          color: Colors.white,
        ),
        child: SafeArea(
          child: Row(
            mainAxisAlignment: MainAxisAlignment.spaceBetween,
            children: [
              Expanded(
                flex: 1,
                child: GestureDetector(
                  onTap: () {
                    yYAlertDialogWithDivider(
                      context,
                      title: '确认放弃支付么?',
                      text1: '放弃支付',
                      text2: '继续支付',
                      onCancel: onCancel,
                      onSure: onSure,
                    );
                  },
                  child: Container(
                    margin: const EdgeInsets.only(top: 1),
                    padding: const EdgeInsets.fromLTRB(26, 10, 26, 10),
                    height: 60,
                    alignment: Alignment.center,
                    decoration: const BoxDecoration(
                      gradient: LinearGradient(
                        colors: [tMainRedColor, tMainRedColor],
                      ),
                    ),
                    child: const Text(
                      '立即支付',
                      style: TextStyle(
                        fontSize: 17,
                        color: Colors.white,
                        fontWeight: FontWeight.w600,
                      ),
                    ),
                  ),
                ),
              ),
            ],
          ),
        ),
      ),
    );
  }

  onCancel() {
    // ignore: avoid_print
    print('onCancel.....');
  }

  onSure() {
    // ignore: avoid_print
    print('onSure.....');
  }

  //  自定义顶部导航
  PreferredSizeWidget appBar() {
    return AppBar(
      elevation: 0,
      backgroundColor: tMainRedColor,
      title: const Text(
        '支付收银台',
        style: TextStyle(
          color: Colors.white,
          fontSize: 18,
          fontWeight: FontWeight.w500,
        ),
      ),
    );
  }
}