uni-app实现手机发送验证码的效果，以及实现过程中会遇到的一些基本的逻辑如何进行判断处理

效果预览：

处理一些可能出现的逻辑：

逻辑1：用户输入手机号必须满足11位数，如不满足，或输入了其他特殊字符，这些通通都要排除掉，并且在页面打印提醒的红字信息。并且用户在此期间，不能发送验证码。

逻辑2：如果用户重新输入了完整的11位数手机号码，那么红字就要自动取消掉，不能一直出现在页面上了。

逻辑3：用户习惯，有的用户输完手机号后，喜欢敲回车，有的喜欢点按钮，无论用户选择哪一种方式，你都必须发送验证码。

逻辑4：按钮点击之后，必须为disabled禁用状态，防止用户频繁多次触发点击。同时按钮里面的内容会发生变化，不在是静态的“发送”2个字，而是显示验证码的倒计时信息。

逻辑5：按钮点击之前和之后的颜色实现，点击之前为蓝色，点击之后为禁用的白色按钮，倒计时结束后，又要恢复原始按钮的状态（也就是倒计时也要消失，文本恢复成“发送”二字）。

逻辑6：倒计时里面秒数的实现依靠的是定时器，什么时候应该停止定时器的进程（清除计时器）？并且复原按钮初始状态，这时候验证码也要恢复到原来的时间点。

涉及一些uni-app组件的知识：
数据绑定
双向数据绑定
方法类型
uni-app组件本身提供的属性

完整代码如下：

<template>
    <view class="content">
        <view class="box">
            手机号：
            <view class="phone-box">
                <!-- @confirm监听回车事件 -->
                <input type="text" @confirm="sendInfo" v-model="PhoneNumber"/>
            </view>
                <!-- @tap监听用户点击事件 -->
            <button :type="isType" @tap="sendInfo" :disabled="isDisabled">
                {{text}}
            </button>
        </view>
        <text v-if="isShow" class="alertText">请输如有效的手机号码！</text>
    </view>
</template>

<script>
    export default {
        data() {
            return {
                PhoneNumber:'',//判断用户输入
                text: '发送',
                isDisabled: false,
                isType: 'primary',//判读按钮的颜色
                isShow:false,//是否显示红色文本提醒
                time: 3
                
            }
        },
        methods: {
            sendInfo() {
                if(this.PhoneNumber != Number && this.PhoneNumber.length != 11){//判断手机输入条件
                    this.isShow = true//显示红色文本
                }
                else {
                    this.isShow = false//用户输入重新输入正确的手机号后，红色文本提醒信息消除
                    let time = this.time
                    this.isDisabled = true
                    this.isType = 'default'
                    const timer = setInterval(() => {
                        if (time == 0) {
                            clearInterval(timer)//清除定时器后，以下都是恢复原始状态
                            this.isDisabled = false
                            this.isType = 'primary'
                            this.text = '发送'
                            time = this.time
                    
                        } else {
                            this.text = `${time}秒`
                            time-- //倒计时的实现，利用递减
                        }
                    }, 1000)
                }
            }
        }
    }
</script>

<style lang="scss">
    .content {
        .box {
            display: flex;
            justify-content: space-around;
            font-size: 45upx;
            height: 92upx; //1px = 2upx = 2rpx
            line-height: 92upx;

            .phone-box {
                width: 420upx;
                border: 1upx solid #C0C0C0;
                border-radius: 10upx;

                input {
                    font-size: 55upx;
                }
            }

        }
    }
    .alertText{
        color: red;
        display: flex;
        justify-content: center;
    }
</style>