shop--7.店铺编辑和列表--店铺列表展示前端

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 href="/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:'/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.status) +'</div><div class="col-20">'+ goShop(item.status, 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="/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 {}

路由

//进行店铺列表显示的转发@RequestMapping("/shoplist")public String shoplist(){//返回显示店铺注册的页面return "shop/shoplist";}

转载于:https://www.cnblogs.com/SkyeAngel/p/8902349.html

shop--7.店铺编辑和列表--店铺列表展示前端相关推荐

taobao.top.oaid.decrypt( OAID解密 )淘宝店铺订单明文接口，店铺订单解密，店铺订单消息推送，店铺订单物流接口代码对接教程
taobao.top.oaid.decrypt( OAID解密 )淘宝店铺订单明文接口,店铺订单解密,店铺订单消息推送,店铺订单物流接口代码对接教程如下: 1.公共参数名称类型必须描述(接口代 ...
pdd.order.information.get拼多多店铺订单详情接口(店铺订单交易接口，店铺订单明文接口，店铺订单解密接口）代码对接教程
pdd.order.information.get拼多多店铺订单详情接口(店铺订单交易接口,店铺订单明文接口,店铺订单解密接口)代码对接教程如下: 1.公共参数参数名称参数类型是否必填参数描述 ...
淘宝天猫京东拼多多苏宁抖音等平台关键词监控价格API接口（店铺商品价格监控API接口调用展示）
淘宝京东拼多多苏宁抖音等平台关键词监控价格API接口(店铺商品价格监控API接口调用展示)代码对接如下: 1.公共参数名称类型必须描述 key String 是调用key(必须以GET方式拼 ...
淘宝天猫店铺商品API，店铺商品分类接口代码对接教程
淘宝店铺商品接口用于查询店铺的所有商品,通常用于深度展示店铺,接口对接代码如下: 1.公共参数名称类型必须描述(接口代码教程wx19970108018) key String 是调用key( ...
淘宝天猫整店店铺商品API，店铺商品分类接口代码教程
淘宝店铺商品接口用于查询店铺的所有商品,通常用于深度展示店铺,代码教程如下: 1.公共参数名称类型必须描述(接口代码教程wx19970108018) key String 是调用key(必须 ...
淘宝天猫京东拼多多抖音苏宁1688等平台关键词监控价格API接口（店铺商品价格监控API接口调用展示）
淘宝天猫京东拼多多抖音苏宁1688等平台关键词监控价格API接口(店铺商品价格监控API接口调用展示)代码对接如下: 1.公共参数名称类型必须描述 key String 是调用key(必须以 ...
魔坊APP项目-17-种植园，商城页面、服务端提供商品api，解决App打包编译以后的跨域限制、客户端获取商品列表并进行展示，集成Alipayplus模块完成支付
种植园一.商城页面 orchard.html,代码: <!DOCTYPE html> <html> <head><title>用户中心</tit ...
淘宝店铺订单接口，店铺订单插旗接口，ERP订单接口，订单备注接口，跨境电商订单接口，交易订单接口，官方开发平台接口对接方案
一.淘宝天猫官方开放平台API接口对接接口说明: 1.通过注册账号获取key和secret,然后购买淘宝应用市场的相关店铺订单智能发货接口,拿到店铺授权后递交到会员中心平台进行店铺递交授权,授权成功后 ...
html 用户列表,用户列表.html
用户列表 $axure.utils.getTransparentGifPath = function() { return 'resources/images/transparent.gif'; ...
千牛如何装修店铺千牛装修店铺的教程
1.首先登录千牛卖家版,输入淘宝账号和密码. 2.在界面的横向工作栏中选择店铺管理,找到[店铺装修]选项. 千牛如何装修店铺?千牛装修店铺的教程 3.在左侧工具栏中选择需要修改的部分,目前可选择模块. ...

shop--7.店铺编辑和列表--店铺列表展示前端

shop--7.店铺编辑和列表--店铺列表展示前端相关推荐

最新文章

热门文章

shop--7.店铺编辑和列表--店铺列表展示 前端

shop--7.店铺编辑和列表--店铺列表展示 前端相关推荐

最新文章

热门文章

shop--7.店铺编辑和列表--店铺列表展示前端

shop--7.店铺编辑和列表--店铺列表展示前端相关推荐