template view class=wrap view class=topview view class=content view class=title欢迎登录图书商城view input class=u-border-bottom v-model=email placeholder=请输入邮箱 input keydownenter=submit class=u-borde

template view class=wrap  view class=topview  view class=content   view class=title欢迎登录图书商城view   input class=u-border-bottom v-model=email placeholder=请输入邮箱    input keydownenter=submit class=u-borde
该页面组件是一个登录页面,包含邮箱和密码输入框以及登录按钮、找回密码和注册选项卡。

功能说明:

  1. 用户可以输入邮箱和密码登录。
  2. 用户可以点击找回密码跳转到找回密码页面。
  3. 用户可以点击注册跳转到注册页面。
  4. 登录成功后会将用户信息缓存到本地,并跳转到登录之前的页面。

关键代码:

  1. 在computed中设置inputStyle根据邮箱和密码是否正确来动态设置登录按钮的样式。

  2. 在submit方法中根据输入的邮箱和密码调用authLogin接口执行登录,成功后将token和用户信息缓存到本地,最后跳转到登录之前的页面。

样式说明:

  1. 整体布局为一个居中的盒子,宽度为600rpx。
  2. 标题字体为60rpx,加粗。
  3. 输入框下方有40rpx的距离。
  4. 登录按钮背景为rgb(253, 243, 208),字体颜色为$u-tips-color。
  5. 提示文字颜色为$u-tips-color。
  6. 注册选项卡为蓝色字体,找回密码为黑色字体。

组件内部通信说明:

  1. 输入框的值使用v-model绑定到data中的email和password变量中。
  2. 登录按钮被点击时调用submit方法。
  3. 注册选项卡使用navigator进行跳转,找回密码选项卡暂未实现跳转功能。
  4. 登录成功后会将用户信息缓存到本地,并跳转到登录之前的页面。