LJH_Shop/niucloud/app/install/view/index/step-3.html

{extend name="base"/}
{block name="resources"}
<style>
    .install-content-procedure .content-procedure-item:first-of-type{
        background: url("INSTALL_IMG/complete_two.png") no-repeat center / contain;
        color: #fff;
    }
    .install-content-procedure .content-procedure-item:nth-child(2){
        background: url("INSTALL_IMG/complete_four.png") no-repeat center / contain;
        color: #fff;
    }
    .install-content-procedure .content-procedure-item:nth-child(3){
        background: url("INSTALL_IMG/conduct.png") no-repeat center / contain;
        color: #fff;
    }
</style>
{/block}

{block name="main"}
<div id='postloader' class='waitpage'></div>
<div class="pright layui-form">
    <div class="pr-title install-title layui-hide"></div>
    <div class="pr-agreement">
        <form  class="layui-form " id="install-form">
            <div class="testing parameter">
                <div class="testing-item">
                    <h3>数据库设置</h3>
                    <table border="0" align="center" cellpadding="0" cellspacing="0" class="twbox">
                        <tr>
                            <td class="onetd"><span class="required">*</span>数据库主机：</td>
                            <td>
                                <input name="dbhost" id="dbhost" type="text" lay-verify="empty" placeholder="请输入数据库主机" value="" class="input-txt" onChange="testDb()" />
                                <small>一般为localhost</small>
                            </td>
                        </tr>
                        <tr>
                            <td class="onetd"><span class="required">*</span>Mysql端口：</td>
                            <td>
                                <input name="dbport" id="dbport" type="text" value="3306" class="input-txt" lay-verify="empty" placeholder="请输入Mysql端口"/>
                                <small>一般为3306</small>
                            </td>
                        </tr>
                        <tr>
                            <td class="onetd"><span class="required">*</span>数据库用户：</td>
                            <td>
                                <input name="dbuser" id="dbuser" type="text" value="" class="input-txt" onChange="testDb()" lay-verify="empty" placeholder="请输入数据库用户"/>
                                <small>默认root</small>
                            </td>
                        </tr>
                        <tr>
                            <td class="onetd"><span class="required">*</span>数据库密码：</td>
                            <td>
                                <div style='float:left;margin-right:3px;'>
                                    <input name="dbpwd" id="dbpwd" type="text" class="input-txt" onChange="testDb()" lay-verify="empty" placeholder="请输入数据库密码" />
                                </div>
                                <div style='float:left' class="mysql-message" id='dbpwdsta'></div>
                            </td>
                        </tr>
                        <tr>
                            <td class="onetd"><span class="required">*</span>数据库名称：</td>
                            <td>
                                <div style='float:left;margin-right:3px;'><input name="dbname" id="dbname" type="text" value="" class="input-txt" onChange="haveDB()" lay-verify="empty" placeholder="请输入数据库名称" /></div>
                                <div style='float:left' class="mysql-message" id='havedbsta'></div>
                            </td>
                        </tr>
                        <tr>
                            <td class="onetd">数据表前缀：</td>
                            <td>
                                <div style='float:left;margin-right:3px;'><input name="dbprefix" id="dbprefix" type="text" value="" class="input-txt" placeholder="请输入数据表前缀"/></div>
                            </td>
                        </tr>

                        <tr>
                            <td class="onetd">数据库编码：</td>
                            <td>
                                <label class="install-code">UTF8</label>
                            </td>
                        </tr>
                    </table>
                </div>
                <div class="testing-item">
                    <h3>网站设置</h3>
                    <table border="0" align="center" cellpadding="0" cellspacing="0" class="twbox">
                        <tr>
                            <td class="onetd"><span class="required">*</span><span>网站标题：</span></td>
                            <td>
                                <input name="admin_name" id="admin_name" type="text" value="" class="input-txt" lay-verify="empty" placeholder="请输入网站标题"/>
                                <small id="mess_admin_name">网站标题 必填</small>
                            </td>
                        </tr>
                        <tr>
                            <td class="onetd"><span class="required">*</span><span>店铺名称：</span></td>
                            <td>
                                <input name="site_name" id="site_name" type="text" value="" class="input-txt" lay-verify="empty" placeholder="请输入店铺名称"/>
                                <small id="mess_site_name">店铺名称 必填</small>
                            </td>
                        </tr>
                        <tr>
                            <td class="onetd"><span class="required">*</span><span>管理员用户名：</span></td>
                            <td>
                                <input name="username" id="username" type="text" value="" class="input-txt" lay-verify="empty" placeholder="请输入平台用户名"/>
                                <small id="mess_username">管理员用户名 必填</small>
                            </td>
                        </tr>
                        <tr>
                            <td class="onetd"><span class="required">*</span><span>管理员密码：</span></td>
                            <td>
                                <input name="password" id="password" type="password" value="" class="input-txt" lay-verify="empty" placeholder="请输入平台密码"/>
                                <small id="mess_password">密码 必填</small>
                            </td>
                        </tr>
                        <tr>
                            <td class="onetd"><span class="required">*</span><span>确认密码：</span></td>
                            <td>
                                <input name="password2" id="password2" type="password" value="" class="input-txt" lay-verify="empty" placeholder="请输入平台确认密码"/>
                                <small id="mess_password2">确认密码 必填</small>
                            </td>
                        </tr>
                    </table>
                </div>
            </div>
        </form>

        <div class="layui-form layui-hide testing" id="install-log">
            <div class="install-log">
            </div>
            <div class="btn-box layui-hide">
                <input type="button" class="btn-back" value="后退" onclick="back()" />
            </div>
        </div>
    </div>
    <div class="btn-box">
        <input type="button" class="btn-back" value="后退" onclick="window.location.href='{$root_url}/install.php/index/index?step=2'" />
        <input type="button" class="btn-next" lay-submit lay-filter="install" value="开始安装" id="form_submit">
    </div>
</div>

{/block}
{block name='script'}
<script language="javascript" type="text/javascript">
    ControlContent(2);
    var is_existdb = 1;//数据库是否存在
    var message = '数据库账号或密码不能为空';
    var is_install = false;
    function inputBoxPointer(id){
        return document.getElementById(id);
    }
    layui.use('form', function(){
        var form = layui.form;
        form.verify({
            empty: function(value, item){ //value：表单的值、item：表单的DOM对象
                if(value == ''){
                    var msg = $(item).attr("placeholder");
                    return msg;
                }
            }

        });
        form.on('submit(install)', function(data){
            if(is_existdb == 2){
                layer.confirm('数据库存在，系统将覆盖数据库!', {
                    btn: ['继续','取消'] //按钮
                }, function(){
                    layer.closeAll();
                    install(data.field);

                }, function(){
                    layer.closeAll();
                    return false;
                });
            }else{
                if(is_existdb <= 0){
                    error(message);
                    return false;
                }
                install(data.field);
            }

            return false;
        });

    });

    //数据库连接测试
    function testDb()
    {
        var dbhost = inputBoxPointer('dbhost').value;
        var dbuser = inputBoxPointer('dbuser').value;
        var dbpwd = inputBoxPointer('dbpwd').value;
        var dbport = inputBoxPointer('dbport').value;
        inputBoxPointer('dbpwdsta').innerHTML='<img src="INSTALL_IMG/ajax-loader.gif">';

        $.ajax({ //post也可
            url: '{$root_url}/install.php/index/testdb',
            data: { dbhost: dbhost, dbport : dbport, dbuser:dbuser, dbpwd:dbpwd},
            type: "post",
            dataType: 'json',
            success: function(data){
                inputBoxPointer('dbpwdsta').innerHTML = data.data.message;
                is_existdb = data.data.status;
                message = data.data.message;
            }
        });
    }

    /**
     *验证数据库是否存在
     */
    function haveDB()
    {
        var dbhost = inputBoxPointer('dbhost').value;
        var dbname = inputBoxPointer('dbname').value;
        var dbuser = inputBoxPointer('dbuser').value;
        var dbpwd = inputBoxPointer('dbpwd').value;
        var dbport = inputBoxPointer('dbport').value;
        inputBoxPointer('havedbsta').innerHTML='<img src="INSTALL_IMG/ajax-loader.gif">';

        $.ajax({ //post也可
            url: '{$root_url}/install.php/index/testdb',
            data: { dbhost: dbhost, dbport : dbport, dbuser:dbuser, dbpwd:dbpwd,dbname:dbname},
            type: "post",
            dataType: 'json',
            success: function(data){
                inputBoxPointer('havedbsta').innerHTML = data.data.message;
                is_existdb = data.data.status;
                message = data.data.message;
            }
        });

    }

    function getStatus() {
        $.ajax({
            url: "{$root_url}/install.php/index/getInstallInfo",
            dataType: 'json',
            type: 'get',
            success : function(data) {
                if(data.code == 1) {
                    $(data.data.log).each(function (i, e){
                        if($('.log-'+i).length == 0) {
                            let html = `<div class="log-${i}">
                                        <span>${e[0]}${e[1] == 'success' ? "成功" : ""}</span>
                                        <span>${e[2]}</span>
                                    </div>`;
                            $('.install-log').append(html);
                            SetScroll();
                        }
                    })

                    if(data.data.status == 0 || data.data.status == 1) {
                        setTimeout(() => {
                            getStatus();
                        }, 200)
                    }else{
                        $('#install-log .btn-box').removeClass('layui-hide')
                    }
                }
            }
        })
    }

    function install(data){
        if(is_install) return false;

        $('#install-form').addClass('layui-hide')
        $('#install-log').removeClass('layui-hide')
        // $('.install-log').html('<div class="install-head">正在安装...</div>');
        $('.install-title').removeClass('layui-hide')
        $('.install-title').html('<div class="install-head">正在安装...</div>');
        $('.pright>.btn-box').addClass('layui-hide')
        is_install = true;
        $.ajax({
            url: "{$root_url}/install.php/index/install",
            data: data,
            dataType: 'json',
            type: 'post',
            success : function(res) {
                layer.close(index);
                if(res.code == 1){
                    $.ajax({
                        url: "{$root_url}/install.php/index/initData",
                        data: data,
                        dataType: 'json',
                        type: 'post',
                        success : function(data) {
                            if(data.code == 1){
                                window.location.href = '{$root_url}/install.php/index/installSuccess';
                            }
                        }
                    })
                }else{
                    error(res.msg);
                    is_install = false;
                }
            },
        })
        setTimeout(() => {
            getStatus();
        }, 500)
    }
    function back(){
        $('#install-form').removeClass('layui-hide')
        $('#install-log').addClass('layui-hide')
        $('.install-title').addClass('layui-hide')
        $('.pright>.btn-box').removeClass('layui-hide')
    }

    window.onload = SetScroll;
    function SetScroll(){
        var height=$(".install-log")[0].scrollHeight;
        $(".install-log").scrollTop(height);
    }
</script>
{/block}