<%@ page contentType="text/html;charset=UTF-8" language="java" %>
<html>
<head>
<title>创建商品</title>
<meta charset="UTF-8">
<link rel="stylesheet" href="<%=request.getContextPath()%>/layui/css/layui.css">
<script src="<%=request.getContextPath()%>/js/common.js"></script>
<script src="<%=request.getContextPath()%>/js/UrlRouter.js"></script>
<script src="<%=request.getContextPath()%>/js/jquery.js"></script>
<script>
$(function () {
ajaxGetCategory1();
})
function ajaxGetCategory1() {
$.ajax({
url: baseUrl + "/api/Category",
data: {"method": "queryByPid", "pid": "0"},
type: "get",
dataType: "json",
success: function (jsonData) {
var realData = jsonData.data;
renderFirstLevelCategory(realData);
}
})
}
function renderFirstLevelCategory(realData) {
// var html = '<option value="">请选择一级分类</option>';
var html = "";
$.each(realData, function (index, eachObj) {
html += `<option value="` + eachObj.categoryId + `">` + eachObj.title + `</option>`;
})
$("select[name='cateLevel1']").html(html)
form.render("select");
}
function ajaxGetCategory2(pid) {
$.ajax({
url: baseUrl + "/api/Category",
data: {"method": "queryByPid", "pid": pid},
type: "get",
dataType: "json",
success: function (jsonData) {
var realData = jsonData.data;
renderSecondLevelCategory(realData);
}
})
}
function renderSecondLevelCategory(realData) {
// var html = '<option value="">请选择二级分类</option>';
var html = '';
$.each(realData, function (index, eachObj) {
html += `<option value="` + eachObj.categoryId + `">` + eachObj.title + `</option>`;
})
$("select[name='cateLevel2']").html(html)
form.render("select");
}
function ajaxGetCategory3(pid) {
$.ajax({
url: baseUrl + "/api/Category",
data: {"method": "queryByPid", "pid": pid},
type: "get",
dataType: "json",
success: function (jsonData) {
var realData = jsonData.data;
renderSecondLevelCategory3(realData);
}
})
}
function renderSecondLevelCategory3(realData) {
// var html = '<option value="">请选择三级分类</option>';
var html = '';
$.each(realData, function (index, eachObj) {
html += `<option value="` + eachObj.categoryId + `">` + eachObj.title + `</option>`;
})
$("select[name='cateLevel3']").html(html)
form.render("select");
}
</script>
</head>
<body style="padding: 15px">
<form class="layui-form" action="">
<div class="layui-row layui-col-space10">
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">商品名称</label>
<div class="layui-input-block">
<input type="text" name="name" lay-verify="required" autocomplete="off" placeholder="请输入商品名称"
class="layui-input">
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">子标题</label>
<div class="layui-input-block">
<input type="text" name="subName" autocomplete="off" placeholder="请输入二级名称" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-row layui-col-space10">
<div class="layui-col-md4">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">价格</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="price" placeholder="￥" autocomplete="off" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">活动特价</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="activityPrice" placeholder="￥" autocomplete="off" class="layui-input">
</div>
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<div class="layui-inline">
<label class="layui-form-label">库存数量</label>
<div class="layui-input-inline" style="width: 100px;">
<input type="text" name="count" placeholder="￥" autocomplete="off" class="layui-input">
</div>
</div>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">选择分类</label>
<div class="layui-input-inline">
<select name="cateLevel1" lay-filter="cate1">
<option value="">请选择一级分类</option>
</select>
</div>
<div class="layui-input-inline">
<select name="cateLevel2" lay-filter="cate2">
<option value="">请选择二级分类</option>
</select>
</div>
<div class="layui-input-inline">
<select name="cateLevel3" lay-filter="cate3">
<option value="">请选择三级分类</option>
</select>
</div>
</div>
<div class="layui-row layui-col-space10">
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">销售状态</label>
<div class="layui-input-block">
<input type="checkbox" checked="" value="1" name="isOnSale" lay-skin="switch" lay-text="ON|OFF">
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">是否热门</label>
<div class="layui-input-block">
<input type="checkbox" name="isHot" value="1" lay-skin="switch" lay-text="ON|OFF">
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">是否新品</label>
<div class="layui-input-block">
<input type="checkbox" name="isNew" value="1" lay-skin="switch" lay-text="ON|OFF">
</div>
</div>
</div>
<div class="layui-col-md4">
<div class="layui-form-item">
<label class="layui-form-label">是否推荐</label>
<div class="layui-input-block">
<input type="checkbox" name="isRecommend" value="1" lay-skin="switch" lay-text="ON|OFF">
</div>
</div>
</div>
</div>
<hr class="layui-bg-red">
<div class="layui-card">
<div class="layui-card-header">图片上传</div>
<div class="layui-card-body">
<div class="layui-upload">
<button type="button" class="layui-btn layui-btn-normal" id="chooseImageList">选择多文件</button>
<div class="layui-upload-list">
<table class="layui-table">
<thead>
<tr>
<th>文件名</th>
<th>文件预览</th>
<th>大小</th>
<th>状态</th>
<th>操作</th>
</tr>
</thead>
<tbody id="imageList"></tbody>
</table>
</div>
<%-- <button type="button" class="layui-btn" id="startUpload">开始上传</button>--%>
</div>
</div>
</div>
<hr class="layui-bg-red">
<%-- <div class="layui-form-item layui-form-text">--%>
<%-- <label class="layui-form-label">商品描述</label>--%>
<%-- <div class="layui-input-block">--%>
<%-- <textarea placeholder="请输入内容" name="desc" class="layui-textarea"></textarea>--%>
<%-- </div>--%>
<%-- </div>--%>
<div id="editor">
<p>请填写商品描述</p>
</div>
<div>
<button id="previewHtml" class="layui-btn">预览描述的html文本</button>
<script>
$("#previewHtml").click(function () {
alert(editor.txt.html())
return false;
})
</script>
</div>
<div class="layui-form-item" style="margin-top: 40px">
<div class="layui-input-block">
<button class="layui-btn" lay-submit="" lay-filter="createGoods">创建商品</button>
</div>
</div>
</form>
<script src="<%=request.getContextPath()%>/layui/layui.all.js" charset="UTF-8"></script>
<script type="text/javascript" src="<%=request.getContextPath()%>/wangEditor/wangEditor.js"></script>
<script>
var form, layer, upload;
layui.use(['form'], function () {
form = layui.form;
layer = layui.layer;
upload = layui.upload;
//自定义验证规则
// form.verify({
// name: function (value) {
// if (value.length < 5) {
// return '标题至少得5个字符啊';
// }
// }
//
// });
form.on('select(cate1)', function (data) {
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值
console.log(data.othis); //得到美化后的DOM对象
//此处去获取2级列表数据
ajaxGetCategory2(data.value);
});
form.on('select(cate2)', function (data) {
console.log(data.elem); //得到select原始DOM对象
console.log(data.value); //得到被选中的值
console.log(data.othis); //得到美化后的DOM对象
//此处去获取2级列表数据
ajaxGetCategory3(data.value);
});
//监听提交
form.on('submit(createGoods)', function (data) {
// layer.alert(JSON.stringify(data.field), {
// title: '最终的提交信息'
// })
if (!data.field.cateLevel2) {
layer.msg("请选择二级分类后提交");
return false;
}
data.field.categoryId = data.field.cateLevel3;
//编辑器的最终文本
data.field.desc = editor.txt.html();
//把图片列表做成js的数组
var mapArr = [];
$.each($("#imageList>tr"), function (index, dom) {
console.log(index)
console.log(dom)
mapArr.push($(dom).attr("data-serverpath"))
});
console.log(mapArr);
data.field.imgList = JSON.stringify(mapArr);
$.ajax({
url: baseUrl + "/api/goodsCreate",
data: data.field,
type: "post",
dataType: "json",
success: function (jsonData) {
var msg = jsonData.msg;
layer.msg(msg)
}
});
return false;
});
//多文件列表示例
var demoListView = $('#imageList');
var uploadListIns = upload.render({
elem: '#chooseImageList'
, url: '<%= request.getContextPath()%>/api/upLoadImages' //此处的接口需要我们操作
// , accept: 'file'
, accept: 'images'
, acceptMime: 'image/*'
, multiple: true
, auto: true
// , auto: false
, exts: 'png|jpg|jpeg|gif'
, bindAction: '#startUpload'
, choose: function (obj) {
console.log(obj)
var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
//读取本地文件
obj.preview(function (index, file, result) {
console.log(file)
console.log(result)
var tr = $(['<tr id="upload-' + index + '">'
, '<td>' + file.name + '</td>'
, '<td>' + '<img src="' + result + '" alt="' + file.name + '" class="layui-upload-img">' + '</td>'
, '<td>' + (file.size / 1014).toFixed(1) + 'kb</td>'
, '<td>等待上传</td>'
, '<td>'
, '<button class="layui-btn layui-btn-xs img-reload layui-hide">重传</button>'
, '<button class="layui-btn layui-btn-xs layui-btn-danger img-delete" >删除</button>'
, '</td>'
, '</tr>'].join(''));
//单个重传
tr.find('.img-reload').on('click', function () {
obj.upload(index, file);
});
//删除
tr.find('.img-delete').on('click', function () {
delete files[index]; //删除对应的文件
tr.remove();
uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
});
demoListView.append(tr);
});
}
, done: function (res, index, upload) {
if (res.code == 0) { //上传成功
var tr = demoListView.find('tr#upload-' + index)
, tds = tr.children();
tr.attr("data-serverPath", res.data.src)
tds.eq(1).html('<img src="' + res.data.src + '" alt="" class="layui-upload-img">');
// //隐藏域的值循环加上
//
// $("#imgsHidden").val( $("#imgsHidden").val()+res.data.src+",")
// tds.eq(2).html('<span style="color: #5FB878;">上传成功</span>');
// tds.eq(3).html(''); //清空操作
tds.eq(3).html('<span style="color: #5FB878;">上传成功</span>');
// tds.eq(4).html(''); //清空操作
tds.eq(4).find(".img-reload").addClass('layui-hide');
return delete this.files[index]; //删除文件队列已经上传成功的文件
}
this.error(index, upload);
}
, error: function (index, upload) {
var tr = demoListView.find('tr#upload-' + index)
, tds = tr.children();
// tds.eq(2).html('<span style="color: #FF5722;">上传失败</span>');
// tds.eq(3).find('.demo-reload').removeClass('layui-hide'); //显示重传
tds.eq(3).html('<span style="color: #FF5722;">上传失败</span>');
tds.eq(4).find('.img-reload').removeClass('layui-hide'); //显示重传
}
});
})
</script>
<script type="text/javascript">
var E = window.wangEditor;
var editor = new E('#editor');
editor.customConfig.uploadImgServer = '<%=request.getContextPath()%>/api/upLoadImages' // 上传图片到服务器
editor.customConfig.uploadFileName = 'file';
editor.customConfig.uploadImgHooks = {
before: function (xhr, editor, files) {
// 图片上传之前触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，files 是选择的图片文件
// 如果返回的结果是 {prevent: true, msg: 'xxxx'} 则表示用户放弃上传
// return {
// prevent: true,
// msg: '放弃上传'
// }
},
success: function (xhr, editor, result) {
// 图片上传并返回结果，图片插入成功之后触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
},
fail: function (xhr, editor, result) {
// 图片上传并返回结果，但图片插入错误时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象，result 是服务器端返回的结果
},
error: function (xhr, editor) {
// 图片上传出错时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
},
timeout: function (xhr, editor) {
// 图片上传超时时触发
// xhr 是 XMLHttpRequst 对象，editor 是编辑器对象
},
// 如果服务器端返回的不是 {errno:0, data: [...]} 这种格式，可使用该配置
// （但是，服务器端返回的必须是一个 JSON 格式字符串！！！否则会报错）
customInsert: function (insertImg, result, editor) {
// 图片上传并返回结果，自定义插入图片的事件（而不是编辑器自动插入图片！！！）
// insertImg 是插入图片的函数，editor 是编辑器对象，result 是服务器端返回的结果
// 举例：假如上传图片成功后，服务器端返回的是 {url:'....'} 这种格式，即可这样插入图片：
var url = result.data.src
insertImg(url)
// result 必须是一个 JSON 格式字符串！！！否则报错
}
}
editor.customConfig.customAlert = function (info) {
// info 是需要提示的内容
alert('自定义提示：' + info)
}
editor.create()
</script>
</body>
</html>
扫一扫
01-24
163
163
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
