uni-app 之验证码

手机APP---验证码

最近公司在开发手机APP，app避不可免的就是登录了，emmmm 登录验证码那必须的是有的，我们公司发给我们的图片是酱紫的~~

　　这个要求大家应该都能看懂，做这个手机号啊，验证码啊，读秒这些啊，这都emmmm分分钟完成了？但是这个四位数的验证码整整折磨了我四天，啊！！！！ 恶龙咆哮~

　　其实这个实现 并不难，刚进入页面的时候，获取第一个input的焦点，最大长度为1，输入完成后自动跳到下一个input框，最开始的时候，focus全部为false，跳到是变为true，然后删除时，跳回到上一个input，真的是这样说的很溜，但是这个真的折磨了我四天，想了我能想到的，结果这个方案还是废弃掉了，（不包含我很菜的原因），我在解决这个问题的时候发现了一个很严重的问题，就是在uni-app上的时候使用他的input这个输入框的时候，使用它的@input的时候，他会跟v-model  emmmm，怎么说，，，，姑且说是冲突把，它获取不到第一个输入数据的内容，像我上面的有四个input，但是就只能获取到他的三个数据，第一个数据是获取不到的，input出来的值跟v-model的值是对不上的，后来，我解决了这个问题，我将input里面的。detail.value的值直接赋值给了model对应的字段，‘强行’让他们一样的，BUT！！！这个问题解决完之后，还有一系列，，，直接把我逼疯emmmm，后来项目更新在急，就把这个先废弃了，等有空了向大佬请教再去研究他，然后我换了另一种方法，手动搭建还原了一个键盘，通过键盘的点击，获取值，然后我在显示在view中

具体如下：

　　　说起这个样式，不得不说自己今天刚刚认识的一个display:table ,才发现自己是真的菜啊，别人不是白说的，我以前用display仅仅限于 none，block，inline，flex。我今天看见display：table的时候震惊坏了，后来我上了W3C仔细看了看，他讲的是将元素座位块集表格来显示，是一个类似于table的，表格前后还是带有 换行符的，看一下具体代码

　　html:

　　<view class="dialog-bd">
　　　　<view class="code-view">
　　　　　　<view v-for="(code,index) of codeAry" :v-key="index" class="code-item">{{code.val}}</view>
　　　　</view>
　　</view>

　　js：

　　codeAry: [{"val": ""}, {"val": ""}, {"val": ""}, {"val": ""}],          //将四位验证码写成数组遍历

　　css样式：

        .code-view {
		height: 150upx;
		display: table;
		text-align: center;
		margin: 0 auto;
		border-collapse: separate;
		border-spacing: 10px 5px;
	}
	.code-item {
		display: table-cell;
		border-bottom: 1px solid #999;
		width: 136upx;
		font-size: 90upx;
                margin-left: 5px;
	}

　　这样就达到了一下的效果：

     最下面的这段就是我手写的一个键盘，通过点击键盘来获取键盘对应的值，然后显示在上面

详细代码为：

<!-- 确认验证码 -->
<template>
	<view class="register">
		<view class="been-sent">验证码已发送至手机</view>
		<view class="phone-number">{{loginForm.phone}}</view>
		<view class="code">请输入验证码</view>

		<view class="dialog-bd">
			<view class="code-view">
				<view v-for="(code,index) of codeAry" :v-key="index" class="code-item">{{code.val}}</view>
			</view>
		</view>
		<!-- 验证码判断 -->
		<view class="time" v-if="ashow">
			<view class="date">{{num}}</view>
			<view class="date-content">后 可重发验证码</view>
		</view>
		<view v-else>
			<view class="again-content">还收不到验证码？请先确认手机是否安装了短信拦截软件或是欠费停机。均若不是，请尝试以下方式</view>
			<view class="again-send" @click="again">重发验证码</view>
		</view>
		<view class="keyboard">
			<view class="keyboard-line">
				<view data-val="1" @click="bindKeyEvent" class="button-item">1</view>
				<view data-val="2" @click="bindKeyEvent" class="button-item">2</view>
				<view data-val="3" @click="bindKeyEvent" class="button-item">3</view>
			</view>
			<view class="keyboard-line">
				<view data-val="4" @click="bindKeyEvent" class="button-item">4</view>
				<view data-val="5" @click="bindKeyEvent" class="button-item">5</view>
				<view data-val="6" @click="bindKeyEvent" class="button-item">6</view>
			</view>
			<view class="keyboard-line">
				<view data-val="7" @click="bindKeyEvent" class="button-item">7</view>
				<view data-val="8" @click="bindKeyEvent" class="button-item">8</view>
				<view data-val="9" @click="bindKeyEvent" class="button-item">9</view>
			</view>
			<view class="keyboard-line">
				<view data-val="clear" @click="bindKeyEvent" class="button-item">清空</view>
				<view data-val="0" @click="bindKeyEvent" class="button-item">0</view>
				<view data-val="delete" @click="bindKeyEvent" class="button-item">x</view>
			</view>
		</view>
	</view>
</template>

<script>
	import middle from "../../middleware/login.js"
	export default {

		data() {
			return {
				// 验证码四位数组
				codeAry: [{
					"val": ""
				}, {
					"val": ""
				}, {
					"val": ""
				}, {
					"val": ""
				}],
				// 个数
				currItem: 0,
				// 验证码
				callResult: {
					type:0,
					code:null
				},
				// 倒数重发显示切换
				ashow:true,
				// 验证码长度
				len: '4',
				// 发送参数
				loginForm:{
					isLogin: true,
					codeType:2
				},
				// 获取的类型  判断为注册用户还是忘记密码
				type:0,
				// 倒计时
				num:60,
				// 发送参数 判断用户是否存在
				numlist:{
					number:'',
				},

			}
		},
		onLoad(options) {
			//接收上个页面的type
			this.type = options.type
			if(this.type == 1){
				this.loginForm.codeType = 3
			}
			// 页面加载获取上个页面穿的手机号码
			this.loginForm.phone = options.tel
			// 清除定时器
			clearInterval(this.timer);
			// 进入页面后就开始60秒倒数
			this.timer = setInterval(() => {
				this.num--;
				if(this.num == 0) {
					this.ashow =false
					clearInterval(this.timer)
				}
			},1000)
    	},

		methods: {
			/**
			* @author 宫丽颖
			* @date 2019-06-19
			* @information 键盘点击事件
			*/
			bindKeyEvent: function(e) {
				var _this = this;
				var val = e.currentTarget.dataset.val;
				// 键盘各种事件
				switch (val) {
					case "clear":
						_this.clearCode();
						break;
					case "delete":
						_this.deleteCode();
						break;
					default:
						_this.inputVal(val);
						break;
				}
			},
			/*
			* @author 宫丽颖
			* @date 2019-06-19
			* @information 拼接验证码
			*/
			getCodeValue:function(){
				var codeStr = "";
				this.codeAry.forEach(function(code){
					codeStr+=code.val;
				})
				return codeStr;
			},
			/*
			* @author 宫丽颖
			* @date 2019-06-19
			* @information 清空内容
			*/
			init: function() {
				var codeAry = [];
				for (var i = 0; i < this.len; i++) {
					codeAry.push({
						val: ""
					})
				}
				this.codeAry = codeAry;
				this.currItem = 0;
			},
			/*
			* @author 宫丽颖
			* @date 2019-06-19
			* @information 清空内容事件
			*/
			clearCode: function() {
				this.init();
			},

			/*
			* @author 宫丽颖
			* @date 2019-06-19
			* @information 回退x 事件
			*/
			deleteCode: function() {
				if (this.currItem > 0) {
					this.codeAry[this.currItem - 1].val = "";
					this.currItem--;
				}
			},
			/**
			 * @author 宫丽颖
			 * @date 2019-06-19
			 * @information 输入内容
			 */
			inputVal: function(val) {
				if (this.currItem < this.len) {
					this.codeAry[this.currItem].val = val;
					this.currItem++;
				}
				if (this.currItem == this.len) {
					this.execuCall(1);
				}
			},

			/*
			* @author 宫丽颖
			* @date 2019-06-19
			* @information 输入完成后验证验证码
			*/
			execuCall:function(type){
				let _this = this
				this.callResult.type = type;
				if(type == 1){
					this.callResult.code = this.getCodeValue();
					this.loginForm.code = this.callResult.code
					middle.codeLogin(this.loginForm).then(res => {
						if(res.statusCode == 1000){
							uni.setStorage({
								key: "phone",
								data: this.loginForm.phone
							})
							uni.showToast({
								title: '验证通过：'+ this.loginForm.code,
								duration: 2000
							});
							setTimeout(() => {
								uni.navigateTo({
									url:`/pages/login/SetUpPassword?tel=${this.loginForm.phone}&type=${this.type}`
								})
							},500)
						}
						clearInterval(this.timer)
					})
					.catch(error =>{
						uni.showModal({
							title: '提示',
							content: '验证码错误，请重新输入',
							showCancel:false,
							confirmColor:'#00c16f',
							success: function (res) {
								_this.init()
							}
						});
					})

				}
			},
			/*
			* @author 宫丽颖
			* @date 2019-06-19
			* @information 重新发送验证码
			*/
			again:function () {
				this.ashow = true
				this.num = 60;
				this.timer = setInterval(() => {
					this.num--;
					if(this.num == 0) {
						this.ashow =false
						clearInterval(this.timer)
					}
				},1000)
				// 将手机号赋值给number
				this.numlist.number = this.loginForm.phone
				// 访问验证码接口
				middle.getCode(this.numlist)

			},
		}
	}
</script>

<style>
</style>

　　各位大佬，代码仅供参考，若有不足，还请改正~~~