zhishifufei_php/application/wap/view/first/my/save_phone.html

<!-- +---------------------------------------------------------------------- -->
<!-- | 天诚科技 [ 刘海东 17600099397赋能开发者，助力企业发展 ] -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Copyright (c) 2016～2022 https://www.crmeb.com All rights reserved. -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Licensed 该系统并不是自由软件，未经许可不能去掉相关版权 -->
<!-- +---------------------------------------------------------------------- -->
<!-- | Author:甘肃天诚志信电子商务有限公司 刘海东 联系电话维系17600099397 -->
<!-- +---------------------------------------------------------------------- -->
{extend name="public/container"}
{block name="title"}{if $user_phone}更换手机号码{else}绑定手机号码{/if}{/block}
{block name='head_top'}
<style>
    body {
        background-color: #f2f2f2
    }

    .replace-phone .list .item button img {
        display: block;
        width: 1.4rem;
        height: .58rem;
    }
</style>
{/block}
{block name="content"}
<div class="replace-phone" id="app" v-cloak>
    <ul class="list">
        <li class="item"><input type="text" :placeholder="place_msg" v-model="phone"></li>
        <li class="item itemCode acea-row row-between-wrapper">
            <input type="tel" v-model="code_num" maxlength="11" placeholder="请输入验证码">
            <button v-if="isCaptcha" type="button" @click="getCaptcha"><img :src="'../auth_api/captcha?' + timestamp" alt="验证码"></button>
            <button v-else class="code" :disabled="active" :class="active == true?'on':''" @click="code">{{timetext}}</button>
        </li>
    </ul>
    <div v-if="isCaptcha" class="bnt" @click="del_redis_phone">提交验证</div>
    <div v-else class="bnt" v-text="but_name" @click="goNext">下一步</div>
    <!--完成-->
    <quick-menu></quick-menu>
</div>
{/block}
{block name='foot'}
<script>
    var phone = '{$user_phone}';
    require(['vue', 'layer', 'helper', 'axios', 'store', 'reg-verify', '{__WAP_PATH}zsff/js/quick.js'], function (Vue, layer, $h, axios, app, $reg) {
        new Vue({
            el: '#app',
            data: {
                phone: phone || '',
                code_num: '',
                place_msg: phone ? '请输入原手机号' : '请输入手机号码',
                active: false,
                timetext: '获取验证码',
                but_name: phone ? '下一步' : '确认绑定',
                run: null,
                type: 0,
                isCaptcha: false,
                timestamp: 0
            },
            methods: {
                goNext: function () {
                    var that = this;
                    if (phone) {
                        app.baseGet($h.U({c: 'my', a: 'validate_code', q: {phone: this.phone, code: this.code_num}}), function (res) {
                            $h.pushMsgOnce(res.data.msg, function () {
                                that.phone = '';
                                that.code_num = '';
                                that.but_name = '确认绑定';
                                that.place_msg = '请输入新手机号';
                                that.active = false;
                                that.type = 1;
                                phone = '';
                                if (that.run) clearInterval(that.run);
                                that.timetext = '获取验证码';
                                document.title = '绑定手机号码';
                            });
                        });
                    } else {
                        app.baseGet($h.U({
                            c: 'my',
                            a: 'save_phone',
                            q: {
                                phone: this.phone,
                                code: this.code_num,
                                type: this.type
                            }
                        }), function (res) {
                            $h.pushMsgOnce(res.data.msg, function () {
                                window.location.href = $h.U({c: 'my', a: 'index'});
                            })
                        });
                    }
                },
                code: function () {
                    var that = this;
                    if (!that.phone) return $h.pushMsgOnce('请输入手机号码');
                    if (!$reg.isPhone(that.phone)) return $h.pushMsgOnce('请输入正确的手机号码');
                    this.SendOutCode();
                },
                SendOutCode: function () {
                    var vm = this;
                    var n = 60;
                    this.active = true;
                    vm.run = setInterval(function () {
                        n--;
                        if (n < 0) {
                            clearInterval(vm.run);
                            vm.run = null;
                            vm.active = false;
                        }
                        vm.timetext = "剩余 " + n + "s";
                        if (vm.timetext < "剩余 " + 0 + "s") {
                            vm.active = false;
                            vm.timetext = "重发";
                        }
                    }, 1000);
                    var index = layer.load(1);
                    axios.get('../auth_api/code', {
                        params: {
                            phone: this.phone
                        }
                    }).then(function (res) {
                        layer.msg(res.data.msg, {anim: 0}, function () {
                            vm.isCaptcha = res.data.data.code === 1000;
                        });
                        if (res.data.code === 400) {
                            if (vm.run) {
                                clearInterval(vm.run);
                                vm.run = null;
                                vm.active = false;
                            }
                        }
                    }).catch(function (err) {
                        console.error(err);
                    }).then(function () {
                        layer.close(index);
                    });
                },
                del_redis_phone: function () {
                    var vm = this;
                    if (!this.phone) {
                        return layer.msg('请输入手机号码');
                    }
                    if (!$reg.isPhone(this.phone)) {
                        return layer.msg('请输入正确的手机号码');
                    }
                    if (!this.code_num) {
                        return layer.msg('请填写验证码');
                    }
                    var index = layer.load(1);
                    axios.get('../auth_api/del_redis_phone', {
                        params: {
                            phone: this.phone,
                            verify: this.code_num
                        }
                    }).then(function (res) {
                        layer.msg(res.data.msg, {anim: 0}, function () {
                            vm.isCaptcha = res.data.code !== 200;
                        });
                        if (res.data.code === 200) {
                            vm.code_num = '';
                            vm.timetext = '获取验证码';
                        }
                    }).catch(function (err) {
                        console.error(err);
                    }).then(function () {
                        layer.close(index);
                    });
                },
                getCaptcha: function () {
                    this.timestamp = new Date().getTime();
                }
            }
        });
    })


</script>
{/block}