【微信小程序-原生开发】TDesign 实战模板——账号密码登录页（含密码显示隐藏的技巧）-Toy模板网

这篇具有很好参考价值的文章主要介绍了【微信小程序-原生开发】TDesign 实战模板——账号密码登录页（含密码显示隐藏的技巧）。希望对大家有所帮助。如果存在错误或未考虑完全的地方，请大家不吝赐教，您也可以点击"举报违法"按钮提交疑问。

需求描述

详见下图

【微信小程序-原生开发】TDesign 实战模板——账号密码登录页（含密码显示隐藏的技巧）,# 微信小程序,# 已归档链接,微信小程序,tdesign,小程序文章来源地址https://www.toymoban.com/news/detail-524163.html

代码实现

wxml

<view class="loginBox">
  <t-input bindclear="inputChange" bindchange="inputChange" data-prop='account' value="{{formData.account}}" prefixIcon="user-avatar" placeholder="请输入账号" clearable />

  <t-input bindclear="inputChange" bind:click='changEye' bindchange="inputChange" data-prop='password' value="{{formData.password}}" prefixIcon="lock-on" placeholder="请输入密码" suffixIcon="{{ { name: showPassword?'browse':'browse-off' } }}" type="{{showPassword?'':'password'}}" clearable />

  <view class="loginButton">
    <t-button bindtap='login' theme="primary" size="large" block>登录</t-button>
  </view>
</view>

wxss

.loginBox {
  width: 80%;
  margin: 30% auto;
}

.loginButton {
  margin-top: 100rpx;
}

json

{
  "usingComponents": {
    "t-input": "tdesign-miniprogram/input/input",
    "t-button": "tdesign-miniprogram/button/button"
  }
}

js

Page({
  data: {
    formData: {},
    showPassword: false,
  },
  changEye: function () {
    this.setData({
      showPassword: !this.data.showPassword
    })
  },
  inputChange: function (e) {
    let prop = e.currentTarget.dataset.prop
    let value = e.detail.value
    this.data.formData[prop] = value
    this.setData({
      formData: this.data.formData
    })
  },
  login: function (res) {
    let account = this.data.formData.account
    let password = this.data.formData.password

    if (!account) {
      wx.showToast({
        icon: 'none',
        title: "账号不能为空",
      })
      return
    }

    if (!password) {
      wx.showToast({
        icon: 'none',
        title: "密码不能为空",
      })
      return
    }
    // 查询数据库，校验账号密码是否正确
    wx.cloud.database().collection('user').where({
      account: account,
      password: password
    }).get().then(
      res => {
        let data = res.data
        if (data.length > 0) {
          wx.showToast({
            icon: "success",
            title: "登录成功",
          })
        } else {
          wx.showToast({
            icon: "error",
            title: "账号或密码错误，请重试",
          })
        }
      })
  },
  onShow() {
    this.getTabBar().init();
  },
})