Showing
5 changed files
with
222 additions
and
29 deletions
| @@ -68,6 +68,7 @@ export class WDRouterPage { | @@ -68,6 +68,7 @@ export class WDRouterPage { | ||
| 68 | static loginPage = new WDRouterPage("wdLogin", "ets/pages/login/LoginPage"); | 68 | static loginPage = new WDRouterPage("wdLogin", "ets/pages/login/LoginPage"); |
| 69 | static oneKeyLoginPage = new WDRouterPage("wdLogin", "ets/pages/login/OneKeyLoginPage"); | 69 | static oneKeyLoginPage = new WDRouterPage("wdLogin", "ets/pages/login/OneKeyLoginPage"); |
| 70 | static forgetPasswordPage = new WDRouterPage("wdLogin", "ets/pages/login/ForgetPasswordPage"); | 70 | static forgetPasswordPage = new WDRouterPage("wdLogin", "ets/pages/login/ForgetPasswordPage"); |
| 71 | + static verifyPhoneNumberPage = new WDRouterPage("wdLogin", "ets/pages/login/VerifyPhoneNumberPage"); | ||
| 71 | static changeBindPhonePage = new WDRouterPage("wdLogin", "ets/pages/login/ChangeBindPhonePage"); | 72 | static changeBindPhonePage = new WDRouterPage("wdLogin", "ets/pages/login/ChangeBindPhonePage"); |
| 72 | static modifyPasswordPage = new WDRouterPage("wdLogin", "ets/pages/login/ModifyPasswordPage"); | 73 | static modifyPasswordPage = new WDRouterPage("wdLogin", "ets/pages/login/ModifyPasswordPage"); |
| 73 | //我的 预约 | 74 | //我的 预约 |
| @@ -213,8 +213,7 @@ export struct AccountAndSecurityLayout { | @@ -213,8 +213,7 @@ export struct AccountAndSecurityLayout { | ||
| 213 | WDRouterRule.jumpWithPage(WDRouterPage.modifyPasswordPage) | 213 | WDRouterRule.jumpWithPage(WDRouterPage.modifyPasswordPage) |
| 214 | }else{ | 214 | }else{ |
| 215 | //设置密码 | 215 | //设置密码 |
| 216 | - let pageType = {'pageType': 1} as Record<string, number>; | ||
| 217 | - WDRouterRule.jumpWithPage(WDRouterPage.forgetPasswordPage, pageType) | 216 | + WDRouterRule.jumpWithPage(WDRouterPage.verifyPhoneNumberPage) |
| 218 | } | 217 | } |
| 219 | }else if (index == 3) { | 218 | }else if (index == 3) { |
| 220 | trackButtonClick("accountManagementPageAccountCancellation") | 219 | trackButtonClick("accountManagementPageAccountCancellation") |
| @@ -10,7 +10,7 @@ export struct LoginInputComponent { | @@ -10,7 +10,7 @@ export struct LoginInputComponent { | ||
| 10 | @Link isCodeSend: boolean //验证码控件是否点击 默认没有 发送接口 | 10 | @Link isCodeSend: boolean //验证码控件是否点击 默认没有 发送接口 |
| 11 | @Link isSubmit: boolean //是否可以提交 | 11 | @Link isSubmit: boolean //是否可以提交 |
| 12 | isFirst:boolean=true//是否第一次获取验证码 | 12 | isFirst:boolean=true//是否第一次获取验证码 |
| 13 | - pageType?:number; //0、登录->忘记密码 1、设置->重置密码 3、设置->更换手机号页面2 | 13 | + pageType?:number; //0、登录->忘记密码 3、设置->更换手机号页面2 |
| 14 | lastTime: number = 0 | 14 | lastTime: number = 0 |
| 15 | @Link @Watch('startCount') codeStateSuccess: boolean //验证码获取成功与否回调 成功显示倒计时 | 15 | @Link @Watch('startCount') codeStateSuccess: boolean //验证码获取成功与否回调 成功显示倒计时 |
| 16 | @Watch('onCheckChange') @Prop protocolState: boolean = false //协议勾选状态 | 16 | @Watch('onCheckChange') @Prop protocolState: boolean = false //协议勾选状态 |
| @@ -33,9 +33,6 @@ export struct LoginInputComponent { | @@ -33,9 +33,6 @@ export struct LoginInputComponent { | ||
| 33 | } | 33 | } |
| 34 | 34 | ||
| 35 | async aboutToAppear(){ | 35 | async aboutToAppear(){ |
| 36 | - if (this.pageType == 1 ) { | ||
| 37 | - this.phoneContent = await SPHelper.default.get(SpConstants.USER_PHONE,"") as string; | ||
| 38 | - } | ||
| 39 | if(this.pageType == 0 ){ | 36 | if(this.pageType == 0 ){ |
| 40 | let phone = await SPHelper.default.get(SpConstants.USER_PHONE,"") as string | 37 | let phone = await SPHelper.default.get(SpConstants.USER_PHONE,"") as string |
| 41 | if(StringUtils.isNotEmpty(phone)){ | 38 | if(StringUtils.isNotEmpty(phone)){ |
| @@ -43,29 +40,9 @@ export struct LoginInputComponent { | @@ -43,29 +40,9 @@ export struct LoginInputComponent { | ||
| 43 | } | 40 | } |
| 44 | } | 41 | } |
| 45 | } | 42 | } |
| 43 | + | ||
| 46 | @Builder | 44 | @Builder |
| 47 | addCodeLayout() { | 45 | addCodeLayout() { |
| 48 | - if (this.pageType == 1){ | ||
| 49 | - TextInput({ text: this.securityPhone(this.phoneContent) }) | ||
| 50 | - .placeholderColor("#CCCCCC") | ||
| 51 | - .fontSize(16) | ||
| 52 | - .height(48) | ||
| 53 | - .maxLength(11) | ||
| 54 | - .margin({ top: 36 }) | ||
| 55 | - .backgroundColor("#F5F5F5") | ||
| 56 | - .borderRadius(4) | ||
| 57 | - .enabled(false) | ||
| 58 | - .type(InputType.PhoneNumber) | ||
| 59 | - .onChange((content) => { | ||
| 60 | - this.phoneContent = content | ||
| 61 | - this.isSubmit = (this.phoneContent.length >= 11 && this.codeContent.length >= 4) | ||
| 62 | - if (content.length >= 11) { | ||
| 63 | - this.codeBtnState = true | ||
| 64 | - } else { | ||
| 65 | - this.codeBtnState = false | ||
| 66 | - } | ||
| 67 | - }) | ||
| 68 | - }else{ | ||
| 69 | //修改密码 里面的 忘记密码(已登录) | 46 | //修改密码 里面的 忘记密码(已登录) |
| 70 | if(StringUtils.isNotEmpty(this.phoneContent) && this.phoneContent.indexOf("****")!=-1 && this.pageType == 0){ | 47 | if(StringUtils.isNotEmpty(this.phoneContent) && this.phoneContent.indexOf("****")!=-1 && this.pageType == 0){ |
| 71 | TextInput({ text: this.securityPhone(this.phoneContent) }) | 48 | TextInput({ text: this.securityPhone(this.phoneContent) }) |
| @@ -115,7 +92,6 @@ export struct LoginInputComponent { | @@ -115,7 +92,6 @@ export struct LoginInputComponent { | ||
| 115 | } | 92 | } |
| 116 | }) | 93 | }) |
| 117 | } | 94 | } |
| 118 | - } | ||
| 119 | 95 | ||
| 120 | 96 | ||
| 121 | Row() { | 97 | Row() { |
| 1 | +import { CustomToast, DateTimeUtils, Logger, SPHelper } from 'wdKit/Index' | ||
| 2 | +import { WDRouterRule, WDRouterPage } from 'wdRouter/Index' | ||
| 3 | +import { LoginViewModel } from './LoginViewModel' | ||
| 4 | +import { SettingPasswordParams } from './SettingPasswordLayout' | ||
| 5 | +import { router } from '@kit.ArkUI' | ||
| 6 | +import { SpConstants } from 'wdConstant/Index' | ||
| 7 | + | ||
| 8 | +const TAG = 'VerifyPhoneNumberPage' | ||
| 9 | +//设置密码(第一次) 验证当前手机号 页面 | ||
| 10 | +@Entry | ||
| 11 | +@Component | ||
| 12 | +struct VerifyPhoneNumberPage { | ||
| 13 | + @State phoneContent: string = '' | ||
| 14 | + @State codeContent: string = '' | ||
| 15 | + @State isSubmit: boolean = false //是否可以提交 默认不可以 | ||
| 16 | + loginViewModel: LoginViewModel = new LoginViewModel() | ||
| 17 | + @State @Watch('onCodeSend') isCodeSend: boolean = false //验证码点击发送事件 | ||
| 18 | + @State pageTitle:string = '验证当前手机号'; | ||
| 19 | + @State @Watch('startCount') codeStateSuccess:boolean=false | ||
| 20 | + lastTime: number = 0 | ||
| 21 | + @State codeBtnState: boolean = false | ||
| 22 | + @State timeCount: number = 60 | ||
| 23 | + isFirst:boolean=true//是否第一次获取验证码 | ||
| 24 | + | ||
| 25 | + onCodeSend() { | ||
| 26 | + if (this.isCodeSend) { | ||
| 27 | + this.sendVerifyCode() | ||
| 28 | + } | ||
| 29 | + } | ||
| 30 | + | ||
| 31 | + async aboutToAppear(): Promise<void> { | ||
| 32 | + this.phoneContent = await SPHelper.default.get(SpConstants.USER_PHONE,"") as string; | ||
| 33 | + } | ||
| 34 | + | ||
| 35 | + @State toastText:string = "" | ||
| 36 | + dialogToast: CustomDialogController = new CustomDialogController({ | ||
| 37 | + builder: CustomToast({ | ||
| 38 | + msg: this.toastText, | ||
| 39 | + }), | ||
| 40 | + autoCancel: false, | ||
| 41 | + alignment: DialogAlignment.Center, | ||
| 42 | + customStyle: true, | ||
| 43 | + maskColor:"#00000000" | ||
| 44 | + }) | ||
| 45 | + | ||
| 46 | + | ||
| 47 | + build() { | ||
| 48 | + Column() { | ||
| 49 | + Image($r('app.media.login_back_icon')).width(24).height(24).margin({ left: 15, top: 10 }).onClick(() => { | ||
| 50 | + router.back() | ||
| 51 | + }) | ||
| 52 | + | ||
| 53 | + Text(this.pageTitle).fontSize(22).fontColor('#333333').fontWeight(FontWeight.Bold).margin({ left: 25, top: 112 }) | ||
| 54 | + | ||
| 55 | + Column() { | ||
| 56 | + TextInput({ text: this.securityPhone(this.phoneContent) }) | ||
| 57 | + .placeholderColor("#CCCCCC") | ||
| 58 | + .fontSize(16) | ||
| 59 | + .height(48) | ||
| 60 | + .maxLength(11) | ||
| 61 | + .margin({ top: 36 }) | ||
| 62 | + .backgroundColor("#F5F5F5") | ||
| 63 | + .borderRadius(4) | ||
| 64 | + .enabled(false) | ||
| 65 | + .type(InputType.PhoneNumber) | ||
| 66 | + .onChange((content) => { | ||
| 67 | + this.phoneContent = content | ||
| 68 | + this.isSubmit = (this.phoneContent.length >= 11 && this.codeContent.length >= 4) | ||
| 69 | + if (content.length >= 11) { | ||
| 70 | + this.codeBtnState = true | ||
| 71 | + } else { | ||
| 72 | + this.codeBtnState = false | ||
| 73 | + } | ||
| 74 | + }) | ||
| 75 | + | ||
| 76 | + Row() { | ||
| 77 | + TextInput({ text: this.codeContent,placeholder: "验证码" }) | ||
| 78 | + .placeholderColor("#CCCCCC") | ||
| 79 | + .layoutWeight(1) | ||
| 80 | + .fontSize(16) | ||
| 81 | + .height(48) | ||
| 82 | + .type(InputType.Number) | ||
| 83 | + .fontColor("#222222") | ||
| 84 | + .backgroundColor("#00000000") | ||
| 85 | + .borderRadius({ topLeft: 4, bottomLeft: 4 }) | ||
| 86 | + .onChange((value) => { | ||
| 87 | + this.codeContent = value | ||
| 88 | + this.isSubmit = (this.phoneContent.length >= 11 && this.codeContent.length >= 4) | ||
| 89 | + }) | ||
| 90 | + | ||
| 91 | + Text(this.codeStateSuccess ? this.timeCount + "s" : this.isFirst?"发送验证码":'重新获取') | ||
| 92 | + .fontColor(this.codeBtnState?'#ED2800':'#80ED2800') | ||
| 93 | + .width(110) | ||
| 94 | + .fontSize(14) | ||
| 95 | + .fontWeight( FontWeight.Bold) | ||
| 96 | + .height(48) | ||
| 97 | + .textAlign(TextAlign.Center) | ||
| 98 | + .enabled(this.codeStateSuccess?false:true) | ||
| 99 | + .onClick(() => { | ||
| 100 | + if (this.phoneContent.length < 11) { | ||
| 101 | + return | ||
| 102 | + } | ||
| 103 | + | ||
| 104 | + let currentTime = DateTimeUtils.getTimeStamp() | ||
| 105 | + if (currentTime - this.lastTime < 500) { | ||
| 106 | + return | ||
| 107 | + } | ||
| 108 | + this.lastTime = currentTime; | ||
| 109 | + this.isCodeSend = true | ||
| 110 | + | ||
| 111 | + }) | ||
| 112 | + | ||
| 113 | + | ||
| 114 | + }.margin({ top: 12 }) | ||
| 115 | + .height(48) | ||
| 116 | + .alignItems(VerticalAlign.Center) | ||
| 117 | + .justifyContent(FlexAlign.Start) | ||
| 118 | + .backgroundImage($r('app.media.code_login_bg')) | ||
| 119 | + .backgroundImageSize({width:'100%',height:48}) | ||
| 120 | + | ||
| 121 | + | ||
| 122 | + | ||
| 123 | + }.width('100%').padding({ left: 25, right: 25 }) | ||
| 124 | + | ||
| 125 | + Row() { | ||
| 126 | + Text("确认") | ||
| 127 | + .layoutWeight(1) | ||
| 128 | + .fontColor(this.isSubmit ?"#FFFFFFFF":"#66FFFFFF") | ||
| 129 | + .borderRadius(4) | ||
| 130 | + .fontSize(18) | ||
| 131 | + .textAlign(TextAlign.Center) | ||
| 132 | + .fontWeight(FontWeight.Medium) | ||
| 133 | + .margin({ top: 26 }) | ||
| 134 | + .height(44) | ||
| 135 | + .backgroundColor(this.isSubmit ?"#ED2800":"#99ED2800") | ||
| 136 | + .enabled(this.isSubmit ? true : false) | ||
| 137 | + .onClick(() => { | ||
| 138 | + this.checkVerifyCode() | ||
| 139 | + }) | ||
| 140 | + }.padding({ left: 25, right: 25 }).width('100%') | ||
| 141 | + | ||
| 142 | + }.width('100%').height('100%').alignItems(HorizontalAlign.Start) | ||
| 143 | + } | ||
| 144 | + | ||
| 145 | + //发送验证码 | ||
| 146 | + sendVerifyCode() { | ||
| 147 | + if (this.isEmpty(this.phoneContent)) { | ||
| 148 | + return | ||
| 149 | + } | ||
| 150 | + | ||
| 151 | + this.loginViewModel.sendVerifyCodeByToken().then(()=>{ | ||
| 152 | + this.showToastTip("已发送") | ||
| 153 | + this.codeStateSuccess=true | ||
| 154 | + this.isCodeSend=false | ||
| 155 | + }).catch((message: string)=>{ | ||
| 156 | + this.showToastTip(message) | ||
| 157 | + this.codeStateSuccess=false | ||
| 158 | + this.isCodeSend=false | ||
| 159 | + }) | ||
| 160 | + } | ||
| 161 | + | ||
| 162 | + | ||
| 163 | + //校验验证码 | ||
| 164 | + checkVerifyCode() { | ||
| 165 | + if (!this.isSubmit) { | ||
| 166 | + return | ||
| 167 | + } | ||
| 168 | + if (this.isEmpty(this.phoneContent)) { | ||
| 169 | + return | ||
| 170 | + } | ||
| 171 | + if (this.isEmpty(this.codeContent)) { | ||
| 172 | + return | ||
| 173 | + } | ||
| 174 | + | ||
| 175 | + this.loginViewModel.checkVerifyCodeByToken(this.codeContent).then(()=>{ | ||
| 176 | + let params: SettingPasswordParams = { | ||
| 177 | + pageID:'1', | ||
| 178 | + phoneContent:this.phoneContent, | ||
| 179 | + codeContent:this.codeContent, | ||
| 180 | + pageType:1 | ||
| 181 | + } | ||
| 182 | + WDRouterRule.jumpWithPage(WDRouterPage.settingPasswordPage, params) | ||
| 183 | + }).catch((message: string)=>{ | ||
| 184 | + this.showToastTip(message) | ||
| 185 | + }) | ||
| 186 | + } | ||
| 187 | + | ||
| 188 | + isEmpty(obj: undefined|null|string): boolean { | ||
| 189 | + return (obj == undefined || obj == null || obj == ''); | ||
| 190 | + } | ||
| 191 | + | ||
| 192 | + showToastTip(msg:string){ | ||
| 193 | + this.toastText = msg | ||
| 194 | + this.dialogToast.open() | ||
| 195 | + } | ||
| 196 | + | ||
| 197 | + securityPhone(phoneNum:string):string{ | ||
| 198 | + let securityNum:string; | ||
| 199 | + let needSecurityString = phoneNum.substring(3, phoneNum.length - 4); | ||
| 200 | + securityNum = phoneNum.replace(needSecurityString,'****') | ||
| 201 | + return securityNum; | ||
| 202 | + } | ||
| 203 | + | ||
| 204 | + startCount() { | ||
| 205 | + this.isFirst = false | ||
| 206 | + let time = setInterval(() => { | ||
| 207 | + Logger.debug("倒计时:" + this.timeCount) | ||
| 208 | + this.timeCount-- | ||
| 209 | + if (this.timeCount < 1) { | ||
| 210 | + this.codeStateSuccess = false | ||
| 211 | + this.timeCount = 60 | ||
| 212 | + clearInterval(time) | ||
| 213 | + } | ||
| 214 | + }, 1000) | ||
| 215 | + } | ||
| 216 | +} |
| @@ -9,6 +9,7 @@ | @@ -9,6 +9,7 @@ | ||
| 9 | "pages/guide/GuidePages", | 9 | "pages/guide/GuidePages", |
| 10 | "pages/login/OneKeyLoginPage", | 10 | "pages/login/OneKeyLoginPage", |
| 11 | "pages/login/ModifyPasswordPage", | 11 | "pages/login/ModifyPasswordPage", |
| 12 | - "pages/login/ChangeBindPhonePage" | 12 | + "pages/login/ChangeBindPhonePage", |
| 13 | + "pages/login/VerifyPhoneNumberPage" | ||
| 13 | ] | 14 | ] |
| 14 | } | 15 | } |
-
Please register or login to post a comment