记录一下写项目时常用的小东西
wxml
<view class='servicebox-item'> <text>手机号</text> <input type='number' bindinput='getPhoneNumber' value='{{phoneNumber}}' placeholder='请输入手机号' maxlength='11'></input> <view class="servicebox-checkcode {{isSend?'addcode':''}}" bindtap="{{isSend?'':'sendCode'}}"> {{isSend?((secend))+'s':'发送验证码'}} </view></view>wxss
/*数量框*/.servicebox-item { width: 100%; color: #333; box-sizing: border-box; padding: 30rpx; border-bottom: 1rpx solid #e8e8e8; display: flex; align-items: center; justify-content: space-between;}.servicebox-checkcode { width: 164rpx; height: 60rpx; border-radius: 30rpx; border: 1rpx solid #4aa6fb; color: #4aa6fb; font-size: 24rpx; text-align: center; line-height: 60rpx;}.addcode { border: 1rpx solid #999; color: #999;}.servicebox-item text:first-child { font-size: 28rpx; color: #333;}.servicebox-item input { height: 100%; font-size: 28rpx; color: #999;}js
Page({ //获取手机号 getPhoneNumber: function(res) { var that = this var phoneNumber = res.detail.value that.setData({ phoneNumber: phoneNumber }) }, //发送验证码 sendCode: function() { var that = this var secend = that.data.secend var myreg = /^[1][3,4,5,7,8][0-9]{9}$/; var phoneNumber = that.data.phoneNumber //验证手机号码 if (!myreg.test(phoneNumber)) { wx.showToast({ title: '手机号输入错误', icon: 'none' }) that.setData({ phoneNumber: "" }) return } //验证通过 wx.showToast({ title: '发送成功', }) that.setData({ phoneNumber: "" }) var interVal = setInterval(function() { secend-- that.setData({ secend: secend }) if (secend == 0) { clearInterval(interVal); that.setData({ secend: 60, isSend: false }) } }, 1000) that.setData({ isSend: true }) }, data: { phoneNumber: null, secend: 60, isSend: false, },})
