mirror of
https://gitee.com/technical-laohu/mpay.git
synced 2025-09-17 17:26:40 +08:00
148 lines
6.6 KiB
HTML
148 lines
6.6 KiB
HTML
<!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="/component/pear/css/pear.css" />
|
|
<link rel="stylesheet" href="/admin/css/other/console1.css" />
|
|
<style>
|
|
.header-th div.layui-table-header th div {
|
|
text-align: center;
|
|
}
|
|
|
|
.divider-vl {
|
|
display: inline-block;
|
|
width: 1px;
|
|
height: 1em;
|
|
margin: 0 8px;
|
|
vertical-align: middle;
|
|
position: relative;
|
|
background-color: #dcdfe6;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="pear-container">
|
|
<div class="layui-card">
|
|
<div class="layui-card-body">
|
|
<div class="layui-row">
|
|
<div class="layui-col-xs12"></div>
|
|
<div class="layui-col-xs12">
|
|
<table id="plugin-table" lay-filter="plugin-table"></table>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
<script type="text/html" id="plugin-toolbar">
|
|
<button class="layui-btn layui-btn-primary layui-bg-gray layui-btn-sm" grp-btn lay-event="showAllPlugin">全部</button>
|
|
<button class="layui-btn layui-btn-primary layui-bg-green layui-btn-sm" grp-btn lay-event="showInstalled">已安装</button>
|
|
<button class="layui-btn layui-btn-primary layui-bg-gray layui-btn-sm" grp-btn lay-event="showWaitInstall">待安装</button>
|
|
</script>
|
|
<script type="text/html" id="plugin-state">
|
|
<input type="checkbox" name="state" value="{{d.platform}}" lay-skin="switch" lay-text="启用|禁用" lay-filter="pluginEnable" {{ d.state == 1 ? 'checked' : '' }} />
|
|
</script>
|
|
<script type="text/html" id="plugin-action">
|
|
<a href="javascript:;" class="layui-font-green" lay-event="createConfig">配置</a><div class="divider-vl"></div>
|
|
<a href="javascript:;" class="layui-font-green" lay-event="pluginUpdate">更新</a><div class="divider-vl"></div>
|
|
<a href="javascript:;" class="layui-font-green" lay-event="pluginUninstall">卸载</a>
|
|
</script>
|
|
<script src="/component/layui/layui.js"></script>
|
|
<script src="/component/pear/pear.js"></script>
|
|
<script>
|
|
layui.use(['layer', 'form', 'common', 'layer'], function () {
|
|
let table = layui.table;
|
|
let layer = layui.layer;
|
|
let form = layui.form;
|
|
let common = layui.common;
|
|
let util = layui.util;
|
|
|
|
const cols = [[
|
|
{ title: '收款平台名称', field: 'name', align: 'center', maxWidth: 180 },
|
|
{ title: '官网', field: 'name', align: 'left', maxWidth: 220, templet: `<div><a href="{{= d.website }}" class="layui-font-green" target="_blank">{{= d.website }}</a></div>` },
|
|
{ title: '说明', field: 'describe', align: 'left' },
|
|
{ title: '价格', field: 'price', align: 'center', maxWidth: 180, templet: `<div>{{= d.price==0 ? '免费' : d.price }}</div>` },
|
|
{ title: '状态', field: 'state', align: 'center', maxWidth: 180, templet: `#plugin-state` },
|
|
{ title: '操作', align: 'right', maxWidth: 180, fixed: 'right', templet: `#plugin-action` },
|
|
]]
|
|
|
|
table.render({
|
|
id: 'plugin-table',
|
|
elem: '#plugin-table',
|
|
url: '/api/Plugin/getPluginList',
|
|
page: true,
|
|
skin: 'line',
|
|
cols: cols,
|
|
className: 'header-th',
|
|
toolbar: '#plugin-toolbar',
|
|
defaultToolbar: [{ title: '刷新', layEvent: 'refresh', icon: 'layui-icon-refresh' }]
|
|
});
|
|
// 表头工具事件
|
|
table.on('toolbar(plugin-table)', function (obj) {
|
|
if (obj.event === 'showAllPlugin') {
|
|
plugin.changClass(this);
|
|
table.reload('plugin-table', { where: { show: 0 } });
|
|
} else if (obj.event === 'showInstalled') {
|
|
plugin.changClass(this);
|
|
table.reload('plugin-table', { where: { show: 1 } });
|
|
} else if (obj.event === 'showWaitInstall') {
|
|
plugin.changClass(this);
|
|
table.reload('plugin-table', { where: { show: 2 } });
|
|
}
|
|
});
|
|
// 单元格事件
|
|
table.on('tool(plugin-table)', function (obj) {
|
|
const id = obj.data.id;
|
|
if (obj.event === 'createConfig') {
|
|
layer.msg(obj.event);
|
|
} else if (obj.event === 'pluginUpdate') {
|
|
layer.msg(obj.event);
|
|
} else if (obj.event === 'pluginUninstall') {
|
|
layer.msg(obj.event);
|
|
}
|
|
});
|
|
// 启用状态
|
|
form.on('switch(pluginEnable)', function (obj) {
|
|
const state = obj.elem.checked == true ? 1 : 0;
|
|
const platform = obj.value;
|
|
const field = { state: state, platform: platform };
|
|
plugin.enable(obj, field);
|
|
return false;
|
|
});
|
|
|
|
let plugin = {};
|
|
|
|
// 处理点击btn切换class
|
|
plugin.changClass = (ele) => {
|
|
const select = 'layui-btn layui-btn-primary layui-bg-green layui-btn-sm';
|
|
const unselect = 'layui-btn layui-btn-primary layui-bg-gray layui-btn-sm';
|
|
ele.className = select;
|
|
const btns = document.querySelectorAll(`button[grp-btn]`);
|
|
btns.forEach(val => {
|
|
if (ele != val) {
|
|
val.className = unselect;
|
|
}
|
|
});
|
|
}
|
|
// 启用
|
|
plugin.enable = async (obj, field) => {
|
|
const res = await fetch('/api/Plugin/pluginEnable', { method: 'post', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(field) });
|
|
if (res.status !== 200) {
|
|
layer.msg('请求失败，请重试！', { tips: 2, time: 1200 }, () => { obj.elem.checked = !obj.elem.checked });
|
|
return false;
|
|
}
|
|
const rec_info = await res.json();
|
|
if (rec_info.code === 0) {
|
|
layer.tips(rec_info.msg, obj.othis, { tips: 1, time: 1200 });
|
|
} else {
|
|
layer.msg(rec_info.msg, { icon: 2, time: 1200 }, () => { obj.elem.checked = !obj.elem.checked });
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
|
|
</html> |