登录页面样式
This commit is contained in:
GYJ
@@ -1,4 +1,8 @@
|
||||
import 'dart:convert';
|
||||
import 'dart:typed_data';
|
||||
|
||||
import 'package:cashier_reserve/common/print/print.dart';
|
||||
import 'package:cashier_reserve/model/login_model.dart';
|
||||
import 'package:flutter/cupertino.dart';
|
||||
import 'package:flutter/material.dart';
|
||||
|
||||
@@ -20,6 +24,35 @@ class _LoginViewState extends State<LoginView> {
|
||||
TextEditingController passwordText = TextEditingController();
|
||||
TextEditingController codeText = TextEditingController();
|
||||
|
||||
String authCodeUuid = "";
|
||||
String authCodeImg = "";
|
||||
|
||||
@override
|
||||
void initState() {
|
||||
super.initState();
|
||||
|
||||
_loadAuthCode();
|
||||
}
|
||||
|
||||
void _loadAuthCode() async {
|
||||
var res = await LoginModel.getLoginAuthCode();
|
||||
|
||||
if (res is Map) {
|
||||
Map<String, dynamic> result = res as Map<String, dynamic>;
|
||||
setState(() {
|
||||
authCodeUuid = result["uuid"] ?? "";
|
||||
String img = result["img"] ?? "";
|
||||
if (img.startsWith("data:image/png;base64,")) {
|
||||
authCodeImg = img.substring("data:image/png;base64,".length);
|
||||
}
|
||||
});
|
||||
} else {
|
||||
yjPrint("获取验证码失败");
|
||||
}
|
||||
}
|
||||
|
||||
void _goLogin() async {}
|
||||
|
||||
@override
|
||||
void dispose() {
|
||||
merchantText.dispose();
|
||||
@@ -31,89 +64,211 @@ class _LoginViewState extends State<LoginView> {
|
||||
|
||||
@override
|
||||
Widget build(BuildContext context) {
|
||||
return Container(
|
||||
width: MediaQuery.of(context).size.width,
|
||||
height: MediaQuery.of(context).size.height,
|
||||
color: const Color(0x55000000),
|
||||
child: Center(
|
||||
return Scaffold(
|
||||
backgroundColor: Colors.black.withOpacity(0.2),
|
||||
body: GestureDetector(
|
||||
onTap: () {
|
||||
FocusScope.of(context).requestFocus(FocusNode());
|
||||
},
|
||||
child: Container(
|
||||
padding: const EdgeInsets.fromLTRB(30, 30, 30, 30),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
width: 400,
|
||||
height: 400,
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
const Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Text(
|
||||
"银收客订餐系统",
|
||||
style: TextStyle(
|
||||
fontSize: 25,
|
||||
color: Color(0xff333333),
|
||||
decoration: TextDecoration.none),
|
||||
)
|
||||
],
|
||||
width: MediaQuery.of(context).size.width,
|
||||
height: MediaQuery.of(context).size.height,
|
||||
color: const Color(0x55000000),
|
||||
child: Center(
|
||||
child: Container(
|
||||
padding: const EdgeInsets.fromLTRB(30, 30, 30, 30),
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.white,
|
||||
borderRadius: BorderRadius.circular(10),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 30,
|
||||
),
|
||||
CupertinoSegmentedControl(
|
||||
//子标签
|
||||
children: {
|
||||
0: Container(
|
||||
width: 60,
|
||||
height: 30,
|
||||
alignment: Alignment.center,
|
||||
child: const Text(
|
||||
"商户",
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
// color: Color(0xff333333),
|
||||
decoration: TextDecoration.none),
|
||||
width: 400,
|
||||
// height: 400,
|
||||
child: SingleChildScrollView(
|
||||
child: Column(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
crossAxisAlignment: CrossAxisAlignment.start,
|
||||
children: [
|
||||
_buildTitle(context),
|
||||
const SizedBox(
|
||||
height: 30,
|
||||
),
|
||||
),
|
||||
1: Container(
|
||||
width: 60,
|
||||
height: 30,
|
||||
alignment: Alignment.center,
|
||||
child: const Text(
|
||||
"员工",
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
// color: Color(0xff333333),
|
||||
decoration: TextDecoration.none),
|
||||
_buildSegment(context),
|
||||
const SizedBox(
|
||||
height: 5,
|
||||
),
|
||||
),
|
||||
},
|
||||
//当前选中的索引
|
||||
groupValue: segmentIndex,
|
||||
//点击回调
|
||||
onValueChanged: (int index) {
|
||||
setState(() {
|
||||
segmentIndex = index;
|
||||
loginType = index == 0 ? "merchant" : "staff";
|
||||
});
|
||||
},
|
||||
selectedColor: Colors.blue,
|
||||
borderColor: Colors.blue,
|
||||
unselectedColor: Colors.white,
|
||||
_buildInputTextField(context, merchantText,
|
||||
hintText: "请输入商户号",
|
||||
icon: Icons.store_sharp,
|
||||
isHidden: loginType == "merchant"),
|
||||
_buildInputTextField(context, accountText,
|
||||
hintText: "请输入账号", icon: Icons.people),
|
||||
_buildInputTextField(context, passwordText,
|
||||
hintText: "请输入密码", icon: Icons.lock, isPassword: true),
|
||||
_buildInputTextField(context, codeText,
|
||||
hintText: "请输入验证码",
|
||||
icon: Icons.admin_panel_settings_sharp,
|
||||
isCode: true),
|
||||
_buildLoginBtn(context),
|
||||
],
|
||||
),
|
||||
),
|
||||
const SizedBox(
|
||||
height: 5,
|
||||
),
|
||||
// TextField(
|
||||
// controller: merchantText,
|
||||
// )
|
||||
],
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildLoginBtn(BuildContext context) {
|
||||
return InkWell(
|
||||
onTap: () {
|
||||
_goLogin();
|
||||
},
|
||||
child: Container(
|
||||
margin: const EdgeInsets.only(top: 25),
|
||||
height: 35,
|
||||
decoration: BoxDecoration(
|
||||
color: Colors.blue,
|
||||
borderRadius: BorderRadius.circular(5),
|
||||
),
|
||||
child: const Center(
|
||||
child: Text(
|
||||
"登录",
|
||||
style: TextStyle(fontSize: 15, color: Colors.white),
|
||||
),
|
||||
),
|
||||
),
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildTitle(BuildContext context) {
|
||||
return const Row(
|
||||
mainAxisAlignment: MainAxisAlignment.center,
|
||||
children: [
|
||||
Text(
|
||||
"银收客订餐系统",
|
||||
style: TextStyle(
|
||||
fontSize: 25,
|
||||
color: Color(0xff333333),
|
||||
decoration: TextDecoration.none),
|
||||
)
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildSegment(BuildContext context) {
|
||||
return CupertinoSegmentedControl(
|
||||
//子标签
|
||||
children: {
|
||||
0: Container(
|
||||
width: 60,
|
||||
height: 30,
|
||||
alignment: Alignment.center,
|
||||
child: const Text(
|
||||
"商户",
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
// color: Color(0xff333333),
|
||||
decoration: TextDecoration.none),
|
||||
),
|
||||
),
|
||||
1: Container(
|
||||
width: 60,
|
||||
height: 30,
|
||||
alignment: Alignment.center,
|
||||
child: const Text(
|
||||
"员工",
|
||||
style: TextStyle(
|
||||
fontSize: 14,
|
||||
// color: Color(0xff333333),
|
||||
decoration: TextDecoration.none),
|
||||
),
|
||||
),
|
||||
},
|
||||
//当前选中的索引
|
||||
groupValue: segmentIndex,
|
||||
//点击回调
|
||||
onValueChanged: (int index) {
|
||||
setState(() {
|
||||
segmentIndex = index;
|
||||
loginType = index == 0 ? "merchant" : "staff";
|
||||
});
|
||||
},
|
||||
selectedColor: Colors.blue,
|
||||
borderColor: Colors.blue,
|
||||
unselectedColor: Colors.white,
|
||||
);
|
||||
}
|
||||
|
||||
Widget _buildInputTextField(
|
||||
BuildContext context,
|
||||
TextEditingController controller, {
|
||||
String hintText = "",
|
||||
IconData icon = Icons.people,
|
||||
bool isPassword = false,
|
||||
bool isHidden = false,
|
||||
bool isCode = false,
|
||||
}) {
|
||||
if (isHidden) {
|
||||
return Container();
|
||||
}
|
||||
return Column(
|
||||
children: [
|
||||
const SizedBox(
|
||||
height: 10,
|
||||
),
|
||||
Row(
|
||||
children: [
|
||||
Expanded(
|
||||
child: Container(
|
||||
decoration: BoxDecoration(
|
||||
border: Border.all(color: const Color(0xffefefef), width: 1),
|
||||
borderRadius: BorderRadius.circular(5),
|
||||
),
|
||||
padding: const EdgeInsets.fromLTRB(10, 0, 10, 0),
|
||||
height: 35,
|
||||
child: TextField(
|
||||
controller: controller,
|
||||
obscureText: isPassword,
|
||||
decoration: InputDecoration(
|
||||
icon: Icon(
|
||||
icon,
|
||||
color: const Color(0xffa6a6a6),
|
||||
),
|
||||
hintText: hintText,
|
||||
hintStyle: const TextStyle(
|
||||
fontSize: 14,
|
||||
color: Color(0xff999999),
|
||||
),
|
||||
contentPadding: EdgeInsets.zero,
|
||||
border: OutlineInputBorder(
|
||||
borderSide: BorderSide.none,
|
||||
borderRadius: BorderRadius.circular(5),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
),
|
||||
if (isCode)
|
||||
InkWell(
|
||||
onTap: () {
|
||||
_loadAuthCode();
|
||||
},
|
||||
child: Container(
|
||||
margin: const EdgeInsets.only(left: 15),
|
||||
width: 100,
|
||||
height: 35,
|
||||
child: Image.memory(base64ToUint8List(authCodeImg)),
|
||||
),
|
||||
)
|
||||
],
|
||||
),
|
||||
],
|
||||
);
|
||||
}
|
||||
|
||||
Uint8List base64ToUint8List(String base64String) {
|
||||
const decoder = Base64Decoder();
|
||||
return decoder.convert(base64String);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user