feat: 新增换绑手机号页面UI

commons/basic/src/main/ets/utils/arkts/utils/YTRouter.ets

@@ -121,6 +121,11 @@ class YTRouter extends NavPathStack {
   router2BottomDialog(param: NavDiaLogModel, callBack?: Callback<PopInfo>) {
     this.pushPathByName('DiaLogSheetComp', param, callBack, false)
   }
+
+  // 换绑手机号页面
+  router2ChangePhonePage(){
+    this.pushPathByName('ChangePhonePage', null)
+  }
 }
 
 export const yTRouter = YTRouter.getInstance()

features/feature/src/main/ets/components/BuilderIndex.ets

@@ -116,4 +116,4 @@ export function buttonComp(text: string, width: Length, padding: number, font: C
   .border({width: 2, color: '#FF000000'})
   .padding({top: padding, bottom: padding})
   .onClick(onClick)
-}
+}

features/user/src/main/ets/pages/ChangePhonePage.ets

@@ -0,0 +1,122 @@
+import { IBestToast, RouterPage, YTAvoid, YTHeader } from 'basic'
+
+@ComponentV2
+@RouterPage
+struct ChangePhonePage {
+  @Local phoneNumber: string = ''
+  @Local time: number = 61
+  @Local smsCode: string = ''
+  @Local safeBottom: number = AppStorage.get(YTAvoid.SAFE_BOTTOM_KEY) as number
+
+  setIntervalId: number = -1
+
+  // 发送验证码方法
+  SendSmsCode(){
+    if (this.phoneNumber?.match(new RegExp('^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\\d{8}$'))){
+      this.time = 60
+      this.setIntervalId = setInterval(() => {
+        this.time--
+        if (this.time < 1) {
+          this.time = 61
+          clearInterval(this.setIntervalId)
+        }
+      }, 1000)
+    } else {
+      IBestToast.show({ message: '请输入正确的手机号' })
+    }
+  }
+
+  build() {
+    NavDestination() {
+      Column() {
+        YTHeader({ defaultStyle: {title: '换绑手机号'}, bgc: Color.White })
+
+        Column(){
+          Column(){
+            Row({space: 5}){
+              Text('手机号：')
+                .fontSize(14)
+                .fontWeight(500)
+                .fontColor('#FF000000')
+              TextInput({placeholder: '请输入手机号'})
+                .padding(0)
+                .fontSize(14)
+                .borderRadius(0)
+                .layoutWeight(1)
+                .border({width: 0})
+                .placeholderFont({size: 14})
+                .type(InputType.PhoneNumber)
+                .backgroundColor(Color.Transparent)
+              Text(this.time == 61 ? '获取验证码' : this.time + '后重新发送')
+                .fontSize(14)
+                .fontColor(Color.Black)
+                .onClick(() => { this.SendSmsCode() })
+                .enabled(this.time == 61)
+            }.width('100%')
+
+            Divider().width('100%').height(1)
+              .backgroundColor('#FFE0E0E0').margin({top: 15, bottom: 15})
+
+            Row({space: 5}){
+              Text('验证码：')
+                .fontSize(14)
+                .fontWeight(500)
+                .fontColor('#FF000000')
+              TextInput({placeholder: '请输入验证码'})
+                .padding(0)
+                .fontSize(14)
+                .borderRadius(0)
+                .layoutWeight(1)
+                .border({width: 0})
+                .placeholderFont({size: 14})
+                .type(InputType.PhoneNumber)
+                .backgroundColor(Color.Transparent)
+            }.width('100%')
+          }
+          .padding(15)
+          .width('100%')
+          .borderRadius(8)
+          .backgroundColor(Color.White)
+
+          Blank().height(80)
+
+          this.buttonComp('确定', '100%', 10, () => {
+
+          })
+        }
+        .width('100%')
+        .layoutWeight(1)
+        .padding({top: 22, left: 17, right: 17, bottom: this.safeBottom})
+      }.width('100%')
+      .height('100%')
+      .backgroundColor('#FFF7F9FA')
+    }
+    .hideTitleBar(true)
+  }
+
+  // 按钮
+  @Builder
+  buttonComp(text: string, width: Length, padding: number ,onClick: () => void){
+  Row(){
+    Text(text)
+      .fontSize(16)
+      .fontWeight(500)
+      .fontColor('#ff000000')
+  }
+  .width(width)
+  .borderRadius(24.5)
+  .backgroundColor('#FFFECF2F')
+  .justifyContent(FlexAlign.Center)
+  .border({width: 2, color: '#FF000000'})
+  .padding({top: padding, bottom: padding})
+  .onClick(onClick)
+}
+
+}
+
+
+
+@Builder
+function ChangePhoneBuilder() {
+  ChangePhonePage()
+}

features/user/src/main/ets/pages/SettingPage.ets

@@ -38,6 +38,7 @@ struct SettingPage {
       message: this.userInfo.getPhoneNumber() ?? '',
       click: () => {
         // this.openChangeBuilder()
+        yTRouter.router2ChangePhonePage()
       }
     }
   ]

features/user/src/main/resources/base/profile/router_map.json

@@ -49,6 +49,11 @@
       "data": {
         "description": "this is DelPhotoPage"
       }
+    },
+    {
+      "name": "ChangePhonePage",
+      "pageSourceFile": "src/main/ets/pages/ChangePhonePage.ets",
+      "buildFunction": "ChangePhoneBuilder"
     }
   ]
 }