用的有赞组件
<van-cell-group>
<van-field
value="{{ phone }}"
label="手机号"
placeholder="请输入手机号"
border="{{ false }}"
bind:change="change"
/>
<van-field
value="{{ sms }}"
center
clearable
label="短信验证码"
placeholder="请输入短信验证码"
border="{{ false }}"
use-button-slot
bind:change="change_code"
>
<van-button slot="button" wx:if="{{send_state}}" size="small" type="primary" bindtap='send'>发送验证码</van-button>
<van-button slot="button" wx:else disabled size="small" type="default">{{miao}}秒</van-button>
</van-field>
</van-cell-group>
<view class="c_t">
<van-button slot="button" size="small" type="danger" bindtap='sub'>绑定</van-button>
</view>
//我这里是封装的http,可直接用wx.request代替
import { HTTP } from '../../util/http.js';
const http = new HTTP
Page({
data: {
phone: "",
code: "",
send_state: true,
smiao: 10
},
change(event) {
const phone = event.detail;
this.setData({
phone
})
},
change_code(event) {
const code = event.detail;
this.setData({
code
})
},
sub() {
const phone = this.data.phone
const code = this.data.code
if(this.checkPhone(phone)<1){
return;
}
if (code.length<4){
wx.showToast({
title: '验证码有误',
icon: 'none',
duration: 2000
})
return;
}
http.request({
url:'',
method:'post',
data:{
phone,
code
}
})
},
send() {
const that = this
const phone = this.data.phone
const check = this.checkPhone(phone)
const smiao = that.data.smiao
if (check == 1) {
this.setData({
send_state: false,
miao: smiao
})
this.settime(smiao)
}
},
checkPhone(phone) {
if (!(/^1[34578]\d{9}$/.test(phone))) {
wx.showToast({
title: '手机号有误',
icon: 'none',
duration: 2000
})
return 0;
} else {
return 1;
}
},
settime(miao) {
const that = this
const smiao = that.data.smiao
if (miao == 0) {
console.log('stop')
that.setData({
miao: smiao,
send_state: true
})
} else {
setTimeout(() => {
miao--
that.setData({
miao
})
that.settime(miao)
}, 1000)
}
}
})