PersistentStorage实现手机号登录匹配

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