login_index.html 8.3 KB
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0"/>
    <meta name="format-detection" content="telephone=no,email=no,date=no,address=no">
    <title></title>
    <script src="../../assets/js/fontsize.js"></script>
    <link rel="stylesheet" href="../../assets/css/weui.min.css">
    <link rel="stylesheet" href="../../assets/css/api.css"/>
    <link rel="stylesheet" href="../../assets/css/login_index.css">
    <link rel="stylesheet" href="../../assets/icon/iconfont.css">
</head>
<body>
<div id="app">
    <!--<div class="login_loading" v-show="isLogin">-->
    <!--<div class="login_img"><img src="../../assets/image/loading.gif" alt=""></div>-->
    <!--<span>正在登录...</span>-->
    <!--</div>-->
    <div class="login_box"><span :class="fast_login?'login_active':''" tapmode @click="fast_login=true">快捷登录</span>
        <span :class="fast_login?'':'login_active'" @click="fast_login=false">密码登录</span></div>
    <div v-if="fast_login">
        <div class="login_input"><input type="number" placeholder="请输入手机号" maxlength="11" v-model="phone">
        </div>
        <div class="login_input"><input type="number" placeholder="请输入验证码" v-model="code">
            <span v-if="show" @click="getCode" class="count">获取验证码</span>
            <span v-else class="count">{{count}}S后可重发</span>
        </div>
    </div>
    <div v-else>
        <div class="login_input"><input type="number" placeholder="请输入手机号" v-model="pass_phone"></div>
        <div class="login_input">
            <input type="password" placeholder="请输入密码" v-model="password">
            <span class="count" @click="forget">忘记密码?</span>
        </div>
    </div>
    <div class="login_btn" @click="login_main">登录</div>
    <div class="no_reg">未注册手机验证后自动注册</div>
    <!--<div class="fast_login_box"><span class="span_line"></span><span>使用以下账号快速登录</span><span class="span_line"></span>-->
    <!--</div>-->
    <!--<div class="login_type_box">-->
        <!--<span class="iconfont icon-wei_xing" @click="login_wx"></span>-->
        <!--<span class="iconfont icon-QQ" @click="login_qq"></span>-->
    <!--</div>-->
    <div class="agree_box"><span :class="['iconfont',isAgree?'icon-yigouxuan':'icon-weigouxuan']"
                                 @click="isAgree=!isAgree"></span><span>我同意</span><span
            class="agreement" @click="agree_content">《慈界医养用户服务协议》</span></div>
</div>
</body>
</html>
<script type="text/javascript" src="../../assets/js/api.js"></script>
<script type="text/javascript" src="../../assets/js/public.js"></script>
<script type="text/javascript" src="../../assets/js/weui.min.js"></script>
<script type="text/javascript" src="../../assets/js/fastclick.js"></script>
<script>
    new FastClick(document.body);
</script>
<script type="text/javascript" src="../../assets/js/vue.min.js"></script>
<script type="text/javascript" src="../../assets/js/axios.min.js"></script>
<script type="text/javascript" src="../../assets/icon/iconfont.js"></script>
<script>
    var app = new Vue({
        el: '#app',
        data: {
            show: true,
            count: '',
            timer: null,
            fast_login: true,
            isAgree: true,
            phone: '',
            code: '',
            pass_phone: '',
            password: '',
            isLogin: true
        },
        created: function () {
            apiready = function () {
            }
        },
        methods: {
            // 获取登录验证码
            getCode: function () {
                if (!mobileReg.test(app.phone)) {
                    toastMsg('手机号不正确')
                }
                else {
                    const TIME_COUNT = 60;
                    var post = {
                        tel: app.phone,
                    };
                    var header = {
                        'XX-Device-Type': getDevice()
                    }
                    getRequest('POST', 'home/index/loginBySMS', post, header).then(function (res) {
                        toastMsg(res.data.msg)
                        if (!app.timer) {
                            app.count = TIME_COUNT;
                            app.show = false;
                            app.timer = setInterval(function () {
                                if (app.count > 0 && app.count <= TIME_COUNT) {
                                    app.count--;
                                } else {
                                    app.show = true;
                                    clearInterval(app.timer);
                                    app.timer = null;
                                }
                            }, 1000)
                        }
                    })
                }
            },
            // 登录
            login_main: function () {
                if (app.fast_login) {
                    app.login();
                } else {
                    app.passLogin();
                }
            },
            // 验证码登录
            login: function () {
                if (!mobileReg.test(app.phone)) {
                    toastMsg('请输入正确的手机号')
                }
                else if (app.code == '') {
                    toastMsg('请输入验证码')
                }
                else if (app.isAgree == false) {
                    toastMsg('请同意慈界医养用户服务协议')
                }
                else {
                    var post = {
                        code: app.code,
                        tel: app.phone,
                    };
                    var header = {
                        'XX-Device-Type': getDevice()
                    };
                    getRequest('post', 'home/index/checkSMS', post, header).then(function (res) {
                        // alert(JSON.stringify(res.data.data.token))
                        if (res.data.code == 1) {
                            $api.setStorage('token', res.data.data.token);
                            api.openWin({
                                name: 'index_win',
                                url: '../common/index_win.html',
                            });
                        } else {
                            toastMsg(res.data.msg)
                        }
                    })
                }
            },
            // 密码登录
            passLogin: function () {
                if (!mobileReg.test(app.pass_phone)) {
                    toastMsg('请输入正确的手机号')
                }
                else if (app.password == '') {
                    toastMsg('请输入密码')
                }
                else if (app.isAgree == false) {
                    toastMsg('请同意慈界医养用户服务协议')
                }
                else {
                    var post = {
                        password: app.password,
                        tel: app.pass_phone,
                    };
                    var header = {
                        'XX-Device-Type': getDevice()
                    };
                    getRequest('post', 'home/index/loginByPass', post, header).then(function (res) {
                        // alert(JSON.stringify(res.data.data.token));
                        if (res.data.code == 1) {
                            $api.setStorage('token', res.data.data.token);
                            api.openWin({
                                name: 'index_win',
                                url: '../common/index_win.html',
                            });
                        } else {
                            toastMsg(res.data.msg)
                        }
                    })
                }
            },
            // 去协议
            agree_content: function () {
                openView('agree_content', 'common/agree_content', '慈界医养用户服务协议', 'agree_content', false, {
                    title_name: '慈界医养用户服务协议',
                    id: 3
                }, false)
            },
            // // 修改密码
            forget: function () {
                openView('forgot_f', 'login/forgot_f', '修改密码', 'forgot_f', false, false, false)
            }
        }
    })
</script>