购物车Part2

mvnw

@@ -235,7 +235,7 @@ else
         if [ -z "$MVNW_USERNAME" ] || [ -z "$MVNW_PASSWORD" ]; then
             wget "$jarUrl" -O "$wrapperJarPath"
         else
-            wget --http-user=$MVNW_USERNAME --http-password=$MVNW_PASSWORD "$jarUrl" -O "$wrapperJarPath"
+            wget --http-account=$MVNW_USERNAME --http-password=$MVNW_PASSWORD "$jarUrl" -O "$wrapperJarPath"
         fi
     elif command -v curl > /dev/null; then
         if [ "$MVNW_VERBOSE" = true ]; then
@@ -244,7 +244,7 @@ else
         if [ -z "$MVNW_USERNAME" ] || [ -z "$MVNW_PASSWORD" ]; then
             curl -o "$wrapperJarPath" "$jarUrl" -f
         else
-            curl --user $MVNW_USERNAME:$MVNW_PASSWORD -o "$wrapperJarPath" "$jarUrl" -f
+            curl --account $MVNW_USERNAME:$MVNW_PASSWORD -o "$wrapperJarPath" "$jarUrl" -f
         fi
 
     else

mvnw.cmd

@@ -43,7 +43,7 @@ title %0
 @REM set %HOME% to equivalent of $HOME
 if "%HOME%" == "" (set "HOME=%HOMEDRIVE%%HOMEPATH%")
 
-@REM Execute a user defined script before this one
+@REM Execute a account defined script before this one
 if not "%MAVEN_SKIP_RC%" == "" goto skipRcPre
 @REM check for pre script, once with legacy .bat ending and once with .cmd ending
 if exist "%HOME%\mavenrc_pre.bat" call "%HOME%\mavenrc_pre.bat"

src/main/java/com/caimei/www/controller/authorized/ShoppingCartController.java → src/main/java/com/caimei/www/controller/authorized/ShoppingController.java

@@ -3,14 +3,14 @@ package com.caimei.www.controller.authorized;
 import com.caimei.www.controller.BaseController;
 import com.caimei.www.pojo.JsonModel;
 import com.caimei.www.pojo.order.CartItem;
-import com.caimei.www.pojo.order.CartSupplier;
-import com.caimei.www.service.ShoppingCartService;
+import com.caimei.www.service.ShoppingService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.stereotype.Controller;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.ResponseBody;
 
 import java.util.List;
+import java.util.Map;
 
 /**
  * 购物车
@@ -19,12 +19,22 @@ import java.util.List;
  * @date : 2020/7/23
  */
 @Controller
-public class ShoppingCartController extends BaseController {
+public class ShoppingController extends BaseController {
 
-    private ShoppingCartService shoppingCartService;
+	private static final String SHOPPING_CART_PATH = "shopping/cart";
+
+    private ShoppingService shoppingService;
     @Autowired
-    public void setShoppingCartService(ShoppingCartService shoppingCartService) {
-        this.shoppingCartService = shoppingCartService;
+    public void setShoppingService(ShoppingService shoppingService) {
+        this.shoppingService = shoppingService;
+    }
+
+    /**
+     * 购物车列表页
+     */
+    @GetMapping("/shopping/cart.html")
+    public String list() {
+        return SHOPPING_CART_PATH;
     }
 
     /**
@@ -34,7 +44,7 @@ public class ShoppingCartController extends BaseController {
     @GetMapping("/header/cart")
     @ResponseBody
     public JsonModel<List<CartItem>> getHeadCarts(Integer userId) {
-        return shoppingCartService.getHeaderCart(userId);
+        return shoppingService.getHeaderCart(userId);
     }
 
     /**
@@ -43,8 +53,8 @@ public class ShoppingCartController extends BaseController {
      */
     @GetMapping("/cart/list")
     @ResponseBody
-    public JsonModel<List<CartSupplier>> getShoppingCarts(Integer userId) {
-        return shoppingCartService.getShoppingCarts(userId);
+    public JsonModel<Map<String, Object>> getShoppingCarts(Integer userId) {
+        return shoppingService.getShoppingCarts(userId);
     }
 
 }

src/main/java/com/caimei/www/mapper/ShoppingCartDao.java → src/main/java/com/caimei/www/mapper/ShoppingDao.java

@@ -16,7 +16,7 @@ import java.util.List;
  * @date : 2020/7/23
  */
 @Mapper
-public interface ShoppingCartDao {
+public interface ShoppingDao {
     /**
      * 顶部购物车数据
      */

src/main/java/com/caimei/www/mapper/UserDao.java

@@ -1,6 +1,6 @@
 package com.caimei.www.mapper;
 
-import com.caimei.www.pojo.user.User;
+import com.caimei.www.pojo.user.Account;
 import org.apache.ibatis.annotations.Mapper;
 
 /**
@@ -16,5 +16,5 @@ public interface UserDao {
      * @param userId
      * @return
      */
-    User getUserById(Integer userId);
+    Account getUserById(Integer userId);
 }

src/main/java/com/caimei/www/pojo/user/User.java → src/main/java/com/caimei/www/pojo/user/Account.java

@@ -11,9 +11,9 @@ import java.io.Serializable;
  * @date : 2020/7/24
  */
 @Data
-public class User implements Serializable {
+public class Account implements Serializable {
     private Integer id;
-    private Integer mobile;
+    private String mobile;
     private String email;
     private String password;
     /** 用户身份： 0个人，1协销，2会员机构，3供应商，4普通机构 */

src/main/java/com/caimei/www/service/ShoppingCartService.java → src/main/java/com/caimei/www/service/ShoppingService.java

@@ -5,6 +5,7 @@ import com.caimei.www.pojo.order.CartItem;
 import com.caimei.www.pojo.order.CartSupplier;
 
 import java.util.List;
+import java.util.Map;
 
 /**
  * Description
@@ -12,7 +13,7 @@ import java.util.List;
  * @author : Charles
  * @date : 2020/7/23
  */
-public interface ShoppingCartService {
+public interface ShoppingService {
     /**
      * 顶部购物车数据
      * @param userId
@@ -24,5 +25,5 @@ public interface ShoppingCartService {
      * @param userId
      * @return
      */
-    JsonModel<List<CartSupplier>> getShoppingCarts(Integer userId);
+    JsonModel<Map<String, Object>> getShoppingCarts(Integer userId);
 }

src/main/java/com/caimei/www/service/impl/ShoppingCartServiceImpl.java → src/main/java/com/caimei/www/service/impl/ShoppingServiceImpl.java

@@ -1,14 +1,14 @@
 package com.caimei.www.service.impl;
 
-import com.caimei.www.mapper.ShoppingCartDao;
+import com.caimei.www.mapper.ShoppingDao;
 import com.caimei.www.mapper.UserDao;
 import com.caimei.www.pojo.JsonModel;
 import com.caimei.www.pojo.order.ActivityPrice;
 import com.caimei.www.pojo.order.CartItem;
 import com.caimei.www.pojo.order.CartSupplier;
 import com.caimei.www.pojo.order.LadderPrice;
-import com.caimei.www.pojo.user.User;
-import com.caimei.www.service.ShoppingCartService;
+import com.caimei.www.pojo.user.Account;
+import com.caimei.www.service.ShoppingService;
 import com.caimei.www.utils.ImageUtil;
 import com.caimei.www.utils.PriceUtil;
 import org.springframework.beans.factory.annotation.Value;
@@ -16,7 +16,7 @@ import org.springframework.stereotype.Service;
 import org.springframework.util.CollectionUtils;
 
 import javax.annotation.Resource;
-import java.util.List;
+import java.util.*;
 import java.util.concurrent.atomic.AtomicInteger;
 import java.util.concurrent.atomic.AtomicReference;
 import java.util.stream.IntStream;
@@ -28,11 +28,11 @@ import java.util.stream.IntStream;
  * @date : 2020/7/23
  */
 @Service
-public class ShoppingCartServiceImpl implements ShoppingCartService {
+public class ShoppingServiceImpl implements ShoppingService {
     @Value("${caimei.wwwDomain}")
     private String domain;
     @Resource
-    private ShoppingCartDao shoppingCartDao;
+    private ShoppingDao shoppingDao;
     @Resource
     private UserDao userDao;
 
@@ -45,7 +45,7 @@ public class ShoppingCartServiceImpl implements ShoppingCartService {
     @Override
     public JsonModel<List<CartItem>> getHeaderCart(Integer userId) {
         if (userId == null || userId == 0) { return JsonModel.error("参数异常", null);}
-        List<CartItem> headCarts = shoppingCartDao.getHeadCarts(userId);
+        List<CartItem> headCarts = shoppingDao.getHeadCarts(userId);
         return JsonModel.success(headCarts);
     }
 
@@ -56,21 +56,24 @@ public class ShoppingCartServiceImpl implements ShoppingCartService {
      * @return
      */
     @Override
-    public JsonModel<List<CartSupplier>> getShoppingCarts(Integer userId) {
+    public JsonModel<Map<String, Object>> getShoppingCarts(Integer userId) {
         if (userId == null || userId == 0) { return JsonModel.error("参数异常", null);}
-        List<CartSupplier> cartSuppliers = shoppingCartDao.getCartSuppliers(userId);
-        User user = userDao.getUserById(userId);
+        List<CartSupplier> cartSuppliers = shoppingDao.getCartSuppliers(userId);
+        List<CartItem> invalidCarts = new ArrayList<>();
+        Account account = userDao.getUserById(userId);
         cartSuppliers.forEach(supplier -> {
-            List<CartItem> cartItems = shoppingCartDao.getShoppingCartBySupplierId(supplier.getId(), userId);
+            List<CartItem> cartItems = shoppingDao.getShoppingCartBySupplierId(supplier.getId(), userId);
             AtomicReference<Double> supplierPrice = new AtomicReference<>(0d);
             AtomicInteger itemCount = new AtomicInteger();
-            cartItems.forEach(cartItem -> {
+            Iterator<CartItem> iterator = cartItems.iterator();
+            while (iterator.hasNext()) {
+                CartItem cartItem = iterator.next();
                 cartItem.setImage(ImageUtil.getImageURL("product", cartItem.getImage(), 0, domain));
                 if (cartItem.getValidFlag() == 2) {
                     // 已上架
                     cartItem.setStatus(0);
                     // 价格是否可见
-                    boolean priceVisible = (cartItem.getPriceFlag() == 0 || (cartItem.getPriceFlag() == 2 && user.getIdentity() ==2));
+                    boolean priceVisible = (cartItem.getPriceFlag() == 0 || (cartItem.getPriceFlag() == 2 && account.getIdentity() ==2));
                     if (priceVisible) {
                         // 设置商品价格
                         setCartItemPrice(cartItem, userId);
@@ -95,6 +98,7 @@ public class ShoppingCartServiceImpl implements ShoppingCartService {
                     } else if (cartItem.getValidFlag() == 9) {
                         // 已冻结
                         cartItem.setStatus(2);
+
                     } else if (cartItem.getValidFlag() == 3) {
                         // 已下架
                         cartItem.setStatus(3);
@@ -105,13 +109,19 @@ public class ShoppingCartServiceImpl implements ShoppingCartService {
                         // 库存不足
                         cartItem.setStatus(7);
                     }
+                    invalidCarts.add(cartItem);
+                    iterator.remove();
                 }
-            });
+            }
             supplier.setCartList(cartItems);
             supplier.setTotalPrice(supplierPrice.get());
             supplier.setCount(itemCount.get());
         });
-        return JsonModel.success(cartSuppliers);
+        cartSuppliers.removeIf(supplier -> (null != supplier && supplier.getCount() == 0));
+        Map<String, Object> resultMap = new HashMap<>();
+        resultMap.put("list", cartSuppliers);
+        resultMap.put("invalid", invalidCarts);
+        return JsonModel.success(resultMap);
     }
 
     /**
@@ -121,22 +131,23 @@ public class ShoppingCartServiceImpl implements ShoppingCartService {
      */
     private void setCartItemPrice(CartItem cartItem, Integer userId) {
         // 活动价
-        ActivityPrice activity = shoppingCartDao.getActivityPriceByProductId(cartItem.getProductId());
+        ActivityPrice activity = shoppingDao.getActivityPriceByProductId(cartItem.getProductId());
         if (null != activity) {
             cartItem.setPrice(activity.getPrice());
             cartItem.setActivityFlag(1);
+            cartItem.setLadderFlag(0);
         } else if (cartItem.getLadderFlag() == 1) {
             // 阶梯价
-            List<LadderPrice> ladderPrices = shoppingCartDao.getladderPricesByProductId(cartItem.getProductId());
+            List<LadderPrice> ladderPrices = shoppingDao.getladderPricesByProductId(cartItem.getProductId());
             if (!CollectionUtils.isEmpty(ladderPrices)){
                 IntStream.range(0, ladderPrices.size()).forEach(i->{
                     boolean isThisLadder;
-                    if (null != ladderPrices.get(i+1)) {
-                        ladderPrices.get(i).setMaxNum(ladderPrices.get(i+1).getBuyNum());
-                        isThisLadder = (cartItem.getNumber()>ladderPrices.get(i).getBuyNum() && cartItem.getNumber()<ladderPrices.get(i).getMaxNum());
-                    } else {
+                    if (i == ladderPrices.size()-1) {
                         ladderPrices.get(i).setMaxNum(0);
                         isThisLadder = (cartItem.getNumber()>ladderPrices.get(i).getBuyNum());
+                    } else {
+                        ladderPrices.get(i).setMaxNum(ladderPrices.get(i+1).getBuyNum());
+                        isThisLadder = (cartItem.getNumber()>ladderPrices.get(i).getBuyNum() && cartItem.getNumber()<ladderPrices.get(i).getMaxNum());
                     }
                     if (isThisLadder){
                         cartItem.setPrice(ladderPrices.get(i).getBuyPrice());
@@ -149,7 +160,7 @@ public class ShoppingCartServiceImpl implements ShoppingCartService {
             }
         } else {
             // 复购价
-            Double repurchase = shoppingCartDao.getRepurchasePrice(cartItem.getProductId(), userId);
+            Double repurchase = shoppingDao.getRepurchasePrice(cartItem.getProductId(), userId);
             if (null != repurchase && repurchase>0) {
                 cartItem.setPrice(repurchase);
             }

src/main/resources/mapper/ShoppingCartMapper.xml → src/main/resources/mapper/ShoppingDao.xml

@@ -1,6 +1,6 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
-<mapper namespace="com.caimei.www.mapper.ShoppingCartDao">
+<mapper namespace="com.caimei.www.mapper.ShoppingDao">
     <select id="getHeadCarts" resultType="com.caimei.www.pojo.order.CartItem">
 		select
 			p.productID as id,

src/main/resources/mapper/UserMapper.xml

@@ -1,13 +1,13 @@
 <?xml version="1.0" encoding="UTF-8" ?>
 <!DOCTYPE mapper PUBLIC "-//mybatis.org//DTD Mapper 3.0//EN" "http://mybatis.org/dtd/mybatis-3-mapper.dtd">
 <mapper namespace="com.caimei.www.mapper.UserDao">
-	<select id="getUserById" resultType="com.caimei.www.pojo.user.User">
+	<select id="getUserById" resultType="com.caimei.www.pojo.account.Account">
         select  userID as id,
         		bindMobile as mobile,
         		email as email,
         		password as password,
         		userIdentity as identity
-        from user
+        from account
         where userID = #{userId}
 	</select>
 </mapper>

src/main/resources/static/css/base/base.pc.css

@@ -124,14 +124,15 @@ body{min-width:1184px;}
 .classifyBox .line:hover .lft a,.classifyBox .line.on .lft a{color:#E15616}
 .classifyBox .line:hover{background:#fbfafa}
 /* 底部 */
-.footTop{width:100%;padding:27px 0;margin-top: 30px;background:#FFF}
-.footTop .wrap{white-space:nowrap;display:table}
-.footTop .wrap span{display:table-cell;height:70px;line-height:70px;color:#4A4F58;font-weight:bold;font-size:16px;text-align:center}
-.footTop .wrap span:before{width:70px;height:70px;vertical-align:middle;}
-.footTop .wrap span:nth-of-type(1):before{background-position:0 -60px}
-.footTop .wrap span:nth-of-type(2):before{background-position:-80px -60px}
-.footTop .wrap span:nth-of-type(3):before{background-position:-160px -60px}
-.footTop .wrap span:nth-of-type(4):before{background-position:-240px -60px}
+.footTop{width:100%;height:60px;padding:20px 0;margin-top:30px;background:#FFF}
+.footTop .wrap{text-align:justify;font-size:0;}
+.footTop .wrap:after{content: '';display:inline-block;width:100%;}
+.footTop .wrap span{display:inline-block;height:60px;line-height:60px;color:#4A4F58;font-weight:bold;font-size:16px;text-align:center}
+.footTop .wrap span:before{width:60px;height:60px;vertical-align:middle;margin-right:5px;}
+.footTop .wrap span:nth-of-type(1):before{background-position:-5px -65px}
+.footTop .wrap span:nth-of-type(2):before{background-position:-85px -65px}
+.footTop .wrap span:nth-of-type(3):before{background-position:-165px -65px}
+.footTop .wrap span:nth-of-type(4):before{background-position:-245px -65px}
 .footMain{width:100%;background:#4A4F58}
 .footLink{display:table;padding:12px 0}
 .footLink>div{display:table-cell;width:171px}

src/main/resources/static/css/base/init.css

@@ -10,13 +10,19 @@ a:focus{text-decoration:none;outline:none;}
 a:hover{color:#E15616;}
 img{border:none;vertical-align:middle;}
 button{border:none;outline:none;}
-input:focus {box-shadow: 0 0 5px #003399;}
+input{outline:none;box-shadow:none;}
 pre{white-space:pre-wrap;}
 li{list-style-position:inside;}
 header li,footer li{list-style:none;}
 [v-cloak]{display:none;}
 table{border-collapse: collapse;}
 table,td,th{border: 1px solid #EBECEF;}
+/* checkbox */
+input[type=checkbox]{width:16px;height:16px;text-align:center;outline:none;cursor:copy;}
+input[type=checkbox]:focus{outline:none}
+input[type=checkbox]:after{width:100%;height:100%;top:0px;content:" ";background-color:#FFF;color:#E15616;display:inline-block;visibility:visible;border:1px solid #b8bfca;border-radius:2px;}
+input[type=checkbox]:checked:after{content:"\2713";font-size:14px;font-weight:bold;background-color:#E15616;color:#FFF}
+input[type=checkbox][disabled=disabled]:after{width:100%;height:100%;top:0;content:" ";background-color:#f1f0f5;color:#FFF;display:inline-block;visibility:visible;border-radius:2px;border:1px solid #B8BFCA}
 /* 定义动画效果 */
 @-webkit-keyframes fadeInDown{
   from{opacity:0;-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}
@@ -26,5 +32,3 @@ table,td,th{border: 1px solid #EBECEF;}
   from{opacity:0;-webkit-transform:translate3d(0,-15px,0);transform:translate3d(0,-15px,0);}
   to{opacity:1;-webkit-transform:none;transform:none;}
 }
-
-

src/main/resources/static/css/shopping/cart.css

@@ -0,0 +1,88 @@
+@charset "utf-8";
+li{list-style:none}
+/**
+ * PC端
+ */
+@media screen and (min-width:768px){
+.loading{box-sizing:border-box;padding:200px 0;text-align:center}
+.empty{box-sizing:border-box;padding:100px 0;text-align:center;color:#4A4F58;line-height:30px;font-size:16px}
+.empty img{width:180px;height:180px}
+.empty a{color:#E15616}
+.pageTitle{height:44px;line-height:44px;padding-top:16px}
+.pageTitle h1{color:#2D3036;font-size:16px;font-weight:bold;float:left}
+.pageTitle .step{float:right;color:#9AA5B5;font-size:14px;height:44px;line-height:44px}
+.pageTitle .step span{display:inline-block;height:20px;line-height:20px;vertical-align:middle;position:relative;padding-left:55px}
+.pageTitle .step span:before{font-style:normal;font-size:20px;vertical-align:text-top;margin-right:5px}
+.pageTitle .step span:nth-of-type(1):before{content:'\2776'}
+.pageTitle .step span:nth-of-type(2):before{content:'\2777'}
+.pageTitle .step span:nth-of-type(3):before{content:'\2778'}
+.pageTitle .step span:after{position:absolute;left:0;top:10px;content:'';width:50px;border-top:1px solid #9AA5B5}
+.pageTitle .step span:first-child{padding-left:0}
+.pageTitle .step span:first-child:after{display:none}
+.pageTitle .step span.on{color:#E15616}
+.listWrap{width:1184px}
+.listWrap .cartTit,.listWrap .supplierItem{box-sizing:border-box;padding:0 14px;text-align:center;width:100%;background:#FFF;margin-bottom:8px;box-shadow:0px 3px 6px rgba(0,0,0,0.07)}
+.listWrap .supplierItem.disable{background:#f1f0f5}
+.listWrap .cartTit,.listWrap .supplierInfo{height:40px;line-height:40px}
+.listWrap .cartTit{color:#627386}
+.listWrap .supplierItem,.listWrap .supplierInfo{color:#22272E}
+.listWrap .supplierInfo{border-top:1px solid #F7F7F7}
+.listWrap .cartItem{width:100%;height:100px;line-height:100px;margin-top:10px;padding:14px 0}
+.listWrap .cartItem:first-child{margin-top:0}
+.listWrap .cartItem .c2{text-align:left}
+.listWrap .cartItem>div>*{vertical-align:middle}
+.listWrap .c0{float:left;width:34px;text-align:left}
+.listWrap .c1{float:left;width:100px}
+.listWrap .c2{float:left;width:405px}
+.listWrap .c3{float:left;width:165px}
+.listWrap .c4{float:left;width:165px}
+.listWrap .c5{float:left;width:165px}
+.listWrap .c6{float:right;width:120px}
+.listWrap .c10{float:left;width:495px}
+.listWrap .supplierInfo .c2{text-align:left;width:800px}
+.listWrap .check{width:18px;height:18px;line-height:18px;vertical-align:middle}
+.listWrap .image{display:block;width:100px;height:100px;border:1px solid #F7F7F7}
+.listWrap .name{line-height:20px;display:inline-block;max-height:100px;overflow:hidden;vertical-align:middle}
+.listWrap .cartItem .name{padding-left:14px}
+.listWrap .c6 em,.listWrap .c10 em{color:#f94b4b;font-style:normal}
+.listWrap .number{display:inline-block;width:120px;line-height:24px;height:24px;box-sizing:border-box;border:1px solid #FFE6DC;border-radius:2px;font-size:0;white-space:nowrap;text-align:center;overflow:hidden;vertical-align:top}
+.listWrap .number>em{display:inline-block;width:24px;height:22px;background:#FFE6DC;font-size:20px;font-style:normal;line-height:20px;vertical-align:top;cursor:pointer}
+.listWrap .number input{width:70px;border:none;line-height:22px;font-size:14px;vertical-align:top;text-align:center;color:#E15616}
+.listWrap .del{font-size:20px;position:relative;cursor:pointer;display:inline-block;height:40px;line-height:40px;width:30px}
+.listWrap .del .tips{position:absolute;top:40px;left:4px;opacity:0;white-space:nowrap;background-color:#f94b4b;color:#FFF;border-radius:3px;line-height:30px;font-size:12px;text-align:center;display:inline-block;transition:all .8s;padding:0 10px;font-style:normal}
+.listWrap .del .tips:before{content:"";width:10px;height:10px;background:#f94b4b;position:absolute;top:-3px;left:6px;transform:rotate(45deg)}
+.listWrap .del:hover{color:#f94b4b}
+.listWrap .del:hover .tips{opacity:1}
+.listWrap .price{position:relative;display:inline-block;height:40px;line-height:40px;}
+.listWrap .price em{font-style:normal;}
+.listWrap .price .tag{position:absolute;top:-10px;left:0;padding:0 6px;height:18px;line-height:18px;background-color:#1890f9;background-image:-webkit-linear-gradient(90deg,#1890f9 0%,#93cdff 100%);background-image:-moz-linear-gradient(90deg,#1890f9 0%,#93cdff 100%);background-image:-ms-linear-gradient(90deg,#1890f9 0%,#93cdff 100%);background-image:-o-linear-gradient(90deg,#1890f9 0%,#93cdff 100%);background-image:linear-gradient(90deg,#1890f9 0%,#93cdff 100%);border-radius:9px;font-size:12px;color:#FFF;font-style:normal}
+.listWrap .price .info .i{display:inline-block;vertical-align:middle;width:14px;height:14px;line-height:14px;text-align:center;font-size:12px;font-style:normal;background-color:#1890f9;border-radius:7px;color:#FFF;cursor:help}
+.listWrap .price .ladder{position:absolute;background:#fff;box-shadow:0 3px 6px 0 #d7dfec;border-radius:2px;line-height:42px;left:0;top:32px;z-index:9;transition:all .8s;display:none}
+.listWrap .price .info .i:hover+.ladder{display:block}
+.listWrap .price .ladder em{white-space:nowrap}
+.listWrap .price .ladder i{font-style:normal;display:inline-block;width:120px;text-align:center}
+.listWrap .price .ladder .t{color:#627386}
+.listWrap .price .ladder .p{color:#f94b4b}
+.invalidTit{height:44px;line-height:44px;padding-top:16px;font-size:16px}
+.invalidTit .tit{color:#22272e;float:left}
+.invalidTit .delAll{color:#e15616;float:right}
+.invalidTit .tit em{font-style:normal;color:#e15616}
+
+
+
+
+
+
+}
+
+/**
+* 移动端
+*/
+@media screen and (max-width:768px){
+    .loading{box-sizing:border-box;padding:20vw 0;text-align:center}
+    .empty{box-sizing:border-box;padding:15vw 0;text-align:center;color:#4A4F58;line-height:8vw;font-size:3.4vw}
+    .empty img{width:40vw;height:40vw}
+    .empty a{color:#E15616}
+
+}
+

src/main/resources/static/js/base.js

@@ -46,7 +46,7 @@ var headCart = new Vue({
     methods: {},
     created: function () {
         var _self = this;
-        $.getJSON("/header/cart?userId=2892").done(function (r) {
+        $.getJSON("/header/cart?userId=10342").done(function (r) {
             if (r.code === 0 && r.data) {
                 _self.cartList = r.data;
                 _self.cartCount = r.data.length;
@@ -340,3 +340,17 @@ function setProductPrice(productList, userId, callback){
         return callback();
     })
 }
+
+/**
+ * 至少保留两位小数
+ * 10 => "10.00"
+ * @param {number} num
+ */
+function toFloat(num) {
+  var temp = String(num).split('.');
+  if (temp.length === 1 || temp[1].length < 2) {
+    return Number(num).toFixed(2);
+  }else{
+    return Number(num);
+  }
+}

src/main/resources/static/js/shopping/cart.js

@@ -0,0 +1,33 @@
+var shoppingCart = new Vue({
+    el: "#shoppingCart",
+    data: {
+        userId: 10342,
+        listLoading: true,
+        listData: [],
+        invalidData: [],
+    },
+    computed: {
+
+    },
+    methods: {
+        getCartLists: function () {
+            var _self = this;
+            if(this.userId ===0){return;}
+            $.getJSON("/cart/list",{userId: this.userId}).done(function (r) {
+                if (r.code === 0 && r.data) {
+                    _self.listData = r.data.list;
+                    _self.invalidData = r.data.invalid;
+                }
+                _self.listLoading = false;
+            });
+        },
+
+    },
+    created: function () {
+        // 获取列表数据
+        this.getCartLists();
+    },
+    mounted: function () {
+        var _self = this;
+    }
+});

src/main/resources/templates/components/headLink.html

@@ -1,5 +1,5 @@
 <meta charset="UTF-8">
-    <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+    <meta name="viewport" content="width=device-width, account-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta name="apple-mobile-web-app-capable" content="yes">
     <meta name="apple-mobile-web-app-status-bar-style" content="black">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">

src/main/resources/templates/components/header.html

@@ -85,7 +85,7 @@
                         <div class="cartBtm">
                             <span>共计：<em v-text="productCount"></em> 件</span>
                             <span>合计：<em v-text="parseFloat(priceTotal).toFixed(2)"></em> 元</span>
-                            <a class="btn" href="javascript:void(0)">去购物车结算</a>
+                            <a class="btn" href="/shopping/cart.html">去购物车结算</a>
                         </div>
                     </div>
                     <div v-else class="empty">

src/main/resources/templates/error/404.html

@@ -3,7 +3,7 @@
 <head>
     <meta charset="UTF-8">
     <meta name="viewport"
-          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
+          content="width=device-width, account-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <meta http-equiv="X-UA-Compatible" content="ie=edge">
     <title>Document</title>
 </head>

src/main/resources/templates/instrument/list.html

@@ -20,8 +20,7 @@
     <div v-else-if="!listLoading && (!listData || listData.length==0)" class="empty">
         <img src="/img/common/empty.png">
         <div class="msg">
-            <p>搜索引擎“感冒”了，没有找到你搜索的商品哦！</p>
-            <p><a href="/">点这里吧</a>，采美还你一片绿洲~</p>
+            <p>暂未找到你搜索的项目仪器，快去<a href="/instrument/list.html">项目仪器列表</a>看看吧~</p>
         </div>
     </div>
     <!--列表-->
@@ -54,6 +53,6 @@
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/footLink"></template>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/instrument/list.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/instrument/cart.js(v=${version})}"></script>
 </body>
 </html>

src/main/resources/templates/product/list.html

@@ -67,8 +67,7 @@
     <div v-else-if="!listLoading && (!listData || listData.length==0)" class="empty">
         <img src="/img/common/empty.png">
         <div class="msg">
-            <p>搜索引擎“感冒”了，没有找到你搜索的商品哦！</p>
-            <p><a href="/">点这里吧</a>，采美还你一片绿洲~</p>
+            <p>暂未找到你搜索的商品，去<a href="/">商城</a>，逛逛吧~</p>
         </div>
     </div>
     <template v-else>
@@ -153,6 +152,6 @@
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/footLink"></template>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/product/list.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/product/cart.js(v=${version})}"></script>
 </body>
 </html>

src/main/resources/templates/shopping/cart.html

@@ -0,0 +1,126 @@
+<!DOCTYPE html>
+<html lang="zh-CN" xmlns:th="https://www.thymeleaf.org" xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance"
+      xsi:schemaLocation="https://www.thymeleaf.org ">
+<head>
+    <title>采美365网-购物车列表</title>
+    <template th:replace="components/headLink"></template>
+    <link th:href="@{/css/shopping/cart.css(v=${version})}" rel="stylesheet" type="text/css">
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!-- 购物车列表 -->
+<div id="shoppingCart">
+    <!--loading-->
+    <div v-if="listLoading" class="loading">
+        <img src="/img/base/loading.gif">
+    </div>
+    <!--数据为空-->
+    <div v-else-if="!listLoading && (!listData || listData.length==0)" class="empty">
+        <img src="/img/common/empty.png">
+        <div class="msg">
+            <p>购物车空空如也，快去<a href="/">商城</a>，逛逛吧~</p>
+        </div>
+    </div>
+    <!--列表-->
+    <div v-else class="wrap">
+        <div class="pageTitle">
+            <h1>我的购物车</h1>
+            <div class="step">
+                <span class="on">我的购物车</span>
+                <span>核对订单信息</span>
+                <span>成功提交订单</span>
+            </div>
+        </div>
+        <div class="listWrap">
+            <div class="cartTit clear">
+                <div class="c0"><input class="check" type="checkbox"></div>
+                <div class="c1">全选</div>
+                <div class="c2">商品信息</div>
+                <div class="c3">优惠价</div>
+                <div class="c4">数量</div>
+                <div class="c5">小计（元）</div>
+                <div class="c6">操作</div>
+            </div>
+            <div class="supplierItem" v-for="supplier in listData">
+                <div class="cartItem clear"  v-for="cart in supplier.cartList">
+                    <div class="c0"><input class="check" type="checkbox" name="cartList"></div>
+                    <div class="c1"><a :href="'/product/detail.html?id='+cart.productId" target="_blank">
+                        <img class="image" :src="cart.image">
+                    </a></div>
+                    <div class="c2">
+                        <a class="name" :href="'/product/detail.html?id='+cart.productId" v-text="cart.name" target="_blank"></a>
+                    </div>
+                    <div class="c3">
+                        <span class="price">
+                            <em v-text="'¥'+toFloat(cart.price)"></em>
+                            <span v-if="cart.ladderFlag" class="info">
+                                <i class="tag">阶梯价格</i>
+                                <i class="i">?</i>
+                                <span class="ladder">
+                                    <em class="t"><i>价格</i><i>批量</i></em>
+                                    <em v-for="l in cart.ladderPrices">
+                                        <i class="p">¥{{toFloat(l.buyPrice)}}</i>
+                                        <i v-if="l.maxNum>0">{{l.buyNum+' ~ '+l.maxNum}}</i>
+                                        <i v-else>≥ {{l.buyNum}}</i>
+                                    </em>
+                                </span>
+                            </span>
+                        </span>
+                    </div>
+                    <div class="c4">
+                        <span class="number">
+                            <em class="sub">-</em>
+                            <input type="number" :value="cart.number">
+                            <em class="add">+</em>
+                        </span>
+                        <input type="hidden" :value="cart.step"></div>
+                    <div class="c5">
+                        <span v-text="'¥'+toFloat(cart.price*cart.number)"></span>
+                    </div>
+                    <div class="c6"><span class="del">×<em class="tips">删除</em></span></div>
+                </div>
+                <div class="supplierInfo">
+                    <div class="c0"><input class="check" type="checkbox"></div>
+                    <div class="c2"><a class="name" :href="'/supplier/index.html?id='+supplier.id" v-text="supplier.name" target="_blank"></a></div>
+                    <div class="c6"><span>合计：<em v-text="'¥'+toFloat(supplier.totalPrice)"></em></span></div>
+                </div>
+            </div>
+            <div class="invalidTit">
+                <div class="tit">失效商品 <em v-text="invalidData.length"></em> 件</div>
+                <span class="delAll">清空失效商品</span>
+            </div>
+            <div class="supplierItem disable" v-for="cart in invalidData">
+                <div class="cartItem clear">
+                    <div class="c0"></div>
+                    <div class="c1"><a :href="'/product/detail.html?id='+cart.productId" target="_blank">
+                        <img class="image" :src="cart.image">
+                    </a></div>
+                    <div class="c2">
+                        <a class="name" :href="'/product/detail.html?id='+cart.productId" v-text="cart.name" target="_blank"></a>
+                    </div>
+                    <div class="c10">
+                        <em v-if="cart.status==1">商品已丢失</em>
+                        <em v-else-if="cart.status==2">商品已停售</em>
+                        <em v-else-if="cart.status==3">商品已下架</em>
+                        <em v-else-if="cart.status==4">商品已售罄</em>
+                        <em v-else-if="cart.status==5">价格仅会员可见，您不能购买</em>
+                        <em v-else-if="cart.status==6">未公开价格</em>
+                        <em v-else-if="cart.status==7">库存不足</em>
+                        <em v-else>商品已失效</em>
+                    </div>
+                    <div class="c6"><span class="del">×<em class="tips">删除</em></span></div>
+                </div>
+            </div>
+        </div>
+    </div>
+
+</div>
+
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/footLink"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/shopping/cart.js(v=${version})}"></script>
+</body>
+</html>

src/main/resources/templates/supplier/list.html

@@ -20,8 +20,7 @@
     <div v-else-if="!listLoading && (!listData || listData.length==0)" class="empty">
         <img src="/img/common/empty.png">
         <div class="msg">
-            <p>搜索引擎“感冒”了，没有找到你搜索的商品哦！</p>
-            <p><a href="/">点这里吧</a>，采美还你一片绿洲~</p>
+            <p>暂未找到你搜索的供应商，快去<a href="/supplier/list.html">供应商列表</a>看看吧~</p>
         </div>
     </div>
     <!--列表-->
@@ -75,6 +74,6 @@
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>
 <template th:replace="components/footLink"></template>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/supplier/list.js(v=${version})}"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/supplier/cart.js(v=${version})}"></script>
 </body>
 </html>