shishuangxi

优化登录界面

... ... @@ -35,15 +35,17 @@ struct ForgetPasswordPage {
isCodeSend: $isCodeSend
})
Row() {
Button("确认", { type: ButtonType.Normal })
Text("确认")
.layoutWeight(1)
.fontColor(this.isSubmit ?"#FFFFFFFF":"#66FFFFFF")
.borderRadius(4)
.fontSize(16)
.fontSize(18)
.textAlign(TextAlign.Center)
.fontWeight(FontWeight.Medium)
.margin({ top: 26 })
.height(44)
.backgroundColor("#ED2800")
.opacity(this.isSubmit ? 1 : 0.6)
.backgroundColor(this.isSubmit ?"#ED2800":"#99ED2800")
.enabled(this.isSubmit ? true : false)
.onClick(() => {
this.checkVerifyCode()
... ...
... ... @@ -21,6 +21,7 @@ export struct LoginInputComponent {
TextInput({ placeholder: "请输入手机号" })
.fontSize(16)
.height(48)
.maxLength(11)
.margin({ top: 36 })
.backgroundColor("#F5F5F5")
.borderRadius(4)
... ... @@ -44,22 +45,19 @@ export struct LoginInputComponent {
.fontColor("#222222")
.backgroundColor("#00000000")
.borderRadius({ topLeft: 4, bottomLeft: 4 })
.backgroundImage($r('app.media.login_code_bg_one'), ImageRepeat.NoRepeat)
.backgroundImageSize(ImageSize.Contain)
// .backgroundImage($r('app.media.login_code_bg_one'), ImageRepeat.NoRepeat)
// .backgroundImageSize(ImageSize.Contain)
.onChange((value) => {
this.codeContent = value
this.isSubmit = (this.phoneContent.length >= 11 && this.codeContent.length >= 6)
})
Text(this.isCodeSend ? this.timeCount + "s" : this.isFirst?"发送验证码":'重新发送')
.backgroundImage($r('app.media.login_code_bg'), ImageRepeat.NoRepeat)
.backgroundImageSize(ImageSize.Cover)
.fontColor('#ED2800')
.fontColor(this.codeBtnState?'#ED2800':'#80ED2800')
.width(110)
.fontSize(14)
.fontWeight(this.codeBtnState ? FontWeight.Bold : FontWeight.Normal)
.fontWeight( FontWeight.Bold)
.height(48)
.enabled(this.codeBtnState)// .align(Alignment.End)
.textAlign(TextAlign.Center)
.onClick(() => {
if (this.phoneContent.length < 11) {
... ... @@ -80,7 +78,12 @@ export struct LoginInputComponent {
})
}.margin({ top: 12 }).height(48).alignItems(VerticalAlign.Center).justifyContent(FlexAlign.Start)
}.margin({ top: 12 })
.height(48)
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Start)
.backgroundImage($r('app.media.code_login_bg'))
.backgroundImageSize({width:'100%',height:48})
}
}
\ No newline at end of file
... ...
... ... @@ -24,7 +24,6 @@ function isEmpty(obj: undefined | string | null): boolean {
const TAG = "LoginPage"
@Preview
@Entry
@Component
struct LoginPage {
... ... @@ -106,32 +105,32 @@ struct LoginPage {
Text() {
Span("我已阅读并同意").fontColor("#999999").fontSize(12)
Span("《用户协议》").fontColor("#ED2800").fontSize(12).onClick(() => {
//todo 协议
let bean={contentId:"1",pageID:""} as Params
WDRouterRule.jumpWithPage(WDRouterPage.loginProtocolPage,bean)
})
Span("及").fontColor("#999999").fontSize(12)
Span("《隐私政策》").fontColor("#ED2800").fontSize(12).onClick(() => {
//todo 协议
let bean={contentId:"2",pageID:""} as Params
WDRouterRule.jumpWithPage(WDRouterPage.loginProtocolPage,bean)
})
}
}.margin({ top: 28 }).alignItems(VerticalAlign.Center)
}.margin({ top: 48 }).alignItems(VerticalAlign.Center)
Row() {
Button("登录", { type: ButtonType.Normal })
Text("登录")
.borderRadius(4)
.fontSize(20)
.fontColor(this.isSubmit ?"#FFFFFFFF":"#66FFFFFF")
.fontSize(18)
.fontWeight(FontWeight.Medium)
.margin({ top: 20 })
.height(44)
.opacity(this.isSubmit ? 1 : 0.6)
.enabled(this.isSubmit ? true : false)
.textAlign(TextAlign.Center)
.width("100%")
.backgroundColor("#ED2800")
.backgroundColor(this.isSubmit?"#FFED2800":"#99ED2800")
.onClick(() => {
//todo 登录
if(!this.isSubmit){
return
}
this.loginSubmit()
})
... ... @@ -181,6 +180,7 @@ struct LoginPage {
Column() {
TextInput({ placeholder: "请输入账号", controller: this.phoneController })
.fontSize(16)
.maxLength(11)
.height(48)
.backgroundColor("#F5F5F5")
.borderRadius(4)
... ... @@ -327,7 +327,6 @@ struct LoginPage {
//登录
loginSubmit() {
Logger.debug(TAG, "loginSubmit " + this.checkCodePage)
//todo 判断是验证码登录还是密码登录
if (this.checkCodePage) {
if (isEmpty(this.phoneContent)) {
Logger.debug(TAG, "手机号为空")
... ...