yangchenggong1_wd

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

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){
... ...