移动端首页菜单导航

src/main/java/com/caimei/www/pojo/ProductList.java

@@ -15,6 +15,10 @@ public class ProductList {
 	private String image;
 	private Double price;
 	private String unit;
+	/** 价格可见度：0公开价格 1不公开价格 2仅对会员机构公开 */
 	private Integer priceflag;
+	/** 价格等级 */
 	private Integer pricegrade;
+	/** 活动图标 */
+	private Integer actype;
 }

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

@@ -4,6 +4,9 @@ import com.caimei.module.base.entity.bo.JsonModel;
 import com.caimei.www.mapper.BaseDao;
 import com.caimei.www.pojo.base.*;
 import com.caimei.www.service.BaseService;
+import com.caimei.www.utils.ImageUtil;
+import com.caimei.www.utils.PriceUtil;
+import org.springframework.beans.factory.annotation.Value;
 import org.springframework.cache.annotation.Cacheable;
 import org.springframework.stereotype.Service;
 import org.springframework.util.CollectionUtils;
@@ -23,6 +26,8 @@ import java.util.stream.Collectors;
 public class BaseServiceImpl implements BaseService {
     @Resource
     private BaseDao baseDao;
+    @Value("${caimei.wwwDomain}")
+    private String domain;
     /**
      * 获取搜索热门关键字
      */
@@ -48,6 +53,12 @@ public class BaseServiceImpl implements BaseService {
         List<TopMenu> menuList = baseDao.getTopMenus();
         menuList.forEach(item -> {
             List<SubMenu> subList = baseDao.getSubMenus(item.getId());
+            if (subList.size() > 0) {
+                // 设置老图片路径
+                subList.forEach(sub -> {
+                     sub.setImage(ImageUtil.getImageURL("", sub.getImage(), 0, domain));
+                });
+            }
             item.setSubMenus(subList);
         });
         return menuList;

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

@@ -7,7 +7,9 @@ import com.caimei.www.pojo.ImageLink;
 import com.caimei.www.pojo.ProductList;
 import com.caimei.www.pojo.base.HeadCart;
 import com.caimei.www.service.HomeService;
+import com.caimei.www.utils.ImageUtil;
 import com.caimei.www.utils.PriceUtil;
+import org.springframework.beans.factory.annotation.Value;
 import org.springframework.cache.annotation.Cacheable;
 import org.springframework.stereotype.Service;
 
@@ -26,7 +28,8 @@ import java.util.Map;
 public class HomeServiceImpl implements HomeService {
     @Resource
     private HomeDao homeDao;
-
+    @Value("${caimei.wwwDomain}")
+    private String domain;
     /**
      * 首页楼层
      */
@@ -64,10 +67,12 @@ public class HomeServiceImpl implements HomeService {
     public JsonModel getRecommendProducts() {
         List<ProductList> list = homeDao.getRecommendeds();
         if (list.size() > 0) {
-            // 设置价格等级
+            // 设置价格等级 及 老图片路径
             list.forEach(product -> {
                  product.setPricegrade(PriceUtil.getPriceGrade(product.getPrice()));
                  product.setPrice(0d);
+                 product.setImage(ImageUtil.getImageURL("product", product.getImage(), 0, domain));
+
             });
         }
         return JsonModel.newInstance().success(list);

src/main/java/com/caimei/www/utils/ImageUtil.java

@@ -0,0 +1,116 @@
+package com.caimei.www.utils;
+
+import org.springframework.util.StringUtils;
+
+/**
+ * Description
+ *
+ * @author : Charles
+ * @date : 2020/7/1
+ */
+public class ImageUtil {
+
+	public static String getImageURL(String dirName, String src, String domain) {
+		return getImageURL(dirName, src, 0,domain);
+	}
+
+	/***
+	 * 获取图片地址
+	 *
+	 * @param src
+	 *            保存在数据库中的图片文件名
+	 * @param type
+	 *            图片的前缀 (如 type = 200 那么则获取的图片是 200_XXX的图片)
+	 * @param dirName
+	 *            图片保存的文件夹名 如 (league)
+	 * @param domain
+	 * 			   加上域名拼成完整路径
+	 * @return
+	 */
+	public static String getImageURL(String dirName, String src, int type, String domain) {
+
+
+		//正式环境 域名 http --- https处理
+		if (domain != null && !"".equals(domain) && domain.startsWith("http:") && domain.toLowerCase().lastIndexOf("config/beta")== -1 && domain.toLowerCase().lastIndexOf("localhost")== -1) {
+			domain = domain.replace("http:", "https:");
+		}
+
+		//正式环境 图片地址 http --- https处理
+		if(src != null && src.startsWith("https:")){
+			//非正式环境 使用http
+			if (domain !=null && !"".equals(domain) && domain.toLowerCase().lastIndexOf("config/beta")>-1 || domain.toLowerCase().lastIndexOf("localhost")>-1){
+				src = src.replace("https:","http:");
+			}
+			return src;
+		}
+
+		//正式环境 图片地址  http --- https处理
+		if(src != null && src.startsWith("http:")){
+			//非正式环境 使用http
+			if (domain !=null && !"".equals(domain) && domain.toLowerCase().lastIndexOf("config/beta")==-1 && domain.toLowerCase().lastIndexOf("localhost")==-1){
+				src = src.replace("http:","https:");
+			}
+			return src;
+		}
+		type = 0 ;
+		dirName = dirName.trim();
+		if (dirName == null) {dirName = "";}
+		if(src == null || src.equalsIgnoreCase("null")) {src = "";}
+		if (src.indexOf(",") > 0) {
+			String tmp = src;
+			src = tmp.substring(0, tmp.indexOf(","));
+		}
+		String image = "/public/3.0/img/default/none.jpg";
+		if (dirName.equals("user")) {
+			image = "/public/3.0/img/default/HeaderImg.png";
+		} else if (dirName.equals("club")) {
+			image = "/public/3.0/img/default/default_club.jpg";
+		} else if (dirName.equals("shopLogo")) {
+			image = "/public/3.0/img/default/suppliver.jpg";
+		}else if (dirName.equals("caiMeiImage")) {
+			image = "/public/3.0/img/default/caiMeiImage.jpg";
+		}else {
+			image = "/public/3.0/img/default/none.jpg";
+		}
+		if (src != null && !src.equals("")) {
+			if (type != 0 || dirName.equals("product")) {
+				src = src.replace("\\", "/");
+				String srcActual = src;
+				String subDirName = "";
+				int index = src.lastIndexOf("/");
+
+				if (index != -1) {
+					subDirName = src.substring(0, index + 1);
+					srcActual = src.substring(index + 1);
+				}
+				boolean b = src.startsWith("/uploadFile");
+				if(b){
+					image = src;
+				}else{
+					image = "/uploadFile/" + dirName + "/" + subDirName
+							+ (type == 0 ? "" : type + "_") + srcActual;
+				}
+			} else {
+				boolean b = src.startsWith("/uploadFile");
+				if(b){
+					image = src;
+				}else{
+					image = "/uploadFile/" + dirName + "/" + src;
+				}
+			}
+		}else {
+			if(StringUtils.isEmpty(image)) {
+				image = "/public/3.0/img/default/none.jpg";
+			}
+		}
+		return domain + image;
+	}
+
+	public static String getProductImageURL(String image, int type, String domain) {
+		if (image == null) {
+			return getImageURL("product", "", type, domain);
+		}
+		return getImageURL("product", image, type, domain);
+	}
+}
+

src/main/resources/config/beta/application-beta.yml

@@ -47,7 +47,7 @@ logging:
 caimei:
   spiServer: https://spi-b.caimei365.com
   imageDomain: https://img-b.caimei365.com
-
+  wwwDomain: https://www-b.caimei365.com
 
 #DFS配置
 fdfs:

src/main/resources/config/dev/application-dev.yml

@@ -54,6 +54,7 @@ caimei:
 #  spiServer: http://localhost:8008
   spiServer: https://spi-b.caimei365.com
   imageDomain: https://img-b.caimei365.com
+  wwwDomain: https://www-b.caimei365.com
 
 
 #DFS配置

src/main/resources/config/prod/application-prod.yml

@@ -47,6 +47,7 @@ logging:
 caimei:
   spiServer: https://spi.caimei365.com
   imageDomain: https://img.caimei365.com
+  wwwDomain: https://www.caimei365.com
 
 
 #DFS配置

src/main/resources/mapper/HomeMapper.xml

@@ -32,7 +32,8 @@
 			p.mainImage as image,
 			p.price1 as price,
 			p.unit as unit,
-			p.price1TextFlag as priceFlag
+			p.price1TextFlag as priceflag,
+			p.actType as acttype
 		from product p
 		where p.validFlag != 0
 		and p.actFlag = 1

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

@@ -5,9 +5,11 @@
 .baseHeadCenter,#container,.footMain{width: 100%;overflow: hidden;}
 .jqSelect .pc,.baseHeadTop,.baseHeadCenter .headCart,.baseHeadCenter .hotword,.baseTopNav{display:none;}
 .mIcon:before{content:'';display:inline-block;font-size:0;background:url(/img/base/icon_m.png) no-repeat;background-size:75vw auto;transition:all .5s}
-.mf{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;}
-.mfbt{display:-webkit-box;display:-webkit-flex;display:-ms-flexbox;display:flex;-webkit-box-pack:justify;-moz-justify-content:space-between;-webkit-justify-content:space-between;justify-content:space-between;}
-.mfi{-webkit-box-flex:1;-webkit-flex:1;-ms-flex:1;flex:1;}
+.mf{display:-ms-flexbox;display:-webkit-flex;display:flex;}
+.mfbt{display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;}
+.mfc{display:-ms-flexbox;display:-webkit-flex;display:flex;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}
+.mfw{display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
+.mfi{-ms-flex:1;-webkit-flex:1;flex:1;}
 .jqSelect{position:relative;}
 .jqSelect select{box-sizing:border-box;width:24vw;padding: 0 6vw 0 3vw;border-radius:2px;cursor:pointer;position:relative;background:transparent;-webkit-appearance:none;-moz-appearance:none;appearance:none;outline:none;}
 .jqSelect select::-ms-expand{display:none;}

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

@@ -6,21 +6,38 @@ li{list-style:none;}
 /* 轮播 */
 #swiper-container{width:100%;height:48vw;overflow:hidden;position:relative}
 #swiper-container .swiper-wrapper{position:relative;height:100%;z-index:0}
-#swiper-container .swiper-wrapper .swiper-slide{position:relative;zoom:1;vertical-align:middle;width:100%;overflow:hidden;text-align:center;background:#fff;display:-webkit-box;display:-ms-flexbox;display:-webkit-flex;display:flex;-webkit-box-pack:center;-ms-flex-pack:center;-webkit-justify-content:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;-webkit-align-items:center;align-items:center}
+#swiper-container .swiper-wrapper .swiper-slide{position:relative;zoom:1;vertical-align:middle;width:100%;overflow:hidden;text-align:center;background:#fff;}
 #swiper-container .swiper-wrapper img{width:auto;height:48vw;display:block}
 #swiper-container .swiper-button-prev,#swiper-container .swiper-button-next{display:none}
 #swiper-container .swiper-pagination{width:100%;height:2.6vw;position:absolute;left:0;bottom:1vw;z-index:1;text-align:center;font-size:0}
 #swiper-container .swiper-pagination .swiper-pagination-bullet{display:inline-block;width:2vw;height:.6vw;border:1vw solid transparent;cursor:pointer;background:none}
 #swiper-container .swiper-pagination .swiper-pagination-bullet:before{content:"";display:inline-block;width:2vw;height:.6vw;background:rgba(255,255,255,.4);border-radius:.3vw}
 #swiper-container .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active:before{width:4vw;background:#fff}
-
-
-
-
-
-
-
-
+/* 首页导航 */
+.mNavBox{width:100%;margin:0 auto;padding:2.2vw 0;position:relative;background:#FFF}
+.mNavBox ul{width:100vw;margin:0 auto}
+.mNavBox .first{width:25vw;margin:0;transition:height .5s ease}
+.mNavBox .first .nav{display:block;padding:2.2vw 0;text-align:center;color:#4A4F58;font-size:3.4vw;line-height:6.4vw;white-space:nowrap}
+.mNavBox .first .nav span{display:inline-block;border-bottom:1px solid transparent}
+.mNavBox .first .nav:before{display:block;width:10.8vw;height:10.8vw;margin:0 auto}
+.mNavBox .first:nth-of-type(1) .nav:before{background-position:-2% 4%}
+.mNavBox .first:nth-of-type(2) .nav:before{background-position:13% 4%}
+.mNavBox .first:nth-of-type(3) .nav:before{background-position:28% 4%}
+.mNavBox .first:nth-of-type(4) .nav:before{background-position:43% 4%}
+.mNavBox .first:nth-of-type(5) .nav:before{background-position:57% 4%}
+.mNavBox .first:nth-of-type(6) .nav:before{background-position:72% 4%}
+.mNavBox .first:nth-of-type(7) .nav:before{background-position:87% 4%}
+.mNavBox .first:nth-of-type(8) .nav:before{background-position:102% 4%}
+.mNavBox .first.on .nav{color:#E15621}
+.mNavBox .first.on .nav span{border-color:#E15621}
+.mNavBox .first.on .nav:before{border-radius:5.4vw;background-color:#FFE6DC}
+.mNavBox .navItem{display:none;width:100vw;position:absolute;left:0;background:#F5F5F5}
+.mNavBox .navItem .second{display:block;text-align:center;width:25vw;padding:3.2vw 0;color:#999FAB;font-size:3.2vw;line-height:6.4vw;white-space:nowrap}
+.mNavBox .navItem .second img{display:block;margin:0 auto;width:6.4vw;height:6.4vw}
+/* 推荐专区 */
+#recommendBox{width:100%;height:120vw;overflow:hidden;position:relative}
+#recommendBox .swiper-wrapper .swiper-slide{height: calc((100% - 30px) / 2);overflow: hidden;text-align:center;background:#fff;}
+#recommendBox .swiper-wrapper img{width:auto;height:48vw;display:block}
 
 
 

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

@@ -18,25 +18,11 @@ li{list-style:none;}
 #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}
-
-
-
-
-
-    .picScroll-left{width:1200px;overflow:hidden;position:relative;border:1px solid #ccc}
-    .picScroll-left .hd{overflow:hidden;height:30px;background:#f4f4f4;padding:0 10px}
-    .picScroll-left .hd .prev,.picScroll-left .hd .next{display:block;width:5px;height:9px;float:right;margin-right:5px;margin-top:10px;overflow:hidden;cursor:pointer;background:url("https://www.caimei365.com/Newindex/img/right.png") no-repeat}
-    .picScroll-left .hd .next{background-position:0 -50px}
-    .picScroll-left .hd{float:right;overflow:hidden;zoom:1;margin-top:10px;zoom:1}
-    .picScroll-left .hdli{float:left;width:9px;height:9px;overflow:hidden;margin-right:5px;text-indent:-999px;cursor:pointer;background:url("images/icoCircle.gif") 0 -9px no-repeat}
-    .picScroll-left .hdli.on{background-position:0 0}
-    .picScroll-left .bd{padding:10px}
-    .picScroll-left .bd{overflow:hidden;zoom:1}
-    .picScroll-left .bd li{margin:0 8px;float:left;width:126px;height:126px;_display:inline;overflow:hidden;text-align:center}
-    .picScroll-left .bd li .pic{text-align:center}
-    .picScroll-left .bd li .pic img{width:120px;height:90px;display:block;padding:2px;border:1px solid #ccc}
-    .picScroll-left .bd li .pic a:hover img{border-color:#999}
-    .picScroll-left .bd li .title{line-height:24px}
+/* 推荐专区 */
+#recommendBox{width:1200px;height:400px;overflow:hidden;position:relative}
+#recommendBox .swiper-wrapper{position:relative;height:100%;z-index:0}
+#recommendBox .swiper-wrapper li{position:relative;zoom:1;vertical-align:middle;width:300px;overflow:hidden}
+#recommendBox .swiper-wrapper li img{width:100%;}
 
 
 

src/main/resources/static/js/index.js

@@ -24,7 +24,7 @@ var homeData = new Vue({
                                 ,effect: "leftLoop"
                                 ,prevCell:".swiper-button-prev"
 		                        ,nextCell:".swiper-button-next"
-                                ,interTime: 3000
+                                ,interTime: 2000
                                 ,autoPlay: true
                                 ,autoPage: false
                                 ,trigger: "mouseover"
@@ -33,7 +33,7 @@ var homeData = new Vue({
                             var swiper = new Swiper('#swiper-container', {
                                 loop : true,
                                 autoplay: {
-                                    delay: 3000,
+                                    delay: 2000,
                                     disableOnInteraction: false
                                 },
                                 navigation: {
@@ -42,7 +42,6 @@ var homeData = new Vue({
                                 },
                                 pagination: {
                                     el: '.swiper-pagination',
-                                    type: 'bullets',
                                     clickable :true
                                 }
                             });
@@ -57,16 +56,41 @@ var homeData = new Vue({
                 if (r.code === 0 && r.data) {
                     _self.recommends = r.data;
                     setTimeout(function(){
-                        $('#recommendBox').slide({
-                            mainCell:"ul.bd"
-                            ,titCell:"ul.hd li"
-                            ,effect: "leftLoop"
-                            ,interTime: 2000
-                            ,autoPlay: true
-                            ,scroll:3
-                            ,vis:3
-                            ,pnLoop:false
-                        });
+                        if (isPC) {
+                            $('#recommendBox').slide({
+                                mainCell:".swiper-wrapper"
+                                ,titCell:".swiper-pagination span"
+                                ,effect: "leftLoop"
+                                ,prevCell:".swiper-button-prev"
+		                        ,nextCell:".swiper-button-next"
+		                        ,autoPage:true
+                                ,interTime: 3000
+                                ,autoPlay: true
+                                ,scroll:4
+                                ,vis:4
+                                ,pnLoop:false
+                                ,trigger: "mouseover"
+                            });
+                        } else {
+                            var swiper = new Swiper('#recommendBox', {
+                                slidesPerView: 2,
+                                slidesPerColumn: 2,
+                                spaceBetween: 0,
+                                slidesPerGroup: 2,
+                                autoplay: {
+                                    delay: 3000,
+                                    disableOnInteraction: false
+                                },
+                                pagination: {
+                                    el: '.swiper-pagination',
+                                    type: 'fraction'
+                                },
+                                navigation: {
+                                    nextEl: '.swiper-button-next',
+                                    prevEl: '.swiper-button-prev'
+                                },
+                            });
+                        }
                     },500);
                 }
             });
@@ -102,6 +126,23 @@ var homeData = new Vue({
                     value: $(titArr[i]).text()
                 })
             }
+        },
+        showSubNav: function(event){
+            var el = event.currentTarget;
+            var parent = $(el).parent();
+            parent.siblings().removeAttr("style").removeClass("on").find(".navItem").hide();
+            if (parent.hasClass("on")) {
+                parent.removeAttr("style").removeClass("on").find(".navItem").slideUp(200);
+            } else {
+                var height = parent.height();
+                parent.addClass("on").find(".navItem").slideDown(200);
+                if (parent.find(".navItem").length>0) {
+                    setTimeout(function(){
+                        height += parent.find(".navItem").height();
+                        parent.css("height",height);
+                    },200);
+                }
+            }
         }
 
     },

src/main/resources/templates/index.html

@@ -16,7 +16,7 @@
     <!--首页图片轮播-->
     <div id="swiper-container" class="swiper-container">
         <ul class="swiper-wrapper">
-            <li class="swiper-slide" v-for="img in images">
+            <li class="swiper-slide mfc" v-for="img in images">
                 <a :href="img.link"><img :src="img.image" :alt="img.title"></a>
             </li>
         </ul>
@@ -24,6 +24,30 @@
         <a class="swiper-button-prev" href="javascript:void(0)"></a>
         <a class="swiper-button-next" href="javascript:void(0)"></a>
     </div>
+    <!--移动端首页导航-->
+    <div class="mNavBox h5Only">
+        <ul class="mfw">
+            <!--导航菜单-->
+            <li class="first" th:each="menu: ${topMenuList}">
+                <a class="nav mIcon" href="javascript:void(0);" @click="showSubNav($event)">
+                    <span th:text="${menu.name}"></span>
+                </a>
+                <div class="navItem" th:if="${not #lists.isEmpty(menu.subMenus)}">
+                    <div class="mfw">
+                        <a class="second" th:each="sub: ${menu.subMenus}" href="javascript:void(0);">
+                            <img th:src="${sub.image}">
+                            <span th:text="${sub.name}"></span>
+                        </a>
+                        <a class="second" th:each="sub: ${menu.subMenus}" href="javascript:void(0);">
+                            <img th:src="${sub.image}">
+                            <span th:text="${sub.name}"></span>
+                        </a>
+                    </div>
+                </div>
+            </li>
+            <li class="first"><a class="nav mIcon" href="/"><span>维修</span></a></li>
+        </ul>
+    </div>
     <!--页面主体数据-->
     <div class="wrap">
         <div th:each="item: ${pageFloors}">
@@ -32,19 +56,24 @@
                 <div class="floorTit">
                     <h2 th:text="${item.title}" data-id="1"></h2>
                 </div>
-                <div id="recommendBox" class="picScroll-left">
-                    <ul class="bd">
-                        <li v-for="product in recommends">
+                <div id="recommendBox" class="swiper-container">
+                    <ul class="swiper-wrapper">
+                        <li class="swiper-slide mfc" v-for="product in recommends">
                             <a :href="'/product/detail.html?pid='+product.pid" target="_blank">
                                 <img :src="product.image" :alt="product.name">
                                 <p v-html="product.name"></p>
                                 <div>
                                     价格{{product.pricegrade}}
                                 </div>
+                                <span class="icon">
+                                    热销：acttype=1，
+                                    上新：actType=2
+                                </span>
                             </a>
                         </li>
                     </ul>
-                    <ul class="hd"><li v-for="i in recommends"></li></ul>
+                    <div class="swiper-pagination"><span v-if="isPC" v-for="i in recommends"></span></div>
+                    <span v-if="isPC" class="pageState"></span>
                 </div>
             </div>
             <div th:if="${item.type}==2">