<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

        <title><?php echo lang('view_account_login_1'); ?> - <?php echo $_SESSION['SYSCONFIG']['sysconfig_site_name']; ?></title>
        <meta name="keywords" content="" />
        <meta name="description" content="" />
        <link rel='icon' href='/favicon.ico' type='image/x-ico' />

        <link rel="stylesheet" href="<?php echo base_url('static/layui/css'); ?>/layui.css">
        <link rel="stylesheet" type="text/css" href="<?php echo base_url('static/mobile'); ?>/style/style.css" />

        <!--[if lt IE 9]>
        <script src="<?php echo base_url('static/mobile'); ?>/js/css3.js"></script>
        <script src="<?php echo base_url('static/mobile'); ?>/js/html5.js"></script>
        <![endif]-->
    </head>
    <body>

        <?php $this->load->view('mobile/header'); ?>

        <div class="body_box">

            <style type="text/css">
                header{ height: 50px; background: #191a1f; padding: 0px 10px; }
                header .market_list_btn{ text-align: center; font-size: 17px; color: #d5def2; line-height: 50px; }
            </style>

            <header>
                <div class="market_list_btn"><?php echo lang('view_account_login_2'); ?></div>
                <div class="clear"></div>
            </header>

            <style type="text/css">
                
                .body_box .register_box{ margin: 50px 20px; border-radius: 5px; background: #1f2126; }
                .body_box .register_box .box_title{ padding-bottom: 30px; }
                .body_box .register_box .box_title img{ display: block; width: 150px; margin: 0 auto; }
                .body_box .register_box .register_type_tab{ border-bottom: #3f4254 solid 2px; height: 30px; }
                .body_box .register_box .register_type_tab .tab_item{ float: left; font-size: 14px; color: #a7b7c7; line-height: 30px; text-align: center; margin-right: 20px; cursor: pointer; transition: 0s; -moz-transition: 0s; -webkit-transition: 0s; -o-transition: 0s; }
                .body_box .register_box .register_type_tab .tab_item:hover{ color: #d5def2; }
                .body_box .register_box .register_type_tab .tab_item.active{ color: #d5def2; line-height: 30px; border-bottom: #357ce1 solid 2px; }

                .body_box .register_box .register_type_box{ display: none; }
                .body_box .register_box .register_type_box.active{ display: block; }
                .body_box .register_box .register_type_box .field_line_item{ margin-top: 20px; }

                .body_box .register_box .register_type_box .field_line_item .input_ele_box{ position: relative; }
                .body_box .register_box .register_type_box .field_line_item .input_ele_box .input_ele{ display: block; line-height: 20px; height: 20px; padding: 25px 15px 8px 15px; border: #697080 solid 1px; border-radius: 5px; caret-color: #357ce1; color: #d5def2; background: #191a1f; width: calc(100% - 32px); z-index: 1; }
                .body_box .register_box .register_type_box .field_line_item .input_ele_box .input_ele_label{ height: 20px; font-size: 12px; color: #697080; position: absolute; left: 15px; top: 20px; z-index: 2; cursor: text; }
                .body_box .register_box .register_type_box .field_line_item .input_ele_box .input_ele:focus{ border-color: #357ce1; }
                .body_box .register_box .register_type_box .field_line_item .input_ele_box .input_ele:focus+label{ top: 8px; }
                .body_box .register_box .register_type_box .field_line_item .input_ele_box .input_ele:not([value=""])+label{ top: 8px; }

                .body_box .register_box .register_type_box .field_line_item .phone_area_num{ float: left; width: calc((100% - 14px) / 2 - 2px); height: 53px; text-align: center; border: #697080 solid 1px; border-radius: 5px; color: #d5def2; font-size: 14px; background: #191a1f; }

                .body_box .register_box .register_type_box .field_line_item .phone_area_num .layui-unselect{ height: 51px; line-height: 51px; text-align: center; background: #191a1f; border: #191a1f solid 1px !important; border-radius: 5px !important; color: #d5def2; }
                .body_box .register_box .register_type_box .field_line_item .phone_area_num .layui-unselect dl{ background: #191a1f; border-color: #697080; width: calc(100% + 4px); left: -2px; }
                .body_box .register_box .register_type_box .field_line_item .phone_area_num .layui-unselect dl dd:hover{ background: rgba(53, 124, 225, 0.21); }
                .body_box .register_box .register_type_box .field_line_item .phone_area_num .layui-unselect dl dd.layui-this{ background: #3B97E9; }
                .body_box .register_box .register_type_box .field_line_item .phone_area_num .layui-select-title i{ color: #697080; }

                .body_box .register_box .register_type_box .field_line_item .phone_num_box{ float: right; width: calc((100% - 14px) / 2 + 2px); }
                .body_box .register_box .register_type_box .field_line_item .phone_validate_box{ float: left; width: calc((100% - 14px) / 2); }
                .body_box .register_box .register_type_box .field_line_item .phone_validate_code{ display: block; float: right; width: calc((100% - 14px) / 2); border: #697080 solid 1px; border-radius: 5px; cursor: pointer; height: 53px; }
                .body_box .register_box .register_type_box .field_line_item .send_btn{ background-color: #357ce1; line-height: 55px; height: 55px; color: #FFF; font-size: 16px; cursor: pointer; text-align: center; border-radius: 5px; float: right; width: calc((100% - 14px) / 2 + 2px); }
                .body_box .register_box .register_type_box .field_line_item .send_btn.off{ cursor: not-allowed; background: #4E7FC6 !important; }
                .body_box .register_box .register_type_box .field_line_item .send_btn .btn_load{ display: none; }
                .body_box .register_box .register_type_box .field_line_item .send_btn:hover{ background-color: #2463bd; }
                .body_box .register_box .register_type_box .field_line_item .send_btn:active{ background-color: #1854a9; }
                .body_box .register_box .register_type_box .field_line_item .register_button{ background-color: #357ce1; line-height: 55px; height: 55px; color: #FFF; font-size: 16px; cursor: pointer; text-align: center; border-radius: 5px; margin-top: 50px; }
                .body_box .register_box .register_type_box .field_line_item .register_button.off{ cursor: not-allowed; background: #4E7FC6 !important; }
                .body_box .register_box .register_type_box .field_line_item .register_button .btn_load, .body_box .register_box .register_type_box .field_line_item .register_button .btn_success{ display: none; }
                .body_box .register_box .register_type_box .field_line_item .register_button:hover{ background-color: #2463bd; }
                .body_box .register_box .register_type_box .field_line_item .register_button:active{ background-color: #1854a9; }

                .layui-layer-msg{ transition: 0s; -moz-transition: 0s; -webkit-transition: 0s; -o-transition: 0s; }

                .body_box .register_box .link_btn{ cursor: pointer; color: #aeb9d8; }
                .body_box .register_box .link_btn:hover{ color: #FFF; }
                .body_box .register_box .left_link_btn{ float: left; }
                .body_box .register_box .right_link_btn{ float: right; }
            </style>

            <div class="register_box">
                <div class="box_title"><img class="logo_img" src="<?php echo $_SESSION['SYSCONFIG']['sysconfig_site_logo']; ?>"></div>

                <div>
                    <!-- 手机注册 -->
                    <div class="register_type_box active" id="register_type_box_1">
                        
                        <div class="field_line_item">
                            <div class="input_ele_box">
                                <input class="input_ele" type="text" data-value="0" id="user_name" value="">
                                <label class="input_ele_label"><?php echo lang('view_account_login_3'); ?></label>
                            </div>
                        </div>
                        <div class="field_line_item">
                            <div class="input_ele_box">
                                <input class="input_ele" type="password" data-value="0" id="user_password" value="">
                                <label class="input_ele_label"><?php echo lang('view_account_login_4'); ?></label>
                            </div>
                        </div>
                        <div class="field_line_item">
                            <div class="input_ele_box phone_validate_box">
                                <input class="input_ele" type="text" data-value="0" id="validate" value="">
                                <label class="input_ele_label"><?php echo lang('view_account_login_5'); ?></label>
                            </div>
                            <img src="/common/validate/195/54" onclick="javascript: this.src=(this.getAttribute('baseurl') + '?' + (new Date()).getTime());" baseurl="/common/validate/195/54" class="phone_validate_code">
                            <div class="clear"></div>
                        </div>
                        
                        <div class="field_line_item">
                            <div class="register_button login_btn">
                                <span class="btn_text"><?php echo lang('view_account_login_6'); ?></span>
                                <i class="layui-icon layui-icon-loading layui-icon layui-anim layui-anim-rotate layui-anim-loop btn_load"></i>
                                <i class="layui-icon layui-icon-ok btn_success"></i>
                            </div>
                        </div>

                        <div class="field_line_item">
                            <a class="link_btn left_link_btn" href="/account/forgot"><?php echo lang('view_account_login_7'); ?></a>
                            <a class="link_btn right_link_btn" href="/account/register"><?php echo lang('view_account_login_8'); ?></a>
                            <div class="clear"></div>
                        </div>
                    </div>
                </div>
            </div>
            
        </div>

        <?php $this->load->view('mobile/footer'); ?>

        <script src="<?php echo base_url('static/layui'); ?>/layui.js"></script>

        <script type="text/javascript">

            //当前栏目
            $('footer .navitem.account').addClass('active');

            //交易窗口切换
            $('.body_box .register_box .register_type_tab .tab_item').click(function(){

                var _this = $(this);

                if (! _this.hasClass('active')) {

                    _this.addClass('active').siblings('.active').removeClass('active');
                    $('#' + _this.attr('target-content')).addClass('active').siblings('.active').removeClass('active');
                }
            });

            //输入框失去焦点时，将输入框中的值赋为value属性值，配合css，实现有值时lable不下沉
            $('.input_ele_box .input_ele').blur(function(){

                $(this).attr('value', $(this).val());
            });

            //JavaScript代码区域
            layui.use(['element', 'jquery', 'form', 'layer', 'upload', 'laydate'], function () {

                var element = layui.element;
                var form    = layui.form;
                var layer   = layui.layer;

                //登陆
                $('.login_btn').click(function(){

                    var _this = $(this);

                    if (! _this.hasClass('off')) {

                        if($('#user_name').val() == ''){

                            _msg.error('<?php echo lang('view_account_login_9'); ?>');
                            return false;
                        }

                        if($('#user_password').val() == ''){

                            _msg.error('<?php echo lang('view_account_login_10'); ?>');
                            return false;
                        }

                        if($('#validate').val() == ''){

                            _msg.error('<?php echo lang('view_account_login_11'); ?>');
                            return false;
                        }

                        _this.addClass('off').find('.btn_load').css({display:'inline-block'}).siblings().hide();

                        $.ajax({
                            url: '/account/login',
                            type: 'post',
                            data: {
                                user_name : $('#user_name').val(),
                                user_password : $('#user_password').val(),
                                validate : $('#validate').val()
                            },
                            dataType: 'json',
                            success: function (data) {

                                if (data.status) {

                                    _this.find('.btn_success').css({display:'inline-block'}).siblings().hide();

                                    _msg.success(data.message);

                                    setTimeout(function(){

                                        window.location.href = '/account';
                                    }, 1000);
                                }else{

                                    _msg.error(data.message);
                                    _this.removeClass('off').find('.btn_text').show().siblings().hide();
                                }
                            },
                            error: function(){

                                _msg.error('<?php echo lang('view_account_login_12'); ?>');
                                _this.removeClass('off').find('.btn_text').show().siblings().hide();
                            }
                        });
                    }
                });
            });

        </script>

    </body>
</html>
