developOne / harmonyPool

Go to a project
Toggle navigation Toggle navigation pinning
yangchenggong1_wd
8a21964d 1 parent 13cd49e0

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

Inline Side-by-side
Showing 9 changed files with 287 additions and 258 deletions
1 -@Entry  
2 -@Component  
3 -struct Index {  
4 - @State message: string = 'Hello World';  
5 -  
6 - build() {  
7 - Row() {  
8 - Column() {  
9 - Text(this.message)  
10 - .fontSize(50)  
11 - .fontWeight(FontWeight.Bold)  
12 - }  
13 - .width('100%')  
14 - }  
15 - .height('100%')  
16 - }  
17 -}  
@@ -24,6 +24,8 @@ struct ChangeBindPhonePage { @@ -24,6 +24,8 @@ struct ChangeBindPhonePage {
24 lastTime: number = 0 24 lastTime: number = 0
25 pageShowTime:number = 0; 25 pageShowTime:number = 0;
26 pageHideTime:number = 0; 26 pageHideTime:number = 0;
  27 + @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
  28 + @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
27 29
28 30
29 onPageShow() { 31 onPageShow() {
@@ -58,104 +60,109 @@ struct ChangeBindPhonePage { @@ -58,104 +60,109 @@ struct ChangeBindPhonePage {
58 60
59 61
60 build() { 62 build() {
61 - Column() {  
62 - Image($r('app.media.login_back_icon')).width(24).height(24).margin({ left: 15, top: 10 }).onClick(() => {  
63 - router.back()  
64 - }) 63 + Column(){
  64 + Column() {
  65 + Image($r('app.media.login_back_icon')).width(24).height(24).margin({ left: 15, top: 10 }).onClick(() => {
  66 + router.back()
  67 + })
65 68
66 - Text(this.pageTitle).fontSize(22).fontColor('#333333').fontWeight(FontWeight.Bold).margin({ left: 25, top: 112 }) 69 + Text(this.pageTitle).fontSize(22).fontColor('#333333').fontWeight(FontWeight.Bold).margin({ left: 25, top: 112 })
67 70
68 - Column(){  
69 - TextInput({text: this.phoneContent, placeholder: "请输入手机号" })  
70 - .fontSize(16)  
71 - .height(48)  
72 - .placeholderColor("#CCCCCC")  
73 - .maxLength(11)  
74 - .margin({ top: 36 })  
75 - .backgroundColor("#F5F5F5")  
76 - .borderRadius(4)  
77 - .type(InputType.Number)  
78 - .onChange((content) => {  
79 - this.phoneContent = content  
80 - this.isSubmit = (this.phoneContent.length >= 11 && this.codeContent.length >= 4)  
81 -  
82 - if (content.length >= 11 ) {  
83 - this.codeBtnState = true  
84 - } else {  
85 - this.codeBtnState = false  
86 - }  
87 - })  
88 -  
89 -  
90 - Row() {  
91 - TextInput({ text: this.codeContent,placeholder: "验证码" })  
92 - .placeholderColor("#CCCCCC")  
93 - .layoutWeight(1) 71 + Column(){
  72 + TextInput({text: this.phoneContent, placeholder: "请输入手机号" })
94 .fontSize(16) 73 .fontSize(16)
95 .height(48) 74 .height(48)
  75 + .placeholderColor("#CCCCCC")
  76 + .maxLength(11)
  77 + .margin({ top: 36 })
  78 + .backgroundColor("#F5F5F5")
  79 + .borderRadius(4)
96 .type(InputType.Number) 80 .type(InputType.Number)
97 - .fontColor("#222222")  
98 - .backgroundColor("#00000000")  
99 - .borderRadius({ topLeft: 4, bottomLeft: 4 })  
100 - .onChange((value) => {  
101 - this.codeContent = value 81 + .onChange((content) => {
  82 + this.phoneContent = content
102 this.isSubmit = (this.phoneContent.length >= 11 && this.codeContent.length >= 4) 83 this.isSubmit = (this.phoneContent.length >= 11 && this.codeContent.length >= 4)
103 - })  
104 84
105 - Text(this.codeStateSuccess ? this.timeCount + "s" : this.isFirst?"发送验证码":'重新获取')  
106 - .fontColor(this.codeBtnState?'#ED2800':'#80ED2800')  
107 - .width(110)  
108 - .fontSize(14)  
109 - .fontWeight( FontWeight.Bold)  
110 - .height(48)  
111 - .textAlign(TextAlign.Center)  
112 - .enabled(this.codeStateSuccess?false:true)  
113 - .onClick(() => {  
114 - if (this.phoneContent.length < 11) {  
115 - return 85 + if (content.length >= 11 ) {
  86 + this.codeBtnState = true
  87 + } else {
  88 + this.codeBtnState = false
116 } 89 }
  90 + })
117 91
118 - let currentTime = DateTimeUtils.getTimeStamp()  
119 - if (currentTime - this.lastTime < 500) {  
120 - return  
121 - }  
122 - this.lastTime = currentTime;  
123 - this.isCodeSend = true  
124 92
  93 + Row() {
  94 + TextInput({ text: this.codeContent,placeholder: "验证码" })
  95 + .placeholderColor("#CCCCCC")
  96 + .layoutWeight(1)
  97 + .fontSize(16)
  98 + .height(48)
  99 + .type(InputType.Number)
  100 + .fontColor("#222222")
  101 + .backgroundColor("#00000000")
  102 + .borderRadius({ topLeft: 4, bottomLeft: 4 })
  103 + .onChange((value) => {
  104 + this.codeContent = value
  105 + this.isSubmit = (this.phoneContent.length >= 11 && this.codeContent.length >= 4)
  106 + })
  107 +
  108 + Text(this.codeStateSuccess ? this.timeCount + "s" : this.isFirst?"发送验证码":'重新获取')
  109 + .fontColor(this.codeBtnState?'#ED2800':'#80ED2800')
  110 + .width(110)
  111 + .fontSize(14)
  112 + .fontWeight( FontWeight.Bold)
  113 + .height(48)
  114 + .textAlign(TextAlign.Center)
  115 + .enabled(this.codeStateSuccess?false:true)
  116 + .onClick(() => {
  117 + if (this.phoneContent.length < 11) {
  118 + return
  119 + }
  120 +
  121 + let currentTime = DateTimeUtils.getTimeStamp()
  122 + if (currentTime - this.lastTime < 500) {
  123 + return
  124 + }
  125 + this.lastTime = currentTime;
  126 + this.isCodeSend = true
  127 +
  128 + })
  129 +
  130 +
  131 + }.margin({ top: 12 })
  132 + .height(48)
  133 + .alignItems(VerticalAlign.Center)
  134 + .justifyContent(FlexAlign.Start)
  135 + .backgroundImage($r('app.media.code_login_bg'))
  136 + .backgroundImageSize({width:'100%',height:48})
  137 + }.width('100%')
  138 + .padding({ left: 25, right: 25 })
  139 +
  140 +
  141 + Row() {
  142 + Text("确认")
  143 + .layoutWeight(1)
  144 + .fontColor("#FFFFFF")
  145 + .borderRadius(4)
  146 + .fontSize(18)
  147 + .textAlign(TextAlign.Center)
  148 + .fontWeight(FontWeight.Medium)
  149 + .margin({ top: 26 })
  150 + .height(44)
  151 + .backgroundColor("#ED2800")
  152 + .enabled(this.isSubmit ? true : false)
  153 + .opacity(this.isSubmit ? 1: 0.6)
  154 + .onClick(() => {
  155 + TrackingButton.click("changePhoneNumberPageConfirm",TrackConstants.PageName.Change_PhoneNum,TrackConstants.PageName.Change_PhoneNum)
  156 + this.changeBindPhone()
125 }) 157 })
  158 + }.width('100%')
  159 + .padding({ left: 25, right: 25 })
126 160
  161 + }.width('100%').height('100%').alignItems(HorizontalAlign.Start)
  162 + }.width("100%")
  163 + .height("100%")
  164 + .padding({top:px2vp(this.topSafeHeight),bottom:px2vp(this.bottomSafeHeight)})
127 165
128 - }.margin({ top: 12 })  
129 - .height(48)  
130 - .alignItems(VerticalAlign.Center)  
131 - .justifyContent(FlexAlign.Start)  
132 - .backgroundImage($r('app.media.code_login_bg'))  
133 - .backgroundImageSize({width:'100%',height:48})  
134 - }.width('100%')  
135 - .padding({ left: 25, right: 25 })  
136 -  
137 -  
138 - Row() {  
139 - Text("确认")  
140 - .layoutWeight(1)  
141 - .fontColor("#FFFFFF")  
142 - .borderRadius(4)  
143 - .fontSize(18)  
144 - .textAlign(TextAlign.Center)  
145 - .fontWeight(FontWeight.Medium)  
146 - .margin({ top: 26 })  
147 - .height(44)  
148 - .backgroundColor("#ED2800")  
149 - .enabled(this.isSubmit ? true : false)  
150 - .opacity(this.isSubmit ? 1: 0.6)  
151 - .onClick(() => {  
152 - TrackingButton.click("changePhoneNumberPageConfirm",TrackConstants.PageName.Change_PhoneNum,TrackConstants.PageName.Change_PhoneNum)  
153 - this.changeBindPhone()  
154 - })  
155 - }.width('100%')  
156 - .padding({ left: 25, right: 25 })  
157 -  
158 - }.width('100%').height('100%').alignItems(HorizontalAlign.Start)  
159 } 166 }
160 167
161 //发送验证码 168 //发送验证码
@@ -23,6 +23,8 @@ struct ForgetPasswordPage { @@ -23,6 +23,8 @@ struct ForgetPasswordPage {
23 @State pageTitle:string = '找回密码'; 23 @State pageTitle:string = '找回密码';
24 @State isForgetPassword: number = 0 //是否是登录页忘记密码过来的，标题不一样 24 @State isForgetPassword: number = 0 //是否是登录页忘记密码过来的，标题不一样
25 @State codeStateSuccess:boolean=false 25 @State codeStateSuccess:boolean=false
  26 + @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
  27 + @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
26 onCodeSend() { 28 onCodeSend() {
27 if (this.isCodeSend) { 29 if (this.isCodeSend) {
28 this.sendVerifyCode() 30 this.sendVerifyCode()
@@ -43,42 +45,48 @@ struct ForgetPasswordPage { @@ -43,42 +45,48 @@ struct ForgetPasswordPage {
43 45
44 46
45 build() { 47 build() {
46 - Column() {  
47 - Image($r('app.media.login_back_icon')).width(24).height(24).margin({ left: 15, top: 10 }).onClick(() => {  
48 - router.back()  
49 - }) 48 + Column(){
  49 + Column() {
  50 + Image($r('app.media.login_back_icon')).width(24).height(24).margin({ left: 15, top: 10 }).onClick(() => {
  51 + router.back()
  52 + })
  53 +
  54 + Text(this.pageTitle).fontSize(22).fontColor('#333333').fontWeight(FontWeight.Bold).margin({ left: 25, top: 112 })
  55 + LoginInputComponent({
  56 + phoneContent: $phoneContent,
  57 + codeContent: $codeContent,
  58 + isSubmit: $isSubmit,
  59 + isCodeSend: $isCodeSend,
  60 + pageType:0,
  61 + codeStateSuccess:$codeStateSuccess
  62 + })
  63 + Row() {
  64 + Text("确认")
  65 + .layoutWeight(1)
  66 + .fontColor("#FFFFFF")
  67 + .borderRadius(4)
  68 + .fontSize(18)
  69 + .textAlign(TextAlign.Center)
  70 + .fontWeight(FontWeight.Medium)
  71 + .margin({ top: 26 })
  72 + .height(44)
  73 + .backgroundColor("#ED2800")
  74 + .enabled(this.isSubmit ? true : false)
  75 + .opacity(this.isSubmit ? 1: 0.6)
  76 + .onClick(() => {
  77 + this.checkVerifyCode()
  78 + })
  79 + }.padding({ left: 25, right: 25 }).width('100%')
  80 +
  81 + }.width('100%')
  82 + .height('100%')
  83 + .alignItems(HorizontalAlign.Start)
  84 + .backgroundColor(Color.White)
  85 +
  86 + }.width("100%")
  87 + .height("100%")
  88 + .padding({top:px2vp(this.topSafeHeight),bottom:px2vp(this.bottomSafeHeight)})
50 89
51 - Text(this.pageTitle).fontSize(22).fontColor('#333333').fontWeight(FontWeight.Bold).margin({ left: 25, top: 112 })  
52 - LoginInputComponent({  
53 - phoneContent: $phoneContent,  
54 - codeContent: $codeContent,  
55 - isSubmit: $isSubmit,  
56 - isCodeSend: $isCodeSend,  
57 - pageType:0,  
58 - codeStateSuccess:$codeStateSuccess  
59 - })  
60 - Row() {  
61 - Text("确认")  
62 - .layoutWeight(1)  
63 - .fontColor("#FFFFFF")  
64 - .borderRadius(4)  
65 - .fontSize(18)  
66 - .textAlign(TextAlign.Center)  
67 - .fontWeight(FontWeight.Medium)  
68 - .margin({ top: 26 })  
69 - .height(44)  
70 - .backgroundColor("#ED2800")  
71 - .enabled(this.isSubmit ? true : false)  
72 - .opacity(this.isSubmit ? 1: 0.6)  
73 - .onClick(() => {  
74 - this.checkVerifyCode()  
75 - })  
76 - }.padding({ left: 25, right: 25 }).width('100%')  
77 -  
78 - }.width('100%')  
79 - .height('100%')  
80 - .alignItems(HorizontalAlign.Start)  
81 - .backgroundColor(Color.White)  
82 } 90 }
83 91
84 aboutToAppear() { 92 aboutToAppear() {
@@ -27,6 +27,8 @@ const TAG = "LoginPage" @@ -27,6 +27,8 @@ const TAG = "LoginPage"
27 @Entry 27 @Entry
28 @Component 28 @Component
29 struct LoginPage { 29 struct LoginPage {
  30 + @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
  31 + @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
30 @State codeBtnState: boolean = false 32 @State codeBtnState: boolean = false
31 @State timeCount: number = 60 33 @State timeCount: number = 60
32 phoneController: TextInputController = new TextInputController() 34 phoneController: TextInputController = new TextInputController()
@@ -104,7 +106,8 @@ struct LoginPage { @@ -104,7 +106,8 @@ struct LoginPage {
104 } 106 }
105 107
106 build() { 108 build() {
107 - Stack() { 109 + Column(){
  110 + Stack() {
108 RelativeContainer() { 111 RelativeContainer() {
109 112
110 //注册内容 113 //注册内容
@@ -166,7 +169,7 @@ struct LoginPage { @@ -166,7 +169,7 @@ struct LoginPage {
166 .fontWeight(400) 169 .fontWeight(400)
167 .margin({ top: `${this.calcHeight(20)}` }) 170 .margin({ top: `${this.calcHeight(20)}` })
168 .lineHeight(`${this.calcHeight(50)}lpx`) 171 .lineHeight(`${this.calcHeight(50)}lpx`)
169 - .height(44) 172 + .height(44)
170 .textAlign(TextAlign.Center) 173 .textAlign(TextAlign.Center)
171 .width("100%") 174 .width("100%")
172 .backgroundColor("#ED2800") 175 .backgroundColor("#ED2800")
@@ -242,8 +245,12 @@ struct LoginPage { @@ -242,8 +245,12 @@ struct LoginPage {
242 .visibility(this.isProtocol ? Visibility.Visible : Visibility.None) 245 .visibility(this.isProtocol ? Visibility.Visible : Visibility.None)
243 246
244 }.width('100%') 247 }.width('100%')
245 - .height('100%') 248 + .height("100%")
246 .backgroundColor(Color.White) 249 .backgroundColor(Color.White)
  250 + }.width("100%")
  251 + .height("100%")
  252 + .padding({top:px2vp(this.topSafeHeight),bottom:px2vp(this.bottomSafeHeight)})
  253 +
247 } 254 }
248 255
249 @Builder 256 @Builder
@@ -10,6 +10,8 @@ const TAG = 'LoginProtocolWebview'; @@ -10,6 +10,8 @@ const TAG = 'LoginProtocolWebview';
10 @Entry 10 @Entry
11 @Component 11 @Component
12 struct LoginProtocolWebview { 12 struct LoginProtocolWebview {
  13 + @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
  14 + @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
13 webUrl: string = '' 15 webUrl: string = ''
14 webviewController: webview.WebviewController = new webview.WebviewController() 16 webviewController: webview.WebviewController = new webview.WebviewController()
15 userProtocol = "https://cdnpeoplefrontuat.aikan.pdnews.cn/rmrb/rmrb-protocol-zh-web/0.0.1/app/protocol-1005.html" 17 userProtocol = "https://cdnpeoplefrontuat.aikan.pdnews.cn/rmrb/rmrb-protocol-zh-web/0.0.1/app/protocol-1005.html"
@@ -55,38 +57,42 @@ struct LoginProtocolWebview { @@ -55,38 +57,42 @@ struct LoginProtocolWebview {
55 } 57 }
56 58
57 build() { 59 build() {
  60 + Column(){
  61 + Column() {
  62 + Row() {
  63 + Image($r("app.media.login_back_icon"))
  64 + .width(24)
  65 + .aspectRatio(1)
  66 + .onClick(() => {
  67 + if(this.webviewController.accessBackward()){
  68 + this.webviewController.backward()
  69 + return
  70 + }
  71 + router.back();
  72 + }).margin({ left: 16 })
  73 + Text()
  74 + }
  75 + .alignItems(VerticalAlign.Center)
  76 + .width('100%')
  77 + .height(44)
58 78
59 - Column() {  
60 - Row() {  
61 - Image($r("app.media.login_back_icon"))  
62 - .width(24)  
63 - .aspectRatio(1)  
64 - .onClick(() => {  
65 - if(this.webviewController.accessBackward()){  
66 - this.webviewController.backward()  
67 - return  
68 - }  
69 - router.back();  
70 - }).margin({ left: 16 })  
71 - Text() 79 + Web({ src: this.webUrl, controller: this.webviewController })
  80 + .domStorageAccess(true)
  81 + .databaseAccess(true)
  82 + .javaScriptAccess(true)
  83 + .zoomAccess(false)
  84 + .horizontalScrollBarAccess(false)
  85 + .verticalScrollBarAccess(false)
  86 + .onHttpErrorReceive((event) => {
  87 + //TODO 页面加载不成功的时候处理
  88 + Logger.info(TAG, 'onHttpErrorReceive event.request.getRequestUrl:' + event?.request.getRequestUrl());
  89 + Logger.info(TAG, 'onHttpErrorReceive event.response.getResponseCode:' + event?.response.getResponseCode());
  90 + })
  91 + .padding({bottom:this.contentID === "2" ? "40lpx" : 0 })
72 } 92 }
73 - .alignItems(VerticalAlign.Center)  
74 - .width('100%')  
75 - .height(44) 93 + }.width("100%")
  94 + .height("100%")
  95 + .padding({top:px2vp(this.topSafeHeight),bottom:px2vp(this.bottomSafeHeight)})
76 96
77 - Web({ src: this.webUrl, controller: this.webviewController })  
78 - .domStorageAccess(true)  
79 - .databaseAccess(true)  
80 - .javaScriptAccess(true)  
81 - .zoomAccess(false)  
82 - .horizontalScrollBarAccess(false)  
83 - .verticalScrollBarAccess(false)  
84 - .onHttpErrorReceive((event) => {  
85 - //TODO 页面加载不成功的时候处理  
86 - Logger.info(TAG, 'onHttpErrorReceive event.request.getRequestUrl:' + event?.request.getRequestUrl());  
87 - Logger.info(TAG, 'onHttpErrorReceive event.response.getResponseCode:' + event?.response.getResponseCode());  
88 - })  
89 - .padding({bottom:this.contentID === "2" ? "40lpx" : 0 })  
90 - }  
91 } 97 }
92 } 98 }
@@ -12,6 +12,8 @@ import { TrackingPageBrowse, TrackConstants, TrackingButton } from 'wdTracking/I @@ -12,6 +12,8 @@ import { TrackingPageBrowse, TrackConstants, TrackingButton } from 'wdTracking/I
12 @Entry 12 @Entry
13 @Component 13 @Component
14 struct ModifyPasswordPage { 14 struct ModifyPasswordPage {
  15 + @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
  16 + @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
15 password_old: string = ''; 17 password_old: string = '';
16 password_new: string = ''; 18 password_new: string = '';
17 password_new_repeat: string = ''; 19 password_new_repeat: string = '';
@@ -64,9 +66,13 @@ struct ModifyPasswordPage { @@ -64,9 +66,13 @@ struct ModifyPasswordPage {
64 66
65 build() { 67 build() {
66 Column(){ 68 Column(){
67 - this.TitleBackComponent('')  
68 - this.ModifyPasswordLayout()  
69 - } 69 + Column(){
  70 + this.TitleBackComponent('')
  71 + this.ModifyPasswordLayout()
  72 + }
  73 + }.width("100%")
  74 + .height("100%")
  75 + .padding({top:px2vp(this.topSafeHeight),bottom:px2vp(this.bottomSafeHeight)})
70 76
71 } 77 }
72 78
@@ -77,6 +77,8 @@ export struct SettingPasswordPage { @@ -77,6 +77,8 @@ export struct SettingPasswordPage {
77 @StorageProp('currentBreakpoint') @Watch("currentChanged")currentBreakpoint: string = 'sm'; 77 @StorageProp('currentBreakpoint') @Watch("currentChanged")currentBreakpoint: string = 'sm';
78 private breakpointSystem = new BreakpointSystem(); 78 private breakpointSystem = new BreakpointSystem();
79 @State percent:number = 1 79 @State percent:number = 1
  80 + @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
  81 + @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
80 82
81 currentChanged(){ 83 currentChanged(){
82 if(this.currentBreakpoint == "md" || this.currentBreakpoint == "lg"){ 84 if(this.currentBreakpoint == "md" || this.currentBreakpoint == "lg"){
@@ -169,9 +171,14 @@ export struct SettingPasswordPage { @@ -169,9 +171,14 @@ export struct SettingPasswordPage {
169 171
170 build() { 172 build() {
171 Column(){ 173 Column(){
172 - this.TitleBackComponent('')  
173 - this.settingList() //滑动区域  
174 - } 174 + Column(){
  175 + this.TitleBackComponent('')
  176 + this.settingList() //滑动区域
  177 + }
  178 + }.width("100%")
  179 + .height("100%")
  180 + .padding({top:px2vp(this.topSafeHeight),bottom:px2vp(this.bottomSafeHeight)})
  181 +
175 } 182 }
176 183
177 @Builder TitleBackComponent(title:string){ 184 @Builder TitleBackComponent(title:string){
@@ -24,6 +24,8 @@ struct VerifyPhoneNumberPage { @@ -24,6 +24,8 @@ struct VerifyPhoneNumberPage {
24 isFirst:boolean=true//是否第一次获取验证码 24 isFirst:boolean=true//是否第一次获取验证码
25 pageShowTime:number = 0; 25 pageShowTime:number = 0;
26 pageHideTime:number = 0; 26 pageHideTime:number = 0;
  27 + @State topSafeHeight: number = AppStorage.get<number>('topSafeHeight') || 0
  28 + @State bottomSafeHeight: number = AppStorage.get<number>('bottomSafeHeight') || 0
27 29
28 onCodeSend() { 30 onCodeSend() {
29 if (this.isCodeSend) { 31 if (this.isCodeSend) {
@@ -60,101 +62,105 @@ struct VerifyPhoneNumberPage { @@ -60,101 +62,105 @@ struct VerifyPhoneNumberPage {
60 62
61 63
62 build() { 64 build() {
63 - Column() {  
64 - Image($r('app.media.login_back_icon')).width(24).height(24).margin({ left: 15, top: 10 }).onClick(() => {  
65 - router.back()  
66 - })  
67 -  
68 - Text(this.pageTitle).fontSize(22).fontColor('#333333').fontWeight(FontWeight.Bold).margin({ left: 25, top: 112 })  
69 - 65 + Column(){
70 Column() { 66 Column() {
71 - TextInput({ text: this.securityPhone(this.phoneContent) })  
72 - .placeholderColor("#CCCCCC")  
73 - .fontSize(16)  
74 - .height(48)  
75 - .maxLength(11)  
76 - .margin({ top: 36 })  
77 - .backgroundColor("#F5F5F5")  
78 - .borderRadius(4)  
79 - .enabled(false)  
80 - .type(InputType.PhoneNumber)  
81 - .onChange((content) => {  
82 - this.phoneContent = content  
83 - this.isSubmit = (this.phoneContent.length >= 11 && this.codeContent.length >= 4)  
84 - if (content.length >= 11) {  
85 - this.codeBtnState = true  
86 - } else {  
87 - this.codeBtnState = false  
88 - }  
89 - }) 67 + Image($r('app.media.login_back_icon')).width(24).height(24).margin({ left: 15, top: 10 }).onClick(() => {
  68 + router.back()
  69 + })
90 70
91 - Row() {  
92 - TextInput({ text: this.codeContent,placeholder: "验证码" }) 71 + Text(this.pageTitle).fontSize(22).fontColor('#333333').fontWeight(FontWeight.Bold).margin({ left: 25, top: 112 })
  72 +
  73 + Column() {
  74 + TextInput({ text: this.securityPhone(this.phoneContent) })
93 .placeholderColor("#CCCCCC") 75 .placeholderColor("#CCCCCC")
94 - .layoutWeight(1)  
95 .fontSize(16) 76 .fontSize(16)
96 .height(48) 77 .height(48)
97 - .type(InputType.Number)  
98 - .fontColor("#222222")  
99 - .backgroundColor("#00000000")  
100 - .borderRadius({ topLeft: 4, bottomLeft: 4 })  
101 - .onChange((value) => {  
102 - this.codeContent = value 78 + .maxLength(11)
  79 + .margin({ top: 36 })
  80 + .backgroundColor("#F5F5F5")
  81 + .borderRadius(4)
  82 + .enabled(false)
  83 + .type(InputType.PhoneNumber)
  84 + .onChange((content) => {
  85 + this.phoneContent = content
103 this.isSubmit = (this.phoneContent.length >= 11 && this.codeContent.length >= 4) 86 this.isSubmit = (this.phoneContent.length >= 11 && this.codeContent.length >= 4)
104 - })  
105 -  
106 - Text(this.codeStateSuccess ? this.timeCount + "s" : this.isFirst?"发送验证码":'重新获取')  
107 - .fontColor(this.codeBtnState?'#ED2800':'#80ED2800')  
108 - .width(110)  
109 - .fontSize(14)  
110 - .fontWeight( FontWeight.Bold)  
111 - .height(48)  
112 - .textAlign(TextAlign.Center)  
113 - .enabled(this.codeStateSuccess?false:true)  
114 - .onClick(() => {  
115 - if (this.phoneContent.length < 11) {  
116 - return 87 + if (content.length >= 11) {
  88 + this.codeBtnState = true
  89 + } else {
  90 + this.codeBtnState = false
117 } 91 }
118 -  
119 - let currentTime = DateTimeUtils.getTimeStamp()  
120 - if (currentTime - this.lastTime < 500) {  
121 - return  
122 - }  
123 - this.lastTime = currentTime;  
124 - this.isCodeSend = true  
125 -  
126 }) 92 })
127 93
128 -  
129 - }.margin({ top: 12 })  
130 - .height(48)  
131 - .alignItems(VerticalAlign.Center)  
132 - .justifyContent(FlexAlign.Start)  
133 - .backgroundImage($r('app.media.code_login_bg'))  
134 - .backgroundImageSize({width:'100%',height:48}) 94 + Row() {
  95 + TextInput({ text: this.codeContent,placeholder: "验证码" })
  96 + .placeholderColor("#CCCCCC")
  97 + .layoutWeight(1)
  98 + .fontSize(16)
  99 + .height(48)
  100 + .type(InputType.Number)
  101 + .fontColor("#222222")
  102 + .backgroundColor("#00000000")
  103 + .borderRadius({ topLeft: 4, bottomLeft: 4 })
  104 + .onChange((value) => {
  105 + this.codeContent = value
  106 + this.isSubmit = (this.phoneContent.length >= 11 && this.codeContent.length >= 4)
  107 + })
  108 +
  109 + Text(this.codeStateSuccess ? this.timeCount + "s" : this.isFirst?"发送验证码":'重新获取')
  110 + .fontColor(this.codeBtnState?'#ED2800':'#80ED2800')
  111 + .width(110)
  112 + .fontSize(14)
  113 + .fontWeight( FontWeight.Bold)
  114 + .height(48)
  115 + .textAlign(TextAlign.Center)
  116 + .enabled(this.codeStateSuccess?false:true)
  117 + .onClick(() => {
  118 + if (this.phoneContent.length < 11) {
  119 + return
  120 + }
  121 +
  122 + let currentTime = DateTimeUtils.getTimeStamp()
  123 + if (currentTime - this.lastTime < 500) {
  124 + return
  125 + }
  126 + this.lastTime = currentTime;
  127 + this.isCodeSend = true
  128 +
  129 + })
  130 +
  131 +
  132 + }.margin({ top: 12 })
  133 + .height(48)
  134 + .alignItems(VerticalAlign.Center)
  135 + .justifyContent(FlexAlign.Start)
  136 + .backgroundImage($r('app.media.code_login_bg'))
  137 + .backgroundImageSize({width:'100%',height:48})
135 138
136 139
137 140
138 - }.width('100%').padding({ left: 25, right: 25 }) 141 + }.width('100%').padding({ left: 25, right: 25 })
139 142
140 - Row() {  
141 - Text("确认")  
142 - .layoutWeight(1)  
143 - .fontColor(this.isSubmit ?"#FFFFFFFF":"#66FFFFFF")  
144 - .borderRadius(4)  
145 - .fontSize(18)  
146 - .textAlign(TextAlign.Center)  
147 - .fontWeight(FontWeight.Medium)  
148 - .margin({ top: 26 })  
149 - .height(44)  
150 - .backgroundColor(this.isSubmit ?"#ED2800":"#99ED2800")  
151 - .enabled(this.isSubmit ? true : false)  
152 - .onClick(() => {  
153 - this.checkVerifyCode()  
154 - })  
155 - }.padding({ left: 25, right: 25 }).width('100%') 143 + Row() {
  144 + Text("确认")
  145 + .layoutWeight(1)
  146 + .fontColor(this.isSubmit ?"#FFFFFFFF":"#66FFFFFF")
  147 + .borderRadius(4)
  148 + .fontSize(18)
  149 + .textAlign(TextAlign.Center)
  150 + .fontWeight(FontWeight.Medium)
  151 + .margin({ top: 26 })
  152 + .height(44)
  153 + .backgroundColor(this.isSubmit ?"#ED2800":"#99ED2800")
  154 + .enabled(this.isSubmit ? true : false)
  155 + .onClick(() => {
  156 + this.checkVerifyCode()
  157 + })
  158 + }.padding({ left: 25, right: 25 }).width('100%')
156 159
157 - }.width('100%').height('100%').alignItems(HorizontalAlign.Start) 160 + }.width('100%').height('100%').alignItems(HorizontalAlign.Start)
  161 + }.width("100%")
  162 + .height("100%")
  163 + .padding({top:px2vp(this.topSafeHeight),bottom:px2vp(this.bottomSafeHeight)})
158 } 164 }
159 165
160 //发送验证码 166 //发送验证码
1 { 1 {
2 "src": [ 2 "src": [
3 - "pages/Index",  
4 "pages/login/LoginPage", 3 "pages/login/LoginPage",
5 "pages/login/ForgetPasswordPage", 4 "pages/login/ForgetPasswordPage",
6 "pages/login/LoginProtocolWebview", 5 "pages/login/LoginProtocolWebview",