weapp/components/tel-verify.vue

<template>
	<view class="tel-verify" :class="showVerify && delayHide ? 'bg-in' : 'bg-out'">
		<custom-toast ref='toast'></custom-toast>
		<view class="tel-verify-dialog" :class="showVerify && delayHide ? 'dialog-in' : 'dialog-out'">
			<view class="top">
				<text>手机号验证</text>
			</view>
			<open-data class="image" type="userAvatarUrl"></open-data>
			<text class="close cuIcon-close" @tap="close"></text>
			<view class="mid">
				<view class="mid-top mid-item">
					<input type="text" class="tel-input" v-model="tel" maxlength="11">
					<text class="placeholder" v-if="!tel">请输入手机号</text>
					<text v-if="tel" @tap="clearTel" class="clear-tel cuIcon-roundclosefill"></text>
				</view>
				<view v-if="telWrong" :class="shake ? shake : ''" class="mid-mid">
					<text class="cuIcon-info"></text>
					<text>手机号填写错误</text>
				</view>
				<view class="mid-bot mid-item">
					<input type="text" class="yzm-input" v-model="verify" maxlength="6">
					<text class="placeholder" v-if="!verify">请输入6位验证码</text>
					<text v-if="verify" @tap="clearYzm" class="clear-yzm cuIcon-roundclosefill"></text>
					<text class="getYZM" @tap="getYZM">获取验证码<text v-if="countDown">{{ ' ' + countDown }}</text></text>
				</view>
				<view class="mid-bot-text">若认证失败请联系上级进行信息确认</view>
			</view>
			<button hover-class="hover" class="bot" @tap="submit">提交</button>
		</view>
	</view>
</template>

<script>
	import { api_getYZM, api_submitTelYZM, api_changeTel } from '../api.js'
	export default {
		props: {
			changeTel: Boolean
		},
		data() {
			return {
				delayHide: true,  //开始 淡出 动画
				tel: '',  //手机号
				verify: '',  //验证码
				verify_key: '',  //验证码 key
				telWrong: false,  //手机号错误文字提醒
				shake: '',  //手机号错误文字提醒动画类名
				countDown: 0,  //验证码已发送倒计时
				requesting: false,
				submiting: false
			}
		},
		computed: {
			showVerify () {  //手机验证弹框显示状态
				return this.$store.state.showVerify
			},
			userWeixinInfo () {  //用户微信信息
				return this.$store.state.userWeixinInfo
			}
		},
		watch: {
			verify (n) {  //监听验证码输入，输入结束后且通过验证，收起手机软键盘
				if (n.match(/^\d{6}$/) && this.tel.match(/^1\d{10}$/)) {
					uni.hideKeyboard()
				}
			}
		},
		methods: {
			clearTel () {  //清除手机号
				this.tel = ''
			},
			clearYzm () {  //清除验证码
				this.verify = ''
			},
			getYZM () {  //点击发送验证码
				if (this.tel.match(/^1\d{10}$/)) {  //手机号校验
					this.telWrong = false  //如果出现了红色提示文字，隐藏文字
					if (this.countDown) {  //如果正在倒计时，表示验证码已发送
						this.$refs.toast.hover('验证码已发送,请稍后重试', 2345, 'bottom')
					} else {  //发送网络请求
						if (!this.requesting) {
							this.requesting = true
							uni.showLoading({ title: '加载中', mask: true })
							this.$ajax.get(`${api_getYZM}?phone=${this.tel}`).then(([ , { data: res }]) => {
								this.requesting = false
								this.$hideLoading()
								if (res.code === 200) {  //验证码发送成功，开始倒计时
									this.verify_key = res.data.verify_key
									this.$refs.toast.hover('验证码发送成功', 2345, 'bottom')
									this.countDown = 90
									this.timer = setInterval(() => {
										this.countDown --
										if (!this.countDown) {
											this.countDown = 0
											clearInterval(this.timer)
										}
									}, 1111)
								} else if (res.code === 400) {  //手机号不存在
									uni.showModal({
										title: '手机号不存在',
										content: '请确认手机号或联系上级代理进行信息确认',
										showCancel: false,
										confirmText: '确定',
										success: res => {
											if (res.confirm) {
												this.tel = ''
											}
										}
									})
								} else if (res.code === 600) {  //手机号已注册
									uni.showModal({
										title: '手机号已注册',
										content: '请确认手机号是否输入正确',
										showCancel: false,
										confirmText: '确定',
										success: res => {
											if (res.confirm) {
												this.tel = ''
											}
										}
									})
								} else {
									uni.showModal({
										title: '提示',
										content: res.message,
										showCancel: false
									})
								}
							})
						}
					}
				} else {  //手机号校验不通过，出现红色抖动文字提示用户
					this.telWrong = true
					this.shake = 'animation-shake'
					setTimeout(e => {
						this.shake = ''
					}, 345)
				}
			},
			async submit () {  //点击提交
				if (this.tel.match(/^1\d{10}$/) && this.verify.match(/^\d{6}$/)) {  //是校验输入是否合法
					if (!this.submiting) {
						this.submiting = true
						uni.showLoading({ title: '', mask: true })  //显示loading
						const [ , { code }] = await uni.login()  //获取 code
						this.$ajax.post(this.changeTel ? api_changeTel : api_submitTelYZM  , {  //提交手机号 验证码 用户头像
							phone: this.tel,
							verify_code: this.verify,
							verify_key: this.verify_key, 
							avatar: this.userWeixinInfo.avatarUrl,
							code
						}).then(([ , { data: res }]) => {
							setTimeout(() => {
								this.$hideLoading()
								this.submiting = false
							}, 345)
							if (res.code === 200) {
								uni.$emit('MESSAGE', '验证成功')
								this.$store.dispatch('onLaunch')  //触发初始化方法
								this.close()
							} else if (res.code === 300) {
								this.verify = ''
								this.$refs.toast.hover('验证码错误，请重新获取', 2345, 'bottom')
							} else if (res.code === 400) {
								this.verify = ''
								this.$refs.toast.hover('验证码已超时，请重新输入', 2345, 'bottom')
							} else if (res.code === 600) { // 表示用户已经绑定过手机号
								this.close()
								this.$store.dispatch('onLaunch')  //触发初始化方法
							} else {
								this.tel = ''
								this.verify = ''
								this.$refs.toast.hover('验证码或手机号无效，请重新输入', 2345, 'bottom')
							}
						})
					}
				} else {
					this.$refs.toast.hover('请输入正确的手机号和验证码', 2345, 'bottom')
				}
			},
			close () {  //关闭手机验证弹窗
				this.delayHide = false
				setTimeout(e => {
					this.$store.commit('HIDEVERIFY')
					this.delayHide = true
				}, 100)
			}
		}
	}
</script>

<style lang="scss" scoped>
	.tel-verify {
		position: fixed;
		left: 0;
		right: 0;
		top: 0;
		bottom: 0;
		background: rgba(0, 0, 0, .3);
		z-index: 2;
		.tel-verify-dialog {
			position: fixed;
			width: 576rpx;
			height: 706rpx;
			left: 50%;
			top: 50%;
			margin-left: -288rpx;
			margin-top: -353rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			overflow: hidden;
			.image {
				width: 138rpx;
				height: 138rpx;
				position: absolute;
				left: 50%;
				top: 150rpx;
				transform: translateX(-50%);
				border-radius: 50%;
				border: 6rpx solid #FFFFFF;
				overflow: hidden;
			}
			.close {
				position: absolute;
				top: 30rpx;
				right: 30rpx;
				font-size: 50rpx;
				color: rgba(255, 255, 255, .7);
			}
			.top {
				height: 220rpx;
				background:rgba(250, 99, 66, 1);
				display: flex;
				flex-direction: column;
				align-items: center;
				text {
					font-size: 40rpx;
					font-family: "PingFang SC";
					font-weight: 400;
					color: rgba(255,255,255,1);
					line-height: 46rpx;
					margin-top: 50rpx;
				}
			}
			.mid {
				height: 390rpx;
				position: relative;
				.mid-item {
					position: absolute;
					width: 450rpx;
					height: 70rpx;
					left: 60rpx;
					display: flex;
					input {
						height: 100%;
						border: none;
						box-sizing: border-box;
						padding: 0 16rpx;
						font-size: 28rpx;
						border-radius: 2rpx;
						background: rgba(238,238,238,1);
						&.tel-input {
							width: 100%;
						}
						&.yzm-input {
							width: 240rpx;
						}
					}
					.cuIcon-roundclosefill {
						position: absolute;
						z-index: 2;
						@include text(40rpx);
						line-height: 70rpx;
						color: rgba(178,178,178,1);
						&.clear-tel {
							right: 8rpx;
						}
						&.clear-yzm {
							left: 182rpx;
						}
					}
					.placeholder {
						position: absolute;
						@include text(28rpx);
						width: auto;
						top: 22rpx;
						left: 17rpx;
						color: rgba(178,178,178,1);
					}
					.getYZM {
						height: 100%;
						flex: 1;
						font-size: 30rpx;
						color: rgba(250,99,66,1);
						display: flex;
						justify-content: center;
						align-items: center;
					}
				}
				.mid-top {
					top: 100rpx;
				}
				.mid-mid {
					position: absolute;
					height: 30rpx;
					line-height: 30rpx;
					font-size: 20rpx;
					top: 178rpx;
					left: 60rpx;
					font-weight:bold;
					color: rgba(250,99,66,1);
				}
				.mid-bot {
					top: 216rpx;
				}
				.mid-bot-text {
					position: absolute;
					top: 314rpx;
					width: 100%;
					@include text(24rpx);
					text-align: center;
					color: rgba(153,153,153,1);
				}
			}
			.bot {
				height: 96rpx;
				line-height: 96rpx;
				text-align: center;
				font-size: 32rpx;
				font-family: "Source Han Sans CN";
				font-weight: 400;
				color: rgba(250,99,66,1);
				background:rgba(254, 225, 218, 1);
				border-radius: 0;
				&.hover {
					background:rgba(250, 99, 66, 1);
					color: #FFFFFF;
				}
			}
		}	
	}
	@keyframes dialog-in {
		0% {
			transform: scale(0, 0);
		}
		100% {
			transform: scale(1, 1);
		}
	}
	@keyframes dialog-out {
		0% {
			transform: scale(1, 1);
		}
		100% {
			transform: scale(0, 0);
		}
	}
	@keyframes bg-in {
		0% {
			background: rgba(0, 0, 0, 0)
		}
		100% {
			background: rgba(0, 0, 0, .4)
		}
	}
	@keyframes bg-out {
		0% {
			background: rgba(0, 0, 0, .4)
		}
		100% {
			background: rgba(0, 0, 0, 0)
		}
	}
	.bg-in {
		animation: bg-in .2s;
		animation-fill-mode: forwards;
	}
	.bg-out {
		animation: bg-out .1s;
		animation-fill-mode: forwards;
	}
	.dialog-in {
		animation: dialog-in .2s;
		animation-fill-mode: forwards;
	}
	.dialog-out {
		animation: dialog-out .1s;
		animation-fill-mode: forwards;
	}
</style>