|
|
<!DOCTYPE html>
|
|
|
<div id="tt" class="easyui-layout" fit="true" style="overflow-y: scroll">
|
|
|
|
|
|
<input id="editBrandId" type="text">
|
|
|
<input id="editSeriesId" type="text">
|
|
|
<input id="editProductName" type="text"/>
|
|
|
<input id="editSaleTime" type="text"/>
|
|
|
<input id="editGender" type="text"/>
|
|
|
<input id="editMaxSortId" type="text"/>
|
|
|
<input id="editMidSortId" type="text"/>
|
|
|
<input id="editProductCode" type="text"/>
|
|
|
<input id="editMinPrice" type="text"/>
|
|
|
<input id="editMaxPrice" type="text"/>
|
|
|
<html>
|
|
|
<head>
|
|
|
<meta charset="UTF-8"/>
|
|
|
<title>Yoho!Buy运营平台</title>
|
|
|
<script src="/ufoPlatform/js/include.js"></script>
|
|
|
<script src="/ufoPlatform/js/ajaxfileupload.js"></script>
|
|
|
<style>
|
|
|
.product-detail-page ul, .product-detail-page li {
|
|
|
list-style: none;
|
|
|
padding: 0;
|
|
|
margin: 0;
|
|
|
}
|
|
|
|
|
|
.product-detail-page .container > li {
|
|
|
border-bottom: 1px solid #eee;
|
|
|
}
|
|
|
|
|
|
.product-detail-page .container {
|
|
|
padding: 0 30px;
|
|
|
}
|
|
|
|
|
|
.product-detail-page .base-info {
|
|
|
border-bottom: 1px solid #eee;
|
|
|
}
|
|
|
.product-detail-page .base-info li {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
.product-detail-page .base-info .label {
|
|
|
width: 120px;
|
|
|
font-size: 14px;
|
|
|
text-align: right;
|
|
|
}
|
|
|
|
|
|
.product-detail-page .base-info .red {
|
|
|
color: red;
|
|
|
}
|
|
|
|
|
|
.product-detail-page .group-color, .product-detail-page .group-size {
|
|
|
display: flex;
|
|
|
align-items: center;
|
|
|
margin-bottom: 10px;
|
|
|
}
|
|
|
|
|
|
.product-detail-page .group-color li {
|
|
|
margin-right: 5px;
|
|
|
float: left;
|
|
|
line-height: 30px;
|
|
|
margin-left: 5px;
|
|
|
padding: 0 5px;
|
|
|
}
|
|
|
|
|
|
.product-detail-page .group-color .actived {
|
|
|
background: #8fa9bb;
|
|
|
color: #fff;
|
|
|
border-radius: 5px;
|
|
|
}
|
|
|
|
|
|
.product-detail-page .group-size .size {
|
|
|
float:left;
|
|
|
margin-left: 10px;
|
|
|
}
|
|
|
</style>
|
|
|
</head>
|
|
|
<body class="easyui-layout product-detail-page" fit="true">
|
|
|
<div region="north">
|
|
|
<script>
|
|
|
document.write(addHead('商品管理 /基础商品 /商品创建', ''));
|
|
|
</script>
|
|
|
</div>
|
|
|
<div region="center" style="overflow-y: scroll; top: 65px; padding-top: 10px;">
|
|
|
<ul class="container">
|
|
|
<li>
|
|
|
<h2>基本信息</h2>
|
|
|
<ul class="base-info">
|
|
|
<li>
|
|
|
<div class="label">品牌 <span class="red">*</span>:</div>
|
|
|
<div class="base-info-item"><input id="editBrandId" type="text"> 系列:<input id="editSeriesId" type="text"></div>
|
|
|
</li>
|
|
|
<li>
|
|
|
<div class="label">商品名称 <span class="red">*</span>:</div>
|
|
|
<div class="base-info-item"><input id="editProductName" type="text"/></div>
|
|
|
</li>
|
|
|
<li>
|
|
|
<div class="label">发售日期 <span class="red">*</span>:</div>
|
|
|
<div class="base-info-item"><input id="editSaleTime" type="text"/></div>
|
|
|
</li>
|
|
|
<li>
|
|
|
<div class="label">性别 <span class="red">*</span>:</div>
|
|
|
<div class="base-info-item">
|
|
|
<label for="boy"><input id="boy" type="radio" value="1" name="sex" checked>男</label>
|
|
|
<label for="girl"><input id="girl" type="radio" value="2" name="sex">女</label>
|
|
|
<label for="all"><input id="all" type="radio" value="3" name="sex">通用</label>
|
|
|
</div>
|
|
|
</li>
|
|
|
<li>
|
|
|
<div class="label">分类 <span class="red">*</span>:</div>
|
|
|
<div class="base-info-item"><input id="editMaxSortId" type="text"/><input id="editMidSortId" type="text"/> 货号 <span class="red">*</span>:<input id="editProductCode" type="text"/></div>
|
|
|
</li>
|
|
|
<li>
|
|
|
<div class="label">商品价格限制 <span class="red">*</span>:</div>
|
|
|
<div class="base-info-item"><input id="editMinPrice" type="text"/><span style="margin-right: 20px;c">~</span><input id="editMaxPrice" type="text"/></div>
|
|
|
</li>
|
|
|
</ul>
|
|
|
</li>
|
|
|
|
|
|
<li>
|
|
|
<h2>颜色尺码</h2>
|
|
|
<div class="group-color">
|
|
|
<div class="label">*颜色</div>
|
|
|
<ul style="float:left; margin-left: 10px;">
|
|
|
</ul>
|
|
|
</div>
|
|
|
<div class="group-size">
|
|
|
<div class="label">*尺寸</div>
|
|
|
<div class="size"></div>
|
|
|
</div>
|
|
|
|
|
|
<table id="colorSizeTable"></table>
|
|
|
</li>
|
|
|
</ul>
|
|
|
|
|
|
|
|
|
|
|
|
|
|
|
<!-- <input id="editGender" type="text"/>
|
|
|
|
|
|
|
|
|
|
|
|
<input id="editColorId" type="text"/>
|
|
|
<input id="editColorName" type="text"/>
|
|
|
<input id="editGoodsName" type="text"/>
|
...
|
...
|
@@ -18,7 +137,7 @@ |
|
|
<input id="editImageUrlList" type="text"/>
|
|
|
<input id="editKeyWords" type="text"/>
|
|
|
<input id="editGoodsId" type="hidden"/>
|
|
|
<input id="editId" type="hidden"/>
|
|
|
<input id="editId" type="hidden"/> -->
|
|
|
</div>
|
|
|
<script>
|
|
|
/* 新增,修改公用页面
|
...
|
...
|
@@ -30,114 +149,277 @@ |
|
|
提交参数:{"brandId":78,"colorId":2,"colorName":"蓝色","editImage":1,"gender":3,"goodsId":6,"goodsName":"自定义蓝色","id":10000004,"imageUrlList":["https://img10.static.yhbimg.com/goodsimg/2018/08/25/16/01e99496407347514356e5fe327d1f661d.jpg","https://img12.static.yhbimg.com/goodsimg/2018/08/25/16/0292fcebd071444401e6de340bcf2d8c19.jpg"],"keyWords":"球鞋,adidas2","maxPrice":"898","maxSortId":10,"midSortId":18,"minPrice":"598","productCode":"009-009-009-e","productName":"测试商品009-e","saleTime":"2018-11-12","seriesId":8}
|
|
|
不可修改:品牌、分类、颜色、尺码、SKU(颜色展示名称除外:goodsName)
|
|
|
*/
|
|
|
|
|
|
var productDetail = {
|
|
|
initData: function(detail) {
|
|
|
|
|
|
$(function () {
|
|
|
$("#editBrandId").myCombobox({
|
|
|
url: contextPath + '/brand/getBrandName',
|
|
|
method: "get",
|
|
|
editable: false,
|
|
|
prompt: "选择品牌",
|
|
|
width: 200,
|
|
|
valueField: "id",
|
|
|
textField: "text",
|
|
|
loadFilter: function (data) {
|
|
|
return defaultLoadFilter(data);
|
|
|
}
|
|
|
});
|
|
|
$("#editSeriesId").myCombobox({
|
|
|
url: contextPath + '/brandSeries/querySeriesByBrandId?brandId=',
|
|
|
method: "get",
|
|
|
editable: false,
|
|
|
prompt: "选择品牌",
|
|
|
width: 200,
|
|
|
valueField: "id",
|
|
|
textField: "text",
|
|
|
loadFilter: function (data) {
|
|
|
return defaultLoadFilter(data);
|
|
|
}
|
|
|
});
|
|
|
$("#editProductName").textbox({
|
|
|
required: true,
|
|
|
missingMessage: "商品名称不能为空",
|
|
|
prompt: "商品名称"
|
|
|
//width: 240
|
|
|
});
|
|
|
$("#editSaleTime").myDatebox({
|
|
|
prompt : "发售时间"
|
|
|
});
|
|
|
$("#editGender").textbox({
|
|
|
prompt : "性别"
|
|
|
});
|
|
|
$('#editMaxSortId').myCombobox({
|
|
|
url: contextPath + "/productSort/getLevel1SortIdAndName",
|
|
|
method: "get",
|
|
|
editable: false,
|
|
|
valueField: 'id',
|
|
|
textField: 'text',
|
|
|
prompt:"一级分类",
|
|
|
loadFilter: function (data) {
|
|
|
return defaultLoadFilter(data);
|
|
|
},
|
|
|
onSelect: function (rec) {
|
|
|
if (0 === rec.id) {
|
|
|
$("#editSeriesId").myCombobox({
|
|
|
url: contextPath + '/brandSeries/querySeriesByBrandId?brandId=' + detail.brandId,
|
|
|
method: "get",
|
|
|
editable: false,
|
|
|
prompt: "请选择",
|
|
|
width: 200,
|
|
|
valueField: "id",
|
|
|
textField: "text",
|
|
|
loadFilter: function (data) {
|
|
|
return defaultLoadFilter(data);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
$("#editBrandId").combobox('select', detail.brandId)
|
|
|
$("#editProductName").textbox('setValue', detail.productName);
|
|
|
$("#editSaleTime").myDatebox('setValue', detail.saleTime);
|
|
|
$('input[name=sex]').eq(detail.gender - 1).attr('checked','true');
|
|
|
$('#editMinPrice').textbox('setValue', detail.minPrice);
|
|
|
$('#editMaxPrice').textbox('setValue', detail.maxPrice);
|
|
|
$('#editProductCode').textbox('setValue', detail.productCode);
|
|
|
$("#editMaxSortId").combobox('select', detail.maxSortId);
|
|
|
$("#editMidSortId").combobox('select', detail.midSortId);
|
|
|
$("#editSeriesId").combobox('select', detail.seriesId)
|
|
|
|
|
|
this.getSizeInfo(detail.midSortId);
|
|
|
},
|
|
|
initForm: function() {
|
|
|
$("#editProductName").textbox({
|
|
|
required: true,
|
|
|
missingMessage: "商品名称不能为空",
|
|
|
prompt: "商品名称",
|
|
|
width: 460
|
|
|
});
|
|
|
|
|
|
$("#editBrandId").combobox({
|
|
|
editable: false,
|
|
|
prompt: "选择品牌",
|
|
|
width: 200,
|
|
|
valueField: "id",
|
|
|
textField: "text"
|
|
|
});
|
|
|
|
|
|
$('#editMaxSortId').myCombobox({
|
|
|
editable: false,
|
|
|
valueField: 'id',
|
|
|
textField: 'text',
|
|
|
prompt:"一级分类",
|
|
|
onSelect: function (rec) {
|
|
|
if (0 === rec.id) {
|
|
|
try {
|
|
|
$('#midSortId').combobox('disable');
|
|
|
} catch (e) { }
|
|
|
return;
|
|
|
}
|
|
|
try {
|
|
|
$('#midSortId').combobox('disable');
|
|
|
$('#editMidSortId').combobox('clear');
|
|
|
$('#editMidSortId').combobox('reload', contextPath + "/productSort/getLevel2SortBySortId?sortId=" + rec.id);
|
|
|
$('#editMidSortId').combobox('enable');
|
|
|
|
|
|
} catch (e) { }
|
|
|
return;
|
|
|
}
|
|
|
try {
|
|
|
$('#editMidSortId').combobox('clear');
|
|
|
$('#editMidSortId').combobox('reload', contextPath + "/productSort/getLevel2SortBySortId?sortId=" + rec.id);
|
|
|
$('#editMidSortId').combobox('enable');
|
|
|
} catch (e) { }
|
|
|
}
|
|
|
});
|
|
|
$('#editMidSortId').myCombobox({
|
|
|
method: "get",
|
|
|
editable: false,
|
|
|
valueField: 'id',
|
|
|
textField: 'text',
|
|
|
multiple: true,
|
|
|
prompt:"二级分类",
|
|
|
loadFilter: function (data) {
|
|
|
data = defaultLoadFilter(data);
|
|
|
/* for (var i = 0; i < data.length; i ++) {
|
|
|
$('#editMidSortId').combobox('select', data[i].id);
|
|
|
} */
|
|
|
return data;
|
|
|
}
|
|
|
});
|
|
|
$("#editProductCode").textbox({
|
|
|
prompt : "请输入"
|
|
|
});
|
|
|
$("#editMinPrice").textbox({
|
|
|
prompt : "最低价"
|
|
|
});
|
|
|
$("#editMaxPrice").textbox({
|
|
|
prompt : "最高价"
|
|
|
});
|
|
|
//<input id="editColorId" type="text"/>
|
|
|
//<input id="editSizeIdList" type="text"/>
|
|
|
//<input id="editImageUrlList" type="text"/>
|
|
|
//<input id="editKeyWords" type="text"/>
|
|
|
$("#editKeyWords").textbox({
|
|
|
prompt : "请输入"
|
|
|
});
|
|
|
//<input id="goodsId" type="hidden"/>
|
|
|
|
|
|
// 编辑的情况需要根据id查询商品信息
|
|
|
$.ajax({
|
|
|
contentType: "application/json",
|
|
|
dataType: "json",
|
|
|
type: "GET",
|
|
|
url: contextPath + '/product/find?id=10000004',
|
|
|
success: function (data) {
|
|
|
if (data.code != 200) {
|
|
|
return;
|
|
|
}
|
|
|
// 设置页面上面所有属性值和hidden属性
|
|
|
}
|
|
|
});
|
|
|
});
|
|
|
|
|
|
$("#editSaleTime").myDatebox({
|
|
|
prompt : "发售时间"
|
|
|
});
|
|
|
|
|
|
$('#editMidSortId').myCombobox({
|
|
|
method: 'get',
|
|
|
editable: false,
|
|
|
valueField: 'id',
|
|
|
textField: 'text',
|
|
|
multiple: true,
|
|
|
prompt:"二级分类",
|
|
|
loadFilter: function(data) {
|
|
|
console.log(data)
|
|
|
return defaultLoadFilter(data);
|
|
|
}
|
|
|
});
|
|
|
$("#editProductCode").textbox({
|
|
|
prompt : "请输入"
|
|
|
});
|
|
|
$("#editMinPrice").textbox({
|
|
|
prompt : "最低价"
|
|
|
});
|
|
|
$("#editMaxPrice").textbox({
|
|
|
prompt : "最高价"
|
|
|
});
|
|
|
$("#editKeyWords").textbox({
|
|
|
prompt : "请输入"
|
|
|
});
|
|
|
},
|
|
|
init: function() {
|
|
|
var that = this;
|
|
|
var productId = this.getUrlParam('id');
|
|
|
var ajaxList = [];
|
|
|
var colorSizeSelected = {}
|
|
|
|
|
|
this.initForm();
|
|
|
this.getColorInfo();
|
|
|
|
|
|
$.when(this.getBrandList(), this.getMaxSortList()).then(function(brand, maxSort) {
|
|
|
var brandId = '';
|
|
|
|
|
|
brand = brand[0];
|
|
|
maxSort = maxSort[0];
|
|
|
|
|
|
if (brand && brand.code == 200) {
|
|
|
$("#editBrandId").combobox({
|
|
|
data: brand.data || []
|
|
|
});
|
|
|
}
|
|
|
|
|
|
if (maxSort && maxSort.code == 200) {
|
|
|
$("#editMaxSortId").combobox({
|
|
|
data: maxSort.data || []
|
|
|
});
|
|
|
}
|
|
|
|
|
|
if (productId) {
|
|
|
that.getDetailInfo(productId);
|
|
|
} else {
|
|
|
this.getSizeInfo();
|
|
|
}
|
|
|
});
|
|
|
|
|
|
this.changeColorOrSize();
|
|
|
|
|
|
$(document).on('click', '.group-color li', function() {
|
|
|
$(this).siblings().removeClass('actived');
|
|
|
$(this).addClass('actived');
|
|
|
});
|
|
|
},
|
|
|
changeColorOrSize: function() {
|
|
|
$("#colorSizeTable").myDatagrid({
|
|
|
fit: true,
|
|
|
fitColumns: true,
|
|
|
nowrap: false,
|
|
|
columns: [[{
|
|
|
title: "色系名称",
|
|
|
field: "id",
|
|
|
width: 40,
|
|
|
align: "center"
|
|
|
}, {
|
|
|
title: "颜色展示名称",
|
|
|
field: "colorImage",
|
|
|
width: 80,
|
|
|
align: "center",
|
|
|
formatter: function(value) {
|
|
|
return '<img src="' + value + '" style="width: 48px; height: 48px;vertical-align: middle;">'
|
|
|
}
|
|
|
}, {
|
|
|
title: "尺码",
|
|
|
field: "productName",
|
|
|
width: 100,
|
|
|
align: "center"
|
|
|
}, {
|
|
|
title: "SKU",
|
|
|
field: "sortName",
|
|
|
width: 80,
|
|
|
align: "center"
|
|
|
}]],
|
|
|
cache: false,
|
|
|
pagination: false,
|
|
|
idField: "id",
|
|
|
singleSelect: false,
|
|
|
checkOnSelect: false,
|
|
|
onLoadSuccess: function () {
|
|
|
// 编辑
|
|
|
$(this).myDatagrid("getPanel").find("a[role='edit']").linkbutton({
|
|
|
iconCls: "icon-edit",
|
|
|
onClick: function () {
|
|
|
var id = $(this).attr("dataId");
|
|
|
editRow(id);
|
|
|
}
|
|
|
});
|
|
|
// 关闭品牌
|
|
|
$(this).myDatagrid("getPanel").find("a[role='closeBrandSeries']").linkbutton({
|
|
|
iconCls: "icon-more",
|
|
|
onClick: function () {
|
|
|
updateBrandSeriesStatus($(this).attr("dataId"), 2);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
// 开启品牌
|
|
|
$(this).myDatagrid("getPanel").find("a[role='openBrandSeries']").linkbutton({
|
|
|
iconCls: "icon-more",
|
|
|
onClick: function () {
|
|
|
updateBrandSeriesStatus($(this).attr("dataId"), 1);
|
|
|
}
|
|
|
});
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
getUrlParam: function(name) {
|
|
|
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
|
|
|
var r = window.location.search.substr(1).match(reg);
|
|
|
|
|
|
if (r != null) {
|
|
|
return unescape(r[2]);
|
|
|
}
|
|
|
|
|
|
return null;
|
|
|
},
|
|
|
getDetailInfo: function(productId) {
|
|
|
var that = this;
|
|
|
|
|
|
// 编辑的情况需要根据id查询商品信息
|
|
|
$.get(contextPath + '/product/find?id=' + productId).then(function(ret) {
|
|
|
if (ret && ret.code == 200) {
|
|
|
that.initData(ret.data);
|
|
|
}
|
|
|
});
|
|
|
|
|
|
},
|
|
|
getBrandList: function() {
|
|
|
// 获取所有品牌
|
|
|
return $.get(contextPath + '/brand/getBrandName');
|
|
|
},
|
|
|
getMaxSortList: function() {
|
|
|
// 获取一级分类
|
|
|
return $.get(contextPath + "/productSort/getLevel1SortIdAndName");
|
|
|
},
|
|
|
getMinSortList: function() {
|
|
|
// 获取二级分类
|
|
|
return $.get(contextPath + "/productSort/getLevel1SortIdAndName");
|
|
|
},
|
|
|
getSizeInfo: function(sortId) {
|
|
|
// 获取所有尺寸
|
|
|
$.ajax({
|
|
|
contentType: 'application/json',
|
|
|
dataType: 'json',
|
|
|
type : 'GET',
|
|
|
url: contextPath + '/size/queryAllSize4Goods?sortId=' + sortId,
|
|
|
success: function (ret) {
|
|
|
if (ret && ret.code == 200) {
|
|
|
$.each(ret.data || [], function(index, item) {
|
|
|
$('.group-size .size').append('<label for="size" style="margin-right: 5px;"><input type="checkbox" name="size">'+item.text+'</label>');
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
});
|
|
|
},
|
|
|
getColorInfo: function() {
|
|
|
// 获取所有颜色
|
|
|
$.ajax({
|
|
|
contentType: 'application/json',
|
|
|
dataType: 'json',
|
|
|
type : 'GET',
|
|
|
url: contextPath + '/productColor/getAllColor',
|
|
|
success: function (ret) {
|
|
|
if (ret && ret.code == 200) {
|
|
|
$.each(ret.data || [], function(index, item) {
|
|
|
var color = item.colorValue ? 'background: url('+item.colorValue+')' : 'background:#' + item.colorCode;
|
|
|
|
|
|
$('.group-color ul').append('<li data-color="' + color + '"><i style="float: left;width: 30px; height: 30px;border-radius: 50%; margin-right: 3px;' + color + ';background-size: contain;"></i>' + item.colorName + '</li>')
|
|
|
});
|
|
|
}
|
|
|
}
|
|
|
})
|
|
|
}
|
|
|
};
|
|
|
|
|
|
$(function () {
|
|
|
productDetail.init();
|
|
|
});
|
|
|
|
|
|
</script> |
|
|
\ No newline at end of file |
|
|
</script>
|
|
|
</body>
|
|
|
</html> |
|
|
\ No newline at end of file |
...
|
...
|
|