一、多图片上传
引入 CSS 定义样式
<style>
.layui-upload-list{ margin: 10px 0 0; }
.edit_goods .layui-upload-img { width: 110px;height: 110px;margin: 0 10px 10px 0;display: inline-block;position: relative; }
.edit_goods .layui-upload-img img{ width: 100%;height: 100%; background: #e6e6e6; object-fit: contain; }
.edit_goods .layui-upload-img .handle{ position: absolute;bottom: 0;left: 0;width: 100%; color: #fff;cursor: pointer;
background-color: rgba(0,0,0,0.4);text-align: center; }
</style>
定义 HTML 结构
<div class="layui-form-item">
<label class="layui-form-label">产品图片</label>
<div class="layui-input-block">
<div class="layui-upload">
<div style="overflow: hidden;">
<div class="layui-input-inline" style="width: auto;">
<button type="button" class="layui-btn" id="multi_img_uplaod">多图片上传</button>
</div>
<!-- <div class="layui-input-inline" style="width: auto;height: 38px;line-height: 38px;"><p>(建议图片尺寸为750px * 750px)</p></div> -->
</div>
<blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
预览图:<div class="layui-upload-list" id="multi_img_uplaod_btn"></div>
</blockquote>
</div>
</div>
</div>
引入 JS 编辑
<script>
layui.data.sendParams = function(params){
// console.log(params);
layui.use(['admin','form','upload','layedit','view','setter','laytpl','layer'], function(){
var $ = layui.$
,admin = layui.admin
,setter = layui.setter
,layedit = layui.layedit
,element = layui.element
,form = layui.form
,view = layui.view
,layer = layui.layer
,laytpl = layui.laytpl
,upload = layui.upload
,router = layui.router();
element.render();
form.render(null, 'edit_goods');
if(params.id){
admin.req({
url: layui.setter.baseUrl+'admin/goods/goodsEdit', //实际使用请改成服务端真实接口
data: {id: params.id},
type:'get',
success: function(res){
if(res.code==1){
if(res.data.info.goods_img.length!=0){
var imgList = '';
for(var i in res.data.info.goods_img){
imgList+='<div class="layui-upload-img">';
imgList+='<div class="handle"><i class="layui-icon layui-icon-delete"></i></div>';
imgList+='<img src='+ res.data.info.goods_img[i] +' οnclick="see_img(this)">';
imgList+='<input type="text" name="goods_imgs[]" value="'+res.data.info.goods_img[i]+'" class="layui-input" style="display:none;">';
imgList+='</div>';
}
$('#multi_img_uplaod_btn').append(imgList);
//获取id下的div元素个数
let uploadedCount = $('#multi_img_uplaod_btn').children('.layui-upload-img').length;
if (uploadedCount >= 3) {
// 如果已上传图片数量达到三张,禁用上传按钮或其他相关操作
$('#multi_img_uplaod').addClass('layui-btn-disabled').prop('disabled', true); // 禁用上传按钮
}
}
form.render();
}else{
layer.msg(res.msg);
}
}
});
}
// 多图片上传
upload.render({
elem: '#multi_img_uplaod'
,url: layui.setter.baseUrl+'admin/upload/upload'
,size: 1024 * 2 ,accept: 'images'
,multiple: true
,before: function(obj){
layer.msg('图片上传中...', { icon: 16, shade: 0.01, time: 0 });
}
,done: function(res){
layer.close(layer.msg());//关闭上传提示窗口
// 上传完毕
var html='<div class="layui-upload-img">';
html+='<div class="handle"><i class="layui-icon layui-icon-delete"></i></div>';
html+='<img src='+res.data+' οnclick="see_img(this)">';
html+='<input type="text" name="goods_imgs[]" value="'+res.data+'" class="layui-input" style="display:none;">';
html+='</div>';
$('#multi_img_uplaod_btn').append(html);
//获取id下的div元素个数
let uploadedCount = $('#multi_img_uplaod_btn').children('.layui-upload-img').length;
if (uploadedCount >= 3) {
// 如果已上传图片数量达到三张,禁用上传按钮或其他相关操作
$('#multi_img_uplaod').addClass('layui-btn-disabled').prop('disabled', true); // 禁用上传按钮
}
form.render();
}
});
// 删除
$("#multi_img_uplaod_btn").on("click", ".layui-upload-img .handle", function(event){
$(this).parent('.layui-upload-img').remove();
//获取id下的div元素个数
let uploadedCount = $('#multi_img_uplaod_btn').children('.layui-upload-img').length;
if (uploadedCount >= 3) {
// 如果已上传图片数量达到三张,禁用上传按钮或其他相关操作
$('#multi_img_uplaod').addClass('layui-btn-disabled').prop('disabled', true); // 禁用上传按钮
} else{
$('#multi_img_uplaod').removeClass('layui-btn-disabled').prop('disabled', false); // 禁用上传按钮
}
form.render();
});
// 查看图片
window.see_img=function(that){
layer.photos({
photos: {data: [{ src: $(that).attr('src') }]},
shade: 0.5,closeBtn: 1,anim: 5
});
};
});
}
</script>
二、视频上传
定义 HTML 结构
<div class="layui-form-item" id="douya_video" style="margin-bottom: 5px;">
<label class="layui-form-label">产品视频</label>
<div class="layui-input-block">
<div class="layui-input-inline">
<input name="goods_vedio" id="goods_img2" placeholder="视频地址" class="layui-input">
</div>
<div class="layui-input-inline layui-btn-container" style="width: auto;margin-right: 0;">
<button type="button" class="layui-btn" id="LAY_videoUpload" style="margin-bottom: 0;">
<i class="layui-icon"></i>上传视频</button>
<a class="layui-btn layui-btn-primary" onclick="see_video();" style="margin-bottom:0;margin-right: 0;">查看视频</a>
</div>
<p style="padding: 9px 0;">(建议视频大小在5M以下)</p>
</div>
</div>
引入 JS 编辑
<script>
layui.data.sendParams = function(params){
// console.log(params);
layui.use(['admin','form','upload','layedit','view','setter','laytpl','layer'], function(){
var $ = layui.$
,admin = layui.admin
,setter = layui.setter
,layedit = layui.layedit
,element = layui.element
,form = layui.form
,view = layui.view
,layer = layui.layer
,laytpl = layui.laytpl
,upload = layui.upload
,router = layui.router();
element.render();
form.render(null, 'edit_goods');
// 查看视频
window.see_video=function(){
var url = $('#goods_img2').val();
if(!url){
layer.msg("请上传视频");
return
}
var html = '<div>\
<video width="500" height="500" controls autobuffer autoplay="autoplay" style="vertical-align: middle;">\
<source src="'+url+'" type="video/mp4" />\
</video>\
</div>';
//弹出层
layer.open({
title: "视频预览", type: 1, skin: 'layui-layer-demo', //样式类名
anim: 2, area: ['500px', '543px'], shadeClose: true, //开启遮罩关闭
content: html
})
return false;
};
//视频上传
upload.render({
elem: '#LAY_videoUpload'
,url: layui.setter.baseUrl+'admin/upload/upload'
,accept: 'file'
,before: function(obj){
layer.msg('上传中...', { icon: 16, shade: 0.01, time: 0 });
}
,done: function(res){
layer.close(layer.msg());//关闭上传提示窗口
if(res.code==1){
//上传完毕
$('#goods_img2').val(res.data);
}else{
layer.msg(res.msg, {icon: 5,anim: 6,shade:0.5,time: 1000});
}
}
,error: function(err){
//请求异常回调
console.log(err)
}
});
});
}
</script>
三、checkbox复选框
定义 HTML 结构
<div id="layui_item"></div>
<script id="layui_script" type="text/html">
<div class="layui-form-item" style="margin-bottom: 0px;">
<label class="layui-form-label">所在类目</label>
<div class="layui-input-block" id="catids_1">
{{# layui.each(d.cat1, function(index, item){ }}
<input type="checkbox" data-index="catid1_{{index}}" value="{{item.id}}" title="{{item.name}}" lay-skin="primary" lay-verify="checkbox">
{{# }); }}
</div>
</div>
<div class="layui-form-item" style="margin-bottom: 0px;">
<label class="layui-form-label">色彩光效</label>
<div class="layui-input-block" id="catids_2">
{{# layui.each(d.cat2, function(index, item){ }}
<input type="checkbox" data-index="catid2_{{index}}" value="{{item.id}}" title="{{item.name}}" lay-skin="primary" lay-verify="checkbox">
{{# }); }}
</div>
</div>
<div class="layui-form-item" style="margin-bottom: 0px;">
<label class="layui-form-label">炸裂特效</label>
<div class="layui-input-block">
{{# layui.each(d.cat3, function(index, item){ }}
<input type="radio" name="cat_id_3" value="{{item.id}}" title="{{item.name}}" lay-verify="required">
{{# }); }}
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">声音特效</label>
<div class="layui-input-block">
{{# layui.each(d.cat4, function(index, item){ }}
<input type="radio" name="cat_id_4" value="{{item.id}}" title="{{item.name}}" lay-verify="required">
{{# }); }}
</div>
</div>
</script>
引入 JS 编辑
<script>
layui.data.sendParams = function(params){
// console.log(params);
layui.use(['admin','form','upload','layedit','view','setter','laytpl','layer'], function(){
var $ = layui.$
,admin = layui.admin
,setter = layui.setter
,layedit = layui.layedit
,element = layui.element
,form = layui.form
,view = layui.view
,layer = layui.layer
,laytpl = layui.laytpl
,upload = layui.upload
,router = layui.router();
element.render();
form.render(null, 'edit_goods');
let cat1=[],cat2=[];
if(params.id){
admin.req({
url: layui.setter.baseUrl+'admin/goods/goodsEdit', //实际使用请改成服务端真实接口
data: {id: params.id},
type:'get',
success: function(res){
if(res.code==1){
// 复选框
var data_item = res.data.cate;
var getTpl_item = layui_script.innerHTML
,view_item = document.getElementById('layui_item');
laytpl(getTpl_item).render(data_item, function(html){
view_item.innerHTML = html;
});
cat1=res.data.info.cat_id_1;
cat2=res.data.info.cat_id_2;
form.val('edit_goods',{
'cat_id_3': res.data.info.cat_id_3.toString(),
'cat_id_4': res.data.info.cat_id_4.toString(),
});
res.data.cate.cat1.forEach(function (item,index) {
res.data.info.cat_id_1.forEach(function (jtem,jndex) {
if(jtem==item.id){
$('input[type="checkbox"][data-index=catid1_' + index + ']').prop('checked', true);
}
});
});
res.data.cate.cat2.forEach(function (item,index) {
res.data.info.cat_id_2.forEach(function (jtem,jndex) {
if(jtem==item.id){
$('input[type="checkbox"][data-index=catid2_' + index + ']').prop('checked', true);
}
});
});
form.render();
}else{
layer.msg(res.msg);
}
}
});
}
//自定义验证规则
form.verify({
checkbox:function (value, item) {
if($('#catids_1 input:checked').length==0){
return "请选择产品所在类目";
}
if($('#catids_2 input:checked').length==0){
return "请选择产品燃放色彩光效";
}
}
});
});
}
</script>
四、layer.open弹窗
内容弹窗
<style>
.ogoods_img{ padding: 10px; box-sizing: border-box; }
.ogoods_img img{ width: 50px; height: 50px; border-radius: 10px; }
.fbc{ display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; }
.ogoods_ul{ padding: 10px; }
.ogoods_ul>li{ display: inline-block; width: 48%; margin-bottom: 10px; border: 2px solid #f8f8f8; }
.ogoods_ul>li:nth-child(2n){ margin-left: 10px; }
.ogoods_txt{ background: #f4f4f4; padding: 8px 5px; }
.ogoods_txt h3{ width: 50%; font-size: 12px; }
</style>
let glist='';
for(var i in data.goods){
if(!data.goods[i].image) data.goods[i].image='/static/admin/src/style/res/img1.png';
else data.goods[i].image=data.goods[i].image;
glist+='<li>\
<div class="ogoods_img fbc">\
<img src="'+data.goods[i].image+'" height="100%" alt="">\
<div style="width: 78%;">\
<p style="color: #111111; font-size: 16px;">'+data.goods[i].revert+'</p>\
<p style="color: #999;">订购箱数:'+data.goods[i].num+'</p>\
</div>\
</div>\
<div class="ogoods_txt fbc">\
<h3 style="width: 60%;padding-bottom: 4px;">规格含量:'+data.goods[i].spec+data.goods[i].content+'</h3>\
<h3 style="width: 40%;padding-bottom: 4px;">产品分类:'+data.goods[i].cate+'</h3>\
<h3>该价位箱规:'+data.goods[i].box+'</h3>\
<h3>结构:'+data.goods[i].struct+'</h3>\
</div>\
</li>';
}
let html='<div id="openGoods"><ul class="ogoods_ul">'+glist+'</ul></div>';
layer.open({
type: 1, title: '查看商品', skin: 'layui-layer-demo', //样式类名
area: ['600px', '600px'], //宽高
anim: 2, shadeClose: true, //开启遮罩关闭
content: html
});
textarea带有文本框的弹窗
layer.open({
type: 1,btn:["确定","取消"],title: '负责人信息备注',skin: 'layui-layer-prompt',area: ['300px', '230px']
,content: '<div><textarea name="remark" id="remark" autocomplete="off" placeholder="请输入备注" class="layui-textarea"></textarea></div>'
,yes: function(index, layero){
if(!$(layero).find("#remark").val()){
layer.msg('请输入备注', {icon: 5,anim: 6,shade:0.5,time: 1000});
return
}
admin.req({
url: layui.setter.baseUrl+'admin/test/test',
data:{id:obj.data.id,desc:$(layero).find("#remark").val()},
type:'get',
success: function(res){
if(res.code==1){
layer.msg(res.msg , {icon: 1,time: 1000} , function(){
layer.close(index); //执行关闭
layui.table.reload('goods_list'); //重载表格
});
}else{
layer.msg(res.msg, {icon: 5,anim: 6,shade:0.5,time: 1000});
}
}
});
}
});