weapp-v1/components/tel-verify.vue

<template>
	<view class="tel-verify" :class="showVerify && delayHide ? 'bg-in' : 'bg-out'">
		<view class="tel-verify-dialog" :class="showVerify && delayHide ? 'dialog-in' : 'dialog-out'">
			<view class="top"></view>
			<text class="close cuIcon-close" @tap="close"></text>
			<view class="mid">
				<open-data class="image" type="userAvatarUrl"></open-data>
				<view class="mid-top mid-item">
					<input type="text" class="tel-input" v-model="tel" maxlength="11" placeholder="请输入手机号">
					<text v-if="tel" @tap="clearTel" class="clear-tel cuIcon-roundclosefill"></text>
				</view>
				<view class="mid-bot mid-item">
					<input type="text" class="yzm-input" v-model="verify" maxlength="6" placeholder="请输入位验证码">
					<text class="getYZM" @tap="getYZM">{{countDown ? `${countDown}s` : '获取验证码'}}</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) {  //如果正在倒计时，表示验证码已发送
						uni.showModal({
							content:"验证码已发送,请稍后重试",
							showCancel:false
						})
					} 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
									uni.showModal({
										content:"验证码发送成功",
										showCancel:false
									})
									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 {  //手机号校验不通过，出现红色抖动文字提示用户
					uni.showModal({
						content:"请输入正确的手机号",
						showCancel:false
					})
				}
			},
			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 = ''
								uni.showModal({
									content:"验证码错误，请重新获取",
									showCancel:false
								})
							} else if (res.code === 400) {
								this.verify = ''
								uni.showModal({
									content:"验证码已超时，请重新输入",
									showCancel:false
								})
							} else if (res.code === 600) { // 表示用户已经绑定过手机号
								this.close()
								this.$store.dispatch('onLaunch')  //触发初始化方法
							} else {
								this.tel = ''
								this.verify = ''
								uni.showModal({
									content:"验证码或手机号无效，请重新输入",
									showCancel:false
								})
							}
						})
					}
				} else {
					uni.showModal({
						content:"请输入正确的手机号和验证码",
						showCancel:false
					})
				}
			},
			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;
		display: flex;
		align-items: center;
		justify-content: center;
		.tel-verify-dialog {
			width: 600rpx;
			background: #FFFFFF;
			border-radius: 20rpx;
			overflow: hidden;
			.close {
				position: absolute;
				top: 30rpx;
				right: 30rpx;
				font-size: 50rpx;
				color: rgba(255, 255, 255, .7);
			}
			.top {
				height: 350rpx;
				background-image: url("https://api.jiuweiyun.cn/public/uploads/weapp/icon/tel_logon_bg.png");
				background-size: 100% 100%;
				background-repeat: no-repeat;
				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 {
				width: 508rpx;
				padding: 117rpx 30rpx 40rpx 30rpx;
				position: relative;
				margin: -150rpx auto 35rpx auto;
				background-color: #FFFFFF;
				border-radius: 10rpx;
				position: relative;
				box-shadow: 0 0 3px rgba(0,0,0,.3);
				.image {
					width: 128rpx;
					height: 128rpx;
					position: absolute;
					left: 50%;
					top: -64rpx;
					transform: translateX(-50%);
					border-radius: 50%;
					border: 6rpx solid #FFFFFF;
					overflow: hidden;
				}
				.mid-item {
					// position: absolute;
					width: 450rpx;
					height: 70rpx;
					display: flex;
					margin-bottom: 70rpx;
					input {
						height: 100%;
						border: none;
						box-sizing: border-box;
						padding: 0 16rpx;
						font-size: 28rpx;
						border-radius: 2rpx;
						background: rgba(238,238,238,1);
						background-color: #F2F4F5;
						border-radius: 10rpx;
						&.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 {
						width: 148rpx;
						height: 48rpx;
						line-height: 48rpx;
						font-size: 24rpx;
						color: #FFFFFF;
						background-color: #FA6342;
						text-align: center;
						border-radius: 48rpx;
						margin-right: 12rpx;
					}
				}
				.mid-top {
					position:relative;
				}
				.mid-bot {
					background-color: #F2F4F5;
					display: flex;
					justify-content: space-between;
					align-items: center;
				}
				.mid-bot-text {
					width: 100%;
					color: #666666;
					text-align: center;
					font-size: 24rpx;
				}
			}
			.bot {
				width: 504rpx;
				height: 75rpx;
				line-height: 75rpx;
				text-align: center;
				font-size: 28rpx;
				color: #FFFFFF;
				background-color: #FA6342;
				border-radius: 72rpx;
				margin-bottom: 39rpx;
				border: none;
			}
		}	
	}
	@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>