商品管理的页面和商品分类管理的页面很类似
要有一个转发路由
//进行店铺管理显示的转发
@RequestMapping("/productmanagement")
public String productmanagement(){
//返回显示店铺注册的页面
return "shop/productmanagement";
}
productmanagement.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>商店管理</title>
<meta name="viewport" content="initial-scale=1, maximum-scale=1">
<link rel="shortcut icon" href="/favicon.ico">
<meta name="apple-mobile-web-app-capable" content="yes">
<meta name="apple-mobile-web-app-status-bar-style" content="black">
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm.min.css">
<link rel="stylesheet" href="//g.alicdn.com/msui/sm/0.6.2/css/sm-extend.min.css">
<link rel="stylesheet" href="../resources/css/shop/productmanagement.css">
</head>
<body>
<header class="bar bar-nav">
<h1 class="title">商品管理</h1>
</header>
<div class="content">
<div class="content-block">
<div class="row row-product">
<div class="col-33">商品名称</div>
<div class="col-20">优先级</div>
<div class="col-40">操作</div>
</div>
<div class="product-wrap">
<!--<div class="row row-product">
<div class="col-33">item.productName</div>
<div class="col-20">item.priority</div>
<div class="col-40">
<a href="#" class="edit" data-id="item.productId" data-status="item.status">编辑</a>
<a href="#" class="status" data-id="item.productId" data-status="contraryStatus">testOp</a>
<a href="#" class="preview" data-id="item.productId" data-status="item.status">预览</a>
</div>-->
</div>
</div>
</div>
<div class="content-block">
<div class="row">
<div class="col-50">
<a href="/shopadmin/shopmanagement"
class="button button-big button-fill button-success" id="submit">返回</a>
</div>
<div class="col-50">
<a href="/shopadmin/productoperation"
class="button button-big button-fill button-danger" id="new">新增</a>
</div>
</div>
</div>
</div>
<script type='text/javascript' src='//g.alicdn.com/sj/lib/zepto/zepto.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm.min.js' charset='utf-8'></script>
<script type='text/javascript' src='//g.alicdn.com/msui/sm/0.6.2/js/sm-extend.min.js' charset='utf-8'></script>
<script type='text/javascript' src='../resources/js/shop/productmanagement.js' charset="utf-8"></script>
</body>
</html>
productmanegement.css
.row-product {
border: 1px solid #999;
padding: .5rem;
border-bottom: none;
}
.row-product* {
white-space: nowrap;
overflow: scroll;
}
.row-product:last-child {
border-bottom: 1px solid #999;
}
.product-name {
white-space: nowrap;
overflow-x: scroll;
}
.product-wrap a {
margin-right: 1rem;
}
productmanagement.js
$(function(){
//获取店铺下的商品列表
var listUrl = '/shopadmin/getproductlistbyshop?pageIndex=1&&pageSize=100';
//商品下架
var statusUrl = '/shopadmin/modifyproduct';
getProductList();
//获取店铺下的商品列表
function getProductList() {
$.getJSON(listUrl, function (data) {
if (data.success) {
var productList = data.productList;
var tempHtml='';
//遍历每一条商品信息，拼接成一行显示
//每一列包括：商品名称、优先级、下架（包含productId）、编辑（包含productId）、预览（包含productId）
productList.map(function(item, index){
//先将每个商品的状态标识符标为下架，如果实际为下架情况，则改为上架，这样就可以在页面中改为相应的状态
var textOp = '下架';
//与当前状态相反
var contraryStatus = 0;
//若状态为0，表示实际商品为下架状态，可以在页面中操作为上架状态
if(item.status == 0){
var textOp = '上架';
var contraryStatus = 1;
} else{
var contraryStatus = 0;
}
//拼接每件商品的行信息
tempHtml += ''
+ '<div class="row row-product">'
+ '<div class="col-33">'
+ item.productName
+ '</div>'
+ '<div class="col-20">'
+ item.priority
+ '</div>'
+ '<div class="col-40">'
+ '<a href="#" class="edit" data-id="'
+ item.productId
+ '" data-status="'
+ item.status
+ '">编辑</a>'
+ '<a href="#" class="status" data-id="'
+ item.productId
+ '" data-status="'
+ contraryStatus
+ '">'
+ textOp
+ '</a>'
+ '<a href="#" class="preview" data-id="'
+ item.productId
+ '" data-status="'
+ item.status
+ '">预览</a>'
+ '</div>'
+ '</div>';
});
//将拼接好的信息赋值到html中
$('.product-wrap').html(tempHtml);
}
});
}
//将class为product-wrap里面a标签的href绑定点击事件
$('.product-wrap').on('click', 'a', function(e){
var target = $(e.currentTarget);
if(target.hasClass('edit')){
//如果有class edit事件，就进入商品编辑页面，并加上productId
window.location.href = '/shopadmin/productoperation?productId=' + e.currentTarget.dataset.id;
} else if(target.hasClass('status')){
//如果有class status事件，则调用后台上架/下架相关商品，带上productId
changeItemStatus(e.currentTarget.dataset.id, e.currentTarget.dataset.status);
} else if(target.hasClass('preview')){
//如果有class preview，则去前台展示系统，将该商品的详情展示在前台
window.location.href = '#' + e.currentTarget.dataset.id;
}
});
function changeItemStatus(id, status){
//定义product的json对象，并添加productId和status
var product={};
product.productId=id;
product.status=status;
$.confirm('确定吗？', function(){
//上/下架相关商品
$.ajax({
url:statusUrl,
type:'POST',
data:{
productStr : JSON.stringify(product),
statusChange : true
},
dataType:'json',
success:function(data){
if(data.success){
$.toast('操作成功！');
getProductList();
} else{
$.toast('提交失败！' + data.errMsg);
}
}
});
})
}
});