biliob/Web/html/body/user.html

229 lines
10 KiB
HTML
Raw Normal View History

2021-04-01 14:44:02 +08:00
<!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: 120%;display: none">
2021-04-01 14:44:02 +08:00
<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">
2021-04-01 18:47:14 +08:00
<input id="userReg" type="checkbox" lay-filter="userReg" lay-skin="switch"
lay-text="开启|关闭">
2021-04-01 14:44:02 +08:00
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">保存阿B数据</label>
<div class="layui-input-block">
2021-04-01 18:47:14 +08:00
<input id="saveBiliLive" type="checkbox" lay-filter="saveBiliLive" lay-skin="switch"
lay-text="开启|关闭">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">录制器</label>
<div class="layui-input-block">
<input id="savemodel" type="checkbox" lay-filter="saveLiveModel" lay-skin="switch"
lay-text="FFMPEG| Java ">
<i class="layui-icon" id="htitle">&#xe60b;</i>
</div>
</div>
2021-04-01 18:47:14 +08:00
<div class="layui-form-item">
<label class="layui-form-label">FFmpeg</label>
<div class="layui-input-block">
<input type="text" id="ffmpeg" required lay-verify="required"
placeholder="ffmpeg绝对路径,回车保存"
autocomplete="off" class="layui-input">
2021-04-01 14:44:02 +08:00
</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();
}
})
$.post('/system/get/savelive.do',function (json){
if (json.code === undefined || json.code !== 0) {
return;
}
if (json.data.save_live_model) {
$('#savemodel').prop('checked', true);
}
form.render();
})
2021-04-01 14:44:02 +08:00
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)
}
})
})
form.on('switch(saveLiveModel)',function (data){
let flag = data.elem.checked ? 'ffmpeg' : 'java';
$.post("/system/set/savelive.do", {model: flag}, function (json) {
if (json.code !== undefined) {
layer.msg(json.msg)
}
})
})
2021-04-01 14:44:02 +08:00
});
$.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);
2021-04-01 18:47:14 +08:00
})
$.post('/system/get/ffmpeg.do', function (json) {
if (json.code === undefined || json.code !== 0) {
return;
}
$('#ffmpeg').val(json.data.ffmpeg_path);
2021-04-01 14:44:02 +08:00
})
2021-04-01 14:44:02 +08:00
$('#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();
}
})
})
})
2021-04-01 18:47:14 +08:00
$('#ffmpeg').bind('keypress', function (event) {
if (event.keyCode === 13) {
$.post('/system/set/ffmpeg.do', {ffmpeg: encodeURI($('#ffmpeg').val())}, function (json) {
layer.msg(json.msg)
})
event.preventDefault();
}
})
2021-04-01 14:44:02 +08:00
$('#header').load("/html/header.html");
$('#footer').load("/html/footer.html");
$('#htitle').on('click', function () {
layer.open({
title:"录制模式",
content:'FFmpeg录制能保留视频信息如时间戳之类的但对性能要求比较高。<br>Java录制使用javaApi录制性能要求较低但无法记录视频信息如没有时间戳且有可能因为超时而断开录制。<br>建议性能足够的情况下使用FFmpeg。<br>需要设置FFmpeg的路径'
})
});
2021-04-01 14:44:02 +08:00
</script>
</body>
<style>
.layui-body {
position: relative;
z-index: 0;
background-color: #F2F2F2;
}
</style>
</html>