概述
在完成了后端的逻辑后，我们来实现商品列表的View层的实现。
先看下效果
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/productmanage.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-33">优先级</div>
<div class="col-33">操作</div>
</div>
<div class="product-wrap">
<!-- <div class="row row-product">
<div class="col-40">商品名称</div>
<div class="col-60">
<a href="#">编辑</a>
<a href="#">删除</a>
<a href="#">预览</a>
</div>
</div> -->
</div>
</div>
<div class="content-block">
<div class="row">
<div class="col-50">
<a href="/o2o/shopadmin/shopmanagement"
class="button button-big button-fill button-danger">返回</a>
</div>
<div class="col-50">
<a href="#" class="button button-big button-fill button-success" 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/productmanage.js' charset='utf-8'></script>
</body>
</html>
productmanage.css
.row-product {
border: 1px solid #999;
padding: .5rem;
border-bottom: none;
}
.row-product:last-child {
border-bottom: 1px solid #999;
}
.product-name {
white-space: nowrap;
overflow-x: scroll;
}
.product-wrap a {
margin-right: 1rem;
}productmanage.js
$(function() {
var listUrl = '/o2o/shopadmin/getproductlist?pageIndex=1&pageSize=9999';
var changeStuatusURL = '/o2o/shopadmin/changestatus';
getList();
function getList() {
$.getJSON(listUrl, function(data) {
if (data.success) {
var productList = data.productList;
var tempHtml = '';
productList.map(function(item, index) {
var textOp = "下架";
var contraryStatus = 0;
if (item.enableStatus == 0) {
textOp = "上架";
contraryStatus = 1;
} else {
contraryStatus = 0;
}
tempHtml += '' + '<div class="row row-product">'
+ '<div class="col-33">'
+ item.productName
+ '</div>'
+ '<div class="col-33">'
+ item.priority
+ '</div>'
+ '<div class="col-33">'
+ '<a href="#" class="edit" data-id="'
+ item.productId
+ '" data-status="'
+ item.enableStatus
+ '">编辑</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.enableStatus
+ '">预览</a>'
+ '</div>'
+ '</div>';
});
$('.product-wrap').html(tempHtml);
}
});
}
/**
* 下架操作
*/
function changeStatus(id, enableStatus) {
var product = {};
product.productId = id;
product.enableStatus = enableStatus;
$.confirm('确定么?', function() {
$.ajax({
url : changeStuatusURL,
type : 'POST',
data : {
productStr : JSON.stringify(product)
},
dataType : 'json',
success : function(data) {
if (data.success) {
$.toast(data.errMsg);
getList();
} else {
$.toast(data.errMsg);
}
}
});
});
}
$('.product-wrap').on(
'click',
'a',
function(e) {
var target = $(e.currentTarget);
if (target.hasClass('edit')) {
window.location.href = '/o2o/shopadmin/productoperation?productId='
+ e.currentTarget.dataset.id;
} else if (target.hasClass('status')) {
changeStatus(e.currentTarget.dataset.id,
e.currentTarget.dataset.status);
} else if (target.hasClass('preview')) {
// TODO
window.location.href = '/o2o/frontend/productdetail?productId='
+ e.currentTarget.dataset.id;
}
});
$('#new').click(function() {
window.location.href = '/o2o/shopadmin/productoperation';
});
});联调
前端开启debug调测，后端加入断点，debug模式开启tomcat，逐步调测功能。