最终效果图：
image.png
wxml:
view class="wx-popup" hidden="{{flag}}">
<form name="frm" bindsubmit="_success" bindreset="formReset">
<view class='popup-container'>
<view class="wx-popup-title">提示</view>
<view class="wx-popup-con">{{content}}</view>
<view class='class-phone' style="margin-bottom: 30rpx;">
<!-- 验证码输入框 -->
<input placeholder-class="phcolor" class='class-input-code' bindinput="" name="code" placeholder="验证码" maxlength="6" type="number"></input>
<!-- 发送验证码按钮 -->
<button class="class-send-code" disabled='{{disabled}}' bindtap="_bindGetCode">
{{time}}
</button>
</view>
<view class="wx-popup-btn">
<view style="flex:1">
<button formType="submit"
style='border:2rpx solid #42a2eb;color:#42a2eb;background: white;height: 65rpx;line-height: 65rpx;width: 150rpx;font-size: 30rpx;'>确定</button>
</view>
<view style="flex:1">
<button bindtap='_error'
style='border:2rpx solid #42a2eb;color:#42a2eb;background: white;height: 65rpx;line-height: 65rpx;width: 150rpx;font-size: 30rpx;'>取消</button>
</view>
</view>
</view>
</form>
</view>
js代码
Component({
options: {
multipleSlots: true // 在组件定义时的选项中启用多slot支持
},
/**
* 组件的属性列表
*/
properties: {
// 弹窗内容
content: {
type: String,
value: '内容'
},
},
/**
* 组件的初始数据
*/
data: {
flag: true,
time: '获取验证码', //倒计时
currentTime: 60, //60秒
interval: null //倒计时函数//
},
/**
* 组件的方法列表
*/
methods: {
//隐藏弹框
hidePopup: function() {
this.setData({
flag: !this.data.flag
})
},
//展示弹框
showPopup () {
this.setData({
flag: !this.data.flag
})
},
// 启动发送验证码倒计时的计时器
getCode: function(options) {
var that = this;
var currentTime = that.data.currentTime
this.data.interval = setInterval(function() {
currentTime--;
that.setData({
time: currentTime + '秒'
})
if (currentTime <= 0) {
clearInterval(that.data.interval)
that.setData({
time: '重新发送',
currentTime: 60,
disabled: false
})
}
}, 1000)
},
/*
* 内部私有方法建议以下划线开头
* triggerEvent 用于触发事件
*/
_error () {
//触发取消回调
this.triggerEvent("error")
},
_success (e) {
var code = e.detail.value.code;
if (code.length == 0) {
wx.showToast({
title: '请先填写验证码！',
icon: 'none',
duration: 2000
})
return;
}
let detail = {
code,
};
let option = {};
//触发成功回调
this.triggerEvent("success", detail, option);
},
_bindGetCode: function() {
this.getCode();
this.setData({
disabled: true
})
this.triggerEvent("sendcode");
}
}
})
组件的使用：
页面的wxml：
<popup id='popup' content='您在医院检查预留的手机号为{{reportMobile}}，若手机号已变更，请前往医院修改。' bind:error="_no" bind:success="_yes" bind:sendcode="_bindGetCode">
</popup>
页面的js：
_no() {
this.popup.hidePopup();
},
_yes(e) {
console.log(e)
var code = e.detail.code; //短信验证码
this.data.reportMobileCode = code;
this.popup.hidePopup();
},
_bindGetCode() {
console.log("_bindGetCode");
},
有问题的，欢迎下方留言交流
