xinyouhe/orzar-admin
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

Initial commit

Browse Source
This commit is contained in:
chenlan
2025-06-06 09:07:50 +08:00
commit 7533598830
293 changed files with 111546 additions and 0 deletions
Download Patch File Download Diff File Expand all files Collapse all files
page/table/brandadd - 副本.html
Executable
+260
View File
@@ -0,0 +1,260 @@
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>layui</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="../../lib/layui-v2.6.3/css/layui.css" media="all">
<link rel="stylesheet" href="../../assets/css/public.css" media="all">
<style>
body {
background-color: #ffffff;
}
.img-3 {
max-width: 64px;
max-height: 64px;
border-radius: 6px;
}
.upload-item img{
height: 40px;
}
</style>
</head>
<body>
<div class="layui-form layuimini-form">
<div class="layui-tab layui-tab-brief" lay-filter="docDemoTabBrief">
<ul class="layui-tab-title">
<li class="layui-this" data-i18n="carlist.basic_info"></li>
<li data-i18n="brand.album"></li>
<li data-i18n="brand.advantage"></li>
</ul>
<div class="layui-tab-content">
<div class="layui-tab-item layui-show">
<div class="layui-row">
<div class="layui-col-md6 layui-col-sm6">
<div class="layui-form-item">
<label class="layui-form-label" data-i18n="brand.name"></label>
<div class="layui-input-block">
<input type="text" name="name" lay-reqtext="名称不能为空" data-i18n-placeholder="pleaseenter" value="" class="layui-input">
</div>
</div>
</div>
<div class="layui-col-md6 layui-col-sm6">
<div class="layui-form-item layui-form-text">
<label class="layui-form-label" data-i18n="seach.status"></label>
<div class="layui-input-block">
<input type="checkbox" id="status" lay-filter="status" lay-skin="switch" lay-text="">
<input type="text" style="display:none" name="status" value="1" />
</div>
</div>
</div>
<div class="layui-col-md6 layui-col-sm6">
<div class="layui-form-item">
<label class="layui-form-label " data-i18n="brand.logo"></label>
<div class="layui-input-block upload-item">
<img class="img-3" src="../../assets/images/noimg.png" alt="" />
<input type="text" style="display:none" name="logo" value="" />
<button type="button" class="layui-btn btnup"><i class="layui-icon"></i><span data-i18n="userlist.uploadig"></span></button>
</div>
</div>
</div>
<div class="layui-col-md6 layui-col-sm6">
<div class="layui-form-item">
<label class="layui-form-label " data-i18n="brand.banner"></label>
<div class="layui-input-block upload-item">
<img class="img-3" src="../../assets/images/noimg.png" alt="" />
<input type="text" style="display:none" name="toppic" value="" />
<button type="button" class="layui-btn btnup"><i class="layui-icon"></i><span data-i18n="userlist.uploadig"></span></button>
</div>
</div>
</div>
<div class="layui-col-md6 layui-col-sm6">
<div class="layui-form-item">
<label class="layui-form-label " data-i18n="brand.thumbnail"></label>
<div class="layui-input-block upload-item">
<img class="img-3" src="../../assets/images/noimg.png" alt="" />
<input type="text" style="display:none" name="descpic" value="" />
<button type="button" class="layui-btn btnup"><i class="layui-icon"></i><span data-i18n="userlist.uploadig"></span></button>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label" data-i18n="brand.desc"></label>
<div class="layui-input-block">
<textarea name="desc" class="layui-textarea" id="desc"></textarea>
</div>
</div>
</div>
</div>
<div class="layui-tab-item">
<div class="layui-row">
<div class="layui-form-item">
<label class="layui-form-label">品牌图册</label>
<div class="layui-input-block">
<div class="layui-upload">
<button type="button" class="layui-btn" id="albumUpload">
<i class="layui-icon">&#xe67c;</i>上传图片
</button>
<div class="layui-upload-list" id="albumList">
<!-- 图片预览区域 -->
</div>
</div>
</div>
</div>
</div>
</div>
<div class="layui-tab-item">
<div class="layui-row">
<div class="layui-form-item">
<div class="layui-input-block" style="text-align: right;">
<button type="button" class="layui-btn layui-btn-normal" id="addItem">
<i class="layui-icon">&#xe654;</i><span data-i18n="brand.advantage"></span>
</button>
</div>
</div>
<div id="itemList">
<!-- 动态添加的内容将在这里显示 -->
</div>
</div>
</div>
</div>
</div>
<div class="layui-form-item layui-hide">
<div class="layui-input-block bootm">
<input type="button" lay-submit lay-filter="saveBtn" id="saveBtn" value="确认">
</div>
</div>
</div>
<script src="../../lib/layui-v2.6.3/layui.js" charset="utf-8"></script>
<script src="../../lib/jquery-3.4.1/jquery-3.4.1.min.js" charset="utf-8"></script>
<script src="../../assets/main.js" charset="utf-8"></script>
<script src="../../assets/public.js" type="text/javascript" charset="utf-8"></script>
<script src="../../assets/js/i18n1.js"></script>
<script>
layui.use(['form', 'upload'], function () {
var form = layui.form,
layer = layui.layer,
upload = layui.upload,
$ = layui.$;
$('.btnup').each(function(index, item){
var $item = $(item).closest('.upload-item');
upload.render({
elem: item,
url:baseUrl+ 'console/upload/image',
accept: 'images',
field: 'image',
done: function(res){
if(res.code == 0){
$item.find('img').attr('src',res.data.image_url);
$item.find('input').val(res.data.image_name);
}
}
});
});
// 图片上传
upload.render({
elem: '#albumUpload',
url:baseUrl+ 'console/upload/image',
multiple: true,
accept: 'images',
acceptMime: 'image/*',
field: 'image',
before: function(obj) {
// 预读本地文件，如果是多文件，则会遍历。(不支持ie8/9)
obj.preview(function(index, file, result) {
// 生成唯一的图片ID
var imgId = 'img_' + new Date().getTime() + '_' + index;
$('#albumList').append(`
<div class="upload-itemm" style="display: inline-block; margin: 10px;" data-index="${index}">
<img src="${result}" alt="" id="${imgId}" class="img-3">
<input type="hidden" name="pic[]" value="">
<input type="text" class="layui-input" placeholder="请输入图片描述" style="margin: 5px 0px;height: 30px;" name="alt[]">
<button type="button" class="layui-btn layui-btn-danger layui-btn-xs delete-img">
<i class="layui-icon">&#xe640;</i>删除
</button>
</div>
`);
});
},
done: function(res, index, upload) {
// 上传完毕回调
if(res.code == 0) {
// 上传成功，设置图片地址
console.log(res.data.image_name);
// 通过data-index属性找到对应的元素
$('.upload-itemm[data-index="' + index + '"]').find('input[name="pic[]"]').val(res.data.image_name);
} else {
layer.msg('上传失败');
}
},
error: function() {
layer.msg('上传失败');
}
});
// 删除图片
$(document).on('click', '.delete-img', function() {
$(this).closest('.upload-itemm').remove();
});
// 原有的表单提交代码
form.on('submit(saveBtn)', function (data) {
// 获取所有图片和描述，组合成指定格式
var albumData = [];
$('.upload-itemm').each(function() {
var pic = $(this).find('input[name="pic[]"]').val();
var alt = $(this).find('input[name="alt[]"]').val();
if(pic) { // 只添加有图片的数据
albumData.push({
pic: pic,
alt: alt || '' // 如果没有描述，设置为空字符串
});
}
});
// 将组合后的数据添加到表单数据中
data.field.album = albumData;
var index = layer.alert(JSON.stringify(data.field), {
title: '最终的提交信息'
}, function () {
layer.close(index);
var iframeIndex = parent.layer.getFrameIndex(window.name);
parent.layer.close(iframeIndex);
});
return false;
});
layui.$("#status").attr("checked", layui.$('input[name="status"]').val() != 0);
layui.form.render();
layui.form.on("switch(status)", function(data) {
layui.$('input[name="status"]').val(this.checked ? 1 : 0);
});
addFeature('itemList',form,'标题','内容')
// 添加按钮点击事件
$('#addItem').on('click', function() {
addFeature('itemList',form,'标题','内容')
});
// 删除特点按钮点击事件
$(document).on('click', '.delete-feature', function() {
$(this).closest('.feature-item').remove();
// 重新排序索引
$('#itemList .feature-item').each(function(index) {
$(this).find('input[name^="title"]').attr('name', 'title[' + index + ']');
$(this).find('textarea[name^="content"]').attr('name', 'content[' + index + ']');
});
});
// 页面加载时添加第一组
addItem();
});
</script>
</body>
</html>