productEdit.html 14.1 KB

Raw Blame History Permalink

<!DOCTYPE html>
<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"/>
        <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"/> -->
</div>
<script>
	/* 新增，修改公用页面
	    editImage代表图片是否修改过，新增固定传1。修改的时候根据是否修改，修改传1，无修改传0
	    1.新增，所有参数之前为空值,
	                   提交地址：product/addOrUpdate
	                   提交参数：{"brandId":78,"colorId":1,"colorName":"红色","editImage":1,"gender":3,"goodsName":"自定义红色","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":"球鞋,adidas","maxPrice":"899","maxSortId":10,"midSortId":18,"minPrice":"599","productCode":"009-009-009","productName":"测试商品009","saleTime":"2018-11-11","seriesId":8,"sizeIdList":[28,29]}
	    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) {

	    		$("#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 {
                    	$('#editMidSortId').combobox('clear');
                    	$('#editMidSortId').combobox('reload', contextPath + "/productSort/getLevel2SortBySortId?sortId=" + rec.id);
                    	$('#editMidSortId').combobox('enable');

                    } catch (e) { }
                }
            });

			$("#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>
</body>
</html>