<template>

    <div class="change-phone-box">

        <img class="phone-img" :src="'img/change_telephone@2x.png' | assets" alt="修改手机号">

        <p class="tip">您当前的手机号为&nbsp;<span>{{ phoneNum }}</span><br>更改后可用新手机号</p>

    </div>

    <div v-el:keyboard>

        <div class="m-register-pannel">

            <div class="m-form-item v-table">

                <span class="m-form-label v-cell"><i class="icon icon-phoneNum"></i></span>

          <span class="m-form-content v-cell">

            <input type="tel" placeholder="输入手机号" v-model="mobile" @focus="keyboardBounce(false)"

                   @blur="keyboardBounce(true)" @keyup="changeStyle($event)" maxlength="11"/>

          </span>

            </div>

            <div class="m-form-item v-table">

                <span class="m-form-label v-cell"><i class="icon icon-messageCode"></i></span>

          <span class="m-form-content v-cell">

            <input type="tel" placeholder="短信验证码" v-model="verifyCode" @focus="keyboardBounce(false)"

                   @blur="keyboardBounce(true)" maxlength="6"/>

          </span>

          <span class="fr get-message-code" @click="msgCode()"

                :style="{'background-color': (canGetMsgCode?'#00cc99':'#c4cdd4') }">

            {{msgCodeBtnText?msgCodeBtnText:'获取验证码'}}

          </span>

            </div>

        </div>

        <div class="m-form-action">

            <button full @click="changePhoneSubmit()">确&nbsp;认</button>

        </div>

    </div>

</template>

<script type="text/babel">

    import Config from '../app.config'

    export default {

        data () {

            return {}

        },

        vuex: {

            getters: {},

            actions: {}

        },

        methods: {

            keyboardBounce(isClose){

                if (Config.isAndroid) {

                    var keyboard = this.$els.keyboard;

                    var timer = setInterval(function () {

                        keyboard.scrollIntoView(false);

                        if (isClose) {

                            clearInterval(timer);

                        }

                    }, 200);

                }

            },

        }

    }

</script>

</body>

</html>