初始上传

This commit is contained in:
2026-04-04 17:27:12 +08:00
parent 4d80d28eb4
commit b7e11774ee
11191 changed files with 1588469 additions and 0 deletions

View File

@@ -0,0 +1,165 @@
<div class="layui-form form-wrap">
<div class="layui-form-item">
<label class="layui-form-label"><span class="required">*</span>品牌名称:</label>
<div class="layui-input-inline len-long">
<input name="brand_name" type="text" lay-verify="required" class="layui-input">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">品牌简介:</label>
<div class="layui-input-inline">
<textarea class="layui-textarea len-long" name="brand_desc" maxlength="100" lay-verify="brand_desc" placeholder="请输入品牌简介不能超过100个字符"></textarea>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">品牌logo</label>
<div class="layui-input-block img-upload">
<div class="upload-img-block">
<div class="upload-img-box">
<div class="upload-default" id="imgUpload">
<div class="upload">
<i class="iconfont iconshangchuan"></i>
<p>点击上传</p>
</div>
</div>
<div class="operation">
<div>
<i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
<i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
</div>
<div class="replace_img js-replace">点击替换</div>
</div>
<input type="hidden" name="image_url" value=""/>
</div>
</div>
</div>
<div class="word-aux">
<p>建议图片尺寸200px * 100px。</p>
<p>图片格式jpg、png、jpeg。</p>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">品牌广告图:</label>
<div class="layui-input-block img-upload">
<div class="upload-img-block">
<div class="upload-img-box">
<div class="upload-default" id="imgBannerUpload">
<div class="upload">
<i class="iconfont iconshangchuan"></i>
<p>点击上传</p>
</div>
</div>
<div class="operation">
<div>
<i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
<i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
</div>
<div class="replace_img js-replace">点击替换</div>
</div>
<input type="hidden" name="banner" value=""/>
</div>
</div>
</div>
<div class="word-aux">
<p>建议图片尺寸200px * 100px。</p>
<p>图片格式jpg、png、jpeg。</p>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">排序:</label>
<div class="layui-input-inline">
<input type="number" name="sort" class="layui-input" placeholder="0" autocomplete="off">
</div>
</div>
<div class="form-row">
<button class="layui-btn" lay-submit lay-filter="save">保存</button>
<button type="reset" class="layui-btn layui-btn-primary" onclick="back()">返回</button>
</div>
</div>
<script>
layui.use(['form'], function() {
var form = layui.form,
repeat_flag = false;//防重复标识
form.render();
/**
* 表单验证
*/
form.verify({
// 品牌简介
brand_desc: function (value) {
if (value.length > 100) {
element.tabChange('goods_tab', "basic");
return '品牌简介不能超过100个字符';
}
},
num: function (value) {
if (value == '') {
return;
}
if (value%1 != 0) {
return '排序数值必须为整数';
}
if (value < 0) {
return '排序数值必须为大于0';
}
}
});
// 普通图片上传
var logo_upload = new Upload({
elem: '#imgUpload'
});
var banner_upload = new Upload({
elem: '#imgBannerUpload'
});
form.on('submit(save)', function (data) {
if (repeat_flag) return false;
repeat_flag = true;
if(!data.field.image_url) logo_upload.delete();
if(!data.field.banner) banner_upload.delete();
$.ajax({
url: '{:addon_url("shop/goodsbrand/addBrand")}',
data: data.field,
dataType: 'json',
type: 'post',
success: function (res) {
repeat_flag = false;
if (res.code == 0) {
layer.confirm('添加成功', {
title:'操作提示',
btn: ['返回列表', '继续添加'],
yes: function(index, layero) {
location.hash = ns.hash("shop/goodsbrand/lists");
layer.close(index);
},
btn2: function(index, layero) {
listenerHash(); // 刷新页面
layer.close(index);
}
})
}else{
layer.msg(res.message);
}
}
});
});
});
function back(){
location.hash = ns.hash("shop/goodsbrand/lists")
}
</script>

View File

@@ -0,0 +1,152 @@
<style>
.select-goods-brand{margin: 20px;}
.select-goods-brand .single-filter-box{padding: 0;}
.select-goods-brand .single-filter-box .layui-form{margin: inherit;}
.select-goods-brand .single-filter-box .layui-form div{margin: 0;}
</style>
<div class="select-goods-brand">
<div class="single-filter-box">
<div class="layui-form">
<div class="layui-input-inline">
<input type="text" name="search_text" placeholder="请输入品牌名称" autocomplete="off" class="layui-input">
<button type="button" class="layui-btn layui-btn-primary" lay-filter="search" lay-submit>
<i class="layui-icon">&#xe615;</i>
</button>
</div>
</div>
</div>
<table id="goods_brand_list" lay-filter="goods_brand_list"></table>
</div>
<script type="text/html" id="checkbox">
<input type="checkbox" data-brand-id="{{d.brand_id}}" name="brand_checkbox" lay-skin="primary" lay-filter="brand_checkbox">
<input type="hidden" data-brand-id="{{d.brand_id}}" name="brand_json" value='{{ JSON.stringify(d) }}' />
</script>
<script>
var select_id = localStorage.getItem('goods_brand_select_id') || '', // "{$select_id}", //选中商品品牌id
brandList ={:json_encode($brand_list)},
selectList = {}, //选中商品品牌所有数据res
brandIdArr = select_id.length ? select_id.split(',') : [], //已选中的商品品牌id
table, form,laytpl,element;
$(function () {
for (var k in brandList) {
selectList['brand_id_' + brandList[k].brand_id] = {
brand_id: brandList[k].brand_id,
brand_name: brandList[k].brand_name,
image_url: brandList[k].image_url,
}
}
layui.use(['form', 'laytpl', 'element'], function () {
form = layui.form;
laytpl = layui.laytpl;
element = layui.element;
table = new Table({
elem: '#goods_brand_list',
url: '{:addon_url("shop/goodsbrand/brandselect")}',
cols: [
[
{
title: '<input type="checkbox" name="brand_checkbox_all" lay-skin="primary" lay-filter="brand_checkbox_all">',
width: "8%",
templet: '#checkbox'
},
{
field: 'brand_name',
title: '品牌名称',
width: '60%'
},
{
field: 'image_url',
title: '品牌图片',
width: '30%',
templet: function (d) {
return `<img layer-src src="${ns.img(d.image_url)}"/>`;
}
},
]
],
callback: function (res) {
// 更新复选框状态
for (var i = 0; i < brandIdArr.length; i++) {
var selected_brand = $("input[name='brand_checkbox'][data-brand-id='" + brandIdArr[i] + "']");
if (selected_brand.length) {
selected_brand.prop("checked", true);
}
}
form.render();
dealWithTableSelectedNum();
}
});
form.on('submit(search)', function (data) {
formSearch();
return false;
});
//公共搜索方法
function formSearch() {
var data = {};
data.search_text = $("input[name='search_text']").val();
data.brand_ids = brandIdArr.toString();
table.reload({
page: {
curr: 1
},
where: data
});
}
// 勾选商品品牌
form.on('checkbox(brand_checkbox_all)', function (data) {
var all_checked = data.elem.checked;
$("input[name='brand_checkbox']").each(function () {
var checked = $(this).prop('checked');
if (all_checked != checked) {
$(this).next().click();
}
})
});
// 勾选商品品牌
form.on('checkbox(brand_checkbox)', function (data) {
var brand_id = $(data.elem).attr("data-brand-id");
var spuLen = $("input[name='brand_checkbox'][data-brand-id=" + brand_id + "]:checked").length;
if (spuLen) {
var item = JSON.parse($("input[name='brand_json'][data-brand-id=" + brand_id + "]").val());
delete item.LAY_INDEX;
delete item.LAY_TABLE_INDEX;
selectList['brand_id_' + brand_id] = item;
} else {
delete selectList['brand_id_' + brand_id];
}
dealWithTableSelectedNum();
});
});
});
function selectGoodsBrandListener(callback) {
brandIdArr = [];
for (var key in selectList){
brandIdArr.push(selectList[key].brand_id);
}
if(brandIdArr.length == 0) {
layer.msg('请选择商品品牌');
return;
}
callback({
brandIds: brandIdArr,
list: selectList
});
}
//在表格底部增加了一个容器
function dealWithTableSelectedNum() {
$(".layui-table-bottom-left-container").html('已选择 '+ Object.keys(selectList).length +' 个商品品牌');
}
</script>

View File

@@ -0,0 +1,180 @@
<div class="layui-form form-wrap">
<div class="layui-form-item">
<label class="layui-form-label"><span class="required">*</span>品牌名称:</label>
<div class="layui-input-inline len-long">
<input name="brand_name" type="text" value="{$brand_info['brand_name']}" lay-verify="required" class="layui-input ">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">品牌简介:</label>
<div class="layui-input-inline">
<textarea class="layui-textarea len-long" name="brand_desc" maxlength="100" lay-verify="brand_desc" placeholder="请输入品牌简介不能超过100个字符">{$brand_info['brand_desc']}</textarea>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">品牌logo</label>
<div class="layui-input-block">
<input type="hidden" name="brand_id" value="{$brand_info['brand_id']}">
<div class="upload-img-block">
<div class="upload-img-box {notempty name="$brand_info['image_url']"}hover{/notempty}">
<div class="upload-default" id="imgUpload">
{if condition="$brand_info['image_url']"}
<div id="preview_imgUpload" class="preview_img">
<img layer-src src="{:img($brand_info['image_url'])}" class="img_prev"/>
</div>
{else/}
<div class="upload">
<i class="iconfont iconshangchuan"></i>
<p>点击上传</p>
</div>
{/if}
</div>
<div class="operation">
<div>
<i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
<i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
</div>
<div class="replace_img js-replace">点击替换</div>
</div>
<input type="hidden" name="image_url" value="{$brand_info['image_url']}">
</div>
</div>
</div>
<div class="word-aux">
<p>建议图片尺寸200px * 100px。</p>
<p>图片格式jpg、png、jpeg。</p>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">品牌广告图:</label>
<div class="layui-input-block">
<div class="upload-img-block">
<div class="upload-img-box {notempty name="$brand_info['banner']"}hover{/notempty}">
<div class="upload-default" id="imgBannerUpload">
{if condition="$brand_info['banner']"}
<div id="preview_imgBannerUpload" class="preview_img">
<img layer-src src="{:img($brand_info['banner'])}" class="img_prev"/>
</div>
{else/}
<div class="upload">
<i class="iconfont iconshangchuan"></i>
<p>点击上传</p>
</div>
{/if}
</div>
<div class="operation">
<div>
<i title="图片预览" class="iconfont iconreview js-preview" style="margin-right: 20px;"></i>
<i title="删除图片" class="layui-icon layui-icon-delete js-delete"></i>
</div>
<div class="replace_img js-replace">点击替换</div>
</div>
<input type="hidden" name="banner" value="{$brand_info['banner']}">
</div>
</div>
</div>
<div class="word-aux">
<p>建议图片尺寸200px * 100px。</p>
<p>图片格式jpg、png、jpeg。</p>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">排序:</label>
<div class="layui-input-inline">
<input type="number" name="sort" value="{$brand_info['sort']}" class="layui-input" placeholder="0" autocomplete="off">
</div>
</div>
<div class="form-row">
<button class="layui-btn" lay-submit lay-filter="save">保存</button>
<button type="reset" class="layui-btn layui-btn-primary" onclick="back()">返回</button>
</div>
</div>
<script>
layui.use(['form'], function() {
var form = layui.form,
repeat_flag = false;//防重复标识
form.render();
/**
* 表单验证
*/
form.verify({
// 品牌简介
brand_desc: function (value) {
if (value.length > 100) {
element.tabChange('goods_tab', "basic");
return '品牌简介不能超过100个字符';
}
},
num: function (value) {
if (value == '') {
return;
}
if (value%1 != 0) {
return '排序数值必须为整数';
}
if (value < 0) {
return '排序数值必须为大于0';
}
}
});
// 普通图片上传
var logo_upload = new Upload({
elem: '#imgUpload'
});
var banner_upload = new Upload({
elem: '#imgBannerUpload'
});
form.on('submit(save)', function (data) {
if (repeat_flag) return false;
repeat_flag = true;
if(!data.field.image_url) logo_upload.delete();
if(!data.field.banner) banner_upload.delete();
$.ajax({
url: '{:addon_url("shop/goodsbrand/editBrand")}',
data: data.field,
dataType: 'json',
type: 'post',
success: function (res) {
repeat_flag = false;
if (res.code == 0) {
layer.confirm('编辑成功', {
title:'操作提示',
btn: ['返回列表', '继续操作'],
yes: function(index, layero) {
location.hash = ns.hash("shop/goodsbrand/lists");
layer.close(index);
},
btn2: function(index, layero) {
layer.close(index);
}
})
}else{
layer.msg(res.message);
}
}
});
return false;
});
});
function back(){
location.hash = ns.hash("shop/goodsbrand/lists")
}
</script>

View File

@@ -0,0 +1,173 @@
<!-- 搜索框 -->
<div class="single-filter-box">
<button class="layui-btn" onclick="addBrand()">添加品牌</button>
<div class="layui-form">
<div class="layui-input-inline">
<input type="text" name="search_keys" placeholder="请输入品牌名称" autocomplete="off" class="layui-input">
<button type="button" class="layui-btn layui-btn-primary" lay-filter="search" lay-submit>
<i class="layui-icon">&#xe615;</i>
</button>
</div>
</div>
</div>
<table id="brand_list" lay-filter="brand_list"></table>
<script type="text/html" id="image_url">
{{# if(d.image_url){ }}
<div class="img-box">
<img layer-src src={{ns.img(d.image_url)}} >
</div>
{{# } }}
</script>
<script type="text/html" id="banner">
{{# if(d.banner){ }}
<div class="img-box">
<img layer-src src={{ns.img(d.banner)}} >
</div>
{{# } }}
</script>
<!-- 操作 -->
<script type="text/html" id="action">
<div class="table-btn">
<a class="layui-btn" lay-event="edit">编辑</a>
<a class="layui-btn" lay-event="delete">删除</a>
</div>
</script>
<!-- 编辑排序 -->
<script type="text/html" id="editSort">
<input name="sort" type="number" onchange="editSort({{d.brand_id}}, this)" value="{{d.sort}}" class="layui-input edit-sort">
</script>
<script>
var form, table;
layui.use(['table', 'form'], function() {
form = layui.form;
form.render();
table = new Table({
elem: '#brand_list',
url: ns.url("shop/goodsbrand/lists"),
cols: [
[
/* {
width: "3%",
type: 'checkbox',
unresize: 'false'
}, */
{
field: 'brand_name',
title: '品牌名称',
width: '30%',
unresize: 'false'
}, {
field: 'image_url',
title: '品牌LOGO',
width: '15%',
unresize: 'false',
templet: "#image_url"
}, {
field: 'banner',
title: '品牌广告图',
width: '15%',
unresize: 'false',
templet: "#banner"
},{
unresize: 'false',
title: '排序',
width: '15%',
templet: '#editSort'
}, {
title: '操作',
width: '25%',
toolbar: '#action',
align:'right',
unresize: 'false'
}]
]
});
/**
* 监听工具栏操作
*/
table.tool(function(obj) {
var data = obj.data;
switch (obj.event) {
case 'edit':
location.hash = ns.hash("shop/goodsbrand/editbrand",{"brand_id":data.brand_id});
break;
case 'delete':
deleteBrand(data.brand_id);
break;
}
});
/**
* 删除
*/
function deleteBrand(brand_id) {
layer.confirm('确定要删除该品牌吗?', function(index) {
layer.close(index);
$.ajax({
url: ns.url("shop/goodsbrand/deleteBrand"),
data: {brand_id: brand_id},
dataType: 'JSON',
type: 'POST',
success: function (res) {
layer.msg(res.message);
if (res.code == 0) {
table.reload();
}
}
});
});
}
/**
* 搜索功能
*/
form.on('submit(search)', function(data){
table.reload({
page: {
curr: 1
},
where: data.field
});
});
});
// 监听单元格编辑
function editSort(id, event){
var data = $(event).val();
if(!new RegExp("^-?[0-9]\\d*$").test(data)){
layer.msg("排序号只能是整数");
return ;
}
if(data<0){
layer.msg("排序号必须大于0");
return ;
}
$.ajax({
type: 'POST',
url: ns.url("shop/goodsbrand/modifySort"),
data: {
sort: data,
brand_id: id
},
dataType: 'JSON',
success: function(res) {
layer.msg(res.message);
if(res.code==0){
table.reload();
}
}
});
}
function addBrand() {
location.hash = ns.hash("shop/goodsbrand/addBrand");
}
</script>