手机验证码倒数计时,怎么把改变的数据传到template里?

来源:18-3 template模板的使用

xiaozheng

2017-10-27

var countdown = 60;
var settime = function (that) {
if (countdown == 0) {
that.setData({
is_show: true
})
countdown = 60;
return;
} else {
that.setData({
is_show: false,
last_time: countdown
})
countdown--;
}
setTimeout(function () {
settime(that)
}
, 1000)
}
Page({
/**
  * 页面的初始数据
  */
data: {
is_show: "true"
},
getSmsTap: function () {
var that = this;
// 将获取验证码按钮隐藏60s,60s后再次显示
that.setData({
is_show: (!that.data.is_show)   //false
})
settime(that);
}
})


写回答

4回答

xiaozheng

提问者

2017-10-28

var logisticsData = require('../../../data/logistics-data.js')
var inputContent = {}
var countdown = 60;
var settime = function (that) {
if (countdown == 0) {
that.setData({
is_show: true
})
countdown = 60;
return;
} else {
that.setData({
is_show: false,
last_time: countdown
})

countdown--;
}
setTimeout(function () {
settime(that)
}
, 1000)
}

Page({
data: {
inputContent: {},
is_show: "true",
},

onLoad: function (options) {
this.setData({
sign_up_key: logisticsData.sign_up
})
},

inputBlur: function (e) {
inputContent[e.currentTarget.id] = e.detail.value
if ('phone' == e.currentTarget.id) {
var phone = inputContent[e.currentTarget.id];
var myreg = /^(((1[0-9]{1}))+\d{9})$/;
if (phone.length != 11 || !myreg.test(phone)) {
wx.showToast({
title: '手机号有误!',
icon: 'success',
duration: 1500
})
this.data.phone = 'fail'
} else {
this.data.phone = phone
}
}
if ('userName' == e.currentTarget.id) {
var userName = inputContent[e.currentTarget.id];
if (userName.length >= 12 || userName.length <= 4) {
wx.showToast({
title: '用户名有误',
icon: 'success',
duration: 1500
})
this.data.userName = 'fail'
} else {
this.data.userName = userName
}
}
if ('password' == e.currentTarget.id) {
var password = inputContent[e.currentTarget.id];
if (password.length >= 12 || password.length <= 5) {
wx.showToast({
title: '密码有误',
icon: 'success',
duration: 1500
})
this.data.password = 'fail'
} else {
this.data.password = password
}
}
if ('passwordAgain' == e.currentTarget.id) {
var passwordAgain = inputContent[e.currentTarget.id];
if (passwordAgain != this.data.password) {
wx.showToast({
title: '两次密码不一致',
icon: 'success',
duration: 1500
})
this.data.passwordAgain = 'fail'
} else {
this.data.passwordAgain = passwordAgain
}
}
if ('code' == e.currentTarget.id) {
var code = inputContent[e.currentTarget.id];
if (code.length !=6) {
wx.showToast({
title: '验证码6位数字',
icon: 'success',
duration: 1500
})
this.data.code = 'fail'
} else {
this.data.code = code
}
}
},

agreementTap: function (event) {
wx.navigateTo({
url: "../agreement/agreement"
})
},

idTap: function (event) {
if (this.data.phone == 'fail' || this.data.phone == undefined) {
wx.showToast({
title: '手机号有误!',
icon: 'success',
duration: 1500
})
return false
}
if (this.data.userName == 'fail' || this.data.userName == undefined) {
wx.showToast({
title: '用户名有误',
icon: 'success',
duration: 1500
})
return false
}

if (this.data.password == 'fail' || this.data.password == undefined) {
wx.showToast({
title: '密码有误',
icon: 'success',
duration: 1500
})
return false
}
if (this.data.passwordAgain == 'fail' || this.data.passwordAgain == undefined) {
wx.showToast({
title: '两次密码不一致',
icon: 'success',
duration: 1500
})
return false
}
if (this.data.code == 'fail' || this.data.code == undefined) {
wx.showToast({
title: '验证码6位数字',
icon: 'success',
duration: 1500
})
return false
}
var that = this//不要漏了这句,很重要
wx.request({
method: 'POST',
url: getApp().data.domain + 'interface/wx/common/user/login',
url: getApp().data.domain + 'interface/wx/common/sms',
data: {
'appId': 'wxb3094e84f2642f59',
'phone': this.data.phone,
'password': this.data.password,
},
header: {
'content-type': 'application/x-www-form-urlencoded' // 默认值
},
success: function (res) {
console.log(res.data.code)
if (res.data.code == 1000) {
console.log(res.data.msg)
that.setData({
loginData: res.data.data,
})
} else {
wx.showToast({
title: res.data.msg,
icon: 'success',
duration: 1500
})
}

}
})
},
getSmsTap: function () {
var that = this;
// 将获取验证码按钮隐藏60s,60s后再次显示
that.setData({
is_show: (!that.data.is_show) //false
})
settime(that);
}

// getSmsTap: function (event) {
//   console.log(this.data.phone)
//   var that = this//不要漏了这句,很重要
//   if (this.data.phone == 'fail' || this.data.phone == undefined) {
//     wx.showToast({
//       title: '手机号有误!',
//       icon: 'success',
//       duration: 1500
//     })
//     return false
//   }
//   wx.request({
//     method: 'POST',
//     url: getApp().data.domain + 'interface/wx/common/sms',
//     data: {
//       'appId': 'wxb3094e84f2642f59',
//       'phone': this.data.phone,
//       'type': '1',
//     },
//     header: {
//       'content-type': 'application/x-www-form-urlencoded' // 默认值
//     },
//     success: function (res) {
//       console.log(res.data.code)
//       if (res.data.code == 1000) {
//         console.log(res.data.msg)
//         that.setData({
//           loginData: res.data.data,
//         })
//       } else {
//         wx.showToast({
//           title: res.data.msg,
//           icon: 'success',
//           duration: 1500
//         })
//       }

//     }
//   })
// },

})


0
0

xiaozheng

提问者

2017-10-27

<import src="../../template/input/input-template.wxml" />
<view class="sign-up-container">

<view>
<block wx:for="{{sign_up_key}}" wx:for-item="input">
<template is="inputTemplate" data="{{...input,is_show}}" />
</block>
</view>

<view class="sign-up-agreement-container">
<text bindtap="agreementTap" class="sign-up-agreement-text">使用协议</text>
<image class="sign-up-arrow" src="../../../images/icon/arrow-right.png" />
<switch class="sign-up-switch" />
</view>

<text class="sign-phone-prompt">验证码不正确</text>
<button bindtap="idTap" class="sign-up-btn">下一步</button>
</view>


0
0

xiaozheng

提问者

2017-10-27

这样是正常的,但是如何应用到template里去控制数据呢?

0
0

xiaozheng

提问者

2017-10-27

<view>
<button class="{{is_show?'show':'hide'}}" bindtap="getSmsTap">获取验证码</button>
<button class="{{is_show?'hide':'show'}}">{{last_time}}</button>
</view>


0
6
xiaozheng
回复
7七月
少传了一个时间的值给模板,解决了,麻烦了。
2017-10-28
共6条回复

微信小程序入门与实战(全新版) 超20000人学习的好课

4年同步微信官方迭代,累计20000+人学习, 比微信官方更火爆!

23866 学习 · 6899 问题

查看课程