欢迎您访问程序员文章站本站旨在为大家提供分享程序员计算机编程知识!
您现在的位置是: 首页

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

程序员文章站 2024-02-26 21:49:04
...

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

简介

输入个人信息界面,录入个人信息等都可以使用到这个界面:
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