<view class='container'>
? <form bindsubmit='denglu'>
? ? <view class='list'>
? ? ? <view class='left'>
? ? ? ? <label>手機號:</label>
? ? ? ? <input type='number' name="tel" bindinput='shj' maxlength='11' placeholder='請輸入手機號'></input>
? ? ? </view>
? ? ? <view class='right'></view>
? ? </view>
? ? <view class='list border'>
? ? ? <view class='left'>
? ? ? ? <label>驗證碼:</label>
? ? ? ? <input type='number' name="code" placeholder='請輸入驗證碼'></input>
? ? ? </view>
? ? ? <view class='right'>
? ? ? ? <button class='send' wx:if="{{isShow}}" catchtap='send'>發(fā)送驗證碼</button>
? ? ? ? <button class='send' disabled='{{true}}' wx:else>{{countdown}}秒后重新發(fā)送</button>
? ? ? </view>
? ? </view>
? ? <button form-type='submit' class='btn'>登錄</button>
? </form>
</view>

const app = getApp()
Page({
?
? /**
? ?* 頁面的初始數(shù)據(jù)
? ?*/
? data: {
? ? countdown: 60,
? ? isShow:true
? },
? //倒計時
? count:function(that){
? ? var interval = setInterval(function () {
? ? ? var countdown = that.data.countdown;
? ? ? if (countdown == 0) {
? ? ? ? that.setData({
? ? ? ? ? isShow: true,
? ? ? ? ? countdown: 60
? ? ? ? })
? ? ? ? clearInterval(interval)
? ? ? } else {
? ? ? ? countdown--;
? ? ? ? that.setData({
? ? ? ? ? isShow: false,
? ? ? ? ? countdown: countdown
? ? ? ? })
? ? ? }
? ? }, 1000)
? },
? //設置手機號
? shj: function (e) {
? ? this.setData({
? ? ? tel: e.detail.value
? ? })
? },
? //獲取驗證碼
? send: function () {
? ? var that=this;
? ? wx.showToast({
? ? ? title: '驗證碼發(fā)送成功',
? ? ? icon: 'none',
? ? ? duration: 1000,
? ? ? success: function () {
? ? ? ? that.count(that)
? ? ? }
? ? })
? },?
? //登錄
? denglu:function(e){
? ? ?console.log(e.detail.value)
? },
? /**
? ?* 生命周期函數(shù)--監(jiān)聽頁面加載
? ?*/
? onLoad: function (options) {
? ??
? },
?
})

.list{
? background-color: white;
? font-size: 32rpx;
? padding: 20rpx 30rpx;
? display: flex;
? justify-content: space-between;
? align-content: center;
? align-items: center
}
.border{
? border-top: 1rpx solid #f4f4f4
}
.left{
? display: flex;
? align-content: center;
? align-items: center
}
.left>label{
? width: 140rpx
}
.left>input{
? font-size: 30rpx
}
.right{
? width:240rpx;
? text-align: right;
? color: #ff9900;
? font-size: 30rpx
}
.send{
? background-color: #3296fa;
? color: white;
? line-height: 60rpx;
? font-size: 30rpx;
? border-radius: 0;
? padding-left: 0;
? padding-right: 0
}
.btn{
? background-color: #3296fa;
? color: white;
? line-height: 90rpx;
? font-size: 32rpx;
? border-radius: 0;
? margin-top: 100rpx;
}