Showing
1 changed file
with
79 additions
and
28 deletions
| 1 | -import { CustomToast, DateTimeUtils} from 'wdKit/Index'; | 1 | +import { BreakpointSystem, CustomToast, DateTimeUtils} from 'wdKit/Index'; |
| 2 | import { WDRouterPage, WDRouterRule } from 'wdRouter/Index'; | 2 | import { WDRouterPage, WDRouterRule } from 'wdRouter/Index'; |
| 3 | import { LoginModel } from './LoginModel'; | 3 | import { LoginModel } from './LoginModel'; |
| 4 | import { ModifyPasswordRequestItem } from './ModifyPasswordRequestItem'; | 4 | import { ModifyPasswordRequestItem } from './ModifyPasswordRequestItem'; |
| @@ -29,6 +29,27 @@ struct ModifyPasswordPage { | @@ -29,6 +29,27 @@ struct ModifyPasswordPage { | ||
| 29 | }) | 29 | }) |
| 30 | pageShowTime:number = 0; | 30 | pageShowTime:number = 0; |
| 31 | pageHideTime:number = 0; | 31 | pageHideTime:number = 0; |
| 32 | + @StorageProp('currentBreakpoint') @Watch("currentChanged")currentBreakpoint: string = 'sm'; | ||
| 33 | + private breakpointSystem = new BreakpointSystem(); | ||
| 34 | + @State percent:number = 1 | ||
| 35 | + | ||
| 36 | + currentChanged(){ | ||
| 37 | + if(this.currentBreakpoint == "md" || this.currentBreakpoint == "lg"){ | ||
| 38 | + this.percent = 0.7 | ||
| 39 | + }else { | ||
| 40 | + this.percent = 1 | ||
| 41 | + } | ||
| 42 | + } | ||
| 43 | + | ||
| 44 | + aboutToAppear() { | ||
| 45 | + this.breakpointSystem.register(); | ||
| 46 | + this.currentChanged() | ||
| 47 | + } | ||
| 48 | + | ||
| 49 | + aboutToDisappear(): void { | ||
| 50 | + this.breakpointSystem.unregister(); | ||
| 51 | + } | ||
| 52 | + | ||
| 32 | 53 | ||
| 33 | onPageShow() { | 54 | onPageShow() { |
| 34 | this.pageShowTime = DateTimeUtils.getTimeStamp() | 55 | this.pageShowTime = DateTimeUtils.getTimeStamp() |
| @@ -42,25 +63,54 @@ struct ModifyPasswordPage { | @@ -42,25 +63,54 @@ struct ModifyPasswordPage { | ||
| 42 | } | 63 | } |
| 43 | 64 | ||
| 44 | build() { | 65 | build() { |
| 45 | - Row() { | ||
| 46 | - Column() { | 66 | + Column(){ |
| 67 | + this.TitleBackComponent('') | ||
| 47 | this.ModifyPasswordLayout() | 68 | this.ModifyPasswordLayout() |
| 48 | } | 69 | } |
| 49 | - .width('100%') | ||
| 50 | - .height('100%') | ||
| 51 | - }.width('100%') | ||
| 52 | - .height('100%') | 70 | + |
| 71 | + } | ||
| 72 | + | ||
| 73 | + @Builder TitleBackComponent(title:string){ | ||
| 74 | + RelativeContainer() { | ||
| 75 | + Text(title) | ||
| 76 | + .fontColor('#FF333333') | ||
| 77 | + .fontSize(18) | ||
| 78 | + .textAlign(TextAlign.Center) | ||
| 79 | + .height(44) | ||
| 80 | + .alignRules({ | ||
| 81 | + top: { anchor: "__container__", align: VerticalAlign.Top }, | ||
| 82 | + left: { anchor: "__container__", align: HorizontalAlign.Start }, | ||
| 83 | + right: { anchor: "__container__", align: HorizontalAlign.End }, | ||
| 84 | + | ||
| 85 | + }) | ||
| 86 | + .id('titleContent') | ||
| 87 | + Image($r("app.media.login_back_icon")) | ||
| 88 | + .objectFit(ImageFit.Auto) | ||
| 89 | + .height(24) | ||
| 90 | + .width(24) | ||
| 91 | + .margin({ | ||
| 92 | + left: 16, top: 8 | ||
| 93 | + }) | ||
| 94 | + .alignRules({ | ||
| 95 | + top: { anchor: "__container__", align: VerticalAlign.Top }, | ||
| 96 | + left: { anchor: "__container__", align: HorizontalAlign.Start }, | ||
| 97 | + }) | ||
| 98 | + .onClick(() => { | ||
| 99 | + router.back() | ||
| 100 | + }) | ||
| 101 | + .id('backImage') | ||
| 102 | + | ||
| 103 | + }.height(44) | ||
| 53 | } | 104 | } |
| 54 | 105 | ||
| 55 | 106 | ||
| 56 | @Builder ModifyPasswordLayout(){ | 107 | @Builder ModifyPasswordLayout(){ |
| 57 | - Navigation() { | ||
| 58 | Column(){ | 108 | Column(){ |
| 59 | Column() { | 109 | Column() { |
| 60 | Text("修改密码").fontWeight(FontWeight.Bold).fontSize(20).maxLines(1) | 110 | Text("修改密码").fontWeight(FontWeight.Bold).fontSize(20).maxLines(1) |
| 61 | } | 111 | } |
| 62 | .width('100%') | 112 | .width('100%') |
| 63 | - .height('75lpx') | 113 | + .height(`${this.calcHeight(75)}lpx`) |
| 64 | .alignItems(HorizontalAlign.Start) | 114 | .alignItems(HorizontalAlign.Start) |
| 65 | 115 | ||
| 66 | Row() { | 116 | Row() { |
| @@ -77,12 +127,12 @@ struct ModifyPasswordPage { | @@ -77,12 +127,12 @@ struct ModifyPasswordPage { | ||
| 77 | }) | 127 | }) |
| 78 | } | 128 | } |
| 79 | .alignItems(VerticalAlign.Center) | 129 | .alignItems(VerticalAlign.Center) |
| 80 | - .height('80lpx') | 130 | + .height(`${this.calcHeight(80)}lpx`) |
| 81 | .backgroundColor('#f5f5f5') | 131 | .backgroundColor('#f5f5f5') |
| 82 | .borderRadius('4vp') | 132 | .borderRadius('4vp') |
| 83 | } | 133 | } |
| 84 | .width('100%') | 134 | .width('100%') |
| 85 | - .height('110lpx') | 135 | + .height(`${this.calcHeight(110)}lpx`) |
| 86 | .backgroundColor(0xffffff0) | 136 | .backgroundColor(0xffffff0) |
| 87 | .alignItems(VerticalAlign.Center) | 137 | .alignItems(VerticalAlign.Center) |
| 88 | 138 | ||
| @@ -100,12 +150,12 @@ struct ModifyPasswordPage { | @@ -100,12 +150,12 @@ struct ModifyPasswordPage { | ||
| 100 | }) | 150 | }) |
| 101 | } | 151 | } |
| 102 | .alignItems(VerticalAlign.Center) | 152 | .alignItems(VerticalAlign.Center) |
| 103 | - .height('80lpx') | 153 | + .height(`${this.calcHeight(80)}lpx`) |
| 104 | .backgroundColor('#f5f5f5') | 154 | .backgroundColor('#f5f5f5') |
| 105 | .borderRadius('4vp') | 155 | .borderRadius('4vp') |
| 106 | } | 156 | } |
| 107 | .width('100%') | 157 | .width('100%') |
| 108 | - .height('110lpx') | 158 | + .height(`${this.calcHeight(110)}lpx`) |
| 109 | .backgroundColor(0xffffff0) | 159 | .backgroundColor(0xffffff0) |
| 110 | .alignItems(VerticalAlign.Center) | 160 | .alignItems(VerticalAlign.Center) |
| 111 | 161 | ||
| @@ -123,32 +173,32 @@ struct ModifyPasswordPage { | @@ -123,32 +173,32 @@ struct ModifyPasswordPage { | ||
| 123 | }) | 173 | }) |
| 124 | } | 174 | } |
| 125 | .alignItems(VerticalAlign.Center) | 175 | .alignItems(VerticalAlign.Center) |
| 126 | - .height('80lpx') | 176 | + .height(`${this.calcHeight(80)}lpx`) |
| 127 | .backgroundColor('#f5f5f5') | 177 | .backgroundColor('#f5f5f5') |
| 128 | .borderRadius('4vp') | 178 | .borderRadius('4vp') |
| 129 | } | 179 | } |
| 130 | .width('100%') | 180 | .width('100%') |
| 131 | - .height('110lpx') | 181 | + .height(`${this.calcHeight(110)}lpx`) |
| 132 | .backgroundColor(0xffffff0) | 182 | .backgroundColor(0xffffff0) |
| 133 | .alignItems(VerticalAlign.Center) | 183 | .alignItems(VerticalAlign.Center) |
| 134 | 184 | ||
| 135 | Column() { | 185 | Column() { |
| 136 | - Text("提示:密码长度6~20位,使用大写字母、小写字母、数字、特殊字符中三种或三种以上").fontSize(12).maxLines(3).fontColor(0x999999).padding({top:'10lpx'}) | 186 | + Text("提示:密码长度6~20位,使用大写字母、小写字母、数字、特殊字符中三种或三种以上").fontSize(12).maxLines(3).fontColor(0x999999).padding({top:`${this.calcHeight(10)}lpx`}) |
| 137 | } | 187 | } |
| 138 | .width('100%') | 188 | .width('100%') |
| 139 | - .height('85lpx') | 189 | + .height(`${this.calcHeight(85)}lpx`) |
| 140 | .alignItems(HorizontalAlign.Start) | 190 | .alignItems(HorizontalAlign.Start) |
| 141 | 191 | ||
| 142 | Row() { | 192 | Row() { |
| 143 | Button( { type: ButtonType.Normal, stateEffect: true }){ | 193 | Button( { type: ButtonType.Normal, stateEffect: true }){ |
| 144 | Text("确认") | 194 | Text("确认") |
| 145 | .fontColor("#fff") | 195 | .fontColor("#fff") |
| 146 | - .fontSize("35lpx") | ||
| 147 | - .lineHeight("50lpx") | 196 | + .fontSize(`${this.calcHeight(35)}lpx`) |
| 197 | + .lineHeight(`${this.calcHeight(50)}lpx`) | ||
| 148 | .opacity(this.btnStatus ?1:0.5) | 198 | .opacity(this.btnStatus ?1:0.5) |
| 149 | } | 199 | } |
| 150 | .width('100%') | 200 | .width('100%') |
| 151 | - .height('80lpx') | 201 | + .height(`${this.calcHeight(80)}lpx`) |
| 152 | .backgroundColor(this.btnStatus ? '#ED2800' : '#99ED2800') | 202 | .backgroundColor(this.btnStatus ? '#ED2800' : '#99ED2800') |
| 153 | .borderRadius('4vp') | 203 | .borderRadius('4vp') |
| 154 | .onClick(() => { | 204 | .onClick(() => { |
| @@ -158,25 +208,22 @@ struct ModifyPasswordPage { | @@ -158,25 +208,22 @@ struct ModifyPasswordPage { | ||
| 158 | } | 208 | } |
| 159 | }) | 209 | }) |
| 160 | } | 210 | } |
| 161 | - .padding({top:'25lpx'}) | 211 | + .padding({top:`${this.calcHeight(25)}lpx`}) |
| 162 | .alignItems(VerticalAlign.Center) | 212 | .alignItems(VerticalAlign.Center) |
| 163 | .width('100%') | 213 | .width('100%') |
| 164 | - .height('120lpx') | 214 | + .height(`${this.calcHeight(120)}lpx`) |
| 165 | 215 | ||
| 166 | Column() { | 216 | Column() { |
| 167 | - Text("忘记密码").fontSize(12).maxLines(3).fontColor(0x999999).padding({top:'10lpx'}) | 217 | + Text("忘记密码").fontSize(12).maxLines(3).fontColor(0x999999).padding({top:`${this.calcHeight(10)}lpx`}) |
| 168 | .onClick(()=>{ | 218 | .onClick(()=>{ |
| 169 | WDRouterRule.jumpWithPage(WDRouterPage.forgetPasswordPage) | 219 | WDRouterRule.jumpWithPage(WDRouterPage.forgetPasswordPage) |
| 170 | }) | 220 | }) |
| 171 | } | 221 | } |
| 172 | .width('100%') | 222 | .width('100%') |
| 173 | - .height('85lpx') | 223 | + .height(`${this.calcHeight(85)}lpx`) |
| 174 | .alignItems(HorizontalAlign.Center) | 224 | .alignItems(HorizontalAlign.Center) |
| 175 | - }.padding({top:"92lpx",left:"48lpx",right:"48lpx"}) | 225 | + }.padding({top:`${this.calcHeight(92)}lpx`,left:`${this.calcHeight(48)}lpx`,right:`${this.calcHeight(48)}lpx`}) |
| 176 | 226 | ||
| 177 | - }.titleMode(NavigationTitleMode.Mini) | ||
| 178 | - .backButtonIcon($r("app.media.login_back_icon")) | ||
| 179 | - .title('') | ||
| 180 | } | 227 | } |
| 181 | 228 | ||
| 182 | inputTextChange(){ | 229 | inputTextChange(){ |
| @@ -211,6 +258,10 @@ struct ModifyPasswordPage { | @@ -211,6 +258,10 @@ struct ModifyPasswordPage { | ||
| 211 | this.toastText = msg | 258 | this.toastText = msg |
| 212 | this.dialogToast.open() | 259 | this.dialogToast.open() |
| 213 | } | 260 | } |
| 261 | + | ||
| 262 | + calcHeight(value:number): number{ | ||
| 263 | + return value * this.percent | ||
| 264 | + } | ||
| 214 | } | 265 | } |
| 215 | 266 | ||
| 216 | 267 |
-
Please register or login to post a comment