需求描述
详见下图文章来源:https://www.toymoban.com/news/detail-524163.html
文章来源地址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();
},
})
到了这里,关于【微信小程序-原生开发】TDesign 实战模板——账号密码登录页(含密码显示隐藏的技巧)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!