desc:重置密码 适配 折叠屏

@@ -2,7 +2,7 @@ import ArrayList from '@ohos.util.ArrayList';
 import { Params } from '../../../../../../../commons/wdRouter/oh_modules/wdBean/Index';
 import router from '@ohos.router';
 import { LoginViewModel } from './LoginViewModel';
-import { CustomToast, DateTimeUtils, Logger, SPHelper, ToastUtils } from 'wdKit';
+import { BreakpointSystem, CustomToast, DateTimeUtils, Logger, SPHelper, ToastUtils } from 'wdKit';
 import {
   SpConstants
 } from '../../../../../../../commons/wdNetwork/oh_modules/wdConstant/src/main/ets/constants/SpConstants'
@@ -74,6 +74,17 @@ export struct SettingPasswordPage {
   pageHideResetTime:number = 0;
   pageShowSetTime:number = 0;
   pageHideSetTime:number = 0;
+  @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
+    }
+  }
 
   onPageShow(): void {
     if (this.pageType === 0){//重置密码
@@ -83,6 +94,10 @@ export struct SettingPasswordPage {
     }
   }
 
+  calcHeight(value:number): number{
+    return value * this.percent
+  }
+
   onPageHide(): void {
     if (this.pageType === 0){
       this.pageHideResetTime = DateTimeUtils.getTimeStamp()
@@ -104,7 +119,13 @@ export struct SettingPasswordPage {
     }
   }
 
+  aboutToDisappear(): void {
+    this.breakpointSystem.unregister();
+  }
+
   aboutToAppear() {
+    this.breakpointSystem.register();
+    this.currentChanged()
     let params:SettingPasswordParams =  router.getParams() as SettingPasswordParams;
     this.pageId = parseInt(params.pageID);
     this.getPageListData(this.pageId)
@@ -147,10 +168,43 @@ export struct SettingPasswordPage {
   }
 
   build() {
-    Navigation() {
+    Column(){
+      this.TitleBackComponent('')
       this.settingList() //滑动区域
-    }.titleMode(NavigationTitleMode.Mini)
-    .title('')
+    }
+  }
+
+  @Builder TitleBackComponent(title:string){
+    RelativeContainer() {
+      Text(title)
+        .fontColor('#FF333333')
+        .fontSize(`${this.calcHeight(18)}`)
+        .textAlign(TextAlign.Center)
+        .height(`${this.calcHeight(44)}`)
+        .alignRules({
+          top: { anchor: "__container__", align: VerticalAlign.Top },
+          left: { anchor: "__container__", align: HorizontalAlign.Start },
+          right: { anchor: "__container__", align: HorizontalAlign.End },
+
+        })
+        .id('titleContent')
+      Image($r("app.media.login_back_icon"))
+        .objectFit(ImageFit.Auto)
+        .height(`${this.calcHeight(24)}`)
+        .width(`${this.calcHeight(24)}`)
+        .margin({
+          left: `${this.calcHeight(16)}`, top: `${this.calcHeight(8)}`
+        })
+        .alignRules({
+          top: { anchor: "__container__", align: VerticalAlign.Top },
+          left: { anchor: "__container__", align: HorizontalAlign.Start },
+        })
+        .onClick(() => {
+          router.back()
+        })
+        .id('backImage')
+
+    }.height(`${this.calcHeight(44)}`)
   }
 
   // 页面布局
@@ -176,7 +230,7 @@ export struct SettingPasswordPage {
         })
       }
     }.width('100%')
-    .padding({ left:"31lpx",right:"31lpx",top:"131lpx" })
+    .padding({ left:`${this.calcHeight(31)}lpx`,right:`${this.calcHeight(31)}lpx`,top:`${this.calcHeight(131)}lpx` })
     .height('100%')
   }
 
@@ -185,10 +239,10 @@ export struct SettingPasswordPage {
   // 标题
   @Builder getTitleCell(item: AccoutPageDataModel, alignTitle: HorizontalAlign) {
     Column() {
-      Text(item.compTitle).fontWeight(FontWeight.Bold).fontSize(20).maxLines(1)
+      Text(item.compTitle).fontWeight(FontWeight.Bold).fontSize(`${this.calcHeight(20)}`).maxLines(1)
     }
     .width('100%')
-    .height('75lpx')
+    .height(`${this.calcHeight(75)}lpx`)
     .alignItems(alignTitle)
   }
 
@@ -210,12 +264,12 @@ export struct SettingPasswordPage {
           })
       }
       .alignItems(VerticalAlign.Center)
-      .height('80lpx')
+      .height(`${this.calcHeight(80)}lpx`)
       .backgroundColor('#f5f5f5')
-      .borderRadius('4vp')
+      .borderRadius(`${this.calcHeight(4)}`)
     }
     .width('100%')
-    .height('110lpx')
+    .height(`${this.calcHeight(110)}lpx`)
     .backgroundColor(0xffffff0)
     .alignItems(VerticalAlign.Center)
   }
@@ -235,12 +289,12 @@ export struct SettingPasswordPage {
           })
       }
       .alignItems(VerticalAlign.Center)
-      .height('80lpx')
+      .height(`${this.calcHeight(80)}lpx`)
       .backgroundColor('#f5f5f5')
-      .borderRadius('4vp')
+      .borderRadius(`${this.calcHeight(4)}`)
     }
     .width('100%')
-    .height('110lpx')
+    .height(`${this.calcHeight(110)}lpx`)
     .backgroundColor(0xffffff0)
     .alignItems(VerticalAlign.Center)
   }
@@ -249,7 +303,7 @@ export struct SettingPasswordPage {
   @Builder getCodeCell(item: AccoutPageDataModel) {
     Row() {
       Stack() {
-        Image($r('app.media.get_code_bg')).width('100%').borderRadius('4vp')
+        Image($r('app.media.get_code_bg')).width('100%').borderRadius(`${this.calcHeight(4)}`)
         Row() {
           TextInput({ placeholder: item.inputPlacholder })
             .placeholderColor("#CCCCCC")
@@ -264,10 +318,10 @@ export struct SettingPasswordPage {
             .fontColor('#da3e22')
         }
         .width('100%')
-      }.height('80lpx')
+      }.height(`${this.calcHeight(80)}lpx`)
     }
     .width('100%')
-    .height('110lpx')
+    .height(`${this.calcHeight(110)}lpx`)
     .backgroundColor(0xffffff0)
     .alignItems(VerticalAlign.Center)
   }
@@ -275,7 +329,7 @@ export struct SettingPasswordPage {
   // desc
   @Builder getDescCell(item: AccoutPageDataModel, alignTitle: HorizontalAlign) {
     Column() {
-      Text(item.compDesc).fontSize(12).maxLines(3).fontColor(0x999999).padding({top:'10lpx'})
+      Text(item.compDesc).fontSize(`${this.calcHeight(12)}`).maxLines(3).fontColor(0x999999).padding({top:`${this.calcHeight(10)}lpx`})
         .onClick(()=>{
           if (item.compDesc == '忘记密码') {
             this.showToastTip('密码不符合密码规范')
@@ -283,7 +337,7 @@ export struct SettingPasswordPage {
         })
     }
     .width('100%')
-    .height('85lpx')
+    .height(`${this.calcHeight(85)}lpx`)
     .alignItems(alignTitle)
   }
 
@@ -293,29 +347,29 @@ export struct SettingPasswordPage {
       Text(item.compButtonTitle)
         .layoutWeight(1)
         .fontColor("#FFFFFF")
-        .borderRadius(4)
-        .fontSize(18)
+        .borderRadius(`${this.calcHeight(4)}`)
+        .fontSize(`${this.calcHeight(18)}`)
         .textAlign(TextAlign.Center)
         .fontWeight(FontWeight.Medium)
-        .margin({ top: 26 })
-        .height(44)
+        .margin({ top: `${this.calcHeight(26)}` })
+        .height(`${this.calcHeight(44)}`)
         .backgroundColor("#ED2800")
         .enabled(this.btnStatus ? true : false)
         .opacity(this.btnStatus ? 1: 0.6)
         .onClick(() => {
           this.buttonClick()
         })
-    }.padding({top:'25lpx'})
+    }.padding({top:`${this.calcHeight(25)}lpx`})
     .width('100%')
   }
 
   // 标题
   @Builder getLogoCell(item: AccoutPageDataModel) {
     Column() {
-      Image(item.compLogo).height('150lpx').width('150lpx')
+      Image(item.compLogo).height(`${this.calcHeight(150)}lpx`).width(`${this.calcHeight(150)}lpx`)
     }
     .width('100%')
-    .height('200lpx')
+    .height(`${this.calcHeight(200)}lpx`)
   }
 
   /***************************** 事件处理 ******************************************/