随笔 - 35  文章 - 0  评论 - 2  阅读 - 18824

uniapp---获取验证码

复制代码
<view class="apply-form">
  <view class="apply-lt"> 手机号 </view>
  <view class="apply-phone">
    <input type="text" :value="info.telephone" name="telephone" placeholder="请输入手机号" placeholder-style="color:#bebebe" @input="formphone" maxlength="11" />
  </view>
</view> <view class="apply-form">   <view class="apply-lt"> 验证码 </view>   <view class="apply-code">     <input type="number" value="" name="sms_code" placeholder="请输入验证码" placeholder-style="color:#bebebe" maxlength="6" />     <view class="apply-code-btn">       <button type="default" v-if="getCode" @tap="sendMobileCode">获取</button>       <button style="color: #969696;background-color: #eee;" type="default acv-code-btn" v-else disabled="true">{{ sec + 's' }}</button>     </view>   </view> </view>
复制代码
复制代码
<script>
    var tools = require('utils/tools.js');
    export default {
        data() {
            return {
                // 验证码
                sec: '60',
                getCode: true,
                
                mobileNum:''
            }
        },
        methods: {
            // 获取手机号
            formphone(e) {
                this.mobileNum = e.detail.value;
                console.log(this.mobileNum)
            },
            //发送短信验证码
            sendMobileCode() {
                var mobileNum = this.mobileNum;
                if (mobileNum.length == 0) {
                    uni.showToast({
                        title: '请输入手机号',
                        icon: 'none'
                    });
                    return;
                }
                var myreg = /^[1][3,4,5,6,7,8,9][0-9]{9}$/;
                if (!myreg.test(mobileNum) || mobileNum.length !== 11) {
                    uni.showToast({
                        title: '请输入正确格式的手机号',
                        icon: 'none'
                    });
                    return;
                }
                tools.ajax.post(
                    '', {
                        mobile: mobileNum, 
                    },
                    (err, res) => {
                        if (err) {
                            uni.showToast({
                                title: '接口异常',
                                icon: 'none'
                            });
                            return;
                        }
                        if (res.data.code == 1) {
                            uni.showToast({
                                title: res.data.msg
                            });
                            this.get_code_time();
                        } else {
                            uni.showToast({
                                title: res.data.msg,
                                icon: 'none'
                            });
                        }
                    }
                );
            },
            // 发送短信验证码60秒倒计时
            get_code_time() {
                this.getCode = false;
                this.get_code_interval = setInterval(() => {
                    --this.sec;
                }, 1000);
                setTimeout(() => {
                    clearInterval(this.get_code_interval);
                    this.getCode = true;
                    this.sec = '60';
                }, 60000);
            },
        },
        
    }
</script>
复制代码
复制代码
    .apply-form {
        display: flex;
        justify-content: space-between;
        width: calc(100% - 60rpx);
        margin: auto;
        padding: 25rpx 30rpx;
        border-bottom: solid 0.5px #dfdfdf;
        align-items: center;
    }
    .apply-lt {
        font-size: 30rpx;
    } 

    .apply-phone input {
        text-align: right;
        color: #333333;
        font-size: 30rpx;
    }

    .apply-code {
        display: flex;
        justify-content: flex-end;
        align-items: center;
    }

    .apply-code input {
        text-align: right;
        color: #333333;
        font-size: 30rpx;
        margin-right: 30rpx;
    }

    .apply-code-btn button {
        width: 120rpx;
        height: 60rpx;
        line-height: 60rpx;
        background: #FF7E30;
        color: #FFFFFF;
        font-size: 24rpx;
    }
复制代码

 

posted on   天空中的云~飞起来了  阅读(1463)  评论(2编辑  收藏  举报
编辑推荐:
· 10年+ .NET Coder 心语,封装的思维:从隐藏、稳定开始理解其本质意义
· .NET Core 中如何实现缓存的预热?
· 从 HTTP 原因短语缺失研究 HTTP/2 和 HTTP/3 的设计差异
· AI与.NET技术实操系列:向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
阅读排行:
· 10年+ .NET Coder 心语 ── 封装的思维:从隐藏、稳定开始理解其本质意义
· 提示词工程——AI应用必不可少的技术
· 地球OL攻略 —— 某应届生求职总结
· 字符编码:从基础到乱码解决
· SpringCloud带你走进微服务的世界
< 2025年3月 >
23 24 25 26 27 28 1
2 3 4 5 6 7 8
9 10 11 12 13 14 15
16 17 18 19 20 21 22
23 24 25 26 27 28 29
30 31 1 2 3 4 5

点击右上角即可分享
微信分享提示