shop--9.商品--商品管理--修改（前端）

商品管理的页面和商品分类管理的页面很类似

要有一个转发路由

//进行店铺管理显示的转发
    @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);
                    }
                }
            });
        })
    }
});