shishuangxi

优化登录界面

@@ -35,15 +35,17 @@ struct ForgetPasswordPage { @@ -35,15 +35,17 @@ struct ForgetPasswordPage {
35 isCodeSend: $isCodeSend 35 isCodeSend: $isCodeSend
36 }) 36 })
37 Row() { 37 Row() {
38 - Button("确认", { type: ButtonType.Normal }) 38 + Text("确认")
39 .layoutWeight(1) 39 .layoutWeight(1)
  40 + .fontColor(this.isSubmit ?"#FFFFFFFF":"#66FFFFFF")
40 .borderRadius(4) 41 .borderRadius(4)
41 - .fontSize(16) 42 + .fontSize(18)
  43 + .textAlign(TextAlign.Center)
42 .fontWeight(FontWeight.Medium) 44 .fontWeight(FontWeight.Medium)
43 .margin({ top: 26 }) 45 .margin({ top: 26 })
44 .height(44) 46 .height(44)
45 - .backgroundColor("#ED2800")  
46 - .opacity(this.isSubmit ? 1 : 0.6) 47 + .backgroundColor(this.isSubmit ?"#ED2800":"#99ED2800")
  48 + .enabled(this.isSubmit ? true : false)
47 .onClick(() => { 49 .onClick(() => {
48 this.checkVerifyCode() 50 this.checkVerifyCode()
49 51
@@ -21,6 +21,7 @@ export struct LoginInputComponent { @@ -21,6 +21,7 @@ export struct LoginInputComponent {
21 TextInput({ placeholder: "请输入手机号" }) 21 TextInput({ placeholder: "请输入手机号" })
22 .fontSize(16) 22 .fontSize(16)
23 .height(48) 23 .height(48)
  24 + .maxLength(11)
24 .margin({ top: 36 }) 25 .margin({ top: 36 })
25 .backgroundColor("#F5F5F5") 26 .backgroundColor("#F5F5F5")
26 .borderRadius(4) 27 .borderRadius(4)
@@ -44,22 +45,19 @@ export struct LoginInputComponent { @@ -44,22 +45,19 @@ export struct LoginInputComponent {
44 .fontColor("#222222") 45 .fontColor("#222222")
45 .backgroundColor("#00000000") 46 .backgroundColor("#00000000")
46 .borderRadius({ topLeft: 4, bottomLeft: 4 }) 47 .borderRadius({ topLeft: 4, bottomLeft: 4 })
47 - .backgroundImage($r('app.media.login_code_bg_one'), ImageRepeat.NoRepeat)  
48 - .backgroundImageSize(ImageSize.Contain) 48 + // .backgroundImage($r('app.media.login_code_bg_one'), ImageRepeat.NoRepeat)
  49 + // .backgroundImageSize(ImageSize.Contain)
49 .onChange((value) => { 50 .onChange((value) => {
50 this.codeContent = value 51 this.codeContent = value
51 this.isSubmit = (this.phoneContent.length >= 11 && this.codeContent.length >= 6) 52 this.isSubmit = (this.phoneContent.length >= 11 && this.codeContent.length >= 6)
52 }) 53 })
53 54
54 Text(this.isCodeSend ? this.timeCount + "s" : this.isFirst?"发送验证码":'重新发送') 55 Text(this.isCodeSend ? this.timeCount + "s" : this.isFirst?"发送验证码":'重新发送')
55 - .backgroundImage($r('app.media.login_code_bg'), ImageRepeat.NoRepeat)  
56 - .backgroundImageSize(ImageSize.Cover)  
57 - .fontColor('#ED2800') 56 + .fontColor(this.codeBtnState?'#ED2800':'#80ED2800')
58 .width(110) 57 .width(110)
59 .fontSize(14) 58 .fontSize(14)
60 - .fontWeight(this.codeBtnState ? FontWeight.Bold : FontWeight.Normal) 59 + .fontWeight( FontWeight.Bold)
61 .height(48) 60 .height(48)
62 - .enabled(this.codeBtnState)// .align(Alignment.End)  
63 .textAlign(TextAlign.Center) 61 .textAlign(TextAlign.Center)
64 .onClick(() => { 62 .onClick(() => {
65 if (this.phoneContent.length < 11) { 63 if (this.phoneContent.length < 11) {
@@ -80,7 +78,12 @@ export struct LoginInputComponent { @@ -80,7 +78,12 @@ export struct LoginInputComponent {
80 }) 78 })
81 79
82 80
83 - }.margin({ top: 12 }).height(48).alignItems(VerticalAlign.Center).justifyContent(FlexAlign.Start) 81 + }.margin({ top: 12 })
  82 + .height(48)
  83 + .alignItems(VerticalAlign.Center)
  84 + .justifyContent(FlexAlign.Start)
  85 + .backgroundImage($r('app.media.code_login_bg'))
  86 + .backgroundImageSize({width:'100%',height:48})
84 87
85 } 88 }
86 } 89 }
@@ -24,7 +24,6 @@ function isEmpty(obj: undefined | string | null): boolean { @@ -24,7 +24,6 @@ function isEmpty(obj: undefined | string | null): boolean {
24 24
25 const TAG = "LoginPage" 25 const TAG = "LoginPage"
26 26
27 -@Preview  
28 @Entry 27 @Entry
29 @Component 28 @Component
30 struct LoginPage { 29 struct LoginPage {
@@ -106,32 +105,32 @@ struct LoginPage { @@ -106,32 +105,32 @@ struct LoginPage {
106 Text() { 105 Text() {
107 Span("我已阅读并同意").fontColor("#999999").fontSize(12) 106 Span("我已阅读并同意").fontColor("#999999").fontSize(12)
108 Span("《用户协议》").fontColor("#ED2800").fontSize(12).onClick(() => { 107 Span("《用户协议》").fontColor("#ED2800").fontSize(12).onClick(() => {
109 - //todo 协议  
110 let bean={contentId:"1",pageID:""} as Params 108 let bean={contentId:"1",pageID:""} as Params
111 WDRouterRule.jumpWithPage(WDRouterPage.loginProtocolPage,bean) 109 WDRouterRule.jumpWithPage(WDRouterPage.loginProtocolPage,bean)
112 }) 110 })
113 Span("及").fontColor("#999999").fontSize(12) 111 Span("及").fontColor("#999999").fontSize(12)
114 Span("《隐私政策》").fontColor("#ED2800").fontSize(12).onClick(() => { 112 Span("《隐私政策》").fontColor("#ED2800").fontSize(12).onClick(() => {
115 - //todo 协议  
116 let bean={contentId:"2",pageID:""} as Params 113 let bean={contentId:"2",pageID:""} as Params
117 WDRouterRule.jumpWithPage(WDRouterPage.loginProtocolPage,bean) 114 WDRouterRule.jumpWithPage(WDRouterPage.loginProtocolPage,bean)
118 }) 115 })
119 } 116 }
120 - }.margin({ top: 28 }).alignItems(VerticalAlign.Center) 117 + }.margin({ top: 48 }).alignItems(VerticalAlign.Center)
121 118
122 Row() { 119 Row() {
123 - Button("登录", { type: ButtonType.Normal }) 120 + Text("登录")
124 .borderRadius(4) 121 .borderRadius(4)
125 - .fontSize(20) 122 + .fontColor(this.isSubmit ?"#FFFFFFFF":"#66FFFFFF")
  123 + .fontSize(18)
126 .fontWeight(FontWeight.Medium) 124 .fontWeight(FontWeight.Medium)
127 .margin({ top: 20 }) 125 .margin({ top: 20 })
128 .height(44) 126 .height(44)
129 - .opacity(this.isSubmit ? 1 : 0.6)  
130 - .enabled(this.isSubmit ? true : false) 127 + .textAlign(TextAlign.Center)
131 .width("100%") 128 .width("100%")
132 - .backgroundColor("#ED2800") 129 + .backgroundColor(this.isSubmit?"#FFED2800":"#99ED2800")
133 .onClick(() => { 130 .onClick(() => {
134 - //todo 登录 131 + if(!this.isSubmit){
  132 + return
  133 + }
135 this.loginSubmit() 134 this.loginSubmit()
136 135
137 }) 136 })
@@ -181,6 +180,7 @@ struct LoginPage { @@ -181,6 +180,7 @@ struct LoginPage {
181 Column() { 180 Column() {
182 TextInput({ placeholder: "请输入账号", controller: this.phoneController }) 181 TextInput({ placeholder: "请输入账号", controller: this.phoneController })
183 .fontSize(16) 182 .fontSize(16)
  183 + .maxLength(11)
184 .height(48) 184 .height(48)
185 .backgroundColor("#F5F5F5") 185 .backgroundColor("#F5F5F5")
186 .borderRadius(4) 186 .borderRadius(4)
@@ -327,7 +327,6 @@ struct LoginPage { @@ -327,7 +327,6 @@ struct LoginPage {
327 //登录 327 //登录
328 loginSubmit() { 328 loginSubmit() {
329 Logger.debug(TAG, "loginSubmit " + this.checkCodePage) 329 Logger.debug(TAG, "loginSubmit " + this.checkCodePage)
330 - //todo 判断是验证码登录还是密码登录  
331 if (this.checkCodePage) { 330 if (this.checkCodePage) {
332 if (isEmpty(this.phoneContent)) { 331 if (isEmpty(this.phoneContent)) {
333 Logger.debug(TAG, "手机号为空") 332 Logger.debug(TAG, "手机号为空")