wxml:
<view class="myinput"> <input bindblur="getValue" type="number" placeholder="{{value.placeholder}}"></input> <!-- <block wx:if="{{value.title}}"> <text bindtap="getVCode" class="title">{{value.title}}</text> </block> --> <block wx:if="{{tip}}"> <text style="color:{{isCownDown ? '#999' : 'black'}}" bindtap="getVCode" class="title">{{tip}}</text> </block> </view>js:
const app = getApp() Component({ /** * 子组件接收父组件传参 */ properties: { value:Object }, /** * 组件的初始数据 */ data: { tip:'', // 右边的提示 count:10, //倒计时的描述 isCownDown:false //是否正在倒计时 }, ready(){ //在组件在视图层布局完成后执行 // 如果视图上不显示tip // this.data.tip = this.properties.value.title // 如果视图上显示tip this.setData({ tip: this.properties.value.title || '' }) }, /** * 组件的方法列表 */ methods: { getValue(e){ //相当于vuex if (this.data.value.type === 'mobile'){ app.globalData.mobile = e.detail.value } else if (this.data.value.type === 'vcode'){ app.globalData.vcode = e.detail.value } // console.log(app.globalData) }, // 获取验证码 getVCode(){ // 验证手机号是否合法 var validateResult = this.validateMobile() if (!validateResult){ wx.showToast({ title: '手机号非法', icon:'none' }) return } // 判断是否正在倒计时，如果是，return if (this.data.isCownDown) return // 倒计时的功能 this.setData({ isCownDown:true, tip:`（${this.data.count}）` }) // 定时器倒计时 var timer = setInterval(()=>{ if (this.data.count <= 1){ // 清楚定时器 clearInterval(timer) // 把我们的模型重置 this.setData({ tip:this.properties.value.title, count:10, isCownDown:false }) return } // 秒数-- this.data.count-- this.setData({ tip: `（${this.data.count}）` }) },1000) }, validateMobile(){ const mobile = app.globalData.mobile var reg = /^1[3456789][0-9]{9}$/ return reg.test(mobile) } } })