收银台页面搭建及封装 dialog 公用函数且套入页面使用
This commit is contained in:
292
lib/pages/store/checkout/checkout_page.dart
Normal file
292
lib/pages/store/checkout/checkout_page.dart
Normal file
@@ -0,0 +1,292 @@
|
||||
// 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,
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
}
|
||||
Reference in New Issue
Block a user