|
@@ -0,0 +1,156 @@
|
|
|
+package com.ys.bdtp.adm.mvvm.ui.login
|
|
|
+
|
|
|
+import androidx.compose.foundation.background
|
|
|
+import androidx.compose.foundation.layout.Column
|
|
|
+import androidx.compose.foundation.layout.Spacer
|
|
|
+import androidx.compose.foundation.layout.fillMaxWidth
|
|
|
+import androidx.compose.foundation.layout.height
|
|
|
+import androidx.compose.foundation.layout.padding
|
|
|
+import androidx.compose.foundation.layout.size
|
|
|
+import androidx.compose.foundation.layout.width
|
|
|
+import androidx.compose.foundation.shape.RoundedCornerShape
|
|
|
+import androidx.compose.material.Button
|
|
|
+import androidx.compose.material.ButtonDefaults
|
|
|
+import androidx.compose.material.Icon
|
|
|
+import androidx.compose.material.IconButton
|
|
|
+import androidx.compose.material.OutlinedTextField
|
|
|
+import androidx.compose.material.Text
|
|
|
+import androidx.compose.material.TextFieldDefaults
|
|
|
+import androidx.compose.runtime.Composable
|
|
|
+import androidx.compose.runtime.getValue
|
|
|
+import androidx.compose.runtime.mutableStateOf
|
|
|
+import androidx.compose.runtime.remember
|
|
|
+import androidx.compose.runtime.setValue
|
|
|
+import androidx.compose.ui.Modifier
|
|
|
+import androidx.compose.ui.graphics.Color
|
|
|
+import androidx.compose.ui.res.painterResource
|
|
|
+import androidx.compose.ui.text.input.PasswordVisualTransformation
|
|
|
+import androidx.compose.ui.text.input.VisualTransformation
|
|
|
+import androidx.compose.ui.tooling.preview.Preview
|
|
|
+import androidx.compose.ui.unit.dp
|
|
|
+import androidx.compose.ui.unit.sp
|
|
|
+import com.ys.bdtp.adm.R
|
|
|
+import com.ys.bdtp.adm.mvvm.vm.login.LoginViewModel
|
|
|
+import org.kodein.di.compose.rememberViewModel
|
|
|
+
|
|
|
+@Composable
|
|
|
+fun LoginScreen() {
|
|
|
+ val vm by rememberViewModel<LoginViewModel>()
|
|
|
+
|
|
|
+ var isShowPassword by remember { mutableStateOf(false) }
|
|
|
+ var isLoginBtnEnable by remember { mutableStateOf(false) }
|
|
|
+
|
|
|
+ var account by remember { mutableStateOf("") }
|
|
|
+ var password by remember { mutableStateOf("") }
|
|
|
+
|
|
|
+ var visualState: VisualTransformation by remember { mutableStateOf(PasswordVisualTransformation()) }
|
|
|
+
|
|
|
+
|
|
|
+ Column(
|
|
|
+ modifier = Modifier
|
|
|
+ .width(404.dp)
|
|
|
+ .height(444.dp)
|
|
|
+ .background(Color.White)
|
|
|
+ .padding(start = 32.dp, top = 48.dp, end = 32.dp, bottom = 56.dp)
|
|
|
+ ) {
|
|
|
+ Text(text = "账号登录", fontSize = 28.sp)
|
|
|
+ Spacer(modifier = Modifier.height(10.dp))
|
|
|
+ Text(text = "你好,欢迎来到工单系统", color = Color(0xFF8D9399), fontSize = 12.sp)
|
|
|
+ Spacer(modifier = Modifier.height(36.dp))
|
|
|
+
|
|
|
+ // 账号文本框
|
|
|
+ OutlinedTextField(
|
|
|
+ value = account,
|
|
|
+ modifier = Modifier.fillMaxWidth(),
|
|
|
+ onValueChange = {
|
|
|
+ account = it
|
|
|
+ isLoginBtnEnable = account.isNotEmpty() && password.isNotEmpty()
|
|
|
+ },
|
|
|
+ label = {
|
|
|
+ Text(text = "请输入账号", color = Color(0xFFC3C7CB))
|
|
|
+ },
|
|
|
+ colors = TextFieldDefaults.outlinedTextFieldColors(
|
|
|
+ textColor = Color(0xFF1F2529),
|
|
|
+ cursorColor = Color(0xFF0091FF),
|
|
|
+ focusedBorderColor = Color(0xFF0091FF),
|
|
|
+ focusedLabelColor = Color(0xFF0091FF),
|
|
|
+ backgroundColor = Color.Transparent
|
|
|
+ ),
|
|
|
+ trailingIcon = {
|
|
|
+ IconButton(
|
|
|
+ onClick = { account = "" },
|
|
|
+ enabled = account.isNotEmpty()
|
|
|
+ ) {
|
|
|
+ if (account.isNotBlank())
|
|
|
+ Icon(
|
|
|
+ painter = painterResource(R.drawable.icon_trailing_del),
|
|
|
+ contentDescription = "",
|
|
|
+ modifier = Modifier.size(16.dp),
|
|
|
+ tint = Color(0xFFC3C6CB)
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+
|
|
|
+ Spacer(modifier = Modifier.height(16.dp))
|
|
|
+
|
|
|
+ // 密码文本框
|
|
|
+ OutlinedTextField(
|
|
|
+ value = password,
|
|
|
+ modifier = Modifier.fillMaxWidth(),
|
|
|
+ onValueChange = {
|
|
|
+ password = it
|
|
|
+ isLoginBtnEnable = account.isNotEmpty() && password.isNotEmpty()
|
|
|
+ }, label = {
|
|
|
+ Text(text = "请输入密码", color = Color(0xFFC3C7CB))
|
|
|
+ },
|
|
|
+ colors = TextFieldDefaults.outlinedTextFieldColors(
|
|
|
+ textColor = Color(0xFF1F2529),
|
|
|
+ cursorColor = Color(0xFF0091FF),
|
|
|
+ focusedBorderColor = Color(0xFF0091FF),
|
|
|
+ focusedLabelColor = Color(0xFF0091FF),
|
|
|
+ backgroundColor = Color.Transparent
|
|
|
+ ),
|
|
|
+ visualTransformation = visualState,
|
|
|
+ trailingIcon = {
|
|
|
+ IconButton(onClick = { isShowPassword = !isShowPassword }) {
|
|
|
+ val icon =
|
|
|
+ if (isShowPassword) R.drawable.icon_trailing_pwd_show else R.drawable.icon_trailing_pwd_hide
|
|
|
+ visualState =
|
|
|
+ if (isShowPassword) VisualTransformation.None else PasswordVisualTransformation()
|
|
|
+ val description = if (isShowPassword) "Show password" else "Hide password"
|
|
|
+ Icon(
|
|
|
+ painter = painterResource(icon),
|
|
|
+ contentDescription = description,
|
|
|
+ modifier = Modifier.size(16.dp),
|
|
|
+ tint = Color(0xFFC3C6CB)
|
|
|
+ )
|
|
|
+ }
|
|
|
+ }
|
|
|
+ )
|
|
|
+
|
|
|
+ Spacer(modifier = Modifier.height(48.dp))
|
|
|
+
|
|
|
+ Button(
|
|
|
+ onClick = {
|
|
|
+ // TODO
|
|
|
+ // 处理完后清空数据
|
|
|
+ isLoginBtnEnable = account.isNotEmpty() && password.isNotEmpty()
|
|
|
+ },
|
|
|
+ enabled = isLoginBtnEnable,
|
|
|
+ modifier = Modifier.fillMaxWidth().height(50.dp),
|
|
|
+ shape = RoundedCornerShape(50),
|
|
|
+ colors = ButtonDefaults.buttonColors(
|
|
|
+ backgroundColor = Color(0xFF0091FF)
|
|
|
+ )
|
|
|
+ ) {
|
|
|
+ Text(text = "登录", color = Color(0XFFFFFFFF), fontSize = 16.sp)
|
|
|
+ }
|
|
|
+ }
|
|
|
+}
|
|
|
+
|
|
|
+@Preview
|
|
|
+@Composable
|
|
|
+fun PreviewLoginScreen() {
|
|
|
+ LoginScreen()
|
|
|
+}
|