6-1 店铺信息编辑之Dao层开发
修改addShop方法
service层：
ShopExecution addShop(Shop shop,InputStream shopImgInputStream,String fileName);@Override
@Transactional
public ShopExecution addShop(Shop shop, InputStream shopImgInputStream,String fileName) {
//空值判断
if (shop == null) {
return new ShopExecution(ShopStateEnum.NULL_SHOPID);
}
try {
//给店铺信息赋初始值
shop.setEnableStatus(0);
shop.setCreateTime(new Date());
shop.setLastEditTime(new Date());
//添加店铺信息
int effectedNum = shopDao.insertShop(shop);
if (effectedNum <= 0) {
throw new RuntimeException("店铺创建失败");
} else {
if (shopImgInputStream != null&&fileName!=null) {
//存储图片
try {
addShopImg(shop, shopImgInputStream,fileName);
} catch (Exception e) {
throw new RuntimeException("addShopImg error:" + e.getMessage());
}
//更新店铺的图片地址
effectedNum = shopDao.updateShop(shop);
if (effectedNum <= 0) {
throw new RuntimeException("更新图片地址失败");
}
}
}
} catch (Exception e) {
throw new RuntimeException("addShop error:" + e.getMessage());
}
// 创建成功
return new ShopExecution(ShopStateEnum.CHECK, shop);
}
private void addShopImg(Shop shop, InputStream shopImgInputStream,String fileName) {
//获取店铺图片存储相对路径
String target = PathUtil.getShopImagePath(shop.getShopId());
//创建目标图片缩略图，返回相对地址
String shopImgAddr = ImageUtil.generateThumbnail(shopImgInputStream, fileName,target);
shop.setShopImg(shopImgAddr);
}ImageUtil：
public static String generateThumbnail(InputStream thumbnailInputStream, String fileName, String targetAddr){
//随机生成文件名
String realFileName = getRandomFileName();
//获取图片扩展名
String extension = getFileExtension(fileName);
//创建目标目录路径
makeDirPath(targetAddr);
//目标图片相对路径名
String relativeAddr = targetAddr+realFileName+extension;
File dest = new File(PathUtil.getImgBasePath()+relativeAddr);
//创建缩略图
try {
Thumbnails.of(thumbnailInputStream).size(200, 200)//设置大小
.watermark(Positions.BOTTOM_RIGHT,ImageIO.read(new File(basePath+"/watermark.png")),0.25f)//指定水印位置、图源、透明度
.outputQuality(0.8f).toFile(dest);//压缩图片、图片全路径
} catch (IOException e) {
e.printStackTrace();
}
return relativeAddr;
}在ShopDao.java中添加：
/**
* 通过shop id查询店铺
* @param shopId 1
* @return: com.doit.o2o.entity.Shop
* @author: gefeng
* @date: 2021/3/17 17:09
*/
Shop queryByShopId(long shopId);在ShopDao.xml中添加：
<resultMap id="shopMap" type="com.doit.o2o.entity.Shop">
<id column="shop_id" property="shopId"></id>
<result column="shop_name" property="shopName"></result>
<result column="shop_desc" property="shopDesc"></result>
<result column="shop_addr" property="shopAddr"></result>
<result column="phone" property="phone"></result>
<result column="shop_img" property="shopImg"></result>
<result column="priority" property="priority"></result>
<result column="create_time" property="createTime"></result>
<result column="last_edit_time" property="lastEditTime"></result>
<result column="enable_status" property="enableStatus"></result>
<result column="advice" property="advice"></result>
<association column="area_id" property="area" javaType="com.doit.o2o.entity.Area">
<id column="area_id" property="areaId"></id>
<result column="area_name" property="areaName"></result>
</association>
<association column="owner_id" property="owner" javaType="com.doit.o2o.entity.PersonInfo">
<id column="user_id" property="userId"></id>
<result column="name" property="name"></result>
</association>
<association column="shop_category_id" property="shopCategory" javaType="com.doit.o2o.entity.ShopCategory">
<id column="shop_category_id" property="shopCategoryId"></id>
<result column="shop_category_name" property="shopCategoryName"></result>
</association>
</resultMap>
<select id="queryByShopId" resultMap="shopMap" parameterType="Long">
SELECT s.shop_id,s.shop_name,s.shop_desc,s.shop_addr,s.phone,s.shop_img,s.priority,
s.create_time,s.last_edit_time,s.enable_status,s.advice,
pi.user_id,a.area_id,a.area_name,sc.shop_category_id,sc.shop_category_name
FROM tb_shop s,tb_area a,tb_shop_category sc,tb_person_info pi
WHERE s.area_id = a.area_id
AND s.shop_category_id = sc.shop_category_id
AND s.owner_id = pi.user_id
AND s.shop_id = #{shopId}
</select>6-2 店铺信息编辑之Service层的实现
/**
* 更新店铺信息，包括对图片的处理
* @param shop 1
* @param shopImgInputStream 2
* @param fileName 3
* @return: com.doit.o2o.dto.ShopExecution
* @author: gefeng
* @date: 2021/3/18 16:26
*/
ShopExecution modifyShop(Shop shop, InputStream shopImgInputStream,String fileName);@Override
public ShopExecution modifyShop(Shop shop, InputStream shopImgInputStream,String fileName) throws ShopOperationException{
//1.判断是否需要处理图片
if (shop == null || shop.getShopId() == null) {
return new ShopExecution(ShopStateEnum.NULL_SHOPID);
} else {
try {
if (shopImgInputStream != null&&fileName!=null) {
Shop tempShop = shopDao.queryByShopId(shop.getShopId());
String tempShopImg = tempShop.getShopImg();
if (tempShopImg != null) {
//先删除原图片文件
FileUtil.deleteFileOrPath(tempShopImg);
}
//2.更新店铺图片信息
addShopImg(shop, shopImgInputStream,fileName);
}
shop.setLastEditTime(new Date());
int effectedNum = shopDao.updateShop(shop);
if (effectedNum <= 0) {
return new ShopExecution(ShopStateEnum.INNER_ERROR);
} else {// 创建成功
shop = shopDao.queryByShopId(shop.getShopId());
return new ShopExecution(ShopStateEnum.SUCCESS, shop);
}
}catch (Exception e) {
throw new ShopOperationException("modifyShop error: "
+ e.getMessage());
}
}
}6-3 店铺信息编辑之Controller层实现
@RequestMapping(value = "/getshopbyid",method = RequestMethod.GET)
@ResponseBody
private Map<String,Object> getShopById(HttpServletRequest request){
Map<String,Object> modelMap = new HashMap<String,Object>();
Long shopId = HttpServletRequestUtil.getLong(request,"shopId");
if(shopId>-1){
try {
Shop shop = shopService.getByShopId(shopId);
List<Area> areaList = areaService.getAreaList();
modelMap.put("shop", shop);
modelMap.put("areaList", areaList);
modelMap.put("success", true);
}catch (Exception e){
modelMap.put("success", false);
modelMap.put("errMsg", e.toString());
}
}else{
modelMap.put("success", false);
modelMap.put("errMsg","empty shopId");
}
return modelMap;
}
@RequestMapping(value="/modifyshop",method = RequestMethod.POST)
@ResponseBody
private Map<String,Object> modifyShop(HttpServletRequest request){
Map<String,Object> modelMap = new HashMap<String,Object>();
//检查验证码是否正确
if (!CodeUtil.checkVerifyCode(request)) {
modelMap.put("success", false);
modelMap.put("errMsg", "输入了错误的验证码");
return modelMap;
}
//1.接受并转化相应的参数，包括店铺信息以及图片信息
//获取request中shopStr参数的值
String shopStr = HttpServletRequestUtil.getString(request, "shopStr");
ObjectMapper mapper = new ObjectMapper();
Shop shop = null;
try {
//将shopStr字符串解析为Shop类实例
shop = mapper.readValue(shopStr, Shop.class);
} catch (Exception e) {
modelMap.put("success",false);
modelMap.put("errMsg", e.getMessage());
return modelMap;
}
CommonsMultipartFile shopImg = null;
//new一个对request会话上下文的CommonsMultipart的解析器
CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
//解析request
if(commonsMultipartResolver.isMultipart(request)){
//对request做强制类型转换
MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest)request;
//从request中获取key为shopImg表示的File，并转换为CommonsMultipartFile类型
shopImg = (CommonsMultipartFile)multipartHttpServletRequest.getFile("shopImg");
}
//2.注册店铺信息
if(shop!=null&&shop.getShopId()!=null){
PersonInfo owner = new PersonInfo();
owner.setUserId(1L);
shop.setOwner(owner);
ShopExecution se=null;
try{
if(shopImg==null){
se = shopService.modifyShop(shop, null, null);
}else{
se = shopService.modifyShop(shop, shopImg.getInputStream(), shopImg.getOriginalFilename());
}
if(se.getState()==ShopStateEnum.SUCCESS.getState()){
modelMap.put("success", true);
}else{
modelMap.put("success", false);
modelMap.put("errMsg", se.getStateInfo());
}
}catch (ShopOperationException e){
e.printStackTrace();
}catch (IOException e){
e.printStackTrace();
}
return modelMap;
}else{
modelMap.put("success",false);
modelMap.put("errMsg", "请输入店铺Id");
return modelMap;
}
}修改registerShop方法。
1.从session中的登录的“user”属性获取owner。在web开发中，服务器可以为每个用户浏览器创建一个会话对象，即session，一个浏览器独占一个session对象，因此在需要保存用户数据时，服务器程序可以把用户信息写到用户浏览器独占的session中。当用户使用浏览器访问服务器程序时，服务器程序可以从用户的session中取出该用户的数据为用户服务。服务器创建session出来后，会把session的ID号以cookie的形式回写给客户机，这样只要客户端的浏览器不关，再去访问服务器的时候，都会带着session的ID号，服务器发现客户端请求带有session ID，就会使用内容中与之对应的session为之服务。Tomcat默认session过期时间：30分钟。
2.成功注册店铺后，更新该用户可以操作的店铺列表。
@RequestMapping(value="/registershop",method = RequestMethod.POST)
@ResponseBody
private Map<String,Object> registerShop(HttpServletRequest request){
Map<String,Object> modelMap = new HashMap<String,Object>();
//检查验证码是否正确
if (!CodeUtil.checkVerifyCode(request)) {
modelMap.put("success", false);
modelMap.put("errMsg", "输入了错误的验证码");
return modelMap;
}
//1.接受并转化相应的参数，包括店铺信息以及图片信息
//获取request中shopStr参数的值
String shopStr = HttpServletRequestUtil.getString(request, "shopStr");
ObjectMapper mapper = new ObjectMapper();
Shop shop = null;
try {
//将shopStr字符串解析为Shop类实例
shop = mapper.readValue(shopStr, Shop.class);
} catch (Exception e) {
modelMap.put("success",false);
modelMap.put("errMsg", e.getMessage());
return modelMap;
}
CommonsMultipartFile shopImg = null;
//new一个对request会话上下文的CommonsMultipart的解析器
CommonsMultipartResolver commonsMultipartResolver = new CommonsMultipartResolver(request.getSession().getServletContext());
//解析request
if(commonsMultipartResolver.isMultipart(request)){
//对request做强制类型转换
MultipartHttpServletRequest multipartHttpServletRequest = (MultipartHttpServletRequest)request;
//从request中获取key为shopImg表示的File，并转换为CommonsMultipartFile类型
shopImg = (CommonsMultipartFile)multipartHttpServletRequest.getFile("shopImg");
}else{
modelMap.put("success",false);
modelMap.put("errMsg", "上传图片不能为空");
return modelMap;
}
//2.注册店铺
if(shop!=null&&shopImg!=null){
PersonInfo owner = (PersonInfo) request.getSession().getAttribute("user");
// owner.setUserId(1L);
shop.setOwner(owner);
// File shopImgFile = new File(PathUtil.getImgBasePath()+ImageUtil.getRandomFileName());
// try {
// shopImgFile.createNewFile();
// } catch (IOException e) {
// modelMap.put("success",false);
// modelMap.put("errMsg", e.getMessage());
// return modelMap;
// }
ShopExecution se=null;
try{
se = shopService.addShop(shop, shopImg.getInputStream(),shopImg.getOriginalFilename());
}catch (ShopOperationException e){
e.printStackTrace();
}catch (IOException e){
e.printStackTrace();
}
if(se.getState()==ShopStateEnum.CHECK.getState()){
modelMap.put("success", true);
@SuppressWarnings("unchecked")
List<Shop> shopList = (List<Shop>) request.getSession().getAttribute("shopList");
if(shopList==null||shopList.size()==0){
shopList = new ArrayList<Shop>();
}
shopList.add(se.getShop());
request.getSession().setAttribute("shopList", shopList);
}else{
modelMap.put("success", false);
modelMap.put("errMsg", se.getStateInfo());
}
return modelMap;
}else{
modelMap.put("success",false);
modelMap.put("errMsg", "请输入店铺信息");
return modelMap;
}
}6-4 店铺信息编辑之前端实现
/**
*
*/
$(function(){
var shopId = getQueryString('shopId');
var isEdit = shopId?true:false;
//获取店铺初始信息的url
var initUrl = '/o2o/shopadmin/getshopinitinfo';
//注册店铺的url
var registerShopUrl = '/o2o/shopadmin/registershop';
//根据shopId获取店铺信息的url
var shopInfoUrl = "o2o/shopadmin/getshopbyid?shopId="+shopId;
var editShopUrl = '/o2o/shopadmin/modifyshop';
if(!isEdit){
alert(initUrl);
getShopInitInfo();
}else{
getShopInfo();
}
function getShopInfo(shopId) {
$.getJSON(shopInfoUrl, function(data) {
if (data.success) {
var shop = data.shop;
$('#shop-name').val(shop.shopName);
$('#shop-addr').val(shop.shopAddr);
$('#shop-phone').val(shop.phone);
$('#shop-desc').val(shop.shopDesc);
var shopCategory = '<option data-id="'
+ shop.shopCategory.shopCategoryId + '" selected>'
+ shop.shopCategory.shopCategoryName + '</option>';
var tempAreaHtml = '';
data.areaList.map(function(item, index) {
tempAreaHtml += '<option data-id="' + item.areaId + '">'
+ item.areaName + '</option>';
});
$('#shop-category').html(shopCategory);
$('#shop-category').attr('disabled','disabled');
$('#area').html(tempAreaHtml);
$("#area option[data-id='"+shop.area.areaId+"']").attr("selected","selected");
}
});
}
function getShopInitInfo() {
$.getJSON(initUrl, function (data) {
if (data.success) {
var tempHtml = '';
var tempAreaHtml = '';
data.shopCategoryList.map(function (item, index) {
tempHtml += '<option data-id="' + item.shopCategoryId
+ '">' + item.shopCategoryName + '</option>';
});
data.areaList.map(function (item, index) {
tempAreaHtml += '<option data-id="' + item.areaId + '">'
+ item.areaName + '</option>';
});
$('#shop-category').html(tempHtml);
$('#area').html(tempAreaHtml);
}
});
}
$('#submit').click(function() {
var shop = {};
if(isEdit){
shop.shopId = shopId;
}
shop.shopName = $('#shop-name').val();
shop.shopAddr = $('#shop-addr').val();
shop.phone = $('#shop-phone').val();
shop.shopDesc = $('#shop-desc').val();
shop.shopCategory = {
shopCategoryId : $('#shop-category').find('option').not(function() {
return !this.selected;
}).data('id')
};
shop.area = {
areaId : $('#area').find('option').not(function() {
return !this.selected;
}).data('id')
};
var shopImg = $("#shop-img")[0].files[0];
var formData = new FormData();
formData.append('shopImg', shopImg);
formData.append('shopStr', JSON.stringify(shop));
var verifyCodeActual = $('#j_captcha').val();
if (!verifyCodeActual) {
$.toast('请输入验证码！');
return;
}
formData.append("verifyCodeActual", verifyCodeActual);
$.ajax({
url : (isEdit?editShopUrl:registerShopUrl),
type : 'POST',
// contentType: "application/x-www-form-urlencoded; charset=utf-8",
data : formData,
contentType : false,
processData : false,
cache : false,
success : function(data) {
if (data.success) {
$.toast('提交成功！');
} else {
$.toast('提交失败！'+data.errMsg);
$('#captcha_img').click();
}
}
});
});
})6-5 店铺列表展示之Dao层的实现
/**
* 分页查询店铺，可输入的条件有：店铺名（模糊），店铺状态，店铺类别，区域Id，owner
* Param注解用于表示函数的参数
* @param shopCondition
* @param rowIndex 从第几行开始取数据
* @param pageaSize 返回的条数
* @return
*/
List<Shop> queryShopList(@Param("shopCondition")Shop shopCondition,@Param("rowIndex")int rowIndex,
@Param("pageSize")int pageaSize);
/**
* 返回queryShopList结果总数
* @param shopCondition
* @return
*/
int queryShopCount(@Param("shopCondition")Shop shopCondition);
<select id="queryShopList" resultMap="shopMap" >
SELECT
s.shop_id,s.shop_name,s.shop_desc,s.shop_addr,s.phone,s.shop_img,s.priority,
s.create_time,s.last_edit_time,s.enable_status,s.advice,
pi.user_id,a.area_id,a.area_name,sc.shop_category_id,sc.shop_category_name
FROM tb_shop s,tb_area a,tb_shop_category sc,tb_person_info pi
<where>
<!-- 写like语句的时候 一般都会写成 like '% %' 在mybatis里面写就是应该是 like '%${name} %' 而不是
'%#{name} %' ${name} 是不带单引号的，而#{name} 是带单引号的 -->
<if test="shopCondition.shopName != null">
and s.shop_name like '%${shopCondition.shopName}%'
</if>
<if test="shopCondition.enableStatus != null">
and s.shop_status = #{shopCondition.enableStatus}
</if>
<if test="shopCondition.shopCategory != null and
shopCondition.shopCategory.shopCategoryId != null">
and s.shop_category_id = #{shopCondition.shopCategory.shopCategoryId}
</if>
<if test="shopCondition.area != null and
shopCondition.area.areaId != null">
and s.area_id = #{shopCondition.area.areaId}
</if>
<if test="shopCondition.owner != null and
shopCondition.owner.userId != null">
and pi.user_id = #{shopCondition.owner.userId}
</if>
AND s.area_id = a.area_id
AND s.shop_category_id = sc.shop_category_id
AND s.owner_id = pi.user_id
</where>
ORDER BY s.priority DESC
LIMIT #{rowIndex},#{pageSize};
</select>
<select id="queryShopCount" resultType="int" >
SELECT
count(1)
FROM tb_shop s,tb_area a,tb_shop_category sc,tb_person_info pi
<where>
<!-- 写like语句的时候 一般都会写成 like '% %' 在mybatis里面写就是应该是 like '%${name} %' 而不是
'%#{name} %' ${name} 是不带单引号的，而#{name} 是带单引号的 -->
<if test="shopCondition.shopName != null">
and s.shop_name like '%${shopCondition.shopName}%'
</if>
<if test="shopCondition.enableStatus != null">
and s.shop_status = #{shopCondition.enableStatus}
</if>
<if test="shopCondition.shopCategory != null and
shopCondition.shopCategory.shopCategoryId != null">
and s.shop_category_id = #{shopCondition.shopCategory.shopCategoryId}
</if>
<if test="shopCondition.area != null and
shopCondition.area.areaId != null">
and s.area_id = #{shopCondition.area.areaId}
</if>
<if test="shopCondition.owner != null and
shopCondition.owner.userId != null">
and pi.user_id = #{shopCondition.owner.userId}
</if>
AND s.area_id = a.area_id
AND s.shop_category_id = sc.shop_category_id
AND s.owner_id = pi.user_id
</where>
</select>6-6 店铺列表展示之Service层的实现
/**
* 根据shopCondition分页返回相应店铺信息
* @param shopCondition
* @param pageIndex
* @param pageSize
* @return
*/
ShopExecution getShopList(Shop shopCondition,int pageIndex,int pageSize);
@Override
public ShopExecution getShopList(Shop shopCondition, int pageIndex, int pageSize) {
int rowIndex = PageCalculator.calculateRowIndex(pageIndex, pageSize);
List<Shop> shopList = shopDao.queryShopList(shopCondition, rowIndex, pageSize);
int count = shopDao.queryShopCount(shopCondition);
ShopExecution se = new ShopExecution();
if(shopList!=null){
se.setShopList(shopList);
se.setCount(count);
}else{
se.setState(ShopStateEnum.INNER_ERROR.getState());
}
return se;
}6-7 店铺列表展示之Contoller层的实现
/**
* 获取用户名下所有店铺
* @param request
* @return
*/
@RequestMapping(value="/getshoplist",method = RequestMethod.GET)
@ResponseBody
private Map<String,Object> getShopList(HttpServletRequest request){
Map<String,Object> modelMap = new HashMap<String,Object>();
PersonInfo user = new PersonInfo();
user.setUserId(1L);
request.getSession().setAttribute("user", user);
user = (PersonInfo) request.getSession().getAttribute("user");
try{
Shop shopCondition = new Shop();
shopCondition.setOwner(user);
ShopExecution se = shopService.getShopList(shopCondition, 0, 100);
modelMap.put("success", true);
modelMap.put("shopList", se.getShopList());
modelMap.put("user", user);
}catch (Exception e) {
modelMap.put("success", false);
modelMap.put("errMsg", e.getMessage());
}
return modelMap;
}
/**
* 直接访问该页面且未经登录或未经店铺列表页面链接而访问，则对其重定向到shoplist页面
* @param request
* @return
*/
@RequestMapping(value="/getshopmanagementinfo",method = RequestMethod.GET)
@ResponseBody
private Map<String,Object> getShopManagementInfo(HttpServletRequest request){
Map<String,Object> modelMap = new HashMap<String,Object>();
//从请求中获取shopId
long shopId = HttpServletRequestUtil.getLong(request, "shopId");
if(shopId<=0){
//请求中没有shopId，尝试从session中获取当前shop
Object currentShopObj = request.getSession().getAttribute("currentShop");
//session中没获取到当前shop
if(currentShopObj==null){
modelMap.put("redirect",true);
modelMap.put("url", "o2o/shopadmin/shoplist");
}else{//session中获取到了当前shop
Shop currentShop = (Shop)currentShopObj;
modelMap.put("redirect", false);
modelMap.put("shopId", currentShop.getShopId());
}
}else{
Shop currentShop = new Shop();
currentShop.setShopId(shopId);
request.getSession().setAttribute("currentShop", currentShop);
modelMap.put("redirect", false);
}
return modelMap;
}6-8 店铺列表展示前端开发
new html/shop/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="/o2o/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/common/common.js'
charset='utf-8'></script>
<script type='text/javascript' src='../resources/js/shop/shoplist.js' charset='utf-8'></script>
</body>
</html>
new css/shop/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 {
}new js/shop/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(status) {
if (status == 0) {
return '审核中';
} else if (status == -1) {
return '店铺非法';
} else {
return '审核通过';
}
}
function goShop(status, id) {
if (status != 0 && status != -1) {
return '<a href="/o2o/shopadmin/shopmanagement?shopId='+ id +'">进入</a>';
} else {
return '';
}
}
});6-9 店铺管理页面的前端开发
new html/shop/shopmanagement.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/shopmanagement.css">
</head>
<body>
<header class="bar bar-nav">
<h1 class="title">商店管理</h1>
</header>
<div class="content">
<div class="content-block">
<div class="row">
<div class="col-50 mb">
<a href="/o2o/shopadmin/shopoperation" class="button button-big button-fill">商铺信息</a>
</div>
<div class="col-50 mb">
<a href="/o2o/shopadmin/productmanagement" class="button button-big button-fill">商品管理</a>
</div>
<div class="col-50 mb">
<a href="/o2o/shopadmin/productcategorymanagement" class="button button-big button-fill">类别管理</a>
</div>
<div class="col-100 mb">
<a href="/o2o/shopadmin/shoplist" class="button button-big button-fill button-danger">返回</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/common/common.js'
charset='utf-8'></script>
<script type='text/javascript' src='../resources/js/shop/shopmanagement.js' charset='utf-8'></script>
</body>
</html>
new css/shop/shopmanagement.css
.mb {
margin-bottom: .5rem;
}new js/shop/shopmanagement.js
$(function(){
var shopId = getQueryString("shopId");getQueryString
var shopInfoUrl = '/o2o/shopadmin/getshopmanagementinfo?shopId='+shopId;
$.getJSON(shopInfoUrl,function(data){
if(data.redirect){
window.location.href=data.url;
}else{
if(data.shopId!=undefined && data.shopId != null){
shopId = data.shopId;
}
$('#shopInfo').attr('href','/o2o/shopadmin/shopoperation?shopId='+shopId);
}
});
});
761
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
