yangchenggong1_wd

desc:登录相关页面 适配全屏

@Entry
@Component
struct Index {
@State message: string = 'Hello World';
build() {
Row() {
Column() {
Text(this.message)
.fontSize(50)
.fontWeight(FontWeight.Bold)
}
.width('100%')
}
.height('100%')
}
}
\ No newline at end of file
... ... @@ -24,6 +24,8 @@ struct ChangeBindPhonePage {
lastTime: number = 0
pageShowTime:number = 0;
pageHideTime:number = 0;
@State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
@State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
onPageShow() {
... ... @@ -58,104 +60,109 @@ struct ChangeBindPhonePage {
build() {
Column() {
Image($r('app.media.login_back_icon')).width(24).height(24).margin({ left: 15, top: 10 }).onClick(() => {
router.back()
})
Column(){
Column() {
Image($r('app.media.login_back_icon')).width(24).height(24).margin({ left: 15, top: 10 }).onClick(() => {
router.back()
})
Text(this.pageTitle).fontSize(22).fontColor('#333333').fontWeight(FontWeight.Bold).margin({ left: 25, top: 112 })
Text(this.pageTitle).fontSize(22).fontColor('#333333').fontWeight(FontWeight.Bold).margin({ left: 25, top: 112 })
Column(){
TextInput({text: this.phoneContent, placeholder: "请输入手机号" })
.fontSize(16)
.height(48)
.placeholderColor("#CCCCCC")
.maxLength(11)
.margin({ top: 36 })
.backgroundColor("#F5F5F5")
.borderRadius(4)
.type(InputType.Number)
.onChange((content) => {
this.phoneContent = content
this.isSubmit = (this.phoneContent.length >= 11 && this.codeContent.length >= 4)
if (content.length >= 11 ) {
this.codeBtnState = true
} else {
this.codeBtnState = false
}
})
Row() {
TextInput({ text: this.codeContent,placeholder: "验证码" })
.placeholderColor("#CCCCCC")
.layoutWeight(1)
Column(){
TextInput({text: this.phoneContent, placeholder: "请输入手机号" })
.fontSize(16)
.height(48)
.placeholderColor("#CCCCCC")
.maxLength(11)
.margin({ top: 36 })
.backgroundColor("#F5F5F5")
.borderRadius(4)
.type(InputType.Number)
.fontColor("#222222")
.backgroundColor("#00000000")
.borderRadius({ topLeft: 4, bottomLeft: 4 })
.onChange((value) => {
this.codeContent = value
.onChange((content) => {
this.phoneContent = content
this.isSubmit = (this.phoneContent.length >= 11 && this.codeContent.length >= 4)
})
Text(this.codeStateSuccess ? this.timeCount + "s" : this.isFirst?"发送验证码":'重新获取')
.fontColor(this.codeBtnState?'#ED2800':'#80ED2800')
.width(110)
.fontSize(14)
.fontWeight( FontWeight.Bold)
.height(48)
.textAlign(TextAlign.Center)
.enabled(this.codeStateSuccess?false:true)
.onClick(() => {
if (this.phoneContent.length < 11) {
return
if (content.length >= 11 ) {
this.codeBtnState = true
} else {
this.codeBtnState = false
}
})
let currentTime = DateTimeUtils.getTimeStamp()
if (currentTime - this.lastTime < 500) {
return
}
this.lastTime = currentTime;
this.isCodeSend = true
Row() {
TextInput({ text: this.codeContent,placeholder: "验证码" })
.placeholderColor("#CCCCCC")
.layoutWeight(1)
.fontSize(16)
.height(48)
.type(InputType.Number)
.fontColor("#222222")
.backgroundColor("#00000000")
.borderRadius({ topLeft: 4, bottomLeft: 4 })
.onChange((value) => {
this.codeContent = value
this.isSubmit = (this.phoneContent.length >= 11 && this.codeContent.length >= 4)
})
Text(this.codeStateSuccess ? this.timeCount + "s" : this.isFirst?"发送验证码":'重新获取')
.fontColor(this.codeBtnState?'#ED2800':'#80ED2800')
.width(110)
.fontSize(14)
.fontWeight( FontWeight.Bold)
.height(48)
.textAlign(TextAlign.Center)
.enabled(this.codeStateSuccess?false:true)
.onClick(() => {
if (this.phoneContent.length < 11) {
return
}
let currentTime = DateTimeUtils.getTimeStamp()
if (currentTime - this.lastTime < 500) {
return
}
this.lastTime = currentTime;
this.isCodeSend = true
})
}.margin({ top: 12 })
.height(48)
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Start)
.backgroundImage($r('app.media.code_login_bg'))
.backgroundImageSize({width:'100%',height:48})
}.width('100%')
.padding({ left: 25, right: 25 })
Row() {
Text("确认")
.layoutWeight(1)
.fontColor("#FFFFFF")
.borderRadius(4)
.fontSize(18)
.textAlign(TextAlign.Center)
.fontWeight(FontWeight.Medium)
.margin({ top: 26 })
.height(44)
.backgroundColor("#ED2800")
.enabled(this.isSubmit ? true : false)
.opacity(this.isSubmit ? 1: 0.6)
.onClick(() => {
TrackingButton.click("changePhoneNumberPageConfirm",TrackConstants.PageName.Change_PhoneNum,TrackConstants.PageName.Change_PhoneNum)
this.changeBindPhone()
})
}.width('100%')
.padding({ left: 25, right: 25 })
}.width('100%').height('100%').alignItems(HorizontalAlign.Start)
}.width("100%")
.height("100%")
.padding({top:px2vp(this.topSafeHeight),bottom:px2vp(this.bottomSafeHeight)})
}.margin({ top: 12 })
.height(48)
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Start)
.backgroundImage($r('app.media.code_login_bg'))
.backgroundImageSize({width:'100%',height:48})
}.width('100%')
.padding({ left: 25, right: 25 })
Row() {
Text("确认")
.layoutWeight(1)
.fontColor("#FFFFFF")
.borderRadius(4)
.fontSize(18)
.textAlign(TextAlign.Center)
.fontWeight(FontWeight.Medium)
.margin({ top: 26 })
.height(44)
.backgroundColor("#ED2800")
.enabled(this.isSubmit ? true : false)
.opacity(this.isSubmit ? 1: 0.6)
.onClick(() => {
TrackingButton.click("changePhoneNumberPageConfirm",TrackConstants.PageName.Change_PhoneNum,TrackConstants.PageName.Change_PhoneNum)
this.changeBindPhone()
})
}.width('100%')
.padding({ left: 25, right: 25 })
}.width('100%').height('100%').alignItems(HorizontalAlign.Start)
}
//发送验证码
... ...
... ... @@ -23,6 +23,8 @@ struct ForgetPasswordPage {
@State pageTitle:string = '找回密码';
@State isForgetPassword: number = 0 //是否是登录页忘记密码过来的,标题不一样
@State codeStateSuccess:boolean=false
@State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
@State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
onCodeSend() {
if (this.isCodeSend) {
this.sendVerifyCode()
... ... @@ -43,42 +45,48 @@ struct ForgetPasswordPage {
build() {
Column() {
Image($r('app.media.login_back_icon')).width(24).height(24).margin({ left: 15, top: 10 }).onClick(() => {
router.back()
})
Column(){
Column() {
Image($r('app.media.login_back_icon')).width(24).height(24).margin({ left: 15, top: 10 }).onClick(() => {
router.back()
})
Text(this.pageTitle).fontSize(22).fontColor('#333333').fontWeight(FontWeight.Bold).margin({ left: 25, top: 112 })
LoginInputComponent({
phoneContent: $phoneContent,
codeContent: $codeContent,
isSubmit: $isSubmit,
isCodeSend: $isCodeSend,
pageType:0,
codeStateSuccess:$codeStateSuccess
})
Row() {
Text("确认")
.layoutWeight(1)
.fontColor("#FFFFFF")
.borderRadius(4)
.fontSize(18)
.textAlign(TextAlign.Center)
.fontWeight(FontWeight.Medium)
.margin({ top: 26 })
.height(44)
.backgroundColor("#ED2800")
.enabled(this.isSubmit ? true : false)
.opacity(this.isSubmit ? 1: 0.6)
.onClick(() => {
this.checkVerifyCode()
})
}.padding({ left: 25, right: 25 }).width('100%')
}.width('100%')
.height('100%')
.alignItems(HorizontalAlign.Start)
.backgroundColor(Color.White)
}.width("100%")
.height("100%")
.padding({top:px2vp(this.topSafeHeight),bottom:px2vp(this.bottomSafeHeight)})
Text(this.pageTitle).fontSize(22).fontColor('#333333').fontWeight(FontWeight.Bold).margin({ left: 25, top: 112 })
LoginInputComponent({
phoneContent: $phoneContent,
codeContent: $codeContent,
isSubmit: $isSubmit,
isCodeSend: $isCodeSend,
pageType:0,
codeStateSuccess:$codeStateSuccess
})
Row() {
Text("确认")
.layoutWeight(1)
.fontColor("#FFFFFF")
.borderRadius(4)
.fontSize(18)
.textAlign(TextAlign.Center)
.fontWeight(FontWeight.Medium)
.margin({ top: 26 })
.height(44)
.backgroundColor("#ED2800")
.enabled(this.isSubmit ? true : false)
.opacity(this.isSubmit ? 1: 0.6)
.onClick(() => {
this.checkVerifyCode()
})
}.padding({ left: 25, right: 25 }).width('100%')
}.width('100%')
.height('100%')
.alignItems(HorizontalAlign.Start)
.backgroundColor(Color.White)
}
aboutToAppear() {
... ...
... ... @@ -27,6 +27,8 @@ const TAG = "LoginPage"
@Entry
@Component
struct LoginPage {
@State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
@State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
@State codeBtnState: boolean = false
@State timeCount: number = 60
phoneController: TextInputController = new TextInputController()
... ... @@ -104,7 +106,8 @@ struct LoginPage {
}
build() {
Stack() {
Column(){
Stack() {
RelativeContainer() {
//注册内容
... ... @@ -166,7 +169,7 @@ struct LoginPage {
.fontWeight(400)
.margin({ top: `${this.calcHeight(20)}` })
.lineHeight(`${this.calcHeight(50)}lpx`)
.height(44)
.height(44)
.textAlign(TextAlign.Center)
.width("100%")
.backgroundColor("#ED2800")
... ... @@ -242,8 +245,12 @@ struct LoginPage {
.visibility(this.isProtocol ? Visibility.Visible : Visibility.None)
}.width('100%')
.height('100%')
.height("100%")
.backgroundColor(Color.White)
}.width("100%")
.height("100%")
.padding({top:px2vp(this.topSafeHeight),bottom:px2vp(this.bottomSafeHeight)})
}
@Builder
... ...
... ... @@ -10,6 +10,8 @@ const TAG = 'LoginProtocolWebview';
@Entry
@Component
struct LoginProtocolWebview {
@State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
@State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
webUrl: string = ''
webviewController: webview.WebviewController = new webview.WebviewController()
userProtocol = "https://cdnpeoplefrontuat.aikan.pdnews.cn/rmrb/rmrb-protocol-zh-web/0.0.1/app/protocol-1005.html"
... ... @@ -55,38 +57,42 @@ struct LoginProtocolWebview {
}
build() {
Column(){
Column() {
Row() {
Image($r("app.media.login_back_icon"))
.width(24)
.aspectRatio(1)
.onClick(() => {
if(this.webviewController.accessBackward()){
this.webviewController.backward()
return
}
router.back();
}).margin({ left: 16 })
Text()
}
.alignItems(VerticalAlign.Center)
.width('100%')
.height(44)
Column() {
Row() {
Image($r("app.media.login_back_icon"))
.width(24)
.aspectRatio(1)
.onClick(() => {
if(this.webviewController.accessBackward()){
this.webviewController.backward()
return
}
router.back();
}).margin({ left: 16 })
Text()
Web({ src: this.webUrl, controller: this.webviewController })
.domStorageAccess(true)
.databaseAccess(true)
.javaScriptAccess(true)
.zoomAccess(false)
.horizontalScrollBarAccess(false)
.verticalScrollBarAccess(false)
.onHttpErrorReceive((event) => {
//TODO 页面加载不成功的时候处理
Logger.info(TAG, 'onHttpErrorReceive event.request.getRequestUrl:' + event?.request.getRequestUrl());
Logger.info(TAG, 'onHttpErrorReceive event.response.getResponseCode:' + event?.response.getResponseCode());
})
.padding({bottom:this.contentID === "2" ? "40lpx" : 0 })
}
.alignItems(VerticalAlign.Center)
.width('100%')
.height(44)
}.width("100%")
.height("100%")
.padding({top:px2vp(this.topSafeHeight),bottom:px2vp(this.bottomSafeHeight)})
Web({ src: this.webUrl, controller: this.webviewController })
.domStorageAccess(true)
.databaseAccess(true)
.javaScriptAccess(true)
.zoomAccess(false)
.horizontalScrollBarAccess(false)
.verticalScrollBarAccess(false)
.onHttpErrorReceive((event) => {
//TODO 页面加载不成功的时候处理
Logger.info(TAG, 'onHttpErrorReceive event.request.getRequestUrl:' + event?.request.getRequestUrl());
Logger.info(TAG, 'onHttpErrorReceive event.response.getResponseCode:' + event?.response.getResponseCode());
})
.padding({bottom:this.contentID === "2" ? "40lpx" : 0 })
}
}
}
\ No newline at end of file
... ...
... ... @@ -12,6 +12,8 @@ import { TrackingPageBrowse, TrackConstants, TrackingButton } from 'wdTracking/I
@Entry
@Component
struct ModifyPasswordPage {
@State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
@State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
password_old: string = '';
password_new: string = '';
password_new_repeat: string = '';
... ... @@ -64,9 +66,13 @@ struct ModifyPasswordPage {
build() {
Column(){
this.TitleBackComponent('')
this.ModifyPasswordLayout()
}
Column(){
this.TitleBackComponent('')
this.ModifyPasswordLayout()
}
}.width("100%")
.height("100%")
.padding({top:px2vp(this.topSafeHeight),bottom:px2vp(this.bottomSafeHeight)})
}
... ...
... ... @@ -77,6 +77,8 @@ export struct SettingPasswordPage {
@StorageProp('currentBreakpoint') @Watch("currentChanged")currentBreakpoint: string = 'sm';
private breakpointSystem = new BreakpointSystem();
@State percent:number = 1
@State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
@State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
currentChanged(){
if(this.currentBreakpoint == "md" || this.currentBreakpoint == "lg"){
... ... @@ -169,9 +171,14 @@ export struct SettingPasswordPage {
build() {
Column(){
this.TitleBackComponent('')
this.settingList() //滑动区域
}
Column(){
this.TitleBackComponent('')
this.settingList() //滑动区域
}
}.width("100%")
.height("100%")
.padding({top:px2vp(this.topSafeHeight),bottom:px2vp(this.bottomSafeHeight)})
}
@Builder TitleBackComponent(title:string){
... ...
... ... @@ -24,6 +24,8 @@ struct VerifyPhoneNumberPage {
isFirst:boolean=true//是否第一次获取验证码
pageShowTime:number = 0;
pageHideTime:number = 0;
@State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
@State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
onCodeSend() {
if (this.isCodeSend) {
... ... @@ -60,101 +62,105 @@ struct VerifyPhoneNumberPage {
build() {
Column() {
Image($r('app.media.login_back_icon')).width(24).height(24).margin({ left: 15, top: 10 }).onClick(() => {
router.back()
})
Text(this.pageTitle).fontSize(22).fontColor('#333333').fontWeight(FontWeight.Bold).margin({ left: 25, top: 112 })
Column(){
Column() {
TextInput({ text: this.securityPhone(this.phoneContent) })
.placeholderColor("#CCCCCC")
.fontSize(16)
.height(48)
.maxLength(11)
.margin({ top: 36 })
.backgroundColor("#F5F5F5")
.borderRadius(4)
.enabled(false)
.type(InputType.PhoneNumber)
.onChange((content) => {
this.phoneContent = content
this.isSubmit = (this.phoneContent.length >= 11 && this.codeContent.length >= 4)
if (content.length >= 11) {
this.codeBtnState = true
} else {
this.codeBtnState = false
}
})
Image($r('app.media.login_back_icon')).width(24).height(24).margin({ left: 15, top: 10 }).onClick(() => {
router.back()
})
Row() {
TextInput({ text: this.codeContent,placeholder: "验证码" })
Text(this.pageTitle).fontSize(22).fontColor('#333333').fontWeight(FontWeight.Bold).margin({ left: 25, top: 112 })
Column() {
TextInput({ text: this.securityPhone(this.phoneContent) })
.placeholderColor("#CCCCCC")
.layoutWeight(1)
.fontSize(16)
.height(48)
.type(InputType.Number)
.fontColor("#222222")
.backgroundColor("#00000000")
.borderRadius({ topLeft: 4, bottomLeft: 4 })
.onChange((value) => {
this.codeContent = value
.maxLength(11)
.margin({ top: 36 })
.backgroundColor("#F5F5F5")
.borderRadius(4)
.enabled(false)
.type(InputType.PhoneNumber)
.onChange((content) => {
this.phoneContent = content
this.isSubmit = (this.phoneContent.length >= 11 && this.codeContent.length >= 4)
})
Text(this.codeStateSuccess ? this.timeCount + "s" : this.isFirst?"发送验证码":'重新获取')
.fontColor(this.codeBtnState?'#ED2800':'#80ED2800')
.width(110)
.fontSize(14)
.fontWeight( FontWeight.Bold)
.height(48)
.textAlign(TextAlign.Center)
.enabled(this.codeStateSuccess?false:true)
.onClick(() => {
if (this.phoneContent.length < 11) {
return
if (content.length >= 11) {
this.codeBtnState = true
} else {
this.codeBtnState = false
}
let currentTime = DateTimeUtils.getTimeStamp()
if (currentTime - this.lastTime < 500) {
return
}
this.lastTime = currentTime;
this.isCodeSend = true
})
}.margin({ top: 12 })
.height(48)
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Start)
.backgroundImage($r('app.media.code_login_bg'))
.backgroundImageSize({width:'100%',height:48})
Row() {
TextInput({ text: this.codeContent,placeholder: "验证码" })
.placeholderColor("#CCCCCC")
.layoutWeight(1)
.fontSize(16)
.height(48)
.type(InputType.Number)
.fontColor("#222222")
.backgroundColor("#00000000")
.borderRadius({ topLeft: 4, bottomLeft: 4 })
.onChange((value) => {
this.codeContent = value
this.isSubmit = (this.phoneContent.length >= 11 && this.codeContent.length >= 4)
})
Text(this.codeStateSuccess ? this.timeCount + "s" : this.isFirst?"发送验证码":'重新获取')
.fontColor(this.codeBtnState?'#ED2800':'#80ED2800')
.width(110)
.fontSize(14)
.fontWeight( FontWeight.Bold)
.height(48)
.textAlign(TextAlign.Center)
.enabled(this.codeStateSuccess?false:true)
.onClick(() => {
if (this.phoneContent.length < 11) {
return
}
let currentTime = DateTimeUtils.getTimeStamp()
if (currentTime - this.lastTime < 500) {
return
}
this.lastTime = currentTime;
this.isCodeSend = true
})
}.margin({ top: 12 })
.height(48)
.alignItems(VerticalAlign.Center)
.justifyContent(FlexAlign.Start)
.backgroundImage($r('app.media.code_login_bg'))
.backgroundImageSize({width:'100%',height:48})
}.width('100%').padding({ left: 25, right: 25 })
}.width('100%').padding({ left: 25, right: 25 })
Row() {
Text("确认")
.layoutWeight(1)
.fontColor(this.isSubmit ?"#FFFFFFFF":"#66FFFFFF")
.borderRadius(4)
.fontSize(18)
.textAlign(TextAlign.Center)
.fontWeight(FontWeight.Medium)
.margin({ top: 26 })
.height(44)
.backgroundColor(this.isSubmit ?"#ED2800":"#99ED2800")
.enabled(this.isSubmit ? true : false)
.onClick(() => {
this.checkVerifyCode()
})
}.padding({ left: 25, right: 25 }).width('100%')
Row() {
Text("确认")
.layoutWeight(1)
.fontColor(this.isSubmit ?"#FFFFFFFF":"#66FFFFFF")
.borderRadius(4)
.fontSize(18)
.textAlign(TextAlign.Center)
.fontWeight(FontWeight.Medium)
.margin({ top: 26 })
.height(44)
.backgroundColor(this.isSubmit ?"#ED2800":"#99ED2800")
.enabled(this.isSubmit ? true : false)
.onClick(() => {
this.checkVerifyCode()
})
}.padding({ left: 25, right: 25 }).width('100%')
}.width('100%').height('100%').alignItems(HorizontalAlign.Start)
}.width('100%').height('100%').alignItems(HorizontalAlign.Start)
}.width("100%")
.height("100%")
.padding({top:px2vp(this.topSafeHeight),bottom:px2vp(this.bottomSafeHeight)})
}
//发送验证码
... ...
{
"src": [
"pages/Index",
"pages/login/LoginPage",
"pages/login/ForgetPasswordPage",
"pages/login/LoginProtocolWebview",
... ...