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

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

2024-07-04 80

版权

本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《阿里云开发者社区用户服务协议》和《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。

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

需求描述

详见下图

代码实现

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();
  },
})