• uni-app 获取短信验证码


    保存一下,留待后用

    (template)

    <view class="lia">
      <input @input="shuma" v-model="yanzhengnum" :class="shumatext ? 'shuruhou' : 'shuruqian'" type="number" placeholder="请输入您收到的验证码" />
      <view :class="disabled ? 'huoquzhong' : 'huoqu'" @click="get_code">{{ time }}{{ text }}</view>
    </view>

    (script)

    <script>
    export default {
    	data() {
    		return {
    			shumatext: false,
    			yanzhengnum: '',
    			text: '获取验证码',
    			time: '',
    			disabled: false
    		};
    	},
    	methods: {
    		//获取验证码
    		async get_code() {
    			var pphone = /^1[3456789]d{9}$/;
    			var pkong = /^[sS]*.*[^s][sS]*$/;
    			if (this.disabled) {
    				return;
    			}
    			// if(!pkong.test(this.phonenum) || !pphone.test(this.phonenum)){
    			// 	 Eapp.ui.toast.text("请输入正确的手机号");
    			// 	 return false
    			// }
    
    			this.disabled = true;
    			this.setInterValFunc();
    		},
    		setInterValFunc() {
    			this.time = 60;
    			this.text = '秒';
    			this.setTime = setInterval(() => {
    				if (this.time - 1 == 0) {
    					this.time = '';
    					this.text = '重新获取';
    					this.code = '';
    					this.disabled = false;
    					clearInterval(this.setTime);
    				} else {
    					this.time--;
    				}
    			}, 1000);
    		},
    		// 验证码输入框
    		shuma(e) {
    			if (e.detail.value) {
    				this.shumatext = true;
    			} else {
    				this.shumatext = false;
    			}
    		}
    	}
    };
    </script>
    

    (css)

    <style scoped >
    .lia {
    	 690rpx;
    	height: 105rpx;
    	margin: 0 auto;
    	border-bottom: 1rpx solid #f1f1f1;
    	display: flex;
    	flex-direction: row;
    	flex-wrap: nowrap;
    	align-items: center;
    	justify-content: space-between;
    }
    .shuruqian {
    	height: 50rpx;
    	 60%;
    	font-size: 32rpx;
    	font-family: PingFangSC-Regular, PingFang SC;
    	font-weight: 400;
    }
    .shuruhou {
    	height: 50rpx;
    	 60%;
    	font-size: 36rpx;
    	font-family: PingFangSC-Regular, PingFang SC;
    	font-weight: 400;
    	color: #333333;
    }
    .huoqu {
    	font-size: 32rpx;
    	font-family: PingFangSC-Regular, PingFang SC;
    	font-weight: 400;
    	color: #2d8bff;
    }
    .huoquzhong {
    	font-size: 32rpx;
    	font-family: PingFangSC-Regular, PingFang SC;
    	font-weight: 400;
    	color: #999999;
    }
    </style>
    

      

  • 相关阅读:
    SPOJ
    SPOJ LCS Longest Common Substring(后缀自动机)题解
    HihoCoder1445 后缀自动机二·重复旋律5(后缀自动机 子串种数)
    eclipse 常用设置
    读取Request body方法
    pom.xml实例
    powerdesign连接Oracle&Mysql
    Json常用操作
    Spring MVC POM示例
    FreeMaker常用表达式
  • 原文地址:https://www.cnblogs.com/xiaoyaolang/p/14052580.html
Copyright © 2020-2023  润新知