微信小程序好看的输入信息界面——发送验证码倒计时

微信小程序好看的输入信息界面

简介

输入个人信息界面，录入个人信息等都可以使用到这个界面：
1、输入信息的布局界面
2、选择大陆还是港澳台的手机号码
3、输入手机号码，
4、获取验证码的60S倒计时，60s倒数结束后恢复“获取验证码”
5、释放获取验证码倒数线程的资源
效果图如下：

这里倒计时，都是封装得非常好。希望大家喜欢。

代码

.
.
.
.
.
.
wxml

<view class='bg'></view>

<view class='horizon firstrow'>
  <image class='left icon' src='../images/icon-name.png'></image>
  <input class='input' bindinput='nameInput' placeholder='请输入您的姓名'></input>
</view>

<view class='line'></view>

<view class='horizon secondrow'>
  <image class='left icon' src='../images/icon-credno.png'></image>
  <picker bindchange="bindPickerChange" value="{{cardNoArrayIndex}}" range="{{cardNoArray}}">
    <view class="picker">{{cardNoArray[cardNoArrayIndex]}}</view>
  </picker>
  <view class='arrow'></view>
  <input class='input' bindinput='cardInput' placeholder='请输入您的证件号'></input>
</view>

<view class='line'></view>

<view class='horizon firstrow'>
  <image class='left icon' src='../images/icon-mobile.png'></image>
  <input class='input' bindinput='teleInput' placeholder='请输入您的手机号'></input>
</view>

<view class='line'></view>

<view class='horizon firstrow'>
  <image class='left icon' src='../images/icon-pic-code.png'></image>
  <input class='input' bindinput='picValidCodeInput' placeholder='请输入图形验证码'></input>
  <image class='icon-ValidCode' src='{{picValidCodeUrl}}' bindtap='tapPicValidCode'></image>
</view>

<view class='line'></view>

<view class='horizon firstrow'>
  <image class='left icon' src='../images/icon-sms-code.png'></image>
  <input class='input' bindinput='vertifyCodeInput' placeholder='请输入验证码'></input>
  <button class='button' disabled="{{disabled}}" bindtap='tapSendVertifyCode'>{{time}}</button>
</view>

<view class='bg'></view>

<button class='sureBtn' type='primary' bindtap='sureTap'>确定</button>

<view class='vertical'>
  <text class='top left'>说明</text>
  <text class='top left right declare'>1.请输入真实准确的“姓名”、“证件号”、“手机号”；\n2.“证件号”目前支持：大陆身份证、港澳台身份证；</text>
</view>

.
.
.
.
wxss

.bg{
  width: 100%;
  height: 30rpx;
  background-color: #edecf2;
}
.horizon{
  display: flex;
  flex-direction: row;
}
.vertical{
  display: flex;
  flex-direction: column;
}
.firstrow{
  width: 100%;
  height: 100rpx;
  align-items: center;
}
.secondrow{
  width: 100%;
  height: 120rpx;
  align-items: center;
}
.left{
  margin-left: 40rpx;
}
.right{
  margin-right: 20rpx;
}
.top{
  margin-top: 30rpx;
}
.icon{
  width: 40rpx;
  height: 40rpx;
}
.input{
  margin-left: 30rpx;
  font-size: 32rpx;
  color: gray;
  flex-grow: 1;
}
.line{
  width: 100%;
  height: 3rpx;
  background-color: #edecf2;
}
.picker{
  margin-left: 30rpx;
  width: 100rpx;
  height: 100%;
  font-size: 32rpx;
  color: #222;
}
.arrow{
  width: 10rpx;
  height: 10rpx;
  border: 4rpx solid #333;
  border-bottom: none;
  border-left: none;
  transform: rotate(135deg);
}

.icon-ValidCode{
  width: 180rpx;
  height: 80rpx;
  margin-right: 20rpx; 
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
}
.declare{
  font-size: 30rpx;
  color: #666666;
}
/* 获取验证码 倒计时 按钮 如果设置宽高不生效的话，删除app.js里面的 "style": "v2",*/

.button{
  width: 200rpx;
  height: 65rpx;
  color: #449f45;
  border: 3rpx solid #449f45;
  border-radius: 80rpx;
  font-size: 24rpx;
  margin-right: 20rpx; 
  display: -webkit-box;
  -webkit-line-clamp: 1;
  -webkit-box-orient: vertical;
  text-align: center;
}
/* 确定按钮 */
.sureBtn{
  margin-top: 70rpx;
  margin-left: 40rpx;
  margin-right: 40rpx;
}

项目的下载地址为：
https://download.csdn.net/download/wy313622821/12390800