ufo / ufo-platform · Commits

Go to a project

Authored by 王水玲
Commit 8c9ef0024a21084999141937c4518e33a93a0f88 1 parent 93d9f443

商品创建

Inline Side-by-side
Showing 1 changed file with 475 additions and 171 deletions
... ... @@ -14,35 +14,34 @@
.product-detail-page .container > li {
border-bottom: 1px solid #eee;
padding-bottom: 20px;
}
.product-detail-page .container {
padding: 0 30px;
}
.product-detail-page .base-info {
border-bottom: 1px solid #eee;
}
.product-detail-page .base-info li {
.product-detail-page .base-info li,
.product-detail-page .keyword {
display: flex;
align-items: center;
margin-bottom: 10px;
}
.product-detail-page .base-info .label {
.product-detail-page .label {
width: 120px;
font-size: 14px;
text-align: right;
}
.product-detail-page .base-info .red {
.product-detail-page .red {
color: red;
}
.product-detail-page .group-color, .product-detail-page .group-size {
display: flex;
align-items: center;
margin-bottom: 10px;
margin-bottom: 20px;
}
.product-detail-page .group-color li {
... ... @@ -51,11 +50,18 @@
line-height: 30px;
margin-left: 5px;
padding: 0 5px;
position: relative;
}
.product-detail-page .group-color .actived {
background: #8fa9bb;
color: #fff;
.product-detail-page .group-color .actived:before {
content: '';
width: 100%;
height: 100%;
display: block;
position: absolute;
top: 0;
background: #000;
opacity: 0.5;
border-radius: 5px;
}
... ... @@ -63,6 +69,33 @@
float:left;
margin-left: 10px;
}
.product-detail-page .goods-image {
display: flex;
}
.product-detail-page .goods-image .img {
width: 104px;
height: 104px;
margin-right: 10px;
background-size: cover;
background-repeat: no-repeat;
background-position: center;
position: relative;
}
.product-detail-page .goods-image .img:hover:before {
content: "删除";
width: 100%;
display: block;
position: absolute;
top: 0;
background: #000;
opacity: 0.5;
color: #fff;
text-align: center;
line-height: 104px;
}
</style>
</head>
<body class="easyui-layout product-detail-page" fit="true">
... ... @@ -72,37 +105,52 @@
</script>
</div>
<div region="center" style="overflow-y: scroll; top: 65px; padding-top: 10px;">
<form id="productDetail" method="post">
<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>
<div class="base-info-item">
<input id="editBrandId" type="text" name="brandId"> 系列：<input id="editSeriesId" name="seriesId" type="text">
</div>
</li>
<li>
<div class="label">商品名称 <span class="red">*</span>：</div>
<div class="base-info-item"><input id="editProductName" type="text"/></div>
<div class="base-info-item">
<input id="editProductName" type="text" name="productName"/>
</div>
</li>
<li>
<div class="label">发售日期 <span class="red">*</span>：</div>
<div class="base-info-item"><input id="editSaleTime" type="text"/></div>
<div class="base-info-item">
<input id="editSaleTime" type="text" name="saleTime"/>
</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>
<label for="boy"><input id="boy" type="radio" value="1" name="gender" checked>男</label>
<label for="girl"><input id="girl" type="radio" value="2" name="gender">女</label>
<label for="all"><input id="all" type="radio" value="3" name="gender">通用</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>
<div class="base-info-item">
<input id="editMaxSortId" type="text" name="maxSortId"/>
<input id="editMidSortId" type="text" name="midSortId"/>
货号 <span class="red">*</span>：<input id="editProductCode" type="text" name="productCode"/>
</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>
<div class="base-info-item">
<input id="editMinPrice" type="text" name="minPrice"/>
<span style="margin-right: 20px;c">～</span>
<input id="editMaxPrice" type="text" name="maxPrice"/>
</div>
</li>
</ul>
</li>
... ... @@ -119,25 +167,32 @@
<div class="size"></div>
</div>
<table id="colorSizeTable"></table>
<table id="colorSizeTable" style="width:100%;height:auto"></table>
</li>
<li>
<h2>商品图片</h2>
<div class="goods-image">
<div id="imageUpload"></div>
</div>
</li>
<li>
<h2>商品关键词</h2>
<div class="keyword">
<div class="label" style="width: 120px;">商品关键词：</div>
<div class="keyword-right">
<input type="text" id="keyword" name="keyWords">
</div>
</div>
<div class="red" style="margin-left:120px;">*每个关键词用英文逗号隔开</div>
</li>
<li style="text-align: center; margin-top: 20px;">
<a id="submitBtn" class="easyui-linkbutton btn-success">提交</a>
<a id="cancelBtn" class="easyui-linkbutton btn-default">取消</a>
</li>
</ul>
<!-- <input id="editGender" type="text"/>
<input id="editColorId" type="text"/>
<input id="editColorName" type="text"/>
<input id="editGoodsName" type="text"/>
<input id="editSizeIdList" type="text"/>
<input id="editImageUrlList" type="text"/>
<input id="editKeyWords" type="text"/>
<input id="editGoodsId" type="hidden"/>
<input id="editId" type="hidden"/> -->
</form>
</div>
<script>
/* 新增，修改公用页面
... ... @@ -148,36 +203,32 @@
2.修改：首先根据传进来的id，获取商品信息把页面控件填写好。hidden记录id、goodsId、等参数
提交参数：{"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) {
var that = this;
$("#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);
}
});
$("#editSeriesId").myCombobox('reload', contextPath + '/brandSeries/querySeriesByBrandId?brandId=' + detail.brandId);
$("#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');
$('input[name=gender]').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)
$("#editSeriesId").combobox('select', detail.seriesId);
$('.group-color li[data-id='+detail.colorId+']').addClass('actived');
this.getSizeInfo(detail.midSortId);
if (detail.imageUrlList.length > 0) {
detail.imageUrlList.map(function(item) {
$('#imageUpload').before('<div class="img" data-url="' + item + '" style="background-image:url(' + item + ');">');
});
}
this.getSizeInfo(detail);
},
initForm: function() {
$("#editProductName").textbox({
... ... @@ -186,15 +237,40 @@
prompt: "商品名称",
width: 460
});
$('#keyword').textbox({
width: 700
});
$("#editBrandId").combobox({
editable: false,
prompt: "选择品牌",
width: 200,
valueField: "id",
textField: "text"
textField: "text",
onSelect: function(data) {
$('#editSeriesId').combobox('enable');
$("#editSeriesId").myCombobox('reload', contextPath + '/brandSeries/querySeriesByBrandId?brandId=' + data.id);
$("#editSeriesId").combobox('select')
}
});
$("#editSeriesId").myCombobox({
method: "get",
editable: false,
prompt: "请选择",
width: 200,
valueField: "id",
textField: "text",
loadFilter: function (data) {
if (data && data.code == 200 && data.data.length > 0) {
$("#editSeriesId").combobox('select', data.data[0].id);
}
return defaultLoadFilter(data);
}
});
$('#editMaxSortId').myCombobox({
editable: false,
valueField: 'id',
... ... @@ -203,7 +279,7 @@
onSelect: function (rec) {
if (0 === rec.id) {
try {
$('#midSortId').combobox('disable');
$('#editMidSortId').combobox('disable');
} catch (e) { }
return;
}
... ... @@ -225,40 +301,132 @@
editable: false,
valueField: 'id',
textField: 'text',
multiple: true,
prompt:"二级分类",
loadFilter: function(data) {
console.log(data)
if (data && data.code == 200 && data.data.length > 0) {
$("#editMidSortId").combobox('select', data.data[0].id);
}
return defaultLoadFilter(data);
}
});
$("#editProductCode").textbox({
prompt : "请输入"
prompt : "请输入",
required: true,
missingMessage: "货号不能为空"
});
$("#editMinPrice").textbox({
prompt : "最低价"
prompt : "最低价",
required: true,
missingMessage: "最低价不能为空"
});
$("#editMaxPrice").textbox({
prompt : "最高价"
});
$("#editKeyWords").textbox({
prompt : "请输入"
prompt : "最高价",
required: true,
missingMessage: "最高价不能为空"
});
$('#colorSizeTable').myDatagrid({
fit: false,
fitColumns: true,
autoRowHeight: true,
nowrap: false,
columns: [[{
title: "色系名称",
field: "colorName",
width: 40,
align: "center"
}, {
title: "颜色展示名称",
field: "goodsName",
width: 80,
height: 50,
align: "center",
formatter: function(value) {
return '<input type="text" class="goods-name" value="' + value + '">';
}
}, {
title: "尺码",
field: "size",
width: 100,
align: "center"
}, {
title: "SKU",
field: "sku",
width: 80,
align: "center"
}]],
cache: false,
pagination: false,
idField: "id",
singleSelect: false,
checkOnSelect: false,
onLoadSuccess: function() {
$('.goods-name').textbox({
width: 100
});
}
});
if (!this.productId) {
$('#editSeriesId').combobox('disable');
$('#editMidSortId').combobox('disable');
} else {
$("#editBrandId").combobox('disable');
$("#editMaxSortId").combobox('disable');
$("#editMidSortId").combobox('disable');
}
},
init: function() {
var that = this;
var productId = this.getUrlParam('id');
var ajaxList = [];
var colorSizeSelected = {}
this.productId = this.getUrlParam('id');
this.detailData = {};
this.colorSizeTableData = {
total: 0,
rows: []
};
this.initForm();
this.getColorInfo();
$("#imageUpload").imageUpload({
width: 104,
height: 104,
realInputName: "goodsImage",
url: contextPath + '/fileupload/uploadFile',
queryParams: {
bucket: "goodsimg"
},
onBeforeSubmit: function () {
$.messager.progress({
title: "正在执行",
msg: "正在执行，请稍后...",
interval: 500,
text: ""
});
},
filterFileName: function (data) {
if (!data || data.code != 200) {
$.messager.progress("close");
$.messager.alert("错误", data.message);
return "";
}
return data.data.url;
},
onLoadSuccess: function (data) {
$.messager.progress("close");
$(document).find('.file-close').click();
$('#imageUpload').before('<div class="img" data-url="' + data.data.url + '" style="background-image:url(' + data.data.url + ');">');
return false;
}
});
$.when(this.getBrandList(), this.getMaxSortList()).then(function(brand, maxSort) {
$.when(this.getBrandList(), this.getMaxSortList(), this.getColorInfo()).then(function(brand, maxSort, colors) {
var brandId = '';
brand = brand[0];
maxSort = maxSort[0];
colors = colors[0] || [];
if (brand && brand.code == 200) {
$("#editBrandId").combobox({
... ... @@ -272,81 +440,220 @@
});
}
if (productId) {
that.getDetailInfo(productId);
if (colors && colors.code == 200) {
colors.data.map(function(item) {
var color = item.colorValue ? 'background: url('+item.colorValue+')' : 'background:#' + item.colorCode;
$('.group-color ul').append('<li data-id="' + item.id + '"><i style="float: left;width: 30px; height: 30px;border-radius: 50%; margin-right: 3px;' + color + ';background-size: contain;"></i>' + item.colorName + '</li>');
});
}
if (that.productId) {
that.getDetailInfo();
} else {
this.getSizeInfo();
that.getSizeInfo();
}
});
this.changeColorOrSize();
$(document).on('click', '.group-color li', function() {
$(this).siblings().removeClass('actived');
$(this).addClass('actived');
if (this.productId) {
$.messager.alert("颜色不可修改！", data.message);
return;
}
if (!$(this).hasClass('actived')) {
var colorName = $(this).text();
if (that.colorSizeTableData.rows.length > 0) {
that.colorSizeTableData.rows.map(function(item) {
item.colorName = colorName;
item.goodsName = colorName;
});
} else {
that.colorSizeTableData.rows.push({
colorName: colorName,
goodsName: colorName,
size: '',
sku: '-'
});
}
that.mergeCells();
$(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);
}
});
$(document).on('click', '.group-size input', function() {
var colorName = goodsName = '';
// 开启品牌
$(this).myDatagrid("getPanel").find("a[role='openBrandSeries']").linkbutton({
iconCls: "icon-more",
onClick: function () {
updateBrandSeriesStatus($(this).attr("dataId"), 1);
}
});
if (this.productId) {
$.messager.alert('操作提示', '尺码不可修改！');
return false;
}
if ($('.group-color .actived').length == 0) {
$.messager.alert('操作提示', '请先选择颜色！');
return false;
}
if (that.colorSizeTableData.rows.length > 0) {
colorName = that.colorSizeTableData.rows[0].colorName;
goodsName = that.colorSizeTableData.rows[0].goodsName;
} else {
colorName = goodsName = $('.group-color .actived').text();
}
that.colorSizeTableData.rows = [];
$('.size-item:checked').each(function(index, item) {
that.colorSizeTableData.rows.push({
colorName: colorName,
goodsName: goodsName,
size: $(item).parent().text(),
sku: '-'
});
});
if ($('.size-item:checked').length == 0 && colorName) {
that.colorSizeTableData.rows.push({
colorName: colorName,
goodsName: goodsName,
size: '',
sku: '-'
});
}
that.mergeCells();
});
$(document).on('click', '.goods-image .img', function() {
$(this).remove();
});
$('#cancelBtn').linkbutton({
onClick: function() {
window.location.href = contextPath + "/html/product/productList.html";
}
});
$('#submitBtn').linkbutton({
onClick: function () {
var imageUrlList = [];
var sizeIdList = [];
var editImage = 0;
$('.goods-image .img').each(function(index, item) {
imageUrlList.push($(item).data('url'));
});
if (that.productId) {
if (imageUrlList.length == that.detailData.imageUrlList.length) {
$.each(imageUrlList, function(index, item) {
if (item != that.detailData.imageUrlList[index]) {
editImage = 1;
}
});
} else {
editImage = 1;
}
} else {
editImage = 1;
$('.group-size input:checked').each(function(index, item) {
sizeIdList.push(+$(item).val());
});
}
$('#productDetail').form('submit', {
url: contextPath + '/product/addOrUpdate',
onSubmit: function(params) {
if (!$('#editBrandId').textbox('getValue')) {
$.messager.alert('错误提示', '请选择品牌！');
return false;
}
if (!$("#editSaleTime").myDatebox('getValue')) {
$.messager.alert('错误提示', '请选择发售时间！');
return false;
}
if (!$('#editMaxSortId').combobox('getValue')) {
$.messager.alert('错误提示', '请选择一级分类！');
return false;
}
if (!$('#editMidSortId').combobox('getValue')) {
$.messager.alert('错误提示', '请选择二级分类！');
return false;
}
if (imageUrlList.length == 0) {
$.messager.alert('错误提示', '至少添加一张图片！');
return false;
}
if (!that.productId) {
params.sizeIdList = sizeIdList;
if (sizeIdList.length ==0) {
$.messager.alert('错误提示', '请选择尺码！');
return false;
}
} else {
params.id = that.detailData.id;
params.goodsId = that.detailData.goodsId;
}
params.colorId = +$('.group-color .actived').data('id');
params.colorName = $('.group-color .actived').text();
params.editImage = editImage;
params.imageUrlList = imageUrlList;
params.goodsName = $('.goods-name').textbox('getValue');
if (!$('#productDetail').form("validate")) {
return false;
}
},
success: function() {
}
})
/* var ajaxData = {
brandId: +$('#editBrandId').textbox('getValue'),
colorId: +$('.group-color .actived').data('id'),
colorName: $('.group-color .actived').text(),
editImage: editImage,
gender: +$('input[name="gender"]:checked').val(),
goodsId: that.detailData.goodsId,
goodsName: $('.goods-name').textbox('getValue'),
id: that.detailData.id,
imageUrlList: imageUrlList,
keyWords: $('#keyword').textbox('getValue'),
maxPrice: $('#editMaxPrice').textbox('getValue'),
maxSortId: +$('#editMaxSortId').combobox('getValue'),
midSortId: +$('#editMidSortId').combobox('getValue'),
minPrice: $('#editMinPrice').textbox('getValue'),
productCode: $('#editProductCode').textbox('getValue'),
productName: $('#editProductName').textbox('getValue'),
saleTime: $("#editSaleTime").myDatebox('getValue'),
seriesId: +$('#editSeriesId').combobox('getValue')
};
console.log(ajaxData)
$.post(contextPath + '/product/addOrUpdate', ajaxData, function() {
}); */
}
});
},
mergeCells: function() {
this.colorSizeTableData.total = this.colorSizeTableData.rows.length;
$('#colorSizeTable').datagrid('loadData', this.colorSizeTableData);
$('#colorSizeTable').datagrid('mergeCells', {index: 0, field: 'colorName', rowspan: this.colorSizeTableData.total});
$('#colorSizeTable').datagrid('mergeCells', {index: 0, field: 'goodsName', rowspan: this.colorSizeTableData.total});
},
getUrlParam: function(name) {
var reg = new RegExp("(^|&)" + name + "=([^&]*)(&|$)");
var r = window.location.search.substr(1).match(reg);
... ... @@ -357,13 +664,16 @@
return null;
},
getDetailInfo: function(productId) {
getDetailInfo: function() {
var that = this;
// 编辑的情况需要根据id查询商品信息
$.get(contextPath + '/product/find?id=' + productId).then(function(ret) {
$.get(contextPath + '/product/find?id=' + this.productId).then(function(ret) {
if (ret && ret.code == 200) {
that.initData(ret.data);
ret = ret.data || {};
that.initData(ret);
that.detailData = ret;
}
});
... ... @@ -376,43 +686,37 @@
// 获取一级分类
return $.get(contextPath + "/productSort/getLevel1SortIdAndName");
},
getMinSortList: function() {
// 获取二级分类
return $.get(contextPath + "/productSort/getLevel1SortIdAndName");
},
getSizeInfo: function(sortId) {
getSizeInfo: function(detail) {
detail = detail || {};
var that = this;
var sortId = detail.midSortId || 0;
// 获取所有尺寸
$.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>');
});
}
}
});
$.get(contextPath + '/size/queryAllSize4Goods?sortId=' + sortId, function(ret) {
if (ret && ret.code == 200) {
$.each(ret.data || [], function(index, item) {
$('.group-size .size').append('<label for="size" style="margin-right: 5px;" data-id="' + item.id + '"><input type="checkbox" value="' + item.id + '" class="size-item">'+item.text+'</label>');
});
if (detail.sizeIdList) {
detail.sizeIdList.map(function(item) {
$('.group-size label[data-id=' + item + '] input').attr('checked','true');
that.colorSizeTableData.rows.push({
colorName: $('.group-color li[data-id='+detail.colorId+']').text(),
goodsName: detail.goodsName,
size: $('.group-size label[data-id=' + item + ']').text(),
sku: '-'
});
});
that.mergeCells();
}
}
});
},
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>')
});
}
}
})
return $.get(contextPath + '/productColor/getAllColor');
}
};
... ...