<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<meta charset="UTF-8">
<title>后台管理系统</title>
<meta name="renderer" content="webkit">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<link rel="shortcut icon" th:href="@{/images/logo.jpg}"/>
<link rel="stylesheet" th:href="@{/js/layui/css/layui.css}">
<link rel="stylesheet" th:href="@{/js/layui/css/admin.css}">
<link rel="stylesheet" th:href="@{/js/upload_img/css/index.css}">
<script type="text/javascript" th:src="@{/js/jquery-3.3.1.min.js}"></script>
<script th:src="@{/js/layui/layui.js}" charset="utf-8"></script>
<link rel="stylesheet" th:href="@{/js/ueditor/themes/default/css/ueditor.css}" type="text/css"/>
<script type="text/javascript" th:src="@{/js/ueditor/ueditor.config.js}"></script>
<script type="text/javascript" th:src="@{/js/ueditor/ueditor.all.js}"></script>
<script type="text/javascript" th:src="@{/js/ueditor/lang/zh-cn/zh-cn.js}"></script>
<script src="http://www.jq22.com/jquery/jquery-1.7.1.js"></script>
<style>
.layui-form-label {
width: 80px;
}
#editor {
height: 600px;
width: 700px;
}
</style>
</head>
<body>
<div class="layui-form" style="padding: 20px 0 0 0;">
<form id="formId" onsubmit="return false;">
<div class="layui-form-item">
<label class="layui-form-label"><span style="color: red">*</span>商品名称</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" name="goodsName" id="goodsName" th:value="${obj.goodsName}">
</div>
<label class="layui-form-label"><span style="color: red">*</span>分类</label>
<div class="layui-input-inline">
<select name="goodsClassPid" id="goodsClassPid" lay-filter="goodsClassPid" lay-search>
<option th:each="list:${goodsClassList}" th:value="${list.goodsClassId}"
th:text="${list.goodsClassName }"
th:selected="${list.goodsClassId}==${obj.goodsClassPid}"></option>
</select>
</div>
<label class="layui-form-label"><span style="color: red">*</span>类型</label>
<div class="layui-input-inline">
<select name="goodsClassId" id="goodsClassId">
<option th:each="list:${getGoodsClassPid}" th:value="${list.goodsClassId}"
th:text="${list.goodsClassName }"
th:selected="${list.goodsClassId}==${obj.goodsClassId}"></option>
</select>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><span style="color: red">*</span>商品描述</label>
<div class="layui-input-inline">
<input type="text" class="layui-input" name="goodsDes" id="goodsDes" th:value="${obj.goodsDes}">
</div>
<label class="layui-form-label"><span style="color: red">*</span>价格/天</label>
<div class="layui-input-inline">
<input type="number" step="0.01" class="layui-input" name="goodsPrice" id="goodsPrice"
th:value="${obj.goodsPrice}">
</div>
<label class="layui-form-label"><span style="color: red">*</span>押金</label>
<div class="layui-input-inline">
<input type="number" step="0.01" class="layui-input" name="deposit" id="deposit"
th:value="${obj.deposit}">
</div>
</div>
<div class="layui-form-item">
<!-- <label class="layui-form-label"><span style="color: red">*</span>库存</label>-->
<!-- <div class="layui-input-inline">-->
<!-- <input type="number" class="layui-input" name="goodsStock" id="goodsStock" th:value="${obj.goodsStock}">-->
<!-- </div>-->
<label class="layui-form-label"><span style="color: red">*</span>返利金额</label>
<div class="layui-input-inline">
<input type="number" step="0.01" class="layui-input" name="rebate" id="rebate" th:value="${obj.rebate}">
</div>
<label class="layui-form-label"><span style="color: red">*</span>首页推荐</label>
<div class="layui-input-inline">
<select name="recommend" id="recommend" lay-filter="recommend" lay-verify="required">
<option value="0">否</option>
<option value="1">是</option>
</select>
</div>
<div id="order">
<label class="layui-form-label"><span style="color: red"></span>推荐排序</label>
<div class="layui-input-inline">
<input type="number" class="layui-input" name="recommendOrder" id="recommendOrder" th:value="${obj.recommendOrder}">
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><span style="color: red"></span>快递费用</label>
<div class="layui-input-inline">
<input type="number" class="layui-input" name="trackingCost" id="trackingCost" th:value="${obj.trackingCost}">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><span style="color: red">*</span>服务</label>
<div class="layui-input-inline" style="width: 35%" id="service">
<input type='checkbox' th:each="list:${serviceList}" th:id="service+${list.id}" name='serviceId'
th:title="${list.name}" th:value="${list.id}">
</div>
<label class="layui-form-label"><span style="color: red">*</span>配送方式</label>
<div class="layui-input-inline" style="width: 30%" id="delivery">
<input th:each="list:${deliveryList}" type='checkbox' th:id="delivery+${list.id}" name='deliveryId'
th:title="${list.name}" th:value="${list.id}">
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label">
<span style="color: red">*</span>商品图片
</label>
<div class="layui-input-inline" style="width: 700px">
<div class="main">
<div id="showimg">
<ul id="showui">
</ul>
<div id="showinput">
</div>
</div>
<br>
<a class="layui-btn layui-btn" onclick="uploadImg()"><i class="layui-icon layui-icon-add-1"></i>选择图片</a>
<input style="display: none" type="file" id="upgteimg" value=""
accept="image/jpg,image/jpeg,image/png,image/bmp" multiple/>
</div>
</div>
</div>
<div class="layui-form-item">
<label class="layui-form-label"><span style="color: red"></span>商品详情</label>
<div class="layui-input-inline" id="goodsDetail" style="width:70%">
<script id="editor" name="detailContent" th:utext="${obj.goodsDetail}" type="text/plain"
style="width:100%;height:500px;"></script>
</div>
</div>
<button class="layui-btn" style="display: none;" id="saveBtn" onclick="save()">保存</button>
</form>
</div>
<script type="text/javascript" th:src="@{/js/upload_img/js/updateimg.js}"></script>
<script>
var goodsId = '[[${goodsId}]]';
var ue = UE.getEditor('editor');
UE.Editor.prototype._bkGetActionUrl = UE.Editor.prototype.getActionUrl;
UE.Editor.prototype.getActionUrl = function (action) {
if (action == 'uploadimage' || action == 'uploadscrawl' || action == 'uploadimage') {
return "http://localhost:9091/goods/uploads";
} else if (action == 'listimage') {
return this._bkGetActionUrl.call(this, action);
} else {
return this._bkGetActionUrl.call(this, action);
}
}
layui.use('form', function () {
var form = layui.form;
form.on('select(recommend)', function (data) {//发生改变调用
var recommend = data.elem.value;
if (recommend == 1) {
$("#order").show();
} else {
$("#order").hide();
}
});
});
$(function () {
// getDictionary();
// var goodsClassId = '[[${goodsClassList[0].goodsClassId}]]'
// getGoodsClassByPid(goodsClassId);
if (goodsId) {
// getGoodsInfo(goodsId);
var serviceId = '[[${obj.serviceId}]]';
var deliveryId = '[[${obj.deliveryId}]]';
if (serviceId) {
serviceId = serviceId.split(",");
for (var i = 0; i < serviceId.length; i++) {
$("#service" + serviceId[i]).prop("checked", true);
}
}
if (deliveryId) {
deliveryId = deliveryId.split(",");
for (var i = 0; i < deliveryId.length; i++) {
$("#delivery" + deliveryId[i]).prop("checked", true);
}
}
var recommend = '[[${obj.recommend}]]'
var recommendOrder = '[[${obj.recommendOrder}]]'
$("#recommend").find("option[value=" + recommend + "]").attr("selected", true);
if (recommend == 1) {
$("#order").show();
$("#recommendOrder").val(recommendOrder);
} else {
$("#order").hide();
}
showImg('[[${obj.goodsImgs}]]');
} else {
$("#order").hide();
}
})
function getGoodsInfo(id) {
$.ajax({
url: "getGoodsById",
data: {"id": id},
type: "POST",
dataType: "json",
success: function (result) {
if (result) {
$("#goodsName").val(result.goodsName);
$("#goodsClassPid").find("option[value=" + result.goodsClassPid + "]").attr("selected", true);
$("#goodsClassId").find("option[value=" + result.goodsClassId + "]").attr("selected", true);
$("#goodsPrice").val(result.goodsPrice);
// $("#goodsStock").val(result.goodsStock);
$("#goodsDes").val(result.goodsDes);
$("#deposit").val(result.deposit);
$("#rebate").val(result.rebate);
$("#recommend").find("option[value=" + result.recommend + "]").attr("selected", true);
if (result.recommend == 1) {
$("#order").show();
$("#recommendOrder").val(result.recommendOrder);
} else {
$("#order").hide();
}
ue.addListener("ready", function () {
// editor准备好之后才可以使用
ue.setContent(result.goodsDetail);
});
var serviceId = result.serviceId;
var deliveryId = result.deliveryId;
if (serviceId) {
serviceId = serviceId.split(",");
for (var i = 0; i < serviceId.length; i++) {
$(".service" + serviceId[i]).prop("checked", true);
}
}
if (deliveryId) {
deliveryId = deliveryId.split(",");
for (var i = 0; i < deliveryId.length; i++) {
$(".delivery" + deliveryId[i]).prop("checked", true);
}
}
showImg(result.goodsImgs)
} else {
layer.msg("发生错误,请重新登录!", {icon: 5});
clearInterval(index);
}
}
});
}
function save() {
if ($("#formId input[name='goodsName']").val() == '') {
layer.msg("商品名称不能为空!");
return false;
}
if ($("#formId input[name='goodsSeriesId']").val() == '') {
layer.msg("系列不能为空!");
return false;
}
if (!$("#goodsPrice").val()) {
layer.msg("价格不能为空!");
return false;
}
// if (!$("#goodsStock").val()) {
// layer.msg("库存不能为空!");
// return false;
// }
var form = document.querySelector("#formId");
var formdata = new FormData(form);
var serviceId = formdata.get("serviceId");
var deliveryId = formdata.get("deliveryId");
if (!serviceId) {
layer.msg("服务不能为空!");
return false;
}
if (!deliveryId) {
layer.msg("配送方式不能为空!");
return false;
}
// if(!$("#storeAddrss").val()){
// layer.msg("门店地址不能为空!");
// return false;
// }
var goodsPrice = $("#formId input[name='goodsPrice']").val();
//var reg = /^(?!0+(?:\.0+)?$)(?:[1-9]\d*|0)(?:\.\d{1,2})?$/;
var reg = /^[0-9]+([.]{1}[0-9]{1,2})?$/;
if (goodsPrice == '' || !reg.test(goodsPrice)) {
layer.msg("价格不合法!", {icon: 5});
return false;
}
var deposit = $("#formId input[name='deposit']").val();
if (deposit == '' || !reg.test(deposit)) {
layer.msg("押金不合法!", {icon: 5});
return false;
}
if (dataArr.length < 1) {
layer.msg("商品图片不能为空!", {icon: 5});
return false;
}
if (dataArr.length > 9) {
layer.msg("商品图片不能超过9张!", {icon: 5});
return false;
}
var content = UE.getEditor('editor').getContent();
if (content == '') {
layer.msg("商品详情不能为空!", {icon: 5});
return false;
}
formdata.append("goodsDetail", content);
formdata.append("isLease", 1);
var goodsImgArr = [dataArr.length];
for (var i = 0; i < dataArr.length; i++) {
goodsImgArr[i] = dataArr[i].base64;
}
formdata.append("goodsImgArr", goodsImgArr);
formdata.append("goodsId", goodsId);
$.ajax({
url: "updateGoods",
data: formdata,
type: "POST",
dataType: "json",
processData: false,
contentType: false,
success: function (result) {
if (result.code == 100) {
layer.msg(result.msg, {icon: 6, time: 1000}, function () {
closeLayer();
parent.layui.table.reload('tableId');
});
} else {
layer.msg(result.msg, {icon: 5});
}
}
});
}
layui.use('form', function () {
var form = layui.form;
form.on('select(goodsClassPid)', function (data) {
var goodsClassId = data.elem.value;
getGoodsClassByPid(goodsClassId)
});
});
function getGoodsClassByPid(goodsClassId) {
$("#goodsClassId").find("option").remove();
$.ajax({
url: 'getGoodsClassByPid',
data: {"id": goodsClassId},
dataType: 'json',
type: 'POST',
success: function (data) {
$.each(data, function (index, item) {
$('#goodsClassId').append(new Option(item.goodsClassName, item.goodsClassId));// 下拉菜单里添加元素
});
layui.form.render("select");
}
})
}
function getDictionary() {
$.ajax({
url: 'getDictionary',
data: {"type": 'service,delivery'},
dataType: 'json',
type: 'POST',
success: function (data) {
var service = "";
var delivery = "";
$.each(data, function (index, item) {
console.log(item.name);
if (item.type == "service") {
service += "<input type='checkbox' class='service" + item.id + "' name='serviceId' title= " + item.name + " value = " + item.id + " >";
} else {
delivery += "<input type='checkbox' name='deliveryId' class='delivery" + item.id + "' title= " + item.name + " value = " + item.id + " >";
}
});
$("#service").html(
service
)
$("#delivery").html(
delivery
)
}
})
}
function showImg(goodsImgs) {
var arr = goodsImgs.split(",");
for (var i = 0; i < arr.length; i++) {
var imgMsg = {
name: randomString(5), //获取文件名
base64: arr[i], //reader.readAsDataURL方法执行完后，base64数据储存在reader.result里
}
dataArr.push(imgMsg);
currentReViewImgIndex = i;
var showui = document.getElementById("showui");
result = '<div class="showdiv"><img class="left" src="/js/upload_img/img/Arrow_left.svg" /><img class="center" src="/js/upload_img/img/delete.svg" /><img class="right" src="/js/upload_img/img/Arrow_right.svg" /></div><img id="img' + currentReViewImgIndex + randomString(1) + randomString(2) + randomString(5) + '" class="showimg" src="' + arr[i] + '" />';
var li = document.createElement('li');
li.innerHTML = result;
showui.appendChild(li);
}
}
function uploadImg() {
$("#upgteimg").click();
}
layui.use('form', function () {
var form = layui.form;
form.render();
});
function closeLayer() {
var index = parent.layer.getFrameIndex(window.name);
//关闭当前frame
parent.layer.close(index);
}
function chioceImage(i) {
$('#file' + i).trigger("click");
}
</script>
</body>
</html>