bab-icon/resources/assets/js/components/UiPhone.vue

<template>
    <el-row class="form-group">
        <el-col :span="3" style="min-height:50px;padding-top:10px;">
            <label style="margin-left:10px;vertical-align: middle;" class="control-label">{{label ? label : 'Text'}}</label>
        </el-col>
        <el-col :span="9">
            <el-input
                :type="typeV"
                v-model="text"
                :placeholder="placeholder ? placeholder : ''"
                :disabled="disabled ? true : false"
                :name="name ? name : 'text'"
                :minlength="minlength ? parseInt(minlength) : 0"
                :maxlength="maxlength ? parseInt(maxlength) : 200"
                :auto-complete="autoComplete ? 'on' : 'off'"
                :readonly="readonly ? true : false"
                :show-password="showPassword ? true : false"
                :autofocus="autofocus ? true : false"
                :id="name"
                :size="size ? size : 'large'"
                @change="selectChange">
            </el-input>
        </el-col>

        <el-col :span="5">
            <button type="button"  @click="sendCode()" class="btn btn-info" v-if="time_num*1<=0">发送验证码</button>
             <button type="button" class="btn" v-else>{{time_num}} s</button>
        </el-col>
        <el-col :span="6">
            <div class="classJs">
                <div v-if="tips">
                    <span class="red">*</span>&ensp;{{tips}}
                </div>
            </div>
        </el-col>
    </el-row>
</template>

<script>
    export default {
        props: ['label','value','placeholder','disabled','name','minlength','maxlength','readonly','autofocus','autoComplete','size','tips', 'type', 'showPassword','send_url'],
        data() {
            return {
                'text': this.value ? this.value : '',
                'typeV': this.type ? this.type : 'number',
                'time_num':0,
            };
        },
        mounted() {},
        methods: {
            selectChange(value) {
                this.$emit('set-keys',value);
            },
            sendCode:function (){
                var code_vue = this;
                console.log(this.send_url)
                if(this.text==''){
                    layer.msg('请输入手机号码', {
                        icon: 5,
                        time: 2000
                    });
                    return false;
                }
                $.ajax({
                    type: 'post',
                    url: this.send_url,
                    data: {
                        'phone': this.text,
                    },
                    dataType: 'json',
                    success: function(msg) {
                        console.log(msg)
                        console.log(msg.message)
                        if (msg.status * 1 == 1) {
                            code_vue.time_num=60;
                            layer.msg('短信发送成功', {
                                icon: 1,
                                time: 2000
                            });
                           var  daojishiintevaltel = setInterval(function () {
                                --code_vue.time_num;
                                if (code_vue.time_num <= 0) {
                                    clearInterval(daojishiintevaltel);
                                }
                            }, 1000);
                        }else {
                            layer.msg(msg.message, {
                                icon: 5,
                                time: 2000
                            });
                            return false;
                        }
                    },
                    error: function() {
                        layer.msg('服务器繁忙,请稍后再试!!!', {
                            icon: 3,
                            time: 2000
                        });
                    }
                });
            }
        }
    }
</script>

<style scoped>
    .classJs {
        margin-left: 10px;
        vertical-align: middle;
        height:42px;
        line-height:42px;
    }
    .red{
        color: red;
    }
</style>