This commit is contained in:
toom1996
2025-07-02 16:46:21 +08:00
parent 716e20675e
commit 2664c7741d
2 changed files with 137 additions and 26 deletions

View File

@ -19,30 +19,60 @@
<div class="layui-form-item">
<label class="layui-form-label">网站名称</label>
<div class="layui-input-inline layui-input-wrap">
<input type="text" name="app_name" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
<input type="text" name="app_name" autocomplete="off" lay-affix="clear" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">网站logo</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" id="test1">
<i class="layui-icon">&#xe67c;</i>上传图片
</button>
<img style="max-height: 50px;" src="" id="app_logo">
<input type="hidden" name="app_logo" value="" class="layui-input" autocomplete="off">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">网站描述</label>
<div class="layui-input-inline layui-input-wrap">
<input type="text" name="app_description" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
<input type="text" name="app_description" autocomplete="off" lay-affix="clear" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">关键词</label>
<div class="layui-input-inline layui-input-wrap">
<input type="text" name="app_keywords" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
<input type="text" name="app_keywords" autocomplete="off" lay-affix="clear" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">公司名称</label>
<div class="layui-input-inline layui-input-wrap">
<input type="text" name="app_company" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
<input type="text" name="app_company" autocomplete="off" lay-affix="clear" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">备案号</label>
<div class="layui-input-inline layui-input-wrap">
<input type="text" name="app_filing" autocomplete="off" lay-affix="clear" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">备案号链接地址</label>
<div class="layui-input-inline layui-input-wrap">
<input type="text" name="app_filing" autocomplete="off" lay-affix="clear" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">模板</label>
<div class="layui-input-inline layui-input-wrap">
<input type="radio" name="template" value="2" title="模板2">
{{-- <input type="radio" name="sex" value="2" title="">--}}
{{-- <input type="radio" name="sex" value="nv" title="" checked>--}}
</div>
</div>
<div class="layui-form-item">
<div class="button-container">
<button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="insert">
<button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="save">
提交
</button>
</div>
@ -57,6 +87,33 @@
layui.use(['upload', 'jquery', 'popup'], function(){
const $ = layui.jquery;
const upload = layui.upload;
// 上传logo
upload.render({
elem: '#logo_upload_btn' //绑定元素
,url: UPLOAD_API // 上传接口,实际使用时改成您自己的上传接口即可。
,accept: 'images' // 限制为图片类型
,exts: 'jpg|jpeg|png|gif|ico' // 允许上传的文件格式,加入 ico 格式
,before: function(obj){ //obj参数包含的信息跟 choose回调完全一致可参见上文。
console.log(obj)
}
,done: function(res){
//上传完毕回调
console.log(res)
// 若上传失败
if(res.code > 0){
return layer.msg('上传失败');
}
// 上传成功的一些操作
// …
document.querySelector('[id="app_logo"]').src = res.data.url
$("input[name=app_logo]").val(res.data.url);
}
,error: function(e){
console.log(e)
//请求异常回调
}
});
layui.form.on("submit(insert)", function (data) {
console.log(data)

View File

@ -20,25 +20,55 @@
<div class="layui-form-item">
<label class="layui-form-label">网站名称</label>
<div class="layui-input-inline layui-input-wrap">
<input type="text" name="app_name" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
<input type="text" name="app_name" autocomplete="off" lay-affix="clear" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">网站logo</label>
<div class="layui-input-block">
<button type="button" class="layui-btn" id="logo_upload_btn">
<i class="layui-icon">&#xe67c;</i>上传图片
</button>
<img style="max-height: 50px;" src="" id="app_logo">
<input type="hidden" name="app_logo" value="" class="layui-input" autocomplete="off">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">网站描述</label>
<div class="layui-input-inline layui-input-wrap">
<input type="text" name="app_description" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
<input type="text" name="app_description" autocomplete="off" lay-affix="clear" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">关键词</label>
<div class="layui-input-inline layui-input-wrap">
<input type="text" name="app_keywords" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
<input type="text" name="app_keywords" autocomplete="off" lay-affix="clear" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">公司名称</label>
<div class="layui-input-inline layui-input-wrap">
<input type="text" name="app_company" lay-verify="required" autocomplete="off" lay-affix="clear" class="layui-input">
<input type="text" name="app_company" autocomplete="off" lay-affix="clear" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">备案号</label>
<div class="layui-input-inline layui-input-wrap">
<input type="text" name="app_filing" autocomplete="off" lay-affix="clear" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">备案号链接地址</label>
<div class="layui-input-inline layui-input-wrap">
<input type="text" name="app_filing" autocomplete="off" lay-affix="clear" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">模板</label>
<div class="layui-input-inline layui-input-wrap">
<input type="radio" name="template" value="2" title="模板2">
{{-- <input type="radio" name="sex" value="2" title="">--}}
{{-- <input type="radio" name="sex" value="nv" title="" checked>--}}
</div>
</div>
<div class="layui-form-item">
@ -57,10 +87,11 @@
// API
const VIEW_API = "/admin/api/website/config/view"; // 获取关键词数据
const SAVE_API = "/admin/api/website/config/save"; // 重新保存数据
const UPLOAD_API = '/upload/image' // 上传图片
layui.use(['upload', 'jquery', 'popup', 'form'], function(){
const $ = layui.jquery;
const upload = layui.upload;
initViewData()
layui.form.on("submit(save)", function (data) {
layui.$.ajax({
@ -81,7 +112,32 @@
});
return false;
});
// 上传logo
upload.render({
elem: '#logo_upload_btn' //绑定元素
,url: UPLOAD_API // 上传接口,实际使用时改成您自己的上传接口即可。
,accept: 'images' // 限制为图片类型
,exts: 'jpg|jpeg|png|gif|ico' // 允许上传的文件格式,加入 ico 格式
,before: function(obj){ //obj参数包含的信息跟 choose回调完全一致可参见上文。
console.log(obj)
}
,done: function(res){
//上传完毕回调
console.log(res)
// 若上传失败
if(res.code > 0){
return layer.msg('上传失败');
}
// 上传成功的一些操作
// …
document.querySelector('[id="app_logo"]').src = res.data.url
$("input[name=app_logo]").val(res.data.url);
}
,error: function(e){
console.log(e)
//请求异常回调
}
});
function initViewData() {
let viewId = layui.url().search['id']
$.ajax({
@ -92,6 +148,10 @@
method: 'get',
dataType: "json",
success: function (res) {
// ajax产生错误
if (res.code) {
layui.popup.failure(res.msg);
}
// 赋值表单
layui.each(res.data, function (key, value) {
@ -109,23 +169,17 @@
});
const form = layui.form;
const selectedPlatforms = res.data.platform; // 后端数据
selectedPlatforms?.forEach(val => {
// 设置 value 对应的 checkbox 为选中
document.querySelectorAll('input[name="platform[]"]').forEach(el => {
if (el.value == val) {
el.checked = true;
}
});
const app_template = res.data.app_template
console.log(document.querySelectorAll('input[name="template"]'))
document.querySelectorAll('input[name="template"]').forEach(el => {
if (el.value == app_template) {
el.checked = true;
}
// console.log(el)
});
form.render('checkbox'); // 重新渲染
// ajax产生错误
if (res.code) {
layui.popup.failure(res.msg);
}
document.querySelector('[id="app_logo"]').src = res.data.app_logo
form.render('radio'); // 重新渲染
}
});