uniapp 微信小程序开发，实现发送短信,使用uview防抖，接口请求，自定义弹窗
防抖
自定义弹窗
第一版
代码
/**
* @Author: 858834013@qq.com
* @Name: status
* @Date: 2022-05-3
* @Desc: 发送验证码
*/
<template>
<div class="getcode">
<span @tap="$u.debounce(SendCheckNum, 500)" v-if="showText && count<=0" class="sendcode"
slot="append">发送验证码</span>
<span @tap="$u.debounce(SendCheckNum, 500)" v-else-if="showText" class="sendcode" slot="append">发送验证码</span>
<span v-else-if="!showText" class="sendcode" slot="append">{{ second }} s</span>
<showToast ref="showToast"></showToast>
</div>
</template>
<script>
import {
SendCheckNum
} from '@/config/api.js'
export default {
name: 'sendcode',
components: {},
data() {
return {
showText: true,
second: 60,
count: 0,
AccountId: ''
}
},
watch: {},
mounted() {
this.AccountId = JSON.parse(uni.getStorageSync('userData')).Id
},
props: {
Phone: {
type: String | Number,
default () {
return '';
}
}
},
methods: {
SendCheckNum() {
var that = this;
if (!this.Phone) {
this.$refs['showToast'].warn('请输入手机号');
return
}
SendCheckNum({
params: {
AccountId: this.AccountId,
Phone: this.Phone
},
custom: {
auth: true
}
}).then(res => {
if (res.Code == 200) {
that.$refs['showToast'].success('验证码发送成功');
that.getcodedjs()
}
}).catch(err => {
})
},
getcodedjs() {
this.second = 60
this.showText = false
this.count++
this.interval = setInterval(() => {
--this.second
this.reset()
}, 1000)
},
reset() {
if (this.second <= 0) {
clearInterval(this.interval)
this.showText = true
}
}
}
}
</script>
<style lang="scss" scoped>
.getcode {
font-size: 14px;
font-family: PingFang;
font-weight: 500;
color: #999999;
flex-shrink: 0;
width: 90px;
display: flex;
justify-content: flex-end;
align-items: center;
flex-wrap: nowrap;
flex-direction: row;
cursor: pointer;
}
</style>
