实战SSM_O2O商铺_37【商品】商品列表之View层的实现

小小工匠

于 2018-07-09 12:27:14 发布

阅读量1.2w

点赞数 3

分类专栏：【实战-SSM In Action】文章标签： ssm实战

本文链接：https://blog.csdn.net/yangshangwei/article/details/80968298

版权

【实战-SSM In Action】同时被 2 个专栏收录

48 篇文章 19 订阅

订阅专栏

实战系列-SSM实战

48 篇文章 13 订阅

订阅专栏

文章目录

概述
productmanagement.html
productmanage.css
productmanage.js
联调
Github地址

概述

在完成了后端的逻辑后，我们来实现商品列表的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';
	});
});