wapshop/src/components/login/login.vue

<template>
    <div style="background: #F7F7F7;">
        <div v-document_title>登录</div>
        <div class="login_input">
            <input type="tel" name="userMobile" class="input_mobile" v-model="userMobile" placeholder="请输入您的手机号码">
            <flexbox :gutter="20">
                <flexbox-item>
                    <input type="number" name="code" v-model="code" class="input_mobile" placeholder="请输入验证码">
                </flexbox-item>
                <flexbox-item>
                    <button type="button" @click="getCode" class="get_code_btn">{{isCount?countTime:btn_msg}}</button>
                </flexbox-item>
            </flexbox>
            <button type="button" class="button_submit" @click="login_submit">立即登录</button>
        </div>
    </div>
</template>
<script>
    import { Flexbox , FlexboxItem , Divider} from 'vux';
    import Api from '../../lib/api';
    export default {
        data () {
            return {
                userMobile:'',
                btn_msg:'获取验证码',
                code:'',
                countTime:60,
                isCount:false
            }
        },
        components: {
            Flexbox,
            FlexboxItem,
            Divider
        },
        methods:{
            login_submit(){
                let mobile = this.userMobile;
                let code = this.code;
                if(!mobile ||  !/^1(3|4|5|7|8)\d{9}$/.test(mobile)) {
                    this.$vux.toast.show({
                        type:'text',
                        text: '请输入正确的电话号码',
                        position:'middle'
                    })
                }
                else if(!code ) {
                    this.$vux.toast.show({
                        type:'text',
                        text: '请输入验证码',
                        position:'middle'
                    })
                }
                else {
                    this.$store.commit('updateLoadingStatus', {isLoading: true});
                    this.$http.jsonp(Api.login(mobile,code),{_timeout:5000}).then(function(res)
                    {
                       if(res.body.code == 200)
                       {
                           this.$http.jsonp(Api.memberInfo(),{_timeout:5000}).then(function(res){
                               if(res.body.code !== 10014) {
                                   this.$store.commit('updateLogIn');
                                   this.$store.commit('updateUser',{'name':res.body.datas.member_nickname,'image':res.body.datas.member_avatar});
                                   this.$http.jsonp(Api.userBonus()).then(function(res){
                                       this.$store.commit('updateUser_bonus',{'array':res.body.datas.bonus_rate});
                                   });
                                   this.$store.commit('updateLoadingStatus', {isLoading: false});
                                   this.$router.push('/');
                               }
                           },(err) => {
                               this.$vux.toast.show({
                               type: 'text',
                               text: "网络错误",
                               position: 'middle'
                           })
                       });
                       }
                       else {
                           this.$store.commit('updateLoadingStatus', {isLoading: false});
                           this.$vux.toast.show({
                               type:'text',
                               text: res.body.message,
                               position:'middle'
                           })
                       }
                    },(err) => {
                        this.$vux.toast.show({
                        type: 'text',
                        text: "网络错误",
                        position: 'middle'
                    })
                });
                }
            },
            getCode(){
                let mobile = this.userMobile;
                if(!mobile || !/^1(3|4|5|7|8)\d{9}$/.test(mobile)) {
                    this.$vux.toast.show({
                        type:'text',
                        text: '请输入正确的电话号码',
                        position:'middle'
                    })
                }
                else {
                    if(this.isCount) return;
                    this.isCount = true;
                    let _self = this;
                    let count = setInterval(function(){
                        _self.countTime = _self.countTime -1;
                        if(_self.countTime<=0) {
                            clearInterval(count);
                            _self.isCount = false;
                        }
                    },1000);
                    this.$http.jsonp(Api.getCode(mobile),{_timeout:5000}).then(function(res){
                        if(res.body.code != 200) {
                            this.$vux.toast.show({
                                type:'text',
                                text: res.body.message,
                                position:'middle'
                            })
                        }
                    },(err) => {
                        this.$vux.toast.show({
                        type: 'text',
                        text: "网络错误",
                        position: 'middle'
                    })
                });
                }
            }
        }
    }
</script>
<style scoped>
    .login_input {
        padding-top:12px;
        width: 600px;
        margin: 0 auto;
    }
    .input_mobile {
        display: block;
        width: 98%;
        height:72px;
        padding-left: 2%;
        font-size: 24px;
        background: #ffffff;
        border: none;
        border-radius: 5px;
        margin-bottom: 20px;
    }
    .button_submit,.get_code_btn {
        display: block;
        width: 100%;
        height: 72px;
        text-align: center;
        background: #EB4E4F;
        color: #fff;
        border: none;
        border-radius: 5px;
        font-size: 24px;
        margin-bottom: 20px;
    }
</style>