uniapp动态获取验证码

 

<template>
	<view class="code">
		<u-navbar title="找回" :autoBack="true" :fixed='true' :placeholder="true"></u-navbar>
		<view class="wrodtext">
			输入验证码
		</view>
		<view class="code-tip-one">
			<view class="code-tip">已发送至<text>+86 {{phone.substring(0, 3)}}****{{phone.substr(phone.length-4)}}</text>
			</view>
			<view class="code-errow" v-if="codeclolor == '#ff0000'">验证码输入错误</view>
		</view>
		<input class="cinput" adjust-position="false" auto-blur="true" @blur="blur" @input="codenum" :focus="focus"
			value="code" v-model="code" type="number" maxlength="6" />
		<view class="code-input">
			<view v-for="(item,index) in 4" :key="index" @click="codefocus(index)"
				:style='(index == code.length? "border: 5rpx solid #242832;width: 122rpx;height: 122rpx;line-height: 122rpx;":"color: " + codeclolor + ";" +"border: 2rpx solid" + codeclolor)'>
				{{code[index] && code[index] || ''}}
			</view>
		</view>
		<view class="code-get">
			<view class="noreceived" @click="nogetCode()">收不到验证码？</view>
			<view class="recode" @click="getCode()">重新获取({{sec}}s)</view>
		</view>
		<!-- <button class="verifylogin" @click="getCode()" :disabled="verifyShow">验证并登录</button> -->
		<button class="verifylogin"  @click="gonext()">下一步</button>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				phone: '12345678910',
				// 验证码输入聚焦
				focus: true, //input焦点，用于键盘隐藏后重新唤起
				// 验证码框颜色
				codeclolor: "#313131", //自定义光标的颜色
				// 验证码获取秒数
				sec: '20', //这是重新获取验证码的倒计时(可根据需求修改)
				code: '', //这是用户输入的验证码
				codeCorrect: '', //正确的验证码
				verifyShow: false, //是否禁用按钮
			}
		},
		methods: {
			// 输入验证码
			codenum: function(event) {
				// console.log('输入的值',event.target.value)
				var that = this
				var code = event.target.value
				that.code = code
				if (code.length == 4) {
					if (code == that.codeCorrect) {
						//输入4位验证码后自动进行验证并执行验证成功的函数
						console.log('验证码正确：', that.code)
					} else {
						console.log('验证码错误!!!：', that.code)
						that.codeclolor = "#ff0000"
						setTimeout(function() {
							that.code = []
							event.target.value = ""
							that.codeclolor = "#313131"
						}, 1500)
					}
				}
			},
			// 键盘隐藏后设置失去焦点
			blur: function() {
				var that = this
				that.focus = false
			},
			// 点击自定义光标显示键盘
			codefocus: function(e) {
				var that = this
				if (e == that.code.length) {
					that.focus = true
				}
			},
			// 收不到验证码
			nogetCode(){
				uni.navigateTo({
					url: "/pages/my/nocode/nocode",
				});
			},
			getCode() { //获取验证码
				const that = this
				that.codeCorrect = that.getVerificationCode(4) //可以不传值，默认为4位随机码
				console.log('生成的随机码为：' + that.codeCorrect)
				that.timedown(that.sec) // 倒计时
			},
			gonext(){
				uni.navigateTo({
					url: "/pages/my/setword/setword",

				});
			},
			//随机生成几位数
			getVerificationCode(codeLength) { //传入需要的字符串长度，不传默认为4
				// 准备一个用来抽取码的字符串，或者字典
				// let verification_code_str = "abcdefghijklmnopqrstuvwxyz0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ0123456789";  //数字和字母
				let verification_code_str = "0123456789"; //纯数字
				// 获取某个范围的随机整数，封装的函数，在上面抽取字典的时候进行了调用
				function getRandom(min, max) { //意思是获取min-max数字之间的某个随机数，直接调用即可
					return Math.round(Math.random() * (max - min) + min);
				}
				let newStr = ''; //创建一个空字符串，用来拼接四位随机码
				for (var i = 0; i < codeLength; i++) { //for循环四次，则拼接四次随机码
					newStr += verification_code_str[getRandom(0, verification_code_str.length -
					1)]; //从字典中随机选一个下标，并拼接到空字符串中
				}
				return newStr
			},
			//倒计时
			timedown: function(num) {
				let that = this;
				if (num == 0) {
					that.verifyShow = false; // 不禁用获取验证码按钮
					that.sec = 20
					return clearTimeout();
				} else {
					that.verifyShow = true; // 禁用获取验证码按钮
					setTimeout(function() {
						that.sec = num - 1
						that.timedown(num - 1);
					}, 1000); //定时每秒减一  
				}
			},
		}
	}
</script>

<style scoped lang="less">
	.code {
		margin: auto;
		margin-top: 50rpx;
		width: 100vw;
		height: 100vh;
		background-color: #FFFFFF !important;
		color: #000000 !important;
		padding: 0 20rpx;
	}

	.wrodtext {
		color: #242832;
		font-size: 48rpx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		margin: 80rpx 0 80rpx 14rpx;
		padding: 20rpx 0;
	}


	.code-tip-one {
		width: 650rpx;
		height: 250rpx;
		line-height: 100rpx;
		font-size: 60rpx;
		font-weight: bold;
		color: #313131;
	}

	.code-tip {
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #8F8F9A;
		position: relative;
		top: -180rpx;
		left: 330rpx;
	}

	.code-errow {
		width: 650rpx;
		height: 50rpx;
		line-height: 25rpx;
		font-size: 28rpx;
		font-weight: normal;
		color: #ff0000;
		margin: 20rpx 60% 0 40%;
	}

	.code-tip>text {
		padding: 0 20rpx;
		// width: 650rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #242832;

	}

	.code-input {
		position: absolute;
		top: 420rpx;
		left: 40rpx;
		// width: 650rpx;
		height: 100rpx;
		display: flex;
	}

	.code-input>view {
		margin-right: 54rpx;
		// margin-left: 15rpx;
		width: 128rpx;
		height: 128rpx;
		line-height: 128rpx;
		// font-size: 60rpx;
		// font-weight: bold;
		// color: #DDDEE0;
		text-align: center;
		// opacity: 0.7;
		// border: 1px solid #DDDEE0;
		// border-radius: 10rpx;

	}

	.code-input>view:nth-child(1) {
		margin-left: 0rpx;
	}

	.cinput {
		position: fixed;
		left: -100rpx;
		width: 50rpx;
		height: 50rpx;
	}
	.code-get{
		transform: translatey(-80rpx);
		width: 90vw;
		display: flex;
		justify-content: space-between;
	}
	.noreceived{
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #242832;
		margin-left: 20rpx;
	}

	.recode {
		
		font-size: 26rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #F03056;
	}

	.verifylogin {
		width: 92vw;
		height: 88rpx;
		line-height: 88rpx;
		background: #F03056;
		margin-top: 200rpx;
		font-size: 32rpx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500;
		color: #FFFFFF;
	}
</style>

备注：uview框架也有类似代码

链接：CodeInput 验证码输入 | uView 2.0 - 全面兼容nvue的uni-app生态框架 - uni-app UI框架 (uviewui.com)https://www.uviewui.com/components/codeInput.html

 自己记录一下：二维码扫描功能uni.scanCode(OBJECT) | uni-app官网https://uniapp.dcloud.net.cn/api/system/barcode.html#scancode