【项目】基于ArkTS的网吧会员应用开发（2）

发布于：2025-06-02 ⋅ 阅读:(14) ⋅ 点赞:(0)

一、效果图展示

  

二、界面功能讲解

以上效果图分别为登录页面，注册页面，找回密码等功能页面效果图。其中包含手机号和密码登录，用户名，密码，收假后，年龄，性别和验证码的注册信息，通过手机号和新密码以及获取验证码来找回密码。

三、代码演示

登录界面代码如下：

import promptAction from '@ohos.promptAction';
import MemberInfoTable from '../entity/MemberInfoTable';
import router from '@ohos.router';
import PreferencesUtil from '../utils/PreferencesUtil';
import MemberInfo from '../entity/MemberInfo';
@Entry
@Component
struct Test {
  private mit:MemberInfoTable=new MemberInfoTable();
  @State phone:string="";
  @State psd:string="";
  private pu:PreferencesUtil=new PreferencesUtil();
  private mi:MemberInfo;

  build() {
      Column() {
        Column(){
            Image($r("app.media.logo")).width(120).height(120)
.borderRadius(140).align(Alignment.Center)
            Text($r("app.string.EntryAbility_label")).fontSize(22)
.fontColor(Color.White).margin(10)
        }.width("100%").height("30%").backgroundColor(Color.Orange)
.justifyContent(FlexAlign.Center)
        Row(){
            Image($r("app.media.lr_ico_phone")).width(40).height(40).margin(10)
            TextInput({placeholder:"手机号"}).layoutWeight(1).height(40)
              .type(InputType.Number).backgroundColor(Color.Transparent)
              .fontSize(20).placeholderFont({size:20}).onChange((value)=>{
              this.phone=value;
            })
        }.width("95%").height(60).borderWidth(5).borderColor(Color.Orange)
.borderRadius(20).margin(20)
          Row(){
            Image($r("app.media.lr_ico_pass")).width(40).height(40).margin(10)
            TextInput({placeholder:"账号密码"}).layoutWeight(1).height(40)
              .type(InputType.Password).backgroundColor(Color.Transparent)
              .fontSize(20).placeholderFont({size:20}).onChange((value)=>{
              this.psd=value;
            })
          }.width("95%").height(60).borderWidth(5).borderColor(Color.Orange)
.borderRadius(20).margin(20)
        Button("登录").width("90%").height(60).backgroundColor(Color.Orange).fontSize(22).margin({top:20})
          .onClick(()=>{
            //获得用户输入的内容，查询数据库该用户是否存在
            promptAction.showToast({message:this.phone+"--"+this.psd});
            this.mit.getRdbStore(()=>{
              this.mit.loginQuery(this.phone,this.psd,async (result)=>{
                if (String(JSON.stringify(result))=="[]") {
                  promptAction.showToast({message:"账号或密码错误，请重新输输入！"});
                  this.phone="";
                  this.psd="";
                }else {
                  this.mi=result[0];
                  await this.pu.getPreferencesFromStorage();
                  //对象数据转json字符串
                  this.pu.putPreference("member",JSON.stringify(this.mi));
                  //将用户信息保存至轻量级存储
                  router.replaceUrl({url:"pages/Home"})
                }
              })
            })
          })
        Blank()
        Row(){
          Text("册").fontSize(20).layoutWeight(1).textAlign(TextAlign.Start).padding(10)
            .fontColor(Color.Orange).onClick(()=>{
            router.pushUrl({url:"pages/Register"})
          })
          Text("找回码").fontSize(20).layoutWeight(1).textAlign(TextAlign.End).padding(10)
            .fontColor(Color.Orange).onClick(()=>{
            router.pushUrl({url:"pages/FindPsd"})
          })

        }.width("100%")
      }.width('100%').height('100%')
  }
}

注册页面代码：

import promptAction from '@ohos.promptAction';
import MemberInfo from '../entity/MemberInfo';
import MemberInfoTable from '../entity/MemberInfoTable';
import router from '@ohos.router';
@Entry
@Component
struct Register {
  @State random_num: string = String(Math.round(Math.random() * 9000 + 1000));
  @State ti_name:string="";
  @State ti_psd:string="";
  @State ti_phone:string="";
  @State ti_age:string="";
  @State ti_sex:string="";
  @State ti_random:string="";
  private mit:MemberInfoTable=new MemberInfoTable();
  build() {
    Scroll() {
      Column() {
        Column() {
          Image($r("app.media.logo")).width(120).height(120)
.borderRadius(140).align(Alignment.Center)
          Text($r("app.string.EntryAbility_label")).fontSize(22)
.fontColor(Color.White).margin(10)
        }.width("100%").height(180).backgroundColor(Color.Orange)
.justifyContent(FlexAlign.Center)

        Column() {
          TextInput({ placeholder: "用户名" })
            .width("100%")
            .height(60)
            .backgroundColor(Color.Transparent)
            .fontSize(20)
            .placeholderFont({ size: 20 })
            .borderWidth(3)
            .margin(10)
            .borderColor(Color.Orange)
            .onChange((value) => {
              this.ti_name=value;
            })
          TextInput({ placeholder: "账号密码" })
            .width("100%")
            .height(60)
            .type(InputType.Password)
            .backgroundColor(Color.Transparent)
            .fontSize(20)
            .placeholderFont({ size: 20 })
            .borderWidth(3)
            .margin(10)
            .borderColor(Color.Orange)
            .onChange((value) => {
              this.ti_psd=value;
            })
          TextInput({ placeholder: "手机号" })
            .width("100%")
            .height(60)
            .type(InputType.PhoneNumber)
            .backgroundColor(Color.Transparent)
            .fontSize(20)
            .placeholderFont({ size: 20 })
            .borderWidth(3)
            .margin(10)
            .borderColor(Color.Orange)
            .onChange((value) => {
              this.ti_phone=value;
            })
          TextInput({ placeholder: "年龄" })
            .width("100%")
            .height(60)
            .type(InputType.Number)
            .backgroundColor(Color.Transparent)
            .fontSize(20)
            .placeholderFont({ size: 20 })
            .borderWidth(3)
            .margin(10)
            .borderColor(Color.Orange)
            .onChange((value) => {
              this.ti_age=value;
            })
          TextInput({ placeholder: "性别" })
            .width("100%")
            .height(60)
            .type(InputType.Normal)
            .backgroundColor(Color.Transparent)
            .fontSize(20)
            .placeholderFont({ size: 20 })
            .borderWidth(3)
            .margin(10)
            .borderColor(Color.Orange)
            .onChange((value) => {
              this.ti_sex=value;
            })
          Row() {
            TextInput({ placeholder: "验证码" })
              .width("70%")
              .height(60)
              .type(InputType.Normal)
              .backgroundColor(Color.Transparent)
              .fontSize(20)
              .placeholderFont({ size: 20 })
              .onChange((value) => {
                this.ti_random=value;
              })
            Divider().vertical(true).strokeWidth(5).color(Color.Orange)
            Text(this.random_num)
              .width("25%")
              .height(50)
              .fontSize(24)
              .fontColor(Color.Orange)
              .fontWeight(FontWeight.Bold)
              .letterSpacing(3)
              .textAlign(TextAlign.Center)
              .margin(5)
              .onClick(() => {
                this.random_num = String(Math.round(Math.random() * 9000 + 1000));
              })
          }
          .width("95%")
          .height(60)
          .borderWidth(3)
          .borderColor(Color.Orange)
          .margin(10)
          .borderRadius(20)

          Button("注册")
            .fontColor(Color.White)
            .fontWeight(FontWeight.Bold)
            .fontSize(20)
            .width("90%")
            .margin(10)
            .height(60)
            .type(ButtonType.Normal)
            .borderRadius(20)
            .backgroundColor(Color.Orange).onClick(()=>{
            if (this.ti_name=="") {
              promptAction.showToast({message:"用户名不能为空"})
            }else if (this.ti_psd==""){
              promptAction.showToast({message:"密码不能为空"})
            }else if (this.ti_phone==""){
              promptAction.showToast({message:"手机号不能为空"})
            }else if (this.ti_age==""){
              promptAction.showToast({message:"密码不能为空"})
            }else if (this.ti_sex==""){
              promptAction.showToast({message:"性别不能为空"})
            }else if (this.ti_random==""){
              promptAction.showToast({message:"验证码不能为空"})
            }else if (this.ti_random!=this.random_num){
              promptAction.showToast({message:"验证码输入错误"})
              this.random_num=String(Math.round(Math.random() * 9000 + 1000));
            }else {
                this.mit.getRdbStore(()=>{
                  let m:MemberInfo={hy_id:0,name:this.ti_name,
                  psd:this.ti_psd,phone:this.ti_phone,
                  age:Number(this.ti_age),sex:this.ti_sex}
                  this.mit.insertData(m,()=>{
                    promptAction.showToast({message:"注册成功"})
                    //返回登录页面
                    router.back()
                  })
                })
            }
          })
        }
        .borderWidth(5)
        .borderColor(Color.Orange)
        .width("90%")
        .margin(10)
        .borderRadius(20)
      }
    }
    .width('100%')
  }
}

找回密码界面代码：

import promptAction from '@ohos.promptAction';
import MemberInfo from '../entity/MemberInfo';
import MemberInfoTable from '../entity/MemberInfoTable';
import router from '@ohos.router';
@Entry
@Component
struct Register {
  @State random_num: string = String(Math.round(Math.random() * 9000 + 1000));
  @State ti_name:string="";
  @State ti_psd:string="";
  @State ti_phone:string="";
  @State ti_age:string="";
  @State ti_sex:string="";
  @State ti_random:string="";
  private mit:MemberInfoTable=new MemberInfoTable();
  build() {
    Scroll() {
      Column() {
        Column() {
          Image($r("app.media.logo")).width(120).height(120)
.borderRadius(140).align(Alignment.Center)
          Text($r("app.string.EntryAbility_label")).fontSize(22)
.fontColor(Color.White).margin(10)
        }.width("100%").height(180).backgroundColor(Color.Orange)
.justifyContent(FlexAlign.Center)

        Column() {
          TextInput({ placeholder: "用户名" })
            .width("100%")
            .height(60)
            .backgroundColor(Color.Transparent)
            .fontSize(20)
            .placeholderFont({ size: 20 })
            .borderWidth(3)
            .margin(10)
            .borderColor(Color.Orange)
            .onChange((value) => {
              this.ti_name=value;
            })
          TextInput({ placeholder: "账号密码" })
            .width("100%")
            .height(60)
            .type(InputType.Password)
            .backgroundColor(Color.Transparent)
            .fontSize(20)
            .placeholderFont({ size: 20 })
            .borderWidth(3)
            .margin(10)
            .borderColor(Color.Orange)
            .onChange((value) => {
              this.ti_psd=value;
            })
          TextInput({ placeholder: "手机号" })
            .width("100%")
            .height(60)
            .type(InputType.PhoneNumber)
            .backgroundColor(Color.Transparent)
            .fontSize(20)
            .placeholderFont({ size: 20 })
            .borderWidth(3)
            .margin(10)
            .borderColor(Color.Orange)
            .onChange((value) => {
              this.ti_phone=value;
            })
          TextInput({ placeholder: "年龄" })
            .width("100%")
            .height(60)
            .type(InputType.Number)
            .backgroundColor(Color.Transparent)
            .fontSize(20)
            .placeholderFont({ size: 20 })
            .borderWidth(3)
            .margin(10)
            .borderColor(Color.Orange)
            .onChange((value) => {
              this.ti_age=value;
            })
          TextInput({ placeholder: "性别" })
            .width("100%")
            .height(60)
            .type(InputType.Normal)
            .backgroundColor(Color.Transparent)
            .fontSize(20)
            .placeholderFont({ size: 20 })
            .borderWidth(3)
            .margin(10)
            .borderColor(Color.Orange)
            .onChange((value) => {
              this.ti_sex=value;
            })
          Row() {
            TextInput({ placeholder: "验证码" })
              .width("70%")
              .height(60)
              .type(InputType.Normal)
              .backgroundColor(Color.Transparent)
              .fontSize(20)
              .placeholderFont({ size: 20 })
              .onChange((value) => {
                this.ti_random=value;
              })
            Divider().vertical(true).strokeWidth(5).color(Color.Orange)
            Text(this.random_num)
              .width("25%")
              .height(50)
              .fontSize(24)
              .fontColor(Color.Orange)
              .fontWeight(FontWeight.Bold)
              .letterSpacing(3)
              .textAlign(TextAlign.Center)
              .margin(5)
              .onClick(() => {
                this.random_num = String(Math.round(Math.random() * 9000 + 1000));
              })
          }
          .width("95%")
          .height(60)
          .borderWidth(3)
          .borderColor(Color.Orange)
          .margin(10)
          .borderRadius(20)

          Button("注册")
            .fontColor(Color.White)
            .fontWeight(FontWeight.Bold)
            .fontSize(20)
            .width("90%")
            .margin(10)
            .height(60)
            .type(ButtonType.Normal)
            .borderRadius(20)
            .backgroundColor(Color.Orange).onClick(()=>{
            if (this.ti_name=="") {
              promptAction.showToast({message:"用户名不能为空"})
            }else if (this.ti_psd==""){
              promptAction.showToast({message:"密码不能为空"})
            }else if (this.ti_phone==""){
              promptAction.showToast({message:"手机号不能为空"})
            }else if (this.ti_age==""){
              promptAction.showToast({message:"密码不能为空"})
            }else if (this.ti_sex==""){
              promptAction.showToast({message:"性别不能为空"})
            }else if (this.ti_random==""){
              promptAction.showToast({message:"验证码不能为空"})
            }else if (this.ti_random!=this.random_num){
              promptAction.showToast({message:"验证码输入错误"})
              this.random_num=String(Math.round(Math.random() * 9000 + 1000));
            }else {
                this.mit.getRdbStore(()=>{
                  let m:MemberInfo={hy_id:0,name:this.ti_name,
                  psd:this.ti_psd,phone:this.ti_phone,
                  age:Number(this.ti_age),sex:this.ti_sex}
                  this.mit.insertData(m,()=>{
                    promptAction.showToast({message:"注册成功"})
                    //返回登录页面
                    router.back()
                  })
                })
            }
          })
        }
        .borderWidth(5)
        .borderColor(Color.Orange)
        .width("90%")
        .margin(10)
        .borderRadius(20)
      }
    }
    .width('100%')
  }
}

网站公告

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布