shoplist.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/shoplist.css"> </head> <body> <header class="bar bar-nav"> <h1 class="title">商店列表</h1> </header> <div class="content"> <div class="content-block"> <p>你好,<span id="user-name"></span> <a class="pull-right" href="/o2o/shopadmin/shopoperation">增加店铺</a> </p> <div class="row row-shop"> <div class="col-40">商店名称</div> <div class="col-40">状态</div> <div class="col-20">操作</div> </div> <div class="shop-wrap"> </div> </div> <div class="content-block"> <div class="row"> <div class="col-50"> <a href="" id="log-out" class="button button-big button-fill button-danger">退出系统</a> </div> <div class="col-50"> <a href="/shop/changepsw" 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/shoplist.js' charset='utf-8'></script> </body> </html>
shoplist.js
$(function(){ //获取店铺信息 渲染出来就可以了 getlist(); function getlist(e){ $.ajax({ url:'/o2o/shopadmin/getshoplist', type:'get', dataType:"json", success:function(data){ if(data.success){ handleList(data.shopList); handleUser(data.user); } } }); //显示用户名 function handleUser(data){ $('#user-name').text(data.name); } //显示传回来的用户名下的店铺列表 function handleList(data){ var html = ''; data.map(function(item, index){ html += '<div class="row row-shop"><div class="col-40">' + item.shopName +'</div><div class="col-40">'+ shopStatus(item.enableStatus) +'</div><div class="col-20">' + goShop(item.enableStatus, item.shopId) + '</div></div>'; }); $('.shop-wrap').html(html); } function shopStatus(data){ if(data == 0){ return '审核中'; } else if(data == -1){ return '店铺非法'; } else if(data == 1){ return '审核通过'; } } //进入店铺管理页面，一个超链接 function goShop(status, id){ if(status == 1){ return '<a href="/o2o/shopadmin/shopmanagement?shopId=' + id + '">进入</a>'; } else{ return ''; } } } });
shoplist.css
.row-shop {
border: 1px solid #999;
padding: .5rem;
border-bottom: none;
}
.row-shop:last-child {
border-bottom: 1px solid #999;
}
.shop-name {
white-space: nowrap;
overflow-x: scroll;
}
.shop-wrap a {
}
同时处理一下路由
1 @RequestMapping(value = "/shoplist") 2 public String shopList() { 3 return "shop/shoplist"; 4 }