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

Question

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);
}
})

Answer 1

提问者 xiaozheng 2017-10-28 08:53:10

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
//         })
//       }

//     }
//   })
// },

})

Answer 2

提问者 xiaozheng 2017-10-27 21:09:52

<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>

Answer 3

提问者 xiaozheng 2017-10-27 20:59:29

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

Answer 4

提问者 xiaozheng 2017-10-27 20:55:16

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

• 7七月 #1

  传入数据 不就是data=么？有什么问题吗？

• 提问者 xiaozheng 回复 7七月 #2

  我想控制btn的验证码倒计时，数字和获取验证码切换，但是失效了

• 提问者 xiaozheng 回复 7七月 #3

  改变is_show的值失败

点开查看后面3条评论