头部购物车

src/main/java/com/caimei/www/controller/BaseController.java

@@ -1,8 +1,8 @@
 package com.caimei.www.controller;
 
-import com.caimei.www.pojo.FriendLink;
-import com.caimei.www.pojo.HelpPageType;
-import com.caimei.www.pojo.TopMenu;
+import com.caimei.www.pojo.base.FriendLink;
+import com.caimei.www.pojo.base.HelpPageType;
+import com.caimei.www.pojo.base.TopMenu;
 import com.caimei.www.service.BaseService;
 import org.springframework.beans.factory.annotation.Autowired;
 import org.springframework.beans.factory.annotation.Value;
@@ -33,11 +33,18 @@ public class BaseController {
         this.baseService = baseService;
     }
 
+	/**
+	 * 页面公共请求
+	 * @param model
+	 * @param request
+	 * @return
+	 */
 	@ModelAttribute
 	public Model init(final Model model, ServerHttpRequest request) {
 		// 判断请求设备
 		List<String> strings = request.getHeaders().get("User-Agent");
-        model.addAttribute("agent", strings.get(0));
+		String agent = strings!=null ? strings.get(0) : "";
+		model.addAttribute("agent", agent);
 	    // 静态文件版本号
 	    model.addAttribute("version", buildTime);
 		// spi服务器地址
@@ -57,5 +64,4 @@ public class BaseController {
 
 		return model;
 	}
-
 }

src/main/java/com/caimei/www/controller/HomeController.java

@@ -81,4 +81,14 @@ public class HomeController extends BaseController {
         return homeService.getHomeTopicData();
     }
 
+    /**
+     * 顶部购物车数据
+     * @return
+     */
+    @GetMapping("/header/cart")
+    @ResponseBody
+    public JsonModel getHeadCarts(Integer userId) {
+        return homeService.getHeaderCart(userId);
+    }
+
 }

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

@@ -1,6 +1,6 @@
 package com.caimei.www.mapper;
 
-import com.caimei.www.pojo.*;
+import com.caimei.www.pojo.base.*;
 import org.apache.ibatis.annotations.Mapper;
 import org.apache.ibatis.annotations.Param;
 

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

@@ -3,7 +3,7 @@ package com.caimei.www.mapper;
 import com.caimei.www.pojo.HomeFloor;
 import com.caimei.www.pojo.ImageLink;
 import com.caimei.www.pojo.ProductList;
-import com.caimei.www.pojo.SubMenu;
+import com.caimei.www.pojo.base.HeadCart;
 import org.apache.ibatis.annotations.Mapper;
 import org.apache.ibatis.annotations.Param;
 
@@ -53,4 +53,9 @@ public interface HomeDao {
      * type3优质供应商
      */
     List<ImageLink> getSuppliersTopData();
+
+    /**
+     * 顶部购物车数据
+     */
+    List<HeadCart> getHeadCarts(Integer userId);
 }

src/main/java/com/caimei/www/pojo/FriendLink.java → src/main/java/com/caimei/www/pojo/base/FriendLink.java

@@ -1,4 +1,4 @@
-package com.caimei.www.pojo;
+package com.caimei.www.pojo.base;
 
 import lombok.Data;
 

src/main/java/com/caimei/www/pojo/base/HeadCart.java

@@ -0,0 +1,19 @@
+package com.caimei.www.pojo.base;
+
+import lombok.Data;
+
+/**
+ * 顶部购物车数据（简洁数据）
+ *
+ * @author : Charles
+ * @date : 2020/7/1
+ */
+@Data
+public class HeadCart {
+	private Integer id;
+	private String name;
+	private String image;
+	private Double price;
+	private String unit;
+	private Integer number;
+}

src/main/java/com/caimei/www/pojo/HelpPage.java → src/main/java/com/caimei/www/pojo/base/HelpPage.java

@@ -1,4 +1,4 @@
-package com.caimei.www.pojo;
+package com.caimei.www.pojo.base;
 
 import lombok.Data;
 

src/main/java/com/caimei/www/pojo/HelpPageType.java → src/main/java/com/caimei/www/pojo/base/HelpPageType.java

@@ -1,4 +1,4 @@
-package com.caimei.www.pojo;
+package com.caimei.www.pojo.base;
 
 import lombok.Data;
 

src/main/java/com/caimei/www/pojo/SubMenu.java → src/main/java/com/caimei/www/pojo/base/SubMenu.java

@@ -1,4 +1,4 @@
-package com.caimei.www.pojo;
+package com.caimei.www.pojo.base;
 
 import lombok.Data;
 

src/main/java/com/caimei/www/pojo/TopMenu.java → src/main/java/com/caimei/www/pojo/base/TopMenu.java

@@ -1,4 +1,4 @@
-package com.caimei.www.pojo;
+package com.caimei.www.pojo.base;
 
 import lombok.Data;
 

src/main/java/com/caimei/www/service/BaseService.java

@@ -1,8 +1,9 @@
 package com.caimei.www.service;
 
-import com.caimei.www.pojo.FriendLink;
-import com.caimei.www.pojo.HelpPageType;
-import com.caimei.www.pojo.TopMenu;
+import com.caimei.module.base.entity.bo.JsonModel;
+import com.caimei.www.pojo.base.FriendLink;
+import com.caimei.www.pojo.base.HelpPageType;
+import com.caimei.www.pojo.base.TopMenu;
 
 import java.util.List;
 
@@ -33,4 +34,5 @@ public interface BaseService {
      * 友情链接
      */
     List<FriendLink> getFriendLinks();
+
 }

src/main/java/com/caimei/www/service/HomeService.java

@@ -36,4 +36,10 @@ public interface HomeService {
      * 首页专题数据
      */
     JsonModel getHomeTopicData();
+
+    /**
+     * 顶部购物车数据
+     * @return
+     */
+    JsonModel getHeaderCart(Integer userId);
 }

src/main/java/com/caimei/www/service/impl/BaseServiceImpl.java

@@ -1,7 +1,8 @@
 package com.caimei.www.service.impl;
 
+import com.caimei.module.base.entity.bo.JsonModel;
 import com.caimei.www.mapper.BaseDao;
-import com.caimei.www.pojo.*;
+import com.caimei.www.pojo.base.*;
 import com.caimei.www.service.BaseService;
 import org.springframework.cache.annotation.Cacheable;
 import org.springframework.stereotype.Service;
@@ -74,4 +75,5 @@ public class BaseServiceImpl implements BaseService {
     public List<FriendLink> getFriendLinks() {
         return baseDao.getFriendLinks();
     }
+
 }

src/main/java/com/caimei/www/service/impl/HomeServiceImpl.java

@@ -5,7 +5,7 @@ import com.caimei.www.mapper.HomeDao;
 import com.caimei.www.pojo.HomeFloor;
 import com.caimei.www.pojo.ImageLink;
 import com.caimei.www.pojo.ProductList;
-import com.caimei.www.pojo.SubMenu;
+import com.caimei.www.pojo.base.HeadCart;
 import com.caimei.www.service.HomeService;
 import com.caimei.www.utils.PriceUtil;
 import org.springframework.cache.annotation.Cacheable;
@@ -100,4 +100,12 @@ public class HomeServiceImpl implements HomeService {
         return JsonModel.newInstance().success(topicMap);
     }
 
+    /**
+     * 顶部购物车数据
+     */
+    @Override
+    public JsonModel getHeaderCart(Integer userId) {
+        List<HeadCart> headCarts = homeDao.getHeadCarts(userId);
+        return JsonModel.newInstance().success(headCarts);
+    }
 }

src/main/resources/mapper/BaseMapper.xml

@@ -6,7 +6,7 @@
         where validFlag=1
         order by sortIndex desc
     </select>
-    <select id="getTopMenus" resultType="com.caimei.www.pojo.TopMenu">
+    <select id="getTopMenus" resultType="com.caimei.www.pojo.base.TopMenu">
 		select
             id,
             navigationName as name,
@@ -18,7 +18,7 @@
 		order by sort desc,createDate desc
 		limit 7
     </select>
-    <select id="getSubMenus" resultType="com.caimei.www.pojo.SubMenu">
+    <select id="getSubMenus" resultType="com.caimei.www.pojo.base.SubMenu">
 		select
             id,
             firstNavigationId as topId,
@@ -31,13 +31,13 @@
 		and firstNavigationId = #{topId}
 		order by sort desc,createDate desc
     </select>
-    <select id="getHelpPageTypes" resultType="com.caimei.www.pojo.HelpPageType">
+    <select id="getHelpPageTypes" resultType="com.caimei.www.pojo.base.HelpPageType">
 		SELECT
 		c_helpPageTypeID as id,
 		c_helpPageTypeName as name
 		FROM c_helpPageType
     </select>
-    <select id="getHelpPagesByType" resultType="com.caimei.www.pojo.HelpPage">
+    <select id="getHelpPagesByType" resultType="com.caimei.www.pojo.base.HelpPage">
 		select
             helpPageID as id,
             helpPageTypeID as typeId,
@@ -47,7 +47,7 @@
 		and helpPageTypeID = #{typeId}
 		order by sortIndex
     </select>
-    <select id="getFriendLinks" resultType="com.caimei.www.pojo.FriendLink">
+    <select id="getFriendLinks" resultType="com.caimei.www.pojo.base.FriendLink">
 		select id,name,link
 		from new_page_friendship_link
 		where delFlag = 0 order by id

src/main/resources/mapper/HomeMapper.xml

@@ -91,5 +91,21 @@
 		where delFlag = 0 and wwwEnabledStatus = 1
 		order by sort
 	</select>
+    <select id="getHeadCarts" resultType="com.caimei.www.pojo.base.HeadCart">
+		select
+			p.productID as id,
+			p.`name` as `name`,
+			p.mainImage as image,
+			p.price1 as price,
+			p.unit as unit,
+			c.productCount as number
+		from cm_cart c
+		left join product p on c.productID=p.productID
+		where p.validFlag='2'
+		and c.userID = #{userId}
+		and p.price1TextFlag != '1'
+        and p.stock != '0'
+        and p.stock <![CDATA[ >= ]]> c.productCount
+	</select>
 
 </mapper>

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

@@ -4,6 +4,11 @@
 */
 body{min-width:1200px;}
 .h5Only{display:none;}
+/*定义滚动条样式*/
+::-webkit-scrollbar{width:10px;height:10px;background-color:#F6F6F6}
+::-webkit-scrollbar-track{-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,0.1);border-radius:2px;background-color:#F6F6F6}
+::-webkit-scrollbar-thumb{border-radius:2px;-webkit-box-shadow:inset 0 0 6px rgba(0,0,0,.1);background-color:#93979F}
+/* 自定义下拉框 */
 .jqSelect{position:relative;width:100px;height:32px;line-height:32px;border:1px solid #666;border-radius:2px;cursor:pointer}
 .jqSelect:before{content:'\276F';font-weight: normal;position: absolute;right: 10px;top: 0;transform: rotate(90deg);}
 .jqSelect select{display:none}
@@ -44,14 +49,30 @@ body{min-width:1200px;}
 .baseHeadCenter .hotword{color:#93979F;font-size:12px;line-height:24px}
 .baseHeadCenter .hotword a{color:#93979F;padding:0 5px}
 .baseHeadCenter .hotword a:hover{color:#E15616}
+/* 购物车 */
 .baseHeadCenter .headCart{width:184px;height:44px;float:right;position:relative;}
 .baseHeadCenter .headCart .addBtn{display:inline-block;width:100%;height:44px;line-height:44px;box-sizing:border-box;border:1px solid #FFE6DC;position:relative;color:#333;font-size:14px;text-align:center;white-space:nowrap}
 .baseHeadCenter .headCart .addBtn:before{display:inline-block;width:20px;height:20px;vertical-align:middle;background-position:-30px -1px;margin-right:2px}
-.baseHeadCenter .cartData{display:none;position:absolute;right:0;top:44px;width:360px;box-sizing:border-box;padding:10px;background:#FFF;z-index:999;box-shadow:0px 3px 6px rgba(45,48,54,0.17);border-radius:2px}
-.baseHeadCenter .cartData .empty{text-align:center;font-size:16px;line-height:26px;padding:62px 0}
+.baseHeadCenter .headCart .addBtn em{color:#E15616;font-style:normal;margin-left:4px;}
+.baseHeadCenter .cartData{display:none;position:absolute;right:0;top:44px;width:360px;box-sizing:border-box;background:#FFF;z-index:999;box-shadow:0px 3px 6px rgba(45,48,54,0.17);border-radius:2px}
+.baseHeadCenter .cartData .empty{padding:72px 10px;text-align:center;font-size:16px;line-height:26px;}
 .baseHeadCenter .cartData .empty a{color:#E15616;margin:0 5px;border-bottom:1px solid #e15616}
 .baseHeadCenter .cartData .empty img{display:block;margin:0 auto 28px auto;width:160px;height:136px}
+.baseHeadCenter .cartMain{max-height:424px;overflow:auto}
+.baseHeadCenter .cartItem{width:100%;height:106px;box-sizing:border-box;padding:10px 10px 10px 106px;position:relative}
+.baseHeadCenter .cartItem img{position:absolute;left:10px;top:10px;width:86px;height:86px;box-shadow:0 0 2px #eee}
+.baseHeadCenter .cartItem span{display:block;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;width:100%;line-height:24px}
+.baseHeadCenter .cartItem span.unit{color:#93979F}
+.baseHeadCenter .cartItem span.price{color:#F94B4B;margin-top:14px}
+.baseHeadCenter .cartItem .delBtn{position:absolute;right:10px;bottom:0;width:30px;line-height:30px;text-align:center;font-size:0}
+.baseHeadCenter .cartItem .delBtn:before{content:'\2715';color:#93979F;font-size:14px}
+.baseHeadCenter .cartBtm{border-top:1px solid #EBECEF;box-sizing:border-box;height:60px;line-height:24px;padding:6px 10px;position:relative}
+.baseHeadCenter .cartBtm .btn{position:absolute;right:10px;top:10px;height:40px;line-height:40px;border-radius:2px;padding:0 20px;background:#E15616;color:#FFF;font-size:14px}
+.baseHeadCenter .cartBtm .btn:hover{opacity:.8}
+.baseHeadCenter .cartBtm>span{display:block}
+.baseHeadCenter .cartBtm>span em{font-style:normal;color:#F94B4B}
 .baseHeadCenter .headCart:hover .cartData{display:block;-webkit-animation:fadeInDown .4s;animation:fadeInDown .4s}
+/* 导航栏 */
 .baseTopNav{position:relative;height:44px;border-top:1px solid #E15616}
 .baseTopNav>.wrap{height:44px;box-sizing:border-box;position:relative;z-index:991;}
 .baseTopNav .home,.baseTopNav .classBtn,.baseTopNav .navBox{float:left}

src/main/resources/static/css/index/index.h5.css

@@ -2,7 +2,6 @@
 /**
 * 移动端
 */
-
 li{list-style:none;}
 /* 轮播 */
 #swiper-container{width:100%;height:48vw;overflow:hidden;position:relative}

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

@@ -1,24 +1,23 @@
 @charset "utf-8";
-
 /**
  * PC端
  */
 li{list-style:none;}
-    /* 轮播 */
-    #swiper-container{width:100%;height:510px;min-width:1200px;overflow:hidden;position:relative}
-    #swiper-container .swiper-wrapper{position:relative;height:100%;z-index:0}
-    #swiper-container .swiper-wrapper li{position:relative;zoom:1;vertical-align:middle;width:100%;overflow:hidden}
-    #swiper-container .swiper-wrapper img{width:auto;height:510px;display:block;margin-left:50%;-o-transform:translateX(-50%);-ms-transform:translateX(-50%);-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%)}
-    #swiper-container .swiper-button-prev,#swiper-container .swiper-button-next{position:absolute;top:50%;margin-top:-34px;display:block;width:44px;height:68px;line-height:68px;background:rgba(255,230,220,.2);color:#FFF;font-size:40px;text-align:center;border-radius:2px}
-    #swiper-container .swiper-button-prev{left:5px;right:auto}
-    #swiper-container .swiper-button-next{left:auto;right:5px}
-    #swiper-container .swiper-button-prev:after{content:"\276C"}
-    #swiper-container .swiper-button-next:after{content:"\276D"}
-    #swiper-container .swiper-button-prev:hover,#swiper-container .swiper-button-next:hover{background:rgba(255,230,220,.6)}
-    #swiper-container .swiper-pagination{width:100%;height:14px;position:absolute;left:0;bottom:15px;z-index:1;text-align:center;font-size:0}
-    #swiper-container .swiper-pagination span{display:inline-block;border:5px solid transparent;cursor:pointer}
-    #swiper-container .swiper-pagination span:before{content:"";display:inline-block;width:14px;height:4px;background:rgba(255,255,255,.4);border-radius:2px}
-    #swiper-container .swiper-pagination span.on:before{width:28px;background:#fff}
+/* 轮播 */
+#swiper-container{width:100%;height:510px;min-width:1200px;overflow:hidden;position:relative}
+#swiper-container .swiper-wrapper{position:relative;height:100%;z-index:0}
+#swiper-container .swiper-wrapper li{position:relative;zoom:1;vertical-align:middle;width:100%;overflow:hidden}
+#swiper-container .swiper-wrapper img{width:auto;height:510px;display:block;margin-left:50%;-o-transform:translateX(-50%);-ms-transform:translateX(-50%);-moz-transform:translateX(-50%);-webkit-transform:translateX(-50%);transform:translateX(-50%)}
+#swiper-container .swiper-button-prev,#swiper-container .swiper-button-next{position:absolute;top:50%;margin-top:-34px;display:block;width:44px;height:68px;line-height:68px;background:rgba(255,230,220,.2);color:#FFF;font-size:40px;text-align:center;border-radius:2px}
+#swiper-container .swiper-button-prev{left:5px;right:auto}
+#swiper-container .swiper-button-next{left:auto;right:5px}
+#swiper-container .swiper-button-prev:after{content:"\276C"}
+#swiper-container .swiper-button-next:after{content:"\276D"}
+#swiper-container .swiper-button-prev:hover,#swiper-container .swiper-button-next:hover{background:rgba(255,230,220,.6)}
+#swiper-container .swiper-pagination{width:100%;height:14px;position:absolute;left:0;bottom:15px;z-index:1;text-align:center;font-size:0}
+#swiper-container .swiper-pagination span{display:inline-block;border:5px solid transparent;cursor:pointer}
+#swiper-container .swiper-pagination span:before{content:"";display:inline-block;width:14px;height:4px;background:rgba(255,255,255,.4);border-radius:2px}
+#swiper-container .swiper-pagination span.on:before{width:28px;background:#fff}
 
 
 

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

@@ -25,6 +25,48 @@ var mainClassify = new Vue({
             }
         });
     }
+});
+var headCart = new Vue({
+    el: '#headCart',
+    data: {
+        cartList: [],
+        cartCount: 0,
+        productCount: 0,
+        priceTotal: 0
+    },
+    methods: {},
+    created: function () {
+        var _self = this;
+        $.getJSON("/header/cart?userId=1050").done(function (r) {
+            if (r.code === 0 && r.data) {
+                _self.cartList = r.data;
+                _self.cartCount = r.data.length;
+                r.data.map(function(item){
+                    _self.productCount += item.number;
+                    _self.priceTotal += item.number*item.price;
+                });
+            }
+        });
+    }
+});
+$(function(){
+    $(window).resize(function() {
+        var flag = (isPC && $(window).width()<=768) || (!isPC && $(window).width()>768)
+        if(flag){
+            window.location.reload();
+        }
+    });
+    if(isPC){
+        jqClickShow(".baseHeadTop .cTab", ".baseHeadTop .cShow");
+        jqSelect(".jqSelect");
+        jqHoverShow(".classBtn", "#mainClassify");
+    }else{
+        jqMultipleShow("click", ".footLink .list", ".tab", ".con");
+    }
+
+
+
+
 });
 function jqClickShow(tab, con){
     $("body").on("click", tab, function(e){
@@ -106,24 +148,3 @@ function jqSelect(selectBox){
 }
 
 
-
-
-$(function(){
-    $(window).resize(function() {
-        var flag = (isPC && $(window).width()<=768) || (!isPC && $(window).width()>768)
-        if(flag){
-            window.location.reload();
-        }
-    });
-    if(isPC){
-        jqClickShow(".baseHeadTop .cTab", ".baseHeadTop .cShow");
-        jqSelect(".jqSelect");
-        jqHoverShow(".classBtn", "#mainClassify");
-    }else{
-        jqMultipleShow("click", ".footLink .list", ".tab", ".con");
-    }
-
-
-
-
-});

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

@@ -66,10 +66,28 @@
                     </span>
                 </div>
             </div>
-            <div class="headCart">
-                <a href="javascript:void(0);" class="addBtn icon">购物车</a>
+            <div class="headCart" id="headCart">
+                <a href="javascript:void(0);" class="addBtn icon">购物车<em v-if="cartCount>0" v-text="'('+cartCount+')'"></em></a>
                 <div id="cartData" class="cartData">
-                    <div class="empty">
+                    <div v-if="cartCount>0">
+                        <ul class="cartMain">
+                            <li class="cartItem" v-for="cart in cartList">
+                                <a href="javascript:void(0)">
+                                    <img :src="cart.image" >
+                                    <span class="name" v-text="cart.name"></span>
+                                    <span class="unit" v-text="'包装规格：'+cart.unit"></span>
+                                    <span class="price" v-text="'￥'+parseFloat(cart.price).toFixed(2)"></span>
+                                </a>
+                                <span class="delBtn"></span>
+                            </li>
+                        </ul>
+                        <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>
+                        </div>
+                    </div>
+                    <div v-else class="empty">
                         <img src="/img/base/empty_cart.png">
                         <p>购物车暂无商品</p>
                         <p>请先<a href="javascript:void(0);">登录</a>添加商品到购物车</p>