jjhc
/
reservation_admin


			
				
					
						
						
							123456789101112131415161718192021222324252627282930313233343536373839404142434445464748495051525354555657585960616263646566676869707172737475767778798081828384858687888990919293949596979899100101102103104105106107108109110111112113114115116117118119120121122123124125126127128129130131132133134135136137138139140141142143144145146147148149150151152153154155156157158159160161162163164165166167168169170171172173174175176177178179180181182183184185186187188189190191192193194195196197198199
							<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <title>安装引导</title>
    <meta name="renderer" content="webkit">
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="/static/public/layui/css/layui.css" media="all">
</head>
<body>
<div style="width:800px;margin: 100px auto;">
    <div class="layui-layout layui-layout-admin">
        <div class="layui-header layui-bg-cyan">
            <div class="layui-logo" style="color: #fff">{:systemName()} 安装引导</div>
            <ul class="layui-nav layui-layout-right">
                <li class="layui-nav-item">{$Think.const.PRODUCT_VERSION}</li>
        </div>
        <div style="border:1px solid #eee;padding:20px;line-height: 25px;">
            <h3>数据库配置</h3><br>
            <form class="layui-form" action="" id="form">
                <div class="layui-form-item">
                    <label class="layui-form-label">数据库类型</label>
                    <div class="layui-input-inline">
                        <input type="text" name="DB_TYPE" lay-verify="required" autocomplete="off" class="layui-input"
                               value="mysql" disabled="disabled">
                    </div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">数据库地址</label>
                    <div class="layui-input-inline">
                        <input type="text" name="DB_HOST" lay-verify="required" autocomplete="off" class="layui-input"
                               value="{$db_host}">
                    </div>
                    <div class="layui-form-mid layui-word-aux">数据库不在当前机器上才需要修改此ip</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">数据库端口</label>
                    <div class="layui-input-inline">
                        <input type="text" name="DB_PORT" lay-verify="required" autocomplete="off" class="layui-input"
                               value="{$db_port}">
                    </div>
                    <div class="layui-form-mid layui-word-aux">数据库端口，默认为3306</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">账号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="DB_USER" lay-verify="required" autocomplete="off" class="layui-input"
                               value="{$db_username}">
                    </div>
                    <div class="layui-form-mid layui-word-aux">数据库账号</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="DB_PWD" lay-verify="" autocomplete="off" class="layui-input"
                               value="{$db_password}">
                    </div>
                    <div class="layui-form-mid layui-word-aux">数据库密码</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">数据库名</label>
                    <div class="layui-input-inline">
                        <input type="text" name="DB_NAME" lay-verify="required" autocomplete="off" class="layui-input"
                               value="{$db_name}">
                    </div>
                    <div class="layui-form-mid layui-word-aux">不能有"-"等特殊符号</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">表前缀</label>
                    <div class="layui-input-inline">
                        <input type="text" name="DB_PREFIX" lay-verify="required" autocomplete="off" class="layui-input"
                               value="{$db_prefix}">
                    </div>
                    <div class="layui-form-mid layui-word-aux">不能有"-"等特殊符号</div>
                </div>

                <hr>
                <h3>管理员配置</h3><br>
                <div class="layui-form-item">
                    <label class="layui-form-label">账号</label>
                    <div class="layui-input-inline">
                        <input type="text" name="username" lay-verify="required" autocomplete="off" class="layui-input"
                               value="admin">
                    </div>
                    <div class="layui-form-mid layui-word-aux">后台登入账号</div>
                </div>
                <div class="layui-form-item">
                    <label class="layui-form-label">密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="password" lay-verify="required" autocomplete="off"
                               class="layui-input" value="123456">
                    </div>
                    <div class="layui-form-mid layui-word-aux">默认为123456</div>
                </div>

                <div class="layui-form-item">
                    <label class="layui-form-label">确认密码</label>
                    <div class="layui-input-inline">
                        <input type="password" name="password_confirm" lay-verify="required" autocomplete="off"
                               class="layui-input" value="123456">
                    </div>
                    <div class="layui-form-mid layui-word-aux">必须和填写的密码一致</div>
                </div>

                <br>

                <div class="layui-progress layui-progress-big" lay-showpercent="true" lay-filter="demo"
                     style="display: none;" id="progress">
                    <div class="layui-progress-bar layui-bg-blue" lay-percent="0%"></div>
                </div>

                <div class="layui-form-item">
                    <div style="margin:10px auto;width: 190px;">
                        <a href="{:url('install/index/step2')}" class="layui-btn layui-bg-cyan">上一步</a>
                        <button class="layui-btn layui-bg-cyan" lay-submit="" id="formDemo" lay-filter="formDemo">创建数据
                        </button>
                    </div>
                </div>
            </form>
            <div style="display: none;text-align: center;" id="complete">
                <h1>安装完成</h1>
                <br><br>
                <a href="/" class="layui-btn layui-bg-cyan">访问前台</a>
                <a href="/admin_login" class="layui-btn layui-bg-cyan">访问后台</a>
            </div>
        </div>
    </div>
</div>

<script src="/static/public/layui/layui.js" charset="utf-8"></script>
<script>
    layui.use(['element', 'jquery', 'layer', 'form'], function () {
        var $ = layui.jquery, layer = layui.layer, form = layui.form, element = layui.element;

        var n = 0;

        //监听提交
        form.on('submit(formDemo)', function (data) {
            $('#progress').css('display', 'block');
            var timer = setInterval(function () {
                n = n + Math.random() * 10 | 0;
                if (n > 99) {
                    n = 99;
                    clearInterval(timer);
                }
                element.progress('demo', n + '%');
            }, 30 + Math.random() * 100);

            $.ajax({
                url: "{:url('install/index/createData')}",
                type: "post",
                data: data.field,
                dataType: 'json',
                beforeSend: function () {
                    // 禁用按钮防止重复提交
                    $("#formDemo").attr({disabled: "disabled"});
                    $('#formDemo').html('创建中...');
                },
                success: function (res) {
                    if (res.code == 0) {
                        $('#progress').css('display', 'none');
                        layer.msg(res.msg);
                    } else {
                        if (n == 99) {
                            element.progress('demo', 100 + '%');
                            $('#form').hide();
                            $('#complete').show();
                            return false;
                        } else if (n < 99) {
                            var ref = setInterval(function () {
                                if (n == 99) {
                                    clearInterval(ref);
                                    element.progress('demo', 100 + '%');
                                    $('#form').hide();
                                    $('#complete').show();
                                }
                            }, 500)
                        }
                    }
                },
                error: function () {
                    element.progress('demo', 0 + '%');
                    $('#progress').css('display', 'none');
                    layer.msg('创建失败');
                },
                complete: function () {
                    $("#formDemo").removeAttr("disabled");
                    $('#formDemo').html('创建数据');
                }
            })
            return false;
        });

    });
</script>

</body>
</html>