desc：登录忘记密码适配折叠屏

yangchenggong1_wd
Commit 7e1bbeecb5ca32e3e4556cca72f377fcf27111a2 7e1bbeec 1 parent be75499d
Showing 1 changed file with 65 additions and 39 deletions
sight_harmony/features/wdLogin/src/main/ets/pages/login/LoginPage.ets
--- a/sight_harmony/features/wdLogin/src/main/ets/pages/login/LoginPage.ets
View file @7e1bbee
+++ b/sight_harmony/features/wdLogin/src/main/ets/pages/login/LoginPage.ets
View file @7e1bbee
-import { Logger, EmitterEventId, EmitterUtils, DateTimeUtils,CustomToast, StringUtils, NetworkUtil  } from 'wdKit'
+import { Logger, EmitterEventId, EmitterUtils, DateTimeUtils,CustomToast, StringUtils, NetworkUtil,
+  BreakpointSystem  } from 'wdKit'
 import router from '@ohos.router'
 import { LoginViewModel } from './LoginViewModel'
 import { LoginInputComponent } from './LoginInputComponent'
@@ -56,6 +57,17 @@ struct LoginPage {
   loginViewModel = new LoginViewModel()
   @State isProtocol:boolean=false
+  @StorageProp('currentBreakpoint') @Watch("currentChanged")currentBreakpoint: string = 'sm';
+  private breakpointSystem = new BreakpointSystem();
+  @State percent:number = 1
+
+  currentChanged(){
+    if(this.currentBreakpoint == "md" || this.currentBreakpoint == "lg"){
+      this.percent = 0.7
+    }else {
+      this.percent = 1
+    }
+  }
   onCodeSend() {
     Logger.debug(TAG, "isCodeSend:" + this.isCodeSend + "")
     if (this.isCodeSend) {
@@ -66,6 +78,12 @@ struct LoginPage {
   aboutToAppear() {
     Logger.debug(TAG, "aboutToAppear:" + this.isCodeSend + "")
+    this.breakpointSystem.register();
+    this.currentChanged()
+  }
+
+  aboutToDisappear(): void {
+    this.breakpointSystem.unregister();
   }
   onPageShow() {
@@ -144,10 +162,10 @@ struct LoginPage {
             Text("登录")
               .borderRadius(4)
               .fontColor(this.isSubmit ? "#FFFFFFFF" : "#66FFFFFF")
-              .fontSize("31lpx")
+              .fontSize(`${this.calcHeight(31)}lpx`)
               .fontWeight(400)
-              .margin({ top: 20 })
-              .lineHeight("50lpx")
+              .margin({ top: `${this.calcHeight(20)}` })
+              .lineHeight(`${this.calcHeight(50)}lpx`)
 				      .height(44)
               .textAlign(TextAlign.Center)
               .width("100%")
@@ -170,9 +188,9 @@ struct LoginPage {
           if (!this.checkCodePage) {
             Text('忘记密码')
               .fontColor('#666666')
-              .fontSize("31lpx")
+              .fontSize(`${this.calcHeight(31)}lpx`)
               .fontWeight(400)
-              .lineHeight("38lpx")
+              .lineHeight(`${this.calcHeight(38)}lpx`)
               .margin({ top: 16 })
               .onClick(() => {
                 TrackingButton.click("loginPageForgotPassword",TrackConstants.PageName.Login_Page,TrackConstants.PageName.Login_Page)
@@ -217,7 +235,8 @@ struct LoginPage {
       ProtocolComponent({
         cancelMethod: (): void => this.cancelProtocol(),
-        agreeMethod: (): void => this.agreeProtocol()
+        agreeMethod: (): void => this.agreeProtocol(),
+        percent:$percent
       })
         .visibility(this.isProtocol ? Visibility.Visible : Visibility.None)
@@ -301,15 +320,15 @@ struct LoginPage {
       Row() {
         Row() {
           Image(this.checkCodePage ? $r('app.media.login_qt') : $r('app.media.login_other_password'))
-            .size({ width: "35lpx", height: "35lpx" })
-            .margin({right:"8lpx"})
-            .height("38lpx")
-            .width("38lpx")
+            .size({ width: `${this.calcHeight(35)}lpx`, height: `${this.calcHeight(35)}lpx` })
+            .margin({right:`${this.calcHeight(8)}lpx`})
+            .height(`${this.calcHeight(38)}lpx`)
+            .width(`${this.calcHeight(38)}lpx`)
           Text(this.checkCodePage ? "密码登录" : "手机号登录")
             .fontWeight(400)
             .fontColor("#3D3D3D")
-            .fontSize("23lpx")
-            .lineHeight("38lpx")
+            .fontSize(`${this.calcHeight(23)}lpx`)
+            .lineHeight(`${this.calcHeight(38)}lpx`)
         }
         .onClick(() => {
           this.onPageHide()
@@ -332,7 +351,7 @@ struct LoginPage {
       }.height(36)
       .width('100%')
       .padding({ left: 25, right: 25 })
-      .margin({ top: "46lpx" })
+      .margin({ top: `${this.calcHeight(46)}lpx` })
     }
     .width('100%')
     .margin({ bottom: 40 })
@@ -478,7 +497,9 @@ struct LoginPage {
       .slide(SlideEffect.Right)
   }
-
+  calcHeight(value:number): number{
+    return value * this.percent
+  }
 }
@@ -486,41 +507,42 @@ struct LoginPage {
 struct ProtocolComponent {
   cancelMethod?: () => void
   agreeMethod?: () => void
+  @Link percent:number
   build() {
     Stack() {
       Column() {
         Text("温馨提示")
           .fontColor("#222222")
-          .fontSize("35lpx")
-          .lineHeight("50lpx")
+          .fontSize(`${this.calcHeight(35)}lpx`)
+          .lineHeight(`${this.calcHeight(50)}lpx`)
           .width("100%")
           .fontWeight(500)
           .textAlign(TextAlign.Center)
-          .margin({ top: "38lpx" })
+          .margin({ top: `${this.calcHeight(38)}lpx` })
         Text() {
           Span("为保障您的合法权益，请阅读并同意")
-            .fontSize("27lpx")
-            .lineHeight("42lpx")
+            .fontSize(`${this.calcHeight(27)}lpx`)
+            .lineHeight(`${this.calcHeight(42)}lpx`)
             .fontWeight(400)
             .fontColor("#666666")
           Span("《用户协议》")
-            .fontSize("27lpx")
-            .lineHeight("42lpx")
+            .fontSize(`${this.calcHeight(27)}lpx`)
+            .lineHeight(`${this.calcHeight(42)}lpx`)
             .fontWeight(400)
             .fontColor("#ED2800")
             .onClick(() => {
             let bean = { contentID: "1", pageID: "" } as Params
             WDRouterRule.jumpWithPage(WDRouterPage.loginProtocolPage, bean)
           })
-          Span("及").fontSize("27lpx")
-            .lineHeight("42lpx")
+          Span("及").fontSize(`${this.calcHeight(27)}lpx`)
+            .lineHeight(`${this.calcHeight(42)}lpx`)
             .fontWeight(400)
             .fontColor("#666666")
           Span("《隐私政策》")
-            .fontSize("27lpx")
-            .lineHeight("42lpx")
+            .fontSize(`${this.calcHeight(27)}lpx`)
+            .lineHeight(`${this.calcHeight(42)}lpx`)
             .fontWeight(400)
             .fontColor("#ED2800")
             .onClick(() => {
@@ -528,20 +550,20 @@ struct ProtocolComponent {
             WDRouterRule.jumpWithPage(WDRouterPage.loginProtocolPage, bean)
           })
           Span("后进行登录")
-            .fontSize("27lpx")
-            .lineHeight("42lpx")
+            .fontSize(`${this.calcHeight(27)}lpx`)
+            .lineHeight(`${this.calcHeight(42)}lpx`)
             .fontWeight(400)
             .fontColor("#666666")
-        }.margin({ top: "23lpx", left: "31lpx", right: "31lpx" })
+        }.margin({ top: `${this.calcHeight(23)}lpx`, left: `${this.calcHeight(31)}lpx`, right: `${this.calcHeight(31)}lpx` })
         .wordBreak(WordBreak.BREAK_ALL)
         .textAlign(TextAlign.Start)
-        Divider().color("#f5f5f5").width("100%").margin({ top: "27lpx" }).height('1lpx').strokeWidth('1lpx')
+        Divider().color("#f5f5f5").width("100%").margin({ top: `${this.calcHeight(27)}lpx` }).height(`${this.calcHeight(1)}lpx`).strokeWidth(`${this.calcHeight(1)}lpx`)
         Row() {
           Text('放弃登录')
-            .fontSize("31lpx")
+            .fontSize(`${this.calcHeight(31)}lpx`)
             .fontWeight(500)
-            .lineHeight("42lpx")
+            .lineHeight(`${this.calcHeight(42)}lpx`)
             .fontColor("#999999")
             .layoutWeight(1)
             .textAlign(TextAlign.Center)
@@ -553,17 +575,17 @@ struct ProtocolComponent {
             .height('100%')
           Divider()
-            .width("1lpx")
-            .strokeWidth('1lpx')
+            .width(`${this.calcHeight(1)}lpx`)
+            .strokeWidth(`${this.calcHeight(1)}lpx`)
             .vertical(true)
             .height('100%')
             .color("#F5F5F5")
           Text('同意并登录')
-            .fontSize("31lpx")
+            .fontSize(`${this.calcHeight(31)}lpx`)
             .fontWeight(500)
-            .lineHeight("42lpx")
+            .lineHeight(`${this.calcHeight(42)}lpx`)
             .fontColor("#ED2800")
             .layoutWeight(1)
             .textAlign(TextAlign.Center)
@@ -582,15 +604,19 @@ struct ProtocolComponent {
         .justifyContent(FlexAlign.Center)
       }
       .backgroundColor(Color.White)
-      .borderRadius("12lpx")
-      .width("528lpx")
-      .height("309lpx")
+      .borderRadius(`${this.calcHeight(12)}lpx`)
+      .width(`${this.calcHeight(528)}lpx`)
+      .height(`${this.calcHeight(309)}lpx`)
     }.width('100%')
     .height('100%')
     .backgroundColor('#66000000')
   }
+
+  calcHeight(value:number): number{
+    return value * this.percent
+  }
 }
 function trackTypeClick(typeValue: number,pageId: string){