<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>用户中心</title> <link rel="stylesheet" href="/layui/css/layui.css"> </head> <body> <div class="layui-layout layui-layout-admin"> <div id="header"></div> <div class="layui-body" style="left: 0px;"> <div style="width: 40%;height: 25%;margin-left: 25%; margin-top: 2%;"> <blockquote class="layui-elem-quote" style="background-color: #FFFFFF; height: 50%;"> <div align="center"> 哔哩哔哩账号,用于后台监控数据及录屏~ <p></p> <a href="javascript:;" id="login"><img src="https://static.hdslb.com/images/akari.jpg" class="layui-nav-img" id="bili_icon_img" style="height: 80%;width: 10%"> <p></p> <span id='bili_login_text'>管理员哔哩哔哩登陆</span></a> </div> </blockquote> <div class="layui-card" style="margin-top: 5%;height: 120%"> <div class="layui-card-header">用户设置</div> <div class="layui-card-body"> <form class="layui-form" action="" style="margin-top: 2%;width: 80%"> <div class="layui-form-item"> <label class="layui-form-label">修改名称</label> <div class="layui-input-block"> <input type="text" name="user" required lay-verify="required" placeholder="新名称" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">修改密码</label> <div class="layui-input-block"> <input type="password" name="password" required lay-verify="required" placeholder="新密码" autocomplete="off" class="layui-input"> </div> </div> <div class="layui-form-item"> <div class="layui-input-block"> <button class="layui-btn" type="button" lay-submit lay-filter="formDemo">立即提交</button> <button type="reset" class="layui-btn layui-btn-primary">重置</button> </div> </div> </form> </div> <div id="config" class="layui-card" style="margin-top: 5%;height: 100%;display: none"> <div class="layui-card-header">系统设置</div> <div class="layui-card-body"> <form class="layui-form" action="" style="margin-top: 2%;width: 80%"> <div class="layui-form-item"> <label class="layui-form-label">开放注册</label> <div class="layui-input-block"> <input id="userReg" type="checkbox" lay-filter="userReg" lay-skin="switch" lay-text="开启|关闭"> </div> </div> <div class="layui-form-item"> <label class="layui-form-label">保存阿B数据</label> <div class="layui-input-block"> <input id="saveBiliLive" type="checkbox" lay-filter="saveBiliLive" lay-skin="switch" lay-text="开启|关闭"> </div> </div> </form> </div> </div> </div> </div> </div> <div id="footer"></div> </div> <script src="/layui/layui.js"></script> <script src="/js/jquery-3.2.1.js"></script> <script src="/js/qrcode.min.js"></script> <script> layui.use(['layer', 'form', 'element'], function () { let layer = layui.layer , form = layui.form; form.on('submit(formDemo)', function (data) { console.log(data.field) //当前容器的全部表单字段,名值对形式:{name: value} $.post('/user/set/update.do', data.field, function (json) { if (json.code !== undefined) { layer.msg(json.msg) if (josn.code === 0) { window.location.reload() } } else { layer.msg("可能未登录") } }) return false; //阻止表单跳转。如果需要表单跳转,去掉这段即可。 }); $.post('/system/get/config.do', function (json) { if (json.code !== undefined) { $('#config').css('display', 'block') if (json.data.userReg === '1') { $('#userReg').prop('checked', true); } if (json.data.biliLive === '1') { $('#saveBiliLive').prop('checked', true); } form.render(); } }) form.on('switch(userReg)', function (data) { let flag = data.elem.checked ? '1' : '0'; $.post("/system/set/config.do", {key: "userReg", value: flag}, function (json) { if (json.code !== undefined) { layer.msg(json.msg) } }) }) form.on('switch(saveBiliLive)', function (data) { let flag = data.elem.checked ? '1' : '0'; $.post("/system/set/config.do", {key: "biliLive", value: flag}, function (json) { if (json.code !== undefined) { layer.msg(json.msg) } }) }) }); $.post('/bili/login/get/test.do', function (json) { if (json.code === undefined || json.code !== 0) { return; } $('#bili_login_text').text(json.data.uname); $('#bili_icon_img').attr("src", json.data.icon); }) $('#login').click(function () { $.post('/bili/login/set/login.do', function (json) { if (json.code === undefined || json.code !== 0) { layer.msg("您无权修改") return; } console.log(json) layer.open({ title: "BiliBili客户端扫描登陆", content: "<div id=\"qrcode\"></div>", success: function () { new QRCode(document.getElementById("qrcode"), json.url); }, yes: function (index) { layer.close(index) window.location.reload(); } }) }) }) $('#header').load("/html/header.html"); $('#footer').load("/html/footer.html"); </script> </body> <style> .layui-body { position: relative; z-index: 0; background-color: #F2F2F2; } </style> </html>