mirror of
https://gitee.com/technical-laohu/mpay.git
synced 2025-09-17 09:16:40 +08:00
174 lines
5.7 KiB
HTML
174 lines
5.7 KiB
HTML
<!DOCTYPE html>
|
|
<html>
|
|
|
|
<head>
|
|
<meta charset="utf-8">
|
|
<title>收款码</title>
|
|
<link rel="stylesheet" href="/component/pear/css/pear.css" />
|
|
<style>
|
|
.edit {
|
|
position: absolute;
|
|
bottom: 8px;
|
|
right: 8px;
|
|
}
|
|
|
|
.layui-card {
|
|
border-radius: 10px;
|
|
}
|
|
|
|
#mainbox {
|
|
padding: 16px;
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body class="pear-container">
|
|
<div class="layui-row" id="mainbox">
|
|
<!-- 通道列表 -->
|
|
</div>
|
|
<script src="/component/layui/layui.js"></script>
|
|
<script src="/component/pear/pear.js"></script>
|
|
<script src="/static/js/awesome-qr.min.js"></script>
|
|
<script>
|
|
const QR = AwesomeQR.AwesomeQR;
|
|
layui.use(['form', 'common'], function () {
|
|
let form = layui.form;
|
|
let util = layui.util;
|
|
let common = layui.common;
|
|
let layer = layui.layer;
|
|
|
|
util.on({
|
|
getQrcode: function () {
|
|
(async () => {
|
|
const type_data = this.getAttribute("data-type");
|
|
const qrcode_data = this.getAttribute("data-qrcode")
|
|
if (type_data == 1) {
|
|
layer.open({
|
|
type: 1,
|
|
area: ['200px', '200px'],
|
|
title: false,
|
|
closeBtn: 0,
|
|
shadeClose: true,
|
|
content: `<img width="100%" src="${qrcode_data}">`
|
|
});
|
|
} else if (type_data == 0) {
|
|
const qrcode_img = await getQrcode(qrcode_data, QR);
|
|
layer.open({
|
|
type: 1,
|
|
area: ['200px', '200px'],
|
|
title: false,
|
|
closeBtn: 0,
|
|
shadeClose: true,
|
|
content: `<img width="100%" src="${qrcode_img}">`
|
|
});
|
|
}
|
|
})()
|
|
},
|
|
edit: function () {
|
|
const cid = this.getAttribute("data-cid");
|
|
layer.open({
|
|
id: 'iframe-channel-edit',
|
|
type: 2,
|
|
title: '修改终端',
|
|
shade: 0.1,
|
|
area: [common.isModile() ? '80%' : '400px', common.isModile() ? '70%' : '300px'],
|
|
content: `/PayManage/editChannel?cid=${cid}`,
|
|
});
|
|
},
|
|
add: function () {
|
|
const aid = this.getAttribute("data-aid")
|
|
layer.open({
|
|
id: 'iframe-channel-add',
|
|
type: 2,
|
|
title: '添加收款码',
|
|
shade: 0.1,
|
|
area: [common.isModile() ? '80%' : '400px', common.isModile() ? '70%' : '300px'],
|
|
content: `/PayManage/addChannel?aid=${aid}`,
|
|
});
|
|
},
|
|
delete: function () {
|
|
const cid = this.getAttribute("data-cid");
|
|
layer.confirm('确定删除终端?', { icon: 3, title: '提示' },
|
|
function (index) {
|
|
fetch('/api/PayManage/delChannel', { method: 'post', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify({ id: cid }) })
|
|
.then(res => res.json())
|
|
.then(res => {
|
|
if (res.code === 0) {
|
|
layer.msg(res.msg, { icon: 1, time: 1200 }, function () {
|
|
location.reload();
|
|
});
|
|
} else {
|
|
layer.msg(res.msg, { icon: 2, time: 1200 });
|
|
}
|
|
})
|
|
layer.close(index);
|
|
});
|
|
},
|
|
});
|
|
// 工具
|
|
let channel = {};
|
|
|
|
channel.buildEle = function (item) {
|
|
let card = document.createElement('div');
|
|
card.className = 'layui-card';
|
|
const qrcode = item.qrcode.length > 50 ? item.qrcode.slice(0, 50) + '...' : item.qrcode;
|
|
let htmlstr = `
|
|
<div class="layui-card-body">
|
|
<span class="layui-badge layui-bg-cyan">终端编号</span><span class="layui-badge layui-bg-gray">${item.channel}</span><br>
|
|
<span class="layui-badge layui-bg-cyan">收款地址</span><span class="layui-badge layui-bg-gray">${qrcode}</span>
|
|
<a href="javascript:;" class="layui-font-blue" lay-on="getQrcode" data-qrcode="${item.qrcode}" data-type="${item.type}"><span class="icon pear-icon"></span></a><br>
|
|
<span class="layui-badge layui-bg-cyan">最后使用</span><span class="layui-badge layui-bg-gray">${item.last_time}</span><br>
|
|
<span class="layui-badge layui-bg-cyan">启用状态</span><span class="layui-badge layui-bg-${item.state == 1 ? 'green' : 'gray'}">${item.state == 1 ? '启用' : '禁用'}</span><br>
|
|
<div class="layui-btn-group edit">
|
|
<button class="layui-btn layui-btn-primary layui-btn-sm" lay-on="edit" data-cid="${item.id}"><span class="icon pear-icon"></span></button>
|
|
<button class="layui-btn layui-btn-primary layui-btn-sm" lay-on="delete" data-cid="${item.id}"><span class="icon pear-icon"></span></button>
|
|
</div>
|
|
</div>`;
|
|
card.innerHTML = htmlstr;
|
|
return card;
|
|
}
|
|
channel.getChannelLlist = async function (mainbox, aid) {
|
|
const url = '/api/PayManage/getChannelList';
|
|
const info = { aid: aid };
|
|
const res = await fetch(url, { method: 'post', headers: { 'Content-Type': 'application/json' }, body: JSON.stringify(info) });
|
|
if (res.status !== 200) {
|
|
layer.msg('请求失败，请重试！', { tips: 2, time: 1200 });
|
|
return false;
|
|
}
|
|
const rec_info = await res.json();
|
|
if (rec_info.code === 0) {
|
|
const lists = rec_info.data;
|
|
lists.forEach(value => {
|
|
const card = channel.buildEle(value);
|
|
mainbox.appendChild(card);
|
|
});
|
|
channel.addBtn(mainbox, aid);
|
|
} else {
|
|
layer.msg(rec_info.msg, { icon: 2, time: 1200 });
|
|
}
|
|
}
|
|
channel.addBtn = function (mainbox, aid) {
|
|
let btn = document.createElement('div');
|
|
btn.className = 'layui-card';
|
|
btn.innerHTML = `<button type="button" lay-on="add" data-aid="${aid}" class="layui-btn layui-btn-fluid">添加收款码</button>`;
|
|
mainbox.appendChild(btn);
|
|
}
|
|
// 生成二维码
|
|
async function getQrcode(text, QR) {
|
|
const qrcodeUrl = await new Promise((resolve) => {
|
|
new QR({
|
|
text: text,
|
|
size: 500,
|
|
}).draw().then((dataURL) => { resolve(dataURL); });
|
|
})
|
|
return qrcodeUrl;
|
|
}
|
|
|
|
const mainbox = document.getElementById('mainbox');
|
|
const aid = '<?php echo $id ?>';
|
|
channel.getChannelLlist(mainbox, aid);
|
|
})
|
|
</script>
|
|
</body>
|
|
|
|
</html> |