快捷導(dǎo)航

小程序短信驗證碼頁面實現(xiàn)demo

更新時間：2023年11月29日 10:11:15 作者：freeman_Tian

這篇文章主要為大家介紹了小程序短信驗證碼頁實現(xiàn)demo,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪

小程序短信驗證碼

難點主要是樣式設(shè)計，以及bindinput="Focus" 事件的控制

頁面結(jié)構(gòu)

<view class="container">
  <nav-bar bind:left="goBack" />
  <view class='login-form-page'>
    <view class="title">
      輸入短信驗證碼
    </view>
    <view class="tittxt">短信驗證碼已發(fā)送至{{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}}秒后重新發(fā)送
      </button>
      <button
        class="btn btn-active"
        wx:if="{{coding==1}}"
        bindtap="resetCode"
      >
        重新發(fā)送
      </button>
    </view>
  </view>
</view>

js代碼

import { phonePwd } from '../../utils/common';
import { mobileSms } from '../../api/me/index';
Page({
    /**
     \* 頁面的初始數(shù)據(jù)
     */
    data: {
        phone: '',
        Length: 4, // 輸入框個數(shù)
        isFocus: true, // 聚焦
        inpVal: '', // 輸入的內(nèi)容
        ispassword: false, // 是否密文顯示 true為密文， false為明文。
        time: 60,
        // 顯示是否重新發(fā)送
        coding: 0,
        reqCode: '', // 驗證碼
        // 手機(jī)號
        cell: '',
        // 驗證成功與否
        whether: false
    },
    // 60秒倒計時結(jié)束后可再次發(fā)送驗證碼
    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秒結(jié)束可返回上一個頁面重新發(fā)送驗證碼
            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
        });
        // 驗證碼輸入完畢會進(jìn)行判斷
        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();
    },
    /* 初始化數(shù)據(jù) */
    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)
            });
        });
    },
    /**
     * 生命周期函數(shù)--監(jiān)聽頁面加載
     */
    onLoad() {
        // this.setData({
        //     cell: options.cell
        // });
        // 計時60秒結(jié)束可返回上一個頁面重新發(fā)送驗證碼
        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();
    },
    /**
     \* 生命周期函數(shù)--監(jiān)聽頁面顯示
     */
    onShow() {},
    /**
     \* 生命周期函數(shù)--監(jiān)聽頁面隱藏
     */
    onHide() {},
    /**
     \* 生命周期函數(shù)--監(jiān)聽頁面卸載
     */
    onUnload() {},
    /**
     \* 頁面相關(guān)事件處理函數(shù)--監(jiān)聽用戶下拉動作
     */
    onPullDownRefresh() {},
    /**
     \* 頁面上拉觸底事件的處理函數(shù)
     */
    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;
}

以上就是小程序短信驗證碼頁面實現(xiàn)demo的詳細(xì)內(nèi)容，更多關(guān)于小程序短信驗證碼頁的資料請關(guān)注腳本之家其它相關(guān)文章！

您可能感興趣的文章: