Showing
1 changed file
with
79 additions
and
25 deletions
| @@ -2,7 +2,7 @@ import ArrayList from '@ohos.util.ArrayList'; | @@ -2,7 +2,7 @@ import ArrayList from '@ohos.util.ArrayList'; | ||
| 2 | import { Params } from '../../../../../../../commons/wdRouter/oh_modules/wdBean/Index'; | 2 | import { Params } from '../../../../../../../commons/wdRouter/oh_modules/wdBean/Index'; |
| 3 | import router from '@ohos.router'; | 3 | import router from '@ohos.router'; |
| 4 | import { LoginViewModel } from './LoginViewModel'; | 4 | import { LoginViewModel } from './LoginViewModel'; |
| 5 | -import { CustomToast, DateTimeUtils, Logger, SPHelper, ToastUtils } from 'wdKit'; | 5 | +import { BreakpointSystem, CustomToast, DateTimeUtils, Logger, SPHelper, ToastUtils } from 'wdKit'; |
| 6 | import { | 6 | import { |
| 7 | SpConstants | 7 | SpConstants |
| 8 | } from '../../../../../../../commons/wdNetwork/oh_modules/wdConstant/src/main/ets/constants/SpConstants' | 8 | } from '../../../../../../../commons/wdNetwork/oh_modules/wdConstant/src/main/ets/constants/SpConstants' |
| @@ -74,6 +74,17 @@ export struct SettingPasswordPage { | @@ -74,6 +74,17 @@ export struct SettingPasswordPage { | ||
| 74 | pageHideResetTime:number = 0; | 74 | pageHideResetTime:number = 0; |
| 75 | pageShowSetTime:number = 0; | 75 | pageShowSetTime:number = 0; |
| 76 | pageHideSetTime:number = 0; | 76 | pageHideSetTime:number = 0; |
| 77 | + @StorageProp('currentBreakpoint') @Watch("currentChanged")currentBreakpoint: string = 'sm'; | ||
| 78 | + private breakpointSystem = new BreakpointSystem(); | ||
| 79 | + @State percent:number = 1 | ||
| 80 | + | ||
| 81 | + currentChanged(){ | ||
| 82 | + if(this.currentBreakpoint == "md" || this.currentBreakpoint == "lg"){ | ||
| 83 | + this.percent = 0.7 | ||
| 84 | + }else { | ||
| 85 | + this.percent = 1 | ||
| 86 | + } | ||
| 87 | + } | ||
| 77 | 88 | ||
| 78 | onPageShow(): void { | 89 | onPageShow(): void { |
| 79 | if (this.pageType === 0){//重置密码 | 90 | if (this.pageType === 0){//重置密码 |
| @@ -83,6 +94,10 @@ export struct SettingPasswordPage { | @@ -83,6 +94,10 @@ export struct SettingPasswordPage { | ||
| 83 | } | 94 | } |
| 84 | } | 95 | } |
| 85 | 96 | ||
| 97 | + calcHeight(value:number): number{ | ||
| 98 | + return value * this.percent | ||
| 99 | + } | ||
| 100 | + | ||
| 86 | onPageHide(): void { | 101 | onPageHide(): void { |
| 87 | if (this.pageType === 0){ | 102 | if (this.pageType === 0){ |
| 88 | this.pageHideResetTime = DateTimeUtils.getTimeStamp() | 103 | this.pageHideResetTime = DateTimeUtils.getTimeStamp() |
| @@ -104,7 +119,13 @@ export struct SettingPasswordPage { | @@ -104,7 +119,13 @@ export struct SettingPasswordPage { | ||
| 104 | } | 119 | } |
| 105 | } | 120 | } |
| 106 | 121 | ||
| 122 | + aboutToDisappear(): void { | ||
| 123 | + this.breakpointSystem.unregister(); | ||
| 124 | + } | ||
| 125 | + | ||
| 107 | aboutToAppear() { | 126 | aboutToAppear() { |
| 127 | + this.breakpointSystem.register(); | ||
| 128 | + this.currentChanged() | ||
| 108 | let params:SettingPasswordParams = router.getParams() as SettingPasswordParams; | 129 | let params:SettingPasswordParams = router.getParams() as SettingPasswordParams; |
| 109 | this.pageId = parseInt(params.pageID); | 130 | this.pageId = parseInt(params.pageID); |
| 110 | this.getPageListData(this.pageId) | 131 | this.getPageListData(this.pageId) |
| @@ -147,10 +168,43 @@ export struct SettingPasswordPage { | @@ -147,10 +168,43 @@ export struct SettingPasswordPage { | ||
| 147 | } | 168 | } |
| 148 | 169 | ||
| 149 | build() { | 170 | build() { |
| 150 | - Navigation() { | 171 | + Column(){ |
| 172 | + this.TitleBackComponent('') | ||
| 151 | this.settingList() //滑动区域 | 173 | this.settingList() //滑动区域 |
| 152 | - }.titleMode(NavigationTitleMode.Mini) | ||
| 153 | - .title('') | 174 | + } |
| 175 | + } | ||
| 176 | + | ||
| 177 | + @Builder TitleBackComponent(title:string){ | ||
| 178 | + RelativeContainer() { | ||
| 179 | + Text(title) | ||
| 180 | + .fontColor('#FF333333') | ||
| 181 | + .fontSize(`${this.calcHeight(18)}`) | ||
| 182 | + .textAlign(TextAlign.Center) | ||
| 183 | + .height(`${this.calcHeight(44)}`) | ||
| 184 | + .alignRules({ | ||
| 185 | + top: { anchor: "__container__", align: VerticalAlign.Top }, | ||
| 186 | + left: { anchor: "__container__", align: HorizontalAlign.Start }, | ||
| 187 | + right: { anchor: "__container__", align: HorizontalAlign.End }, | ||
| 188 | + | ||
| 189 | + }) | ||
| 190 | + .id('titleContent') | ||
| 191 | + Image($r("app.media.login_back_icon")) | ||
| 192 | + .objectFit(ImageFit.Auto) | ||
| 193 | + .height(`${this.calcHeight(24)}`) | ||
| 194 | + .width(`${this.calcHeight(24)}`) | ||
| 195 | + .margin({ | ||
| 196 | + left: `${this.calcHeight(16)}`, top: `${this.calcHeight(8)}` | ||
| 197 | + }) | ||
| 198 | + .alignRules({ | ||
| 199 | + top: { anchor: "__container__", align: VerticalAlign.Top }, | ||
| 200 | + left: { anchor: "__container__", align: HorizontalAlign.Start }, | ||
| 201 | + }) | ||
| 202 | + .onClick(() => { | ||
| 203 | + router.back() | ||
| 204 | + }) | ||
| 205 | + .id('backImage') | ||
| 206 | + | ||
| 207 | + }.height(`${this.calcHeight(44)}`) | ||
| 154 | } | 208 | } |
| 155 | 209 | ||
| 156 | // 页面布局 | 210 | // 页面布局 |
| @@ -176,7 +230,7 @@ export struct SettingPasswordPage { | @@ -176,7 +230,7 @@ export struct SettingPasswordPage { | ||
| 176 | }) | 230 | }) |
| 177 | } | 231 | } |
| 178 | }.width('100%') | 232 | }.width('100%') |
| 179 | - .padding({ left:"31lpx",right:"31lpx",top:"131lpx" }) | 233 | + .padding({ left:`${this.calcHeight(31)}lpx`,right:`${this.calcHeight(31)}lpx`,top:`${this.calcHeight(131)}lpx` }) |
| 180 | .height('100%') | 234 | .height('100%') |
| 181 | } | 235 | } |
| 182 | 236 | ||
| @@ -185,10 +239,10 @@ export struct SettingPasswordPage { | @@ -185,10 +239,10 @@ export struct SettingPasswordPage { | ||
| 185 | // 标题 | 239 | // 标题 |
| 186 | @Builder getTitleCell(item: AccoutPageDataModel, alignTitle: HorizontalAlign) { | 240 | @Builder getTitleCell(item: AccoutPageDataModel, alignTitle: HorizontalAlign) { |
| 187 | Column() { | 241 | Column() { |
| 188 | - Text(item.compTitle).fontWeight(FontWeight.Bold).fontSize(20).maxLines(1) | 242 | + Text(item.compTitle).fontWeight(FontWeight.Bold).fontSize(`${this.calcHeight(20)}`).maxLines(1) |
| 189 | } | 243 | } |
| 190 | .width('100%') | 244 | .width('100%') |
| 191 | - .height('75lpx') | 245 | + .height(`${this.calcHeight(75)}lpx`) |
| 192 | .alignItems(alignTitle) | 246 | .alignItems(alignTitle) |
| 193 | } | 247 | } |
| 194 | 248 | ||
| @@ -210,12 +264,12 @@ export struct SettingPasswordPage { | @@ -210,12 +264,12 @@ export struct SettingPasswordPage { | ||
| 210 | }) | 264 | }) |
| 211 | } | 265 | } |
| 212 | .alignItems(VerticalAlign.Center) | 266 | .alignItems(VerticalAlign.Center) |
| 213 | - .height('80lpx') | 267 | + .height(`${this.calcHeight(80)}lpx`) |
| 214 | .backgroundColor('#f5f5f5') | 268 | .backgroundColor('#f5f5f5') |
| 215 | - .borderRadius('4vp') | 269 | + .borderRadius(`${this.calcHeight(4)}`) |
| 216 | } | 270 | } |
| 217 | .width('100%') | 271 | .width('100%') |
| 218 | - .height('110lpx') | 272 | + .height(`${this.calcHeight(110)}lpx`) |
| 219 | .backgroundColor(0xffffff0) | 273 | .backgroundColor(0xffffff0) |
| 220 | .alignItems(VerticalAlign.Center) | 274 | .alignItems(VerticalAlign.Center) |
| 221 | } | 275 | } |
| @@ -235,12 +289,12 @@ export struct SettingPasswordPage { | @@ -235,12 +289,12 @@ export struct SettingPasswordPage { | ||
| 235 | }) | 289 | }) |
| 236 | } | 290 | } |
| 237 | .alignItems(VerticalAlign.Center) | 291 | .alignItems(VerticalAlign.Center) |
| 238 | - .height('80lpx') | 292 | + .height(`${this.calcHeight(80)}lpx`) |
| 239 | .backgroundColor('#f5f5f5') | 293 | .backgroundColor('#f5f5f5') |
| 240 | - .borderRadius('4vp') | 294 | + .borderRadius(`${this.calcHeight(4)}`) |
| 241 | } | 295 | } |
| 242 | .width('100%') | 296 | .width('100%') |
| 243 | - .height('110lpx') | 297 | + .height(`${this.calcHeight(110)}lpx`) |
| 244 | .backgroundColor(0xffffff0) | 298 | .backgroundColor(0xffffff0) |
| 245 | .alignItems(VerticalAlign.Center) | 299 | .alignItems(VerticalAlign.Center) |
| 246 | } | 300 | } |
| @@ -249,7 +303,7 @@ export struct SettingPasswordPage { | @@ -249,7 +303,7 @@ export struct SettingPasswordPage { | ||
| 249 | @Builder getCodeCell(item: AccoutPageDataModel) { | 303 | @Builder getCodeCell(item: AccoutPageDataModel) { |
| 250 | Row() { | 304 | Row() { |
| 251 | Stack() { | 305 | Stack() { |
| 252 | - Image($r('app.media.get_code_bg')).width('100%').borderRadius('4vp') | 306 | + Image($r('app.media.get_code_bg')).width('100%').borderRadius(`${this.calcHeight(4)}`) |
| 253 | Row() { | 307 | Row() { |
| 254 | TextInput({ placeholder: item.inputPlacholder }) | 308 | TextInput({ placeholder: item.inputPlacholder }) |
| 255 | .placeholderColor("#CCCCCC") | 309 | .placeholderColor("#CCCCCC") |
| @@ -264,10 +318,10 @@ export struct SettingPasswordPage { | @@ -264,10 +318,10 @@ export struct SettingPasswordPage { | ||
| 264 | .fontColor('#da3e22') | 318 | .fontColor('#da3e22') |
| 265 | } | 319 | } |
| 266 | .width('100%') | 320 | .width('100%') |
| 267 | - }.height('80lpx') | 321 | + }.height(`${this.calcHeight(80)}lpx`) |
| 268 | } | 322 | } |
| 269 | .width('100%') | 323 | .width('100%') |
| 270 | - .height('110lpx') | 324 | + .height(`${this.calcHeight(110)}lpx`) |
| 271 | .backgroundColor(0xffffff0) | 325 | .backgroundColor(0xffffff0) |
| 272 | .alignItems(VerticalAlign.Center) | 326 | .alignItems(VerticalAlign.Center) |
| 273 | } | 327 | } |
| @@ -275,7 +329,7 @@ export struct SettingPasswordPage { | @@ -275,7 +329,7 @@ export struct SettingPasswordPage { | ||
| 275 | // desc | 329 | // desc |
| 276 | @Builder getDescCell(item: AccoutPageDataModel, alignTitle: HorizontalAlign) { | 330 | @Builder getDescCell(item: AccoutPageDataModel, alignTitle: HorizontalAlign) { |
| 277 | Column() { | 331 | Column() { |
| 278 | - Text(item.compDesc).fontSize(12).maxLines(3).fontColor(0x999999).padding({top:'10lpx'}) | 332 | + Text(item.compDesc).fontSize(`${this.calcHeight(12)}`).maxLines(3).fontColor(0x999999).padding({top:`${this.calcHeight(10)}lpx`}) |
| 279 | .onClick(()=>{ | 333 | .onClick(()=>{ |
| 280 | if (item.compDesc == '忘记密码') { | 334 | if (item.compDesc == '忘记密码') { |
| 281 | this.showToastTip('密码不符合密码规范') | 335 | this.showToastTip('密码不符合密码规范') |
| @@ -283,7 +337,7 @@ export struct SettingPasswordPage { | @@ -283,7 +337,7 @@ export struct SettingPasswordPage { | ||
| 283 | }) | 337 | }) |
| 284 | } | 338 | } |
| 285 | .width('100%') | 339 | .width('100%') |
| 286 | - .height('85lpx') | 340 | + .height(`${this.calcHeight(85)}lpx`) |
| 287 | .alignItems(alignTitle) | 341 | .alignItems(alignTitle) |
| 288 | } | 342 | } |
| 289 | 343 | ||
| @@ -293,29 +347,29 @@ export struct SettingPasswordPage { | @@ -293,29 +347,29 @@ export struct SettingPasswordPage { | ||
| 293 | Text(item.compButtonTitle) | 347 | Text(item.compButtonTitle) |
| 294 | .layoutWeight(1) | 348 | .layoutWeight(1) |
| 295 | .fontColor("#FFFFFF") | 349 | .fontColor("#FFFFFF") |
| 296 | - .borderRadius(4) | ||
| 297 | - .fontSize(18) | 350 | + .borderRadius(`${this.calcHeight(4)}`) |
| 351 | + .fontSize(`${this.calcHeight(18)}`) | ||
| 298 | .textAlign(TextAlign.Center) | 352 | .textAlign(TextAlign.Center) |
| 299 | .fontWeight(FontWeight.Medium) | 353 | .fontWeight(FontWeight.Medium) |
| 300 | - .margin({ top: 26 }) | ||
| 301 | - .height(44) | 354 | + .margin({ top: `${this.calcHeight(26)}` }) |
| 355 | + .height(`${this.calcHeight(44)}`) | ||
| 302 | .backgroundColor("#ED2800") | 356 | .backgroundColor("#ED2800") |
| 303 | .enabled(this.btnStatus ? true : false) | 357 | .enabled(this.btnStatus ? true : false) |
| 304 | .opacity(this.btnStatus ? 1: 0.6) | 358 | .opacity(this.btnStatus ? 1: 0.6) |
| 305 | .onClick(() => { | 359 | .onClick(() => { |
| 306 | this.buttonClick() | 360 | this.buttonClick() |
| 307 | }) | 361 | }) |
| 308 | - }.padding({top:'25lpx'}) | 362 | + }.padding({top:`${this.calcHeight(25)}lpx`}) |
| 309 | .width('100%') | 363 | .width('100%') |
| 310 | } | 364 | } |
| 311 | 365 | ||
| 312 | // 标题 | 366 | // 标题 |
| 313 | @Builder getLogoCell(item: AccoutPageDataModel) { | 367 | @Builder getLogoCell(item: AccoutPageDataModel) { |
| 314 | Column() { | 368 | Column() { |
| 315 | - Image(item.compLogo).height('150lpx').width('150lpx') | 369 | + Image(item.compLogo).height(`${this.calcHeight(150)}lpx`).width(`${this.calcHeight(150)}lpx`) |
| 316 | } | 370 | } |
| 317 | .width('100%') | 371 | .width('100%') |
| 318 | - .height('200lpx') | 372 | + .height(`${this.calcHeight(200)}lpx`) |
| 319 | } | 373 | } |
| 320 | 374 | ||
| 321 | /***************************** 事件处理 ******************************************/ | 375 | /***************************** 事件处理 ******************************************/ |
-
Please register or login to post a comment