鸿蒙期末大作业——甜点店铺APP（一）登录页面的实现

本文链接：https://blog.csdn.net/qq_74141710/article/details/139655902

一、整体页面的构思与构建

我计划创建一个甜点商铺app项目，首先包含一个登陆页面——用户输入用户名和密码则可以进行下一个页面的跳转，否则弹出弹窗提示“用户名或密码不能为空”。登录成功后跳转到下一个页面——首页，同级页面下还有其余页面，分别是：精选页面以及我的页面。

我计划首页大致分为三个模块，最顶部采用轮播模式向用户展示该店一部分的特色产品图片，中间部分是一个导航组件，第三部分是列表模块，里面存放一些图片。

精选页面里面存放所有的分好类的商品，利用一级二级列表联动方式，对商品数据进行懒加载。

我的页面存放我的登录信息，里面包括我的头像以及昵称，以及一个列表组件，里面包含一些用户可以选择的操作，如：是否开启推送通知、清除缓存等。还有一个退出登录的按钮，点击按钮，可以跳转到登录页面。

二、登录页面的构思

登录页面的设计

确定页面主要整体布局，整体是一个Column布局
- 首先先添加图片login.png，并设计其占比屏幕比例以及外边距。
- 下方再接着利用Text组件设置文本‘欢迎登录’，设置其字体大小、粗体以及外边距。
- 再接着下方设置两个TextInput输入框组件，用于输入用户名和密码。定义公共样式函数存放这两个输入框相同的样式，以便简化代码、提高代码的复用性。并且为这两个输入框分别添加触发事件onChange，当输入框输入的值发生变化时，触发回调，在控制台Log输出输入用户名和密码。
- 再接着下方是一个Row布局包含的两个Text文本组件，设置在水平方向的布局为FlexAlign.SpaceAround，组件与边框的距离相等，组件与组件的距离是组件与边框的距离的两倍。
- 再接着下方是一个Button登录按钮，设置按钮形状以及按压态显示效果。添加点击事件onClick，如果输入的用户名或者密码为空，则用到promptAction.showToast弹窗提示'用户名或者密码不能为空'，否则点击按钮则进行页面的跳转，跳转到首页。
- 接着利用一个row布局，包含一个Text组件—'其它登录方式'，设置在水平方向的布局为FlexAlign.Center，使文本在中间显示。
- 最后下方是一个row布局包含三个按钮，定义一个数组，用来存储三个登录方式按钮的内容。

整体布局如下：

三、代码的实现

LoginPage.ets

//导入页面路由模块
import router from '@ohos.router';

//弹窗
import promptAction from '@ohos.promptAction';

@Entry
@Component
struct  LoginPage{
  @State message: string = '欢迎登录'
  @State user:string = ''      //用户名
  @State password:string = ''  //密码
  private otherData:Array<string> =[  //三个按钮
    "微信","QQ","手机号"        //可以通过数据进行操作，对代码改动小，方便下面添加按钮
  ]

  build() {
    Row() {
      Column() {
        //LOGO
        Image($r('app.media.login'))
          .width('50%')
          .margin({bottom:20})
        //欢迎登录
        Text(this.message)
          .fontSize(45)
          .fontWeight(FontWeight.Bold)
          .margin({bottom:10})

        //用户名和密码
        TextInput({placeholder:'请输入用户名'})
          .inputStyle()      //引用公共样式函数
          .onChange(data=>{  //输入值发生变化时，触发回调，data代表输入的内容
            this.user = data
            console.info('user:'+data)
          })

        TextInput({placeholder:'请输入密码'})
          .type(InputType.Password)     //输入框类型
          .inputStyle()       //引用公共样式函数
          .onChange(data=>{   //输入值发生变化时，触发回调，data代表输入的内容
            this.password = data
            console.info('password:'+data)
          })

        //文字提示
        Row(){
          Text('短信验证码登录')
            .fontColor(Color.Blue)
          Text('忘记密码')
            .fontColor(Color.Blue)
        }
        .justifyContent(FlexAlign.SpaceAround)
        .width('100%')
        .margin(10)

        //登录按钮
        Button('登录',{type:ButtonType.Capsule,stateEffect:true})
          .width('30%')
          .margin(20)
          .onClick(()=>{
            //进行判断，若用户名或者密码为空
            if(this.user==''||this.password==''){
              //不能跳转，同时给出弹窗提示
              promptAction.showToast({
                message:'用户名或者密码不能为空',  //显示的文本信息
                duration:2000,           //弹窗持续时间
                bottom:50                //设置弹窗边框距离屏幕底部的位置
              })
            }else{
              //路由跳转，跳转到下一个页面
              router.pushUrl({
                url:'pages/MainPage'
              }).catch((error:Error)=>{
                //错误提示
              })
            }
          })

        //其它
        Row(){
          Text('其它登录方式')
            .fontColor(Color.Blue)
        }
        .justifyContent(FlexAlign.Center)
        .width('100%')

        //三个按钮
        Row(){
          ForEach(this.otherData,(item:string)=>{
            Button(item)
          })
        }
        .justifyContent(FlexAlign.SpaceAround)
        .width('100%')
        .margin(20)

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

//添加公共的样式函数
//@Extend装饰器：扩展组件样式
//@Extend(组件描述名称) function 样式名称(){}
@Extend(TextInput) function inputStyle(){
  .placeholderColor(Color.Pink) //设置颜色
  .maxLength(8)     //设置最大长度
  .margin({bottom:10})
}

MainPage.ets

@Entry
@Component

struct Main{
  @State message:string = '首页'

  build(){
    Row(){
      Column(){
        Text(this.message)
          .fontSize(50)
          .fontWeight(FontWeight.Bold)
      }
      .width('100%')
    }
    .height('100%')
  }
}