yangchenggong1_wd

desc:抽离 验证手机号页面

@@ -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 }