WeChat applet implements login interface

<view class="container">
  <view class="wrapper">
    <view class="left-top-sign">LOGIN</view>
    <view class="welcome">
      Welcome back!
    </view>
    <view class="input-content">
      <view class="input-item">
        <text class="tit">Mobile phone number</text>
        <input type="text" placeholder="Please enter your phone number" id='phone' data-type='phone' bindinput='handerInput' />
      </view>
      <view class="input-item">
        <text class="tit">Password</text>
        <input type="password" placeholder="Please enter your password" id='password' data-type='password' bindinput='handerInput' />
      </view>
    </view>
    <button class="confirm-btn">Login</button>
    <view class="forget-section">
      forget the password?
    </view>
  </view>
  <view class="register-section">
    No account yet?
    <text>Register now</text>
  </view>
</view>

data: {
    phone: '', //phone number password: '' //password},

  /**
   * Life cycle function--listen for page loading*/
  onLoad: function (options) {

  },
  handerInput(event) {
    //let type = event.currentTarget.dataset.type;
    let type = event.currentTarget.id;
    console.log(event);
    this.setData({
      [type]: event.detail.value
   })
  },
  /**

//html
<button class="confirm-btn" bindtap="login">Login</button>

//js
login() {
    let { phone, password } = this.data;
    console.log(password);
    /**
     * Phone number verification* Phone number is empty* Phone number format is wrong* Phone number is correct*/
    if (!phone) {
      wx.showToast({
        title: 'Mobile number cannot be empty',
        icon: 'none'
      })
      return;
    }
    //Define the regular expression for the phone number let phoneReg = /^1(3|4|5|6|7|8|9)\d{9}$/
    if (!phoneReg.test(phone)) {
      wx.showToast({
        title: 'The format of the mobile phone number is wrong',
        icon: 'none'
      })
      return;
    }

    if (!password) {
      wx.showToast({
        title: 'The password cannot be empty',
        icon: 'none'
      })
      return;
    }

    wx.showToast({
      Title: 'Front-end verification passed'

    })

let result = await request('/login/cellphone', { phone, password });
    if (result.code === 200) {
      wx.showToast({
        title: 'Login successful',
      })
    }
    else if (result.code === 400) {
      wx.showToast({
        title: 'Wrong phone number',
        icon: 'none'
      })
    }
    else if (result.code === 502) {
      wx.showToast({
        title: 'Wrong password',
        icon: 'none'
      })
    }
    else {
      wx.showToast({
        title: 'Login failed, please log in again',
        icon: 'none'
      })
    }
},

<view class="user-info-box" bindtap='toLogin'>
      <view class="portrait-box">
        <image class="portrait"
          src='{{userInfo.avatarUrl?userInfo.avatarUrl:"/static/images/personal/missing-face.png"}}'></image>
      </view>
      <view class="info-box">
        <text class="username">{{userInfo.nickname?userInfo.nickname: 'Visitor'}}</text>
      </view>
</view>

//login.js
if (result.code === 200) {
      wx.showToast({
        title: 'Login successful',
      })

      wx.setStorageSync('userInfo', JSON.stringify(result.profile));

      wx.switchTab({
        url: '/pages/personal/personal'
      })
    }
// personal.js
onLoad: function (options) {

    let userInfo = wx.getStorageSync('userInfo');
    if (userInfo) {
      this.setData({
        userInfo: JSON.parse(userInfo)
      })
    }

  },