校园商铺-8商品模块-11商品列表展示之前端开发
1.前端展示
1.1 html文件
WEB-INF/html/shop/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="shorcut icon" href="/favicorn.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">#{商品名称}</div>
<div class="col-20">#{优先级}</div>
<div class="col-40">
<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="/o2o/shopamdin/productoperation" class="button button-big button-fill button-success">新增</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>
1.2 依赖的js文件
webapp/resources/js/shop/productmanagement.js
$(function(){
//获取此店铺下的商品列表
var listUrl = '/o2o/shopadmin/getproductlistbyshop?pageIndex=1&pageSize=999';
//商品下架URL
var statusUrl = '/o2o/shopadmin/modifyproduct';
getList();
//获取此店铺下的商品列表
function getList(){
//从后台获取此店铺的商品列表
$.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;
if(item.enableStatus == 0){
//若状态值为0，表明是已下架的商品，操作应为上架
textOp = '上架';
contraryStatus = 1;
}else{
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.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>';
});
//将拼接好的信息赋值进html控件中
$('.product-wrap').html(tempHtml);
}
});
}
//将class为product-wrap里面的a标签全部绑上点击的事件
$('.product-wrap').on('click','a',function(e){
var target = $(e.currentTarget);
if(target.hasClass('edit')){
//如果有class edit则点击就进入店铺信息编辑页面，并带有productId参数
window.location.href = '/o2o/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 = '/o2o/frontend/productdetail?productId='+e.currentTarget.dataset.id;
}
});
function changeItemStatus(id, enableStatus){
//定义product json对象并添加productid以及状态（上架、下架）
var product = {};
product.productId = id;
product.enableStatus = enableStatus;
$.confirm('确定吗？',function(){
//上下架相关商品
$.ajax({
url:statusUrl,
type:'POST',
data:{
productStr:JSON.stringify(product),
statusChange:true
},
dataType:'json',
success:function(data){
if(data.success){
$.toast('操作成功！');
getList();
}else{
$.toast('操作失败');
}
}
});
});
}
});
1.3 依赖的css文件
webapp/resources/css/shop/productmanagement.css
.row-product{
border:1px solid #999;
padding:.5rem;
border-bottom:none;
}
.row-product *{
white-space:nowrap;
over-flow:scroll;
}
.row-product:last-child{
border-bottom:1px soild #999;
}
.product-name{
white-space:nowrap;
overflow-x:scroll;
}
.product-wrap a{
marigin-right:1rem;
}
1.4 建立路由
package com.csj2018.o2o.web.shopadmin;
import org.springframework.stereotype.Controller;
import org.springframework.web.bind.annotation.RequestMapping;
import org.springframework.web.bind.annotation.RequestMethod;
@Controller
@RequestMapping(value="shopadmin",method=RequestMethod.GET)
public class ShopAdminCtroller {
@RequestMapping(value="/shopoperation")
public String shopOperation() {
return "shop/shopoperation";
}
@RequestMapping(value="/shoplist")
public String shopList() {
return "shop/shoplist";
}
@RequestMapping(value="/shopmanagement")
public String shopManagement() {
return "shop/shopmanagement";
}
@RequestMapping(value="/productcategorymanagement")
private String productCategoryManage() {
return "shop/productcategorymanagement";
}
@RequestMapping(value="/productoperation")
private String productOperation() {
return "shop/productoperation";
}
//8-11
@RequestMapping(value="/productmanagement")
public String productManagement() {
//转发至商品管理页
return "shop/productmanagement";
}
}
2.验证
先访问http://127.0.0.1:18080/o2o/shopadmin/shopmanagement?shopId=1，获取currentshop
http://127.0.0.1:18080/o2o/shopadmin/productmanagement
点击编辑，进入商品编辑页；商品上下架正常。
