小程序短信验证码页面实现demo
更新时间：2023年11月29日 10:11:15 作者：freeman_Tian
这篇文章主要为大家介绍了小程序短信验证码页实现demo,有需要的朋友可以借鉴参考下,希望能够有所帮助,祝大家多多进步,早日升职加薪
小程序短信验证码
难点主要是样式设计，以及bindinput="Focus" 事件的控制
页面结构
<view class="container">
<nav-bar bind:left="goBack" />
<view class='login-form-page'>
<view class="title">
输入短信验证码
</view>
<view class="tittxt">短信验证码已发送至{{phone}}</view>
<view class="content">
<view>
<form>
<view class='inpcontent'>
<block wx:for="{{Length}}" wx:key="item">
<input
class='iptbox'
style="background-color: {{inpVal.length==index?'#1194FB':''}}; box-shadow:{{inpVal.length==index?'0rpx 3rpx 10rpx 3rpx rgba(17,148,251,0.17)':''}};background-color: {{inpVal.length+1==index?'#FFFFFF':''}}; box-shadow:{{inpVal.length+1==index?'0rpx 3rpx 10rpx 3rpx #E1E1E1':''}};background-color:{{whether?'#FF3334':''}}; box-shadow:{{whether?'0rpx 3rpx 10rpx 3rpx rgba(254,54,49,0.26)':''}};clear: {{whether?'#FFFFFF':''}}; "
value="{{inpVal.length>=index+1?inpVal[index]:''}}"
disabled
password='{{ispassword}}'
catchtap='Tap'
></input>
</block>
</view>
<input
name="password"
password="{{true}}"
class='ipt'
maxlength="{{Length}}"
focus="{{isFocus}}"
bindinput="Focus"
></input>
</form>
</view>
<view class="mistake" wx:if="{{whether}}">
验证码有误，请重新输入
</view>
<button class='btn' wx:if="{{coding==0}}">
{{time}}秒后重新发送
</button>
<button
class="btn btn-active"
wx:if="{{coding==1}}"
bindtap="resetCode"
>
重新发送
</button>
</view>
</view>
</view>js代码
import { phonePwd } from '../../utils/common';
import { mobileSms } from '../../api/me/index';
Page({
/**
\* 页面的初始数据
*/
data: {
phone: '',
Length: 4, // 输入框个数
isFocus: true, // 聚焦
inpVal: '', // 输入的内容
ispassword: false, // 是否密文显示 true为密文， false为明文。
time: 60,
// 显示是否重新发送
coding: 0,
reqCode: '', // 验证码
// 手机号
cell: '',
// 验证成功与否
whether: false
},
// 60秒倒计时结束后可再次发送验证码
async resetCode() {
const info = wx.getStorageSync('userInfo');
let params = {
phone: info.phone,
smsType: 'CHANGE_PASSWORD'
};
await mobileSms(params).then(res => {
console.log(res);
this.setData({
reqCode: Number(res),
coding: 0
});
// 计时60秒结束可返回上一个页面重新发送验证码
let second = setInterval(() => {
this.data.time--;
this.setData({
time: this.data.time
});
if (this.data.time <= 0) {
clearInterval(second);
this.setData({
coding: 1,
time: 60
});
}
}, 1000);
});
},
// input事件位置
Focus(e) {
const inputValue = e.detail.value;
this.setData({
inpVal: inputValue
});
// 验证码输入完毕会进行判断
console.log(this.data.inpVal, this.data.reqCode);
if (this.data.inpVal.length === 4) {
// 在这里判断输入的是否错误如果错误的话就让whether=true，否则false
if (this.data.inpVal === this.data.reqCode) {
this.setData({
whether: false
});
wx.$wxApi.navigate(`/me/pwd/index?smsCode=${this.data.reqCode}`);
} else {
this.setData({
whether: true
});
}
}
},
Tap() {
const that = this;
that.setData({
isFocus: true
});
},
onReady() {
this.init();
},
/* 初始化数据 */
async init() {
const pho = wx.getStorageSync('userInfo').phone;
this.setData({ phone: phonePwd(pho) });
let params = {
phone: pho,
smsType: 'CHANGE_PASSWORD'
};
await mobileSms(params).then(res => {
console.log(res);
this.setData({
reqCode: String(res)
});
});
},
/**
* 生命周期函数--监听页面加载
*/
onLoad() {
// this.setData({
// cell: options.cell
// });
// 计时60秒结束可返回上一个页面重新发送验证码
let second = setInterval(() => {
this.data.time--;
this.setData({
time: this.data.time
});
if (this.data.time <= 0) {
clearInterval(second);
this.setData({
coding: 1,
time: 60
});
}
}, 1000);
},
goBack() {
wx.navigateBack();
},
/**
\* 生命周期函数--监听页面显示
*/
onShow() {},
/**
\* 生命周期函数--监听页面隐藏
*/
onHide() {},
/**
\* 生命周期函数--监听页面卸载
*/
onUnload() {},
/**
\* 页面相关事件处理函数--监听用户下拉动作
*/
onPullDownRefresh() {},
/**
\* 页面上拉触底事件的处理函数
*/
onReachBottom() {},
/**
\* 用户点击右上角分享
*/
onShareAppMessage() {}
});css样式
.container {
height: 100vh;
background: #d8d8d8 linear-gradient(180deg, #ffffff 0%, #e0e3e9 100%);
position: relative;
.login-form-page {
position: relative;
padding: 118rpx 40rpx 0;
height: 100vh;
box-sizing: border-box;
background: linear-gradient(180deg, #F2F2F2 0%, #FFFFFF 100%), linear-gradient(180deg, #FFFFFF 0%, #E0E3E9 100%);
}
.title {
margin-top: 104rpx;
line-height: 80rpx;
font-size: 56rpx;
font-family: PingFangSC-Semibold, PingFang SC;
font-weight: 600;
color: #1a1b1c;
}
.tittxt {
font-size: 28rpx;
font-family: PingFangSC-Regular, PingFang SC;
font-weight: 400;
color: #676e6f;
line-height: 40rpx;
}
.btn {
// margin-top: 80rpx;
height: 96rpx;
line-height: 96rpx;
font-size: 28rpx;
font-family: PingFangSC-Medium, PingFang SC;
font-weight: 500;
color: #ffffff;
background: #dadee1;
border-radius: 16rpx;
border: 0 none;
&-active {
background: #1d2129;
}
}
}
.content_time {
font-size: 24rpx;
font-weight: 400;
color: #858585;
letter-spacing: 1px;
text-align: center;
margin-top: 30rpx;
}
.inpcontent {
margin: 0 auto;
display: flex;
justify-content: space-around;
align-items: center;
margin-top: 100rpx;
padding: 0 62rpx;
}
.iptbox {
width: 100rpx;
height: 100rpx;
border: 1rpx solid #ddd;
border-radius: 20rpx;
display: flex;
justify-content: center;
align-items: center;
text-align: center;
background: #fff;
font-weight: 400;
font-size: 30rpx;
color: #202020;
}
.ipt {
width: 0;
height: 0;
}
.btn-area {
width: 80%;
background-color: orange;
color: white;
}
.mistake {
font-size: 22rpx;
font-weight: 400;
color: #c34d55;
line-height: 30rpx;
letter-spacing: 1px;
text-align: center;
}以上就是小程序短信验证码页面实现demo的详细内容，更多关于小程序短信验证码页的资料请关注脚本之家其它相关文章！
相关文章
本文主要分享了利用canvas画多边形的示例代码，具有很好的参考价值，下面跟着小编一起来看下吧2017-02-02
self.attachevent is not a function的解决方法
今天一个客户用chrome浏览器访问网站，他的网站js提示self.attachevent is not a function，这个问题就是这个浏览器不支持attachevent，可以通过如下方法解决了，分享一下,需要的朋友可以参考下2017-04-04
filter是new一个新的array，这篇文章主要介绍了javascipt filter过滤介绍及使用,需要的朋友可以参考下2014-09-09
Three.js是一款运行在浏览器中的3D引擎,你可以用它创建各种三维场景,包括了摄影机、光影、材质等各种对象,下面这篇文章主要给大家介绍了关于如何在微信小程序中使用three.js的保姆级教程,需要的朋友可以参考下2023-03-03
这篇文章主要为大家详细介绍了js实现数组冒泡排序、快速排序的原理，感兴趣的小伙伴们可以参考一下2016-03-03
这篇文章主要为大家详细解析了bootstrap按钮插件Button使用方法，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2017-01-01
这篇文章主要为大家详细介绍了微信小程序实现tab左右切换效果，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下2018-09-09
这篇文章主要介绍了JS实现的汉字与Unicode码相互转化功能,结合实例形式分析了javascript实现汉字与Unicode码转换相关操作技巧与注意事项,需要的朋友可以参考下2018-05-05
这篇文章主要介绍了JS+CSS实现的日本门户网站经典选项卡导航效果,涉及JavaScript针对页面元素的动态遍历及样式动态修改技巧,具有一定参考借鉴价值,需要的朋友可以参考下2015-09-09
这篇文章主要介绍了通过JS来实现简单控制视频播放倍速,本文通过实例代码给大家介绍的非常详细，对大家的学习或工作具有一定的参考借鉴价值，需要的朋友可以参考下2021-04-04
最新评论