WebContent/WEB-INF/jsp/pc/goods/goodsEdit.jsp

<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="UTF-8"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>

	<head>
		<meta charset="UTF-8">
		<meta name="viewport" content="width=device-width, initial-scale=1.0">
		<meta http-equiv="X-UA-Compatible" content="ie=edge">
		<title>商品编辑</title>
		<link rel="stylesheet" href="/zzhnc/res/plugins/layui/css/layui.css">
		<link rel="stylesheet" href="/zzhnc/res/css/basic.css">

		<body class="wrap">
			<form class="layui-form">
				<div class="layui-form-item">
					<label class="layui-form-label"><i class="redrequired">*</i>商品名称</label>
					<div class="layui-input-inline" style="width: 400px;">
						<input type="text" name="name" lay-verify="required" placeholder="商品名称" class="layui-input">
					</div>
					<div class="layui-form-mid layui-word-aux">不超过20个汉字</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><i class="redrequired">*</i>上传主图</label>
					<div class="layui-input-inline" style="width: 400px;">
						<div class="layui-upload">
							<button type="button" class="layui-btn" id="uploadImg">上传主图</button>
							<span class="layui-form-mid layui-word-aux">建议尺寸：200*200，用于首页和列表页面显示</span>
							<div class="layui-upload-list">
								<img class="layui-upload-img imgPic" src="">
								<input type="text" style="display:none;" name="imageUrl" lay-verify="required">
							</div>
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><i class="redrequired">*</i>上传详情图</label>
					<div class="layui-input-inline" style="width: 400px;">
						<div class="layui-upload">
							<button type="button" class="layui-btn" id="uploadBanner">上传详情图</button>
							<span class="layui-form-mid layui-word-aux">建议尺寸：750*440，用于商品详情页显示</span>
							<div class="layui-upload-list">
								<img class="layui-upload-img bannerPic" src="">
								<input type="text" style="display:none;" name="bannerUrl" lay-verify="required">
							</div>
						</div>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><i class="redrequired">*</i>商品类别</label>
					<div class="layui-input-inline" style="width: 140px;">
						<select name="categoryName" lay-verify="required">
							<option value="">请选择</option>
							<option value="小商品">小商品</option>
							<option value="服装">服装</option>
							<option value="副食">副食</option>
							<option value="汽摩配件">汽摩配件</option>
						</select>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><i class="redrequired">*</i>商品原价</label>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="number" lay-verify="required" name="primePrice" placeholder="商品原价" class="layui-input">
					</div>
					<div class="layui-form-mid">元</div>
					<label class="layui-form-label"><i class="redrequired">*</i>商品现价</label>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="number" lay-verify="required" name="price" placeholder="商品现价" class="layui-input">
					</div>
					<div class="layui-form-mid">元</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">是否首页显示</label>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="checkbox" checked name="isHome" lay-skin="switch" lay-text="是|否">
					</div>
					<label class="layui-form-label">是否爆款</label>
					<div class="layui-input-inline" style="width: 100px;">
						<input type="checkbox" checked name="isHot" lay-skin="switch" lay-text="是|否">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><i class="redrequired">*</i>商家名称</label>
					<div class="layui-input-inline" style="width: 400px;">
						<input type="text" lay-verify="required" name="sellerName" placeholder="商家名称" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"><i class="redrequired">*</i>商家店铺号</label>
					<div class="layui-input-inline" style="width: 400px;">
						<input type="text" lay-verify="required" name="sellerAddress" placeholder="商家店铺号" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">商家电话</label>
					<div class="layui-input-inline" style="width: 400px;">
						<input type="text" name="sellerPhone" placeholder="商家电话" class="layui-input">
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label">商品详情</label>
					<div class="layui-input-block" style="margin-left: 130px;">
						<textarea name="description" placeholder="商品详情" class="layui-textarea"></textarea>
					</div>
				</div>
				<div class="layui-form-item">
					<label class="layui-form-label"></label>
					<div class="layui-input-block">
						<button class="layui-btn" lay-submit lay-filter="submit">提交</button>
						<button class="layui-btn layui-btn-primary resetBtn">重置</button>
					</div>
				</div>
			</form>
		</body>
		<script src='/zzhnc/res/js/jquery.min.js'></script>
		<script src="/zzhnc/res/plugins/layui/layui.js" charset="utf-8"></script>
		<script type="text/javascript" src="/zzhnc/res/js/me.js"></script>
		<script>
			layui.use(['form', 'element', 'layer', 'upload'], function() {
				var form = layui.form,
					element = layui.element,
					layer = layui.layer,
					upload = layui.upload;

				var goodsid = getUrl_G("id");

				function initData() {
					$.get("/zzhnc/goods/search", {
						id: goodsid
					}, function(data) {
						console.log(data)
						if(data.code == 0) {
							if(data.data.rows.length > 0) {
								var data = data.data.rows[0];
								$("[name=name]").val(data.name);
								$("[name=description]").val(data.description);
								$(".imgPic").attr("src", data.imageUrl).css("margin", "15px 0");
								$("[name=imageUrl]").val(data.imageUrl);
								$(".bannerPic").attr("src", data.bannerUrl).css("margin", "15px 0");
								$("[name=bannerUrl]").val(data.bannerUrl);
								$("[name=categoryName]").val(data.categoryName);
								$("[name=primePrice]").val(data.primePrice);
								$("[name=price]").val(data.price);
								if(data.isHome) {
									$("[name=isHome]").checked = true;
								} else {
									$("[name=isHome]").checked = false;
								}
								if(data.isHot) {
									$("[name=isHot]").checked = true;
								} else {
									$("[name=isHot]").checked = false;
								}
								$("[name=sellerName]").val(data.sellerName);
								$("[name=sellerAddress]").val(data.sellerAddress);
								$("[name=sellerPhone]").val(data.sellerPhone);
								form.render();
							}
						} else {
							layer.msg("获取信息失败");
						}

					})
				}

				//初始化数据
				if(goodsid > 0) {
					initData();
				}

				//上传操作
				upload.render({
					elem: '#uploadImg',
					url: '/zzhnc/upload/UploadImg',
					done: function(data) {
						console.log(data)
						if(data.code == 0) {
							layer.msg("上传成功");
							$("[name=imageUrl]").val(data.data.imgurl);
							$(".imgPic").attr("src", data.data.imgurl).css("margin", "15px 0");
						} else {
							layer.msg('上传失败');
						}
					}
				});
				
				upload.render({
					elem: '#uploadBanner',
					url: '/zzhnc/upload/UploadImg',
					done: function(data) {
						console.log(data)
						if(data.code == 0) {
							layer.msg("上传成功");
							$("[name=bannerUrl]").val(data.data.imgurl);
							$(".bannerPic").attr("src", data.data.imgurl).css("margin", "15px 0");
						} else {
							layer.msg('上传失败');
						}
					}
				});

				//提交
				form.on("submit(submit)", function(data) {
					var isHome, isHot = false;
					if(data.field.isHome == "on") {
						isHome = true
					}
					if(data.field.isHot == "on") {
						isHot = true
					}
					var submitData = {
						id: parseInt(goodsid, 10),
						name: data.field.name,
						description: data.field.description,
						imageUrl: $("[name=imageUrl]").val(),
						bannerUrl: $("[name=bannerUrl]").val(),
						categoryName: $("[name=categoryName]").val(),
						isHome: isHome,
						isHot: isHot,
						primePrice: data.field.primePrice,
						price: data.field.price,
						sellerId: 0,
						sellerName: data.field.sellerName,
						sellerAddress: data.field.sellerAddress,
						sellerPhone: data.field.sellerPhone
					};
					$.ajax({
						type: 'POST',
						url: '/zzhnc/goods/update',
						dataType: 'json',
						async: true,
						contentType: "application/json;charset=UTF-8",
						data: JSON.stringify(submitData),
						success: function(data) {
							layer.msg('操作成功');
						},
						error: function(xhr, type) {
							layer.msg('操作失败');
						}
					});
					return false;
				})
				
				//重置
				$(".resetBtn").on("click", function() {
					$("[name=name]").val("");
					$("[name=description]").val("");
					$("[name=imgUrl]").val("");
					$(".imgPic").attr("src", "").css("margin", "0");
					$("[name=bannerUrl]").val("");
					$(".bannerPic").attr("src", "").css("margin", "0");
					$("[name=categoryName]").val("");
					$("[name=isHome]").val("on");
					$("[name=isHot]").val("on");
					$("[name=primePrice]").val("");
					$("[name=price]").val("");
					$("[name=sellerName]").val("");
					$("[name=sellerAddress]").val("");
					$("[name=sellerPhone]").val("");
					form.render();
				})
				
				

			})
		</script>

</html>