deming/components/logininput/identifying.vue

<!-- 短信验证码
父组件 只需要调用 传  1、手机号 2、类型
 -->
<template>
	<view class="wrap">
		<u-toast ref="uToast"></u-toast>
		<u-verification-code :seconds="seconds" @end="end" @start="start" ref="uCode" @change="codeChange"></u-verification-code>
		<view class="view_getcode" @tap="getCode">{{tips}}</view>
		<!-- 提示框 -->
		<u-toast ref="uToast" />
	</view>
</template>

<script>
	export default {
		props: {
			smslog_type: {
				type: String,
				required: true
			},
			member_mobile: {
				type: String,
				required: true
			},

		},
		data() {
			return {
				tips: '',
				// refCode: null,
				seconds: 60,
			}
		},
		onReady() {
			// 注意这里不能将一个组件赋值给data的一个变量，否则在微信小程序会
			// 造成循环引用而报错，如果你想这样做，请在非data中定义refCode变量
			// this.refCode = this.$refs.uCode;
		},
		methods: {
			codeChange(text) {
				this.tips = text;
			},
			getCode() {
				this.$emit('tochange');
				let member_mobile = this.member_mobile;
				// 校验手机号
				let type_phone = this.$u.test.mobile(member_mobile)
				console.log(member_mobile)
				console.log(this.smslog_type)
				// 判断是否有手机号为空
				if (type_phone == false) {
					this.$refs.uToast.show({
						title: '手机号格式不正确',
						type: 'error'
					})
				} else {
					// 验证码倒计时
					if (this.$refs.uCode.canGetCode) {
						// 模拟向后端请求验证码
						uni.showLoading({
							title: '正在获取验证码'
						})
						setTimeout(() => {
							uni.hideLoading();
							// 这里此提示会被this.start()方法中的提示覆盖
							this.$u.toast('验证码已发送');
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}, 2000);
					} else {
						// this.$u.toast('倒计时结束后再发送');
                        console.log("倒计时结束后再发送");
					}
				}

			},
			end() {
				this.$u.toast('倒计时结束');
			},
			start() {
				// this.$u.toast('倒计时开始');
				console.log(this.smslog_type)
				// 倒计时请求
				this.$u.api.sendSmsCode({
					member_mobile: this.member_mobile,
					smslog_type: this.smslog_type
				}).then((res) => {
					console.log(res)
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.labales {
		position: relative;
	}

	.wrap {
		position: absolute;
		top: -18rpx;
		right: 20rpx;
		color: #ff780f;
	}
</style>