xingmingyi_applet/components/y-verif/verif.vue

<template>
	<view>
		<u-code ref="uCode" @change="codeChange"></u-code>
		<view class="tips" @tap="getCode">{{ tips }}</view>
	</view>
</template>

<script>
export default {
	props: { 
		phone:{
			type: [String,Number],
			default: ''
		},
		flag:{
			type: [String,Number],
			default: 1
		}
	},
	data() {
		return {
			tips:'获取验证码'
		};
	},
	methods: {
		codeChange(text) { 
			this.tips = text;
		},
		getCode() {
			console.log(Boolean(this.phone)) 
			let phoneReg = /^(1[3-9])\d{9}$/;
			if (!phoneReg.test(this.phone)) {
				return this.$api.toast('手机号码不合法！');
			}
			if (!this.phone) {
				return this.$api.toast('请输入手机号');
			}
			if (this.$refs.uCode.canGetCode) {
				// 模拟向后端请求验证码
				uni.showLoading({
					title: '正在获取验证码'
				});
				this.$api
					.request('common/sendSms', {
						phone: this.phone,
						flag: 3  ,// 1 
					})
					.then(data => {
						if (data.code == '200') {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							// this.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						} else if (data.code == '204') {
							this.$api.toast(data.msg);
						}
					})
					.catch(function(error) {
						this.$api.toast(error);
					});
			} else {
				this.$u.toast('倒计时结束后再发送');
			}
		}
	}
};
</script>

<style lang="scss">
//yanzhengma
.u-hairline-border[data-v-3bf2dba7]:after {
	border: 0;
}
.tips {
	padding: 0;
	color: #0BB291;
	font-size: 28rpx;
	line-height: 40rpx;
	height: 40rpx; 
} 
</style>