152 lines
4.7 KiB
PHP
Executable File
152 lines
4.7 KiB
PHP
Executable File
|
|
<!DOCTYPE html>
|
|
<html lang="zh-cn">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<title>更新页面</title>
|
|
<link rel="stylesheet" href="/component/pear/css/pear.css" />
|
|
<link rel="stylesheet" href="/admin/css/reset.css" />
|
|
<style>
|
|
.layui-iconpicker .layui-anim {
|
|
bottom: 42px !important;
|
|
top: inherit !important;
|
|
}
|
|
</style>
|
|
</head>
|
|
<body>
|
|
|
|
<form class="layui-form">
|
|
|
|
<div class="mainBox">
|
|
<div class="main-container mr-5">
|
|
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label required">标题</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="title" value="" class="layui-input">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label required">品牌名称</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="brand" value="" class="layui-input">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">源数据</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="source_url" value="" class="layui-input">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">类型</label>
|
|
<div class="layui-input-block">
|
|
<input type="text" name="module" value="" class="layui-input">
|
|
</div>
|
|
</div>
|
|
|
|
<div class="layui-form-item">
|
|
<label class="layui-form-label">图集</label>
|
|
<div class="layui-input-block">
|
|
<div id="images"></div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</form>
|
|
<style>
|
|
.images-item {
|
|
display: flex;
|
|
align-items: center;
|
|
}
|
|
</style>
|
|
<script id="ID-demo-tpl" type="text/html">
|
|
<div class="layui-col-space1" style="display:grid;grid-template-columns: auto auto auto;">
|
|
@{{# d.forEach(function(item) { }}
|
|
<div class="images-item">
|
|
<img loading="lazy" style="width: 100%" src="@{{= item.src }}" >
|
|
</div>
|
|
@{{# }); }}
|
|
</div>
|
|
</script>
|
|
|
|
<script src="/component/layui/layui.js?v=2.8.12"></script>
|
|
<script src="/component/pear/pear.js"></script>
|
|
<script>
|
|
|
|
// 相关接口
|
|
let PRIMARY_KEY = "id";
|
|
|
|
// api
|
|
const VIEW_API = "/admin/api/spider-article/view"
|
|
const UPDATE_API = "/admin/api/menu/update";
|
|
|
|
// 获取行数据
|
|
layui.use(["form", "util", "popup"], function () {
|
|
let viewId = layui.url().search['id']
|
|
let $ = layui.$;
|
|
$.ajax({
|
|
url: VIEW_API,
|
|
data: {
|
|
id: viewId
|
|
},
|
|
method: 'get',
|
|
dataType: "json",
|
|
success: function (res) {
|
|
|
|
// 赋值表单
|
|
layui.each(res.data, function (key, value) {
|
|
let obj = $('*[name="'+key+'"]');
|
|
// if (key === "password") {
|
|
// obj.attr("placeholder", "不更新密码请留空");
|
|
// return;
|
|
// }
|
|
if (typeof obj[0] === "undefined" || !obj[0].nodeName) return;
|
|
if (obj[0].nodeName.toLowerCase() === "textarea") {
|
|
obj.html(layui.util.escape(value));
|
|
} else {
|
|
obj.attr("value", value);
|
|
}
|
|
});
|
|
|
|
// 图标选择
|
|
layui.use(["iconPicker"], function() {
|
|
layui.iconPicker.render({
|
|
elem: "#icon",
|
|
type: "fontClass",
|
|
page: false,
|
|
});
|
|
});
|
|
|
|
renderImages(res.data.images);
|
|
|
|
// ajax产生错误
|
|
if (res.code) {
|
|
layui.popup.failure(res.msg);
|
|
}
|
|
|
|
}
|
|
});
|
|
});
|
|
|
|
// 渲染图集
|
|
function renderImages(images) {
|
|
var laytpl = layui.laytpl;
|
|
var template = document.getElementById('ID-demo-tpl').innerHTML; // 获取模板字符
|
|
var target = document.getElementById('images'); // 输出结果的目标元素
|
|
|
|
// 渲染并输出结果
|
|
laytpl(template).render(images, function(html) {
|
|
target.innerHTML = html;
|
|
});
|
|
}
|
|
|
|
</script>
|
|
|
|
</body>
|
|
|
|
</html>
|