小程序短信验证码页实现

小程序短信验证码，难点主要是样式设计，以及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;
}