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: "手机号格式不正确"
                    })
				} else {
					// 验证码倒计时
					if (this.$refs.uCode.canGetCode) {
                        uni.showLoading({
                        	title: '正在获取验证码'
                        })
                        // 请求接口
                        this.$u.api.sendSmsCode({
                        	member_mobile: this.member_mobile,
                        	smslog_type: this.smslog_type
                        }).then((res) => {
                            if (res.errCode == 0) {
                                console.log(res);
                                this.$refs.uToast.show({
                                	title: res.message,
                                })
                                setTimeout(() => {
                                	uni.hideLoading();
                                	// 这里此提示会被this.start()方法中的提示覆盖
                                	// this.$u.toast('验证码已发送');
                                	// 通知验证码组件内部开始倒计时
                                	this.$refs.uCode.start();
                                }, 100);
                            } else {
                                this.$refs.uToast.show({
                                	title: res.message,
                                })
                            }
                        })
					} else {
						// this.$u.toast('倒计时结束后再发送');
                        // console.log("倒计时结束后再发送");
					}
				}

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

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

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