<view class="container">
<view class="main">
<view class="list">
<view class="icon icon1"><image src="../../../images/login01.png"></image></view>
<view class="inpuText">
<input
data-field="username"
bindinput="handleChange"
value="{{ values.username }}"
type="text"
maxlength="8"
placeholder="姓名"
/>
</view>
</view>
<view class="list">
<view class="icon icon2"><image class="icon2" src="../../../images/login02.png"></image></view>
<view class="inpuText">
<input
data-field="userphone"
bindinput="handleChange"
value="{{ values.userphone }}"
type="number"
maxlength="11"
placeholder="手机号码"
/>
</view>
</view>
<view class="list">
<view class="icon icon3"><image class="icon3" src="../../../images/login03.png"></image></view>
<view class="inpuText seePaw">
<input
data-field="password"
bindinput="handleChange"
value="{{ values.password }}"
type="{{passType}}"
maxlength="16"
placeholder="输入密码"
/>
<image src="{{iconSee}}" class="See" bindtap="iconSee"></image>
</view>
</view>
<view class="list">
<view class="icon"><image class="icon4" src="../../../images/login04.png"></image></view>
<view class="inpuText validation">
<input
data-field="code"
bindinput="handleChange"
value="{{ values.code }}"
type="number"
maxlength="6"
placeholder="验证码"
/>
<text catchtap="getShortMsg">| {{ time <= 0 ? '获取验证码' : time + 's 后重发' }}</text>
</view>
</view>
<view class="subBtn" bindtap="subBtn">确定</view>
<view class="note"><text>免责声明:</text></view>
</view>
</view>
.container{
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
}
.main{
width: 560rpx;
position: absolute;
top: 19.87%;
left: 50%;
transform: translateX(-50%);
height: 500rpx;
}
.main .list{
width: 100%;
height: 100rpx;
display: flex;
align-items: center;
}
.main .list .icon{
width: 15%;
height: 100rpx;
line-height: 100rpx;
/* text-align: center; */
}
.main .list .icon image{
width: 35rpx;
height: 35rpx;
}
.main .list .icon .icon2,.main .list .icon .icon3{height: 40rpx}
.main .list .icon .icon4{width: 40rpx;}
.main .list .inpuText{
width: 85%;
border-bottom: 1px solid #9fa0a0;
}
.main .list .inpuText input{
padding-left: 10rpx;
color: #979797;
width: 80%;
}
.main .list .validation,
.main .list .seePaw{
display: flex;
}
.See{
width: 50rpx;
height: 50rpx;
}
.main .list .validation text{
display: block;
color: #c9caca;
}
.main .list .validation input{
width: 50%;
}
.main .subBtn{
width: 100%;
height: 80rpx;
color: #fff;
font-size: 35rpx;
letter-spacing: 10rpx;
font-weight: bold;
background: #fdd000;
line-height: 80rpx;
text-align: center;
margin-top: 60rpx;
border-radius: 10rpx;
}
.main .note{
font-size: 20rpx;
color: #595757;
line-height: 35rpx;
padding-top: 30rpx;
}
.main .note text{
font-weight: bold;
}
// pages/loginInfo/registe/registe.js
Page({
/**
* 页面的初始数据
*/
data: {
values:{},
time:"0",
passType: "password",
iconSee: "../../../images/icon-see.png"
},
/**
* 生命周期函数--监听页面加载
*/
onLoad: function(options) {
},
// 验证码获取
getShortMsg(e) {
if (this.data.time <= 0) {
this.startTimer();
}
},
startTimer() {
this.setData({
time: 60
}, () => {
this.timer = setInterval(() => {
if (this.data.time > 0) {
this.setData({
time: this.data.time - 1
})
} else {
clearInterval(this.timer)
}
}, 1000)
})
},
// 查看密码
iconSee: function (e) {
if (this.data.passType == "password") {
this.setData({
iconSee: "../../../images/icon-seepass.png",
passType: "text"
})
} else {
this.setData({
passType: "password",
iconSee: "../../../images/icon-see.png"
})
}
},
// 信息提交
handleChange(e) {
const field = e.currentTarget.dataset.field;
let values = { ...this.data.values };
values[field] = e.detail.value;
this.setData({
values
});
},
subBtn() {
const { username,password, userphone,code } = this.data.values;
console.log(username, password, userphone, code)
if (!username) {
wx.showToast({
title: '请输入姓名',
icon: "none"
})
return false;
}
if (!userphone) {
wx.showToast({
title: '请输入手机号',
icon: "none"
})
return false;
}
if (!(/^(1([358][0-9]|4[579]|66|7[0135678]|9[89])[0-9]{8})$/.test(userphone))) {
wx.showToast({
title: '手机号不正确',
icon: "none"
})
return false
}
if (!password) {
wx.showToast({
title: '请输入密码',
icon: "none"
})
return false;
}
if (!code) {
wx.showToast({
title: '请输入验证码',
icon: "none"
})
return false;
}
wx.navigateTo({
url: '../login/login'
})
// http.post('/api', {
// ...this.data.values
// }).then(res => {
// if (res.code == 1) {
// wx.navigateBack();
// }
// })
},
/**
* 生命周期函数--监听页面初次渲染完成
*/
onReady: function(e) {
},
/**
* 生命周期函数--监听页面显示
*/
onShow: function() {
},
/**
* 生命周期函数--监听页面隐藏
*/
onHide: function() {
},
/**
* 生命周期函数--监听页面卸载
*/
onUnload: function() {
},
/**
* 用户点击右上角分享
*/
onShareAppMessage: function() {
}
})
