blog_tp6/view/sys/system/index.html

<article class="cl pd-20">
    <form action="" method="post" class="form form-horizontal" id="form-save">
        <div id="tab-system" class="HuiTab">
            <div class="tabBar cl"><span>基本设置</span><span>SEO设置</span><span>留言邮箱设置</span></div>
            <div class="tabCon">
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>网站名称：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="name" placeholder="控制在25个字、50个字节以内" value="{$data.name}" name="name"
                            class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>logo：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="logo" placeholder="logo 路径" value="{$data.logo}" name="logo"
                            class="input-text">
                    </div>
                    <div class="formControls col-xs-8 col-sm-4 col-xs-offset-4 col-sm-offset-2">
                        <div style="max-width: 200px;">
                            <a href="javascript:void(0);" onclick="uploadPicture('logo')">
                                <img id="view-logo"
                                    src="{$data.logo ? $data.logo : '/static/images/upload_picture.png'}" alt="logo"
                                    title="{$data.logo ? '更换' : '添加'}logo" style="max-width: 200px;max-height: 200px;">
                            </a>
                        </div>
                    </div>
                    <label class="form-label col-xs-2 col-sm-2">
                        <a class="btn btn-success radius" href="javascript:void(0);"
                            onclick="uploadPicture('logo')">{$data.logo ? '更换' :
                            '添加'}logo</a></label>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">备案号：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="website-icp" placeholder="京ICP备00000000号" value="{$data.icp}" name="icp"
                            class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>底部版权信息：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="website-copyright" placeholder="&copy; 2021 suryee.com"
                            value="{$data.copyright}" name="copyright" class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>网站地址：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="website-static" placeholder="www.suryee.com" value="{$data.url}"
                            name="url" class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>公司地址：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="website-static" placeholder="公司地址" value="{$data.address}" name="address"
                            class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>联系人：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="contacts" placeholder="联系人" value="{$data.contacts}" name="contacts"
                            class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>联系电话：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="tel" placeholder="联系电话" value="{$data.tel}" name="tel"
                            class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>手机号码：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="mobile_phone" placeholder="手机号码" value="{$data.mobile_phone}"
                            name="mobile_phone" class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>传真号码：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="fax" placeholder="传真号码" value="{$data.fax}" name="fax"
                            class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>邮箱账号：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="email" placeholder="邮箱账号" value="{$data.email}" name="email"
                            class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>QQ：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="qq" placeholder="QQ" value="{$data.qq}" name="qq" class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>二维码：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="qrcode" placeholder="二维码" value="{$data.qrcode}" name="qrcode"
                            class="input-text">
                    </div>
                    <div class="formControls col-xs-8 col-sm-4 col-xs-offset-4 col-sm-offset-2">
                        <div style="max-width: 200px;">
                            <a href="javascript:void(0);" onclick="uploadPicture('qrcode')">
                                <img id="view-qrcode"
                                    src="{$data.qrcode ? $data.qrcode : '/static/images/upload_picture.png'}" alt="qrcode"
                                    title="{$data.qrcode ? '更换' : '添加'}二维码" style="max-width: 200px;max-height: 200px;">
                            </a>
                        </div>
                    </div>
                    <label class="form-label col-xs-2 col-sm-2">
                        <a class="btn btn-success radius" href="javascript:void(0);"
                            onclick="uploadPicture('qrcode')">{$data.qrcode ? '更换' :
                            '添加'}二维码</a></label>
                </div>
            </div>
            <div class="tabCon">
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>SEO标题：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="title" placeholder="请输入SEO标题" value="{$data.title}" name="title"
                            class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>关键词：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="key" placeholder="5个左右,8汉字以内,用英文,隔开" value="{$data.key}" name="key"
                            class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>描述：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="description" placeholder="空制在80个汉字，160个字符以内" value="{$data.des}"
                            name="des" class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2">统计代码：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <textarea class="textarea" id="tongji" name="tongji">{$data.tongji}</textarea>
                    </div>
                </div>
            </div>
            <div class="tabCon">
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>SMTP服务器：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="email_host" placeholder="请输入SMTP服务器" value="{$data.email_host}"
                            name="email_host" class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>开启加密:</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="email_secure" placeholder="secure, 一般为ssl协议" value="{$data.email_secure}"
                            name="email_secure" class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>服务器端口：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="email_port" placeholder="服务器端口 25 或者465 具体要看邮箱服务器支持"
                            value="{$data.email_port}" name="email_port" class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>账号：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="email_username" placeholder="即邮箱的用户名" value="{$data.email_username}"
                            name="email_username" class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>密码：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="email_password" placeholder="密码部分邮箱是授权码(例如163邮箱)"
                            value="{$data.email_password}" name="email_password" class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>发件人：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="email_from" placeholder="发件人, 一般和邮箱的用户名一致" value="{$data.email_from}"
                            name="email_from" class="input-text">
                    </div>
                </div>
                <div class="row cl">
                    <label class="form-label col-xs-4 col-sm-2"><span class="c-red">*</span>收件人：</label>
                    <div class="formControls col-xs-8 col-sm-9">
                        <input type="text" id="email_to" placeholder="收件人" value="{$data.email_to}" name="email_to"
                            class="input-text">
                    </div>
                    <div class="formControls col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                        <span class="c-red">多个收件人用英文','隔开</span>
                    </div>
                </div>
            </div>
        </div>
        <div class="row cl">
            <div class="col-xs-8 col-sm-9 col-xs-offset-4 col-sm-offset-2">
                <button class="btn btn-primary radius" type="button" id="admin-form-save"><i
                        class="Hui-iconfont">&#xe632;</i> 保存</button>
                <button onClick="layer_close();" class="btn btn-default radius"
                    type="button">&nbsp;&nbsp;取消&nbsp;&nbsp;</button>
            </div>
        </div>
    </form>
</article>

<!-- 图片上传 -->
<div>
    <form id="form-upload_picture">
        <input type="file" hidden name="image" id="upload_picture">
    </form>
</div>

<script type="text/javascript">
    jQuery.Huitab = function (tabBar, tabCon, class_name, tabEvent, i) {
        var $tab_menu = $(tabBar);
        // 初始化操作
        $tab_menu.removeClass(class_name);
        $(tabBar).eq(i).addClass(class_name);
        $(tabCon).hide();
        $(tabCon).eq(i).show();

        $tab_menu.bind(tabEvent, function () {
            $tab_menu.removeClass(class_name);
            $(this).addClass(class_name);
            var index = $tab_menu.index(this);
            $(tabCon).hide();
            $(tabCon).eq(index).show()
        })
    }

    $(function () {
        $('.skin-minimal input').iCheck({
            checkboxClass: 'icheckbox-blue',
            radioClass: 'iradio-blue',
            increaseArea: '20%'
        });
        $.Huitab("#tab-system .tabBar span", "#tab-system .tabCon", "current", "click", "0");
    });

    //添加图片
    const file = document.querySelector('input[type="file"]');
    function uploadPicture(name) {
        // file模拟input点击事件
        var evt = new MouseEvent("click", {
            bubbles: false,
            cancelable: true,
            view: window,
        });
        file.dispatchEvent(evt, uploadfn(name));
    }

    function uploadfn(name) {
        file.oninput = function () {
            if (file.files && file.files[0]) {
                var formData = new FormData();
                formData.append("upload_file", file.files[0]);
                $.ajax({
                    url: '/sys/file_manager/uploadImage',
                    type: "post",
                    data: formData,
                    processData: false, // 告诉jQuery不要去处理发送的数据
                    contentType: false, // 告诉jQuery不要去设置Content-Type请求头
                    dataType: 'json',
                    success: function (res) {
                        // console.log(res);
                        var img = res.data.filename;
                        $("#view-" + name).attr('src', img);
                        $("#" + name).val(img);
                        layer.msg(res.msg, {
                            icon: 1,
                            time: 1000
                        });
                    },
                    error: function (res) {
                        layer.msg(res.msg, {
                            icon: 5,
                            time: 1000
                        });
                        return false;
                    },
                    complete: function () {
                        document.getElementById('form-upload_picture').reset();
                    }
                });
            }
        }
    }

    $("#admin-form-save").click(function () {
        var data = $("#form-save").serializeArray();
        $.ajax({
            type: 'POST',
            url: '/sys/system/save',
            data: data,
            dataType: 'json',
            success: function (res) {
                if (res.code == 0) {
                    layer.msg(res.msg, {
                        icon: 1,
                        time: 1000
                    });
                } else {
                    layer.msg(res.msg, {
                        icon: 5,
                        time: 1000
                    });
                    return false;
                }
            }
        });
    });
</script>