v

components/logininput/identifying.vue

@@ -0,0 +1,105 @@
+<!-- 短信验证码
+父组件 只需要调用 传  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('倒计时结束后再发送');
+					}
+				}
+
+			},
+			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>