PersistentStorage实现手机号登录匹配

输入手机号,下方会自动出现列表自动匹配之前的手机号。

HarmonyOS
2024-05-26 14:21:55
浏览
收藏 0
回答 1
待解决
回答 1
按赞同
/
按时间
橱柜里的蛙

核心代码解释

PersistentStorage.persistProp('historyList', [ 
  "11111111111", 
  "1111111111", 
  "11111111", 
  "1111111" 
]); 
 
@Entry 
@Component 
struct Index { 
  @State @Watch("numberChange") numberInputValue: string = "" 
  @State passwordInputValue: string = "" 
  numberController: TextInputController = new TextInputController() 
  passwordController: TextInputController = new TextInputController() 
  @StorageLink("historyList") historyList: string[] = [] 
  @State showSearchList: string[] = [] 
 
  numberChange() { 
    if (this.numberInputValue) { 
      this.showSearchList = this.historyList.filter((item: string) => { 
        return item.includes(this.numberInputValue) 
      }) 
 
      console.log(this.showSearchList.toString()) 
    } 
  } 
 
  changeColor() { 
    if (this.numberInputValue) { 
      let replaceReg = new RegExp(this.numberInputValue, "ig"); 
      let replaceString: string = `<span style="color:red">${this.numberInputValue}</span>`; 
    } 
  } 
 
  build() { 
    Column() { 
      Text("欢迎登录").fontSize(24).margin({ bottom: 40 }) 
      Stack({ alignContent: Alignment.End }) { 
        TextInput({ text: $$this.numberInputValue, placeholder: "请输入登录手机号", controller: this.numberController }) 
          .type(InputType.PhoneNumber) 
        Image($r("sys.media.ohos_ic_bottomsheet_close")).width(20).height(20) 
          .margin({ right: 10 }) 
          .onClick(() => { 
            this.numberInputValue = "" 
          }) 
      }.margin({ left: 16, right: 16 }) 
 
      if (this.numberInputValue) { 
        List() { 
          ForEach(this.showSearchList, (number: string) => { 
            ListItem() { 
              Row() { 
                Text(number).fontColor("#CBCCCE") 
                Image($r("sys.media.ohos_ic_bottomsheet_close")).width(20).height(20) 
                  .margin({ right: 10 }) 
                  .onClick(() => { 
                    this.historyList.splice(this.historyList.indexOf(number), 1) 
                    this.showSearchList.splice(this.showSearchList.indexOf(number), 1) 
                  }) 
              } 
              .onClick(() => { 
                this.numberInputValue = number 
              }) 
              .padding({ left: 32, right: 32 }) 
              .width("100%") 
              .justifyContent(FlexAlign.SpaceBetween) 
              .height(30) 
            } 
          }) 
        }.width("100%") 
      } 
 
      Stack({ alignContent: Alignment.End }) { 
        TextInput({ 
          text: $$this.passwordInputValue, 
          placeholder: "请输入短信验证码", 
          controller: this.passwordController 
        }) 
          .type(InputType.PhoneNumber) 
        Image($r("sys.media.ohos_ic_bottomsheet_close")).width(20).height(20) 
          .margin({ right: 10 }) 
          .onClick(() => { 
            this.passwordInputValue = "" 
          }) 
      }.margin(16) 
 
      Row() { 
        Button("登 录", { stateEffect: true }).width("100%") 
          .onClick(() => { 
            if (this.numberInputValue && this.historyList.indexOf(this.numberInputValue) == -1) { 
              this.historyList.push(this.numberInputValue) 
            } 
          }) 
      }.margin(16) 
    }.width('100%').height("100%").justifyContent(FlexAlign.Center) 
  } 
}
分享
微博
QQ
微信
回复
2024-05-27 18:11:57
相关问题
华为账号登录获取不到手机号
282浏览 • 1回复 待解决
实时验证手机号Button的实现
251浏览 • 1回复 待解决
快速验证手机号Button的实现
277浏览 • 1回复 待解决
HarmonyOS 获取不到手机号
41浏览 • 1回复 待解决
验证手机号是否已被注册/绑定功能?
3708浏览 • 1回复 待解决
鸿蒙OS如何获取当前的手机号
24319浏览 • 1回复 待解决
JS 如何实现登录 连接后端?
3529浏览 • 1回复 待解决
沉浸式登录界面如何实现
182浏览 • 1回复 待解决
如何通过卡片点击实现业务登录场景
1638浏览 • 1回复 待解决
PersistentStorage怎么存进去
1592浏览 • 1回复 待解决
Preferences、PersistentStorage的区别
366浏览 • 0回复 待解决
HarmonyOS 请提供登录页面的实现样例
245浏览 • 1回复 待解决
PersistentStorage与Preferences的异同
325浏览 • 1回复 待解决