layuiadmin-templete
/
发布商品.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8"/>
    <meta name="keywords" content=""/>
    <meta name="description" content=""/>
    <title>众创数字资产综合运营管理平台</title>
    <link rel="stylesheet" href="layui/css/layui.css"/>
    <link rel="stylesheet" href="css/admin.css"/>
</head>
<body>
    <form class="layui-form">
	    <table class="layui-table layui-table-add" lay-skin="nob">
		  <tbody>
		    <tr>
		      <th width="100"><span class='red'>*</span>商品名称</th>
		      <td><input type="text" name="" placeholder="请输入商品名称,发布后不允许修改" autocomplete="off" class="layui-input"></td>
		    </tr>
		    <tr>
		      <th><span class='red'>*</span>所属分类</th>
		      <td>
		        <div style="width: 30%;"  class='fl'>
		        	<select lay-verify="">
					  <option value="">请选择分类</option>
					  <option value="1">名牌包包</option>
					  <option value="2">名牌手表</option>
					  <option value="3">锦龙春酒业</option>
					  <option value="4">伍基酵素</option>
					  <option value="5">韵客翡翠</option>
					  <option value="6">品牌豪车</option>
					</select>
		        </div>
		         <div class='fl ml10'><div class="layui-btn layui-btn-primary add1">添加分类</div></div>
		      </td>
		    </tr>
		    <tr>
		      <th><span class='red'>*</span>所属品牌</th>
		      <td>
		        <div style="width: 30%;"  class='fl'>
		        	<select lay-verify="">
					  <option value="">请选择品牌</option>
					  <option value="1">浪陀</option>
					  <option value="2">安踏</option>
					  <option value="3">耐克</option>
					</select>
		        </div>
		        <div class='fl ml10'><div class="layui-btn layui-btn-primary add2">添加品牌</div></div>
		      </td>
		    </tr>
		    <tr>
		      <th><span class='red'>*</span>显示市场价</th>
		      <td>
		        <div style="width:30%">
		        	<input type="text" name="" placeholder="￥" autocomplete="off" class="layui-input">
		        </div>
		      </td>
		    </tr>
		    <tr>
		      <th class="pad">库存</th>
		      <td>100件</td>
		    </tr>
		    <tr>
		      <th><span class='red'>*</span>商品类型</th>
		      <td>
		        <div style="width: 30%;">
		        	<select lay-verify="">
					  <option value="">请选择商品类型</option>
					  <option value="1">双主属性(尺码+颜色)</option>
					  <option value="2">单属性(颜色)</option>
					</select>
		        </div>
		      </td>
		    </tr>
		    <tr>
		      <th><span class='red'>*</span>具体商品属性</th>
		      <td>
		        <div class="pro-property">
		        	<div class="layui-btn layui-btn-normal layui-btn-small mb10">添加新属性商品</div>
					<div class="layui-form-item">
					    <div class="layui-inline">
					      <label class="layui-form-label">尺寸</label>
					      <div class="layui-input-inline">
					        <select lay-verify="">
							  <option value="">请选择</option>
							  <option value="1">S码</option>
							  <option value="2">M码</option>
							</select>
					      </div>
					    </div>
					    <div class="layui-inline">
					      <label class="layui-form-label">颜色</label>
					      <div class="layui-input-inline">
					        <select lay-verify="">
							  <option value="">请选择</option>
							  <option value="1">红色</option>
							  <option value="2">白色</option>
							</select>
					      </div>
					    </div>
					    <div class="layui-inline">
					      <label class="layui-form-label">库存</label>
					      <div class="layui-input-inline">
					        <input type="text" lay-verify="title" autocomplete="off" placeholder="请输入库存" class="layui-input">
					      </div>
					    </div>
					    <div class="layui-inline">
					      <label class="layui-form-label">成本价</label>
					      <div class="layui-input-inline">
					        <input type="text" lay-verify="title" autocomplete="off" placeholder="请输入成本价" class="layui-input">
					      </div>
					    </div>
					    <div class="layui-inline">
					      <label class="layui-form-label">销售价</label>
					      <div class="layui-input-inline">
					        <input type="text" lay-verify="title" autocomplete="off" placeholder="请输入成本价" class="layui-input">
					      </div>
					    </div>
					    <div class="layui-inline">
					      <label class="layui-form-label">AGR最大抵扣</label>
					      <div class="layui-input-inline">
					        <input type="text" lay-verify="title" autocomplete="off" placeholder="请输入AGR" class="layui-input">
					      </div>
					      <div class="layui-form-mid layui-word-aux">约<span class="price" style="margin-left: 5px;">10000.00</span></div>
					    </div>
					    <div class="layui-inline">
					      <label class="layui-form-label">备注</label>
					      <div class="layui-input-inline">
					        <input type="text" lay-verify="title" autocomplete="off" placeholder="请输入备注" class="layui-input">
					      </div>
					    </div>
					    <div class="layui-btn layui-btn-danger layui-btn-small del">删除</div>
					</div>
					<div class="layui-form-item">
					    <div class="layui-inline">
					      <label class="layui-form-label">尺寸</label>
					      <div class="layui-input-inline">
					        <select lay-verify="">
							  <option value="">请选择</option>
							  <option value="1">S码</option>
							  <option value="2">M码</option>
							</select>
					      </div>
					    </div>
					    <div class="layui-inline">
					      <label class="layui-form-label">颜色</label>
					      <div class="layui-input-inline">
					        <select lay-verify="">
							  <option value="">请选择</option>
							  <option value="1">红色</option>
							  <option value="2">白色</option>
							</select>
					      </div>
					    </div>
					    <div class="layui-inline">
					      <label class="layui-form-label">库存</label>
					      <div class="layui-input-inline">
					        <input type="text" lay-verify="title" autocomplete="off" placeholder="请输入库存" class="layui-input">
					      </div>
					    </div>
					    <div class="layui-inline">
					      <label class="layui-form-label">成本价</label>
					      <div class="layui-input-inline">
					        <input type="text" lay-verify="title" autocomplete="off" placeholder="请输入库存" class="layui-input">
					      </div>
					    </div>
					    <div class="layui-inline">
					      <label class="layui-form-label">销售价</label>
					      <div class="layui-input-inline">
					        <input type="text" lay-verify="title" autocomplete="off" placeholder="请输入库存" class="layui-input">
					      </div>
					    </div>
					    <div class="layui-inline">
					      <label class="layui-form-label">AGR最大抵扣</label>
					      <div class="layui-input-inline">
					        <input type="text" lay-verify="title" autocomplete="off" placeholder="请输入AGR" class="layui-input">
					      </div>
					      <div class="layui-form-mid layui-word-aux">约<span class="price" style="margin-left: 5px;">10000.00</span></div>
					    </div>
					    <div class="layui-inline">
					      <label class="layui-form-label">备注</label>
					      <div class="layui-input-inline">
					        <input type="text" lay-verify="title" autocomplete="off" placeholder="请输入备注" class="layui-input">
					      </div>
					    </div>
					    <div class="layui-btn layui-btn-danger layui-btn-small">删除</div>
					</div>
				</div>
		      </td>
		    </tr>
		    <tr>
		      <th>商品图片</th>
		      <td>
		          <div style="width:30%">
		        	<input type="file" name="file（可随便定义）" class="layui-upload-file">
		          </div>
		          <ul id="layer-photos-demo" class="layer-photos-demo mt10">
					<li><img  layer-src="img/2.jpg" src="img/2.jpg" ><span><i class="layui-icon">&#xe640;</i></span></li>
					<li><img  layer-src="img/3.jpg" src="img/3.jpg" ><span><i class="layui-icon">&#xe640;</i></span></li>
					<li><img  layer-src="img/4.jpg" src="img/4.jpg" ><span><i class="layui-icon">&#xe640;</i></span></li>
					<li><img  layer-src="img/5.jpg" src="img/5.jpg" ><span><i class="layui-icon">&#xe640;</i></span></li>
				  </ul>
		      </td>
		    </tr>
		    <tr>
		      <th>是否包邮</th>
		      <td>
			      <input type="checkbox" name="switch" lay-skin="switch" lay-text="是|否">
			  </td>
		    </tr>
		    <tr>
		      <th class="pad">描述</th>
		      <td>
			      cms编辑器
			  </td>
		    </tr>
		  </tbody>
		</table>
		<div style="margin-left: 145px; margin-bottom: 15px;">
			<div class="layui-btn" style=" min-width: 150px;">提 交</div>
		</div>
	</form>


	<script type="text/javascript" src="layui/layui.js"></script>
	<script>
		layui.use(['jquery','form','upload','layer'], function(){
			var $ = layui.jquery
				,layer = layui.layer
				,form = layui.form();
			layui.upload({
			  url: '上传接口url'
			  ,success: function(res){
			    console.log(res); //上传成功返回值，必须为json格式
			  }
			});

			layer.photos({
			  photos: '#layer-photos-demo'
			  ,closeBtn: 1
			  ,anim: 0 //0-6的选择，指定弹出图片动画类型，默认随机（请注意，3.0之前的版本用shift参数）
			});


			//添加分类
			$(document).on("click", ".add1", function() {
			    layer.open({
			      type:2
			      ,area:['40%', '40%']
			      ,title:"添加分类"
				  ,content: '添加分类.html'
				});
			});

			//添加品牌
			$(document).on("click", ".add2", function() {
			    layer.open({
			      type:2
			      ,area:['40%', '40%']
			      ,title:"添加品牌"
				  ,content: '添加品牌.html'
				});
			});

			// 删除操作
		    $(document).on("click", ".del", function() {
			    layer.open({
			      title:"删除操作"
				  ,content: '您确认要删除该属性商品吗？'
				  ,btn: ['取消', '确认']
				  ,yes: function(index, layero){
				       layer.closeAll();
				  }
				  ,btn2: function(index, layero){
				      layer.msg('删除成功！',{time: 1000});
				  }
				});
			});
		});
	</script>
</body>
</html>