二手发布 供应商发布商品

新品橱窗

src/main/java/com/caimei/www/controller/unlimited/ProductController.java

@@ -26,6 +26,7 @@ import java.util.concurrent.atomic.AtomicReference;
 public class ProductController extends BaseController {
 
     private static final String PRODUCT_LIST_PATH = "product/list";
+    private static final String PRODUCT_HOT_PATH = "product/product-hot";
     private static final String PRODUCT_DETAIL_PATH = "product/detail";
     private static final String PRODUCT_SUPPORTING_PATH = "product/product-supporting";
     private static final String PROMOTIONS_LIST_PATH = "product/promotions";
@@ -71,6 +72,14 @@ public class ProductController extends BaseController {
         return PRODUCT_LIST_PATH;
     }
 
+    /**
+     * 搜索结果 页面
+     */
+    @GetMapping("/product/hot.html")
+    public String hot() {
+        return PRODUCT_HOT_PATH;
+    }
+
     /**
      * 优惠券活动商品列表
      */

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

@@ -54,9 +54,9 @@ logging:
 caimei:
   siteEnv: 0 #网站环境，（2：正式环境，1：测试环境，0：开发环境）
   #spiServer: http://192.168.2.68:8008
-  coreServer: https://core-b.caimei365.com
+#  coreServer: https://core-b.caimei365.com
 #  coreServer: http://192.168.2.67:18002
-#  coreServer: http://192.168.2.75:18002
+  coreServer: http://192.168.2.75:18002
   imageDomain: https://img-b.caimei365.com
   wwwDomain: http://localhost:8009
   destPath: classpath:/

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

@@ -4,6 +4,12 @@
  */
 @media screen and (min-width:768px) {
 .section_page{width:100%;height:auto;float:left}
+.section_page.hot{width:100%;height:432px;background: url("/img/hot/icon-hot-bg.png");background-size: cover;}
+.swiper-container-floor.hotList{padding: 0 12px;}
+.section_page.hot .section_page_title{width:100%;height:103px;box-sizing:border-box;padding:31px 16px 16px 16px;position: relative;}
+.section_page.hot .section_page_title h1{font-size:24px;line-height:31px;text-align:left;color:#FFFFFF}
+.section_page.hot .section_page_title p{font-size:14px;line-height:19px;text-align:left;color:#FFFFFF;margin-top:6px}
+.section_page.hot .section_page_btn{display: block;width: 102px;height: 36px;background: url("/img/hot/icon-hot-btn.png");background-size: cover;position: absolute;right: 20px;top: 49px;}
 .section_page .section_page_title{width:100%;height:103px;box-sizing:border-box;padding:31px 0 16px 0}
 .section_page .section_page_title h1{font-size:24px;line-height:31px;text-align:left;color:#4a4f58}
 .section_page .section_page_title p{font-size:14px;line-height:19px;text-align:left;color:#93979f;margin-top:6px}
@@ -13,6 +19,7 @@
 .section_page .section_page_main.type_08{height:268px}
 .section_page .section_page_main.type_03{height:704px}
 .section_page  .page_main_item{width:164px;height:268px;float:left;margin-right:16px;margin-bottom:16px;background-color:#FFFFFF;transition:all 0.4s;display:block;position: relative;}
+.section_page  .page_main_item.hot{width:164px;height:268px;float:left;margin-right:10px;margin-bottom:16px;background-color:#FFFFFF;transition:all 0.4s;display:block;position: relative;}
 .section_page  .page_main_item.default{cursor:default}
 .section_page  .page_main_item.ad_04{border-radius:2px}
 .section_page  .page_main_item.ad_04:hover{transform:translateY(-5px);box-shadow:0 8px 8px rgba(102,102,102,0.05),0 10px 10px rgba(102,102,102,0.05),0 12px 12px rgba(102,102,102,0.05)}
@@ -81,6 +88,7 @@
 #recommendBox .swiper-pagination{width:100%;padding:10px 0;z-index:1;text-align:center;font-size:0}
 #recommendBox .swiper-pagination span{display:inline-block;width:14px;height:4px;border:5px solid transparent;cursor:pointer;opacity:.2}
 #recommendBox .swiper-pagination span:before{content:"";display:inline-block;width:100%;height:4px;background:#E15616;border-radius:2px}
+#recommendBox .swiper-pagination.hot span:before{content:"";display:inline-block;width:100%;height:4px;background:#FFFFFF;border-radius:2px}
 #recommendBox .swiper-pagination span.on{width:28px;opacity:1}
 }
 /**

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

@@ -32,9 +32,9 @@ li{list-style:none;}
 /* 楼层 */
 .section_container{width:100%;height:auto;float:left}
 .section_container .inner{width:1184px;margin:0 auto}
-.section_left{width:900px;float:left}
+.section_left{width:884px;float:left;padding-top:40px;}
 /*右边区域*/
-.section_right{width:284px;float:right;box-sizing:border-box;padding-top:103px}
+.section_right{width:284px;float:right;box-sizing:border-box;padding-top:40px}
 .section_right .section_right_item{width:284px;height:auto;background-color:#FFFFFF;float:left;margin-bottom:16px;padding:16px;box-sizing:border-box;border-radius:2px}
 .section_right .section_right_item.fixed{position:fixed;top:200px;width:284px;}
 .section_right .right_item_title{width:100%;height:22px;line-height:22px;float:left;margin-bottom:8px}

src/main/resources/static/css/product/product-hot.css

@@ -0,0 +1,199 @@
+@charset "utf-8";
+li{list-style:none}
+/**
+ * PC端
+ */
+@media screen and (min-width:768px){
+    .product-banner{width: 100%;height: 683px;position: relative;}
+    .product-banner .product-banner-top{width: 100%;height: 510px;background: url("/img/hot/icon-hottop-bg.png");background-size: cover;}
+    .product-banner .product-banner-top .title{width: 100%;height: 140px;line-height: 140px;font-size: 56px;font-weight: bold;text-align: center;color: #FFFFFF;}
+    .product-banner-bot{width: 100%;height: auto;position: absolute;top: 140px;left: 0;}
+    .product-banner-bot .inner{width: 1184px;height: auto;margin: 0 auto;}
+    #productHotBanner{width:100%;height:480px;background: url("/img/hot/icon-hotpor-bg.png");position:relative;box-sizing: border-box;padding: 16px;}
+    #productHotBanner .swiper-wrapper{position:relative;height:100%;z-index:0}
+    #productHotBanner .swiper-wrapper .swiper-slide{width:100%;height: 480px;position:relative;zoom:1;vertical-align:middle;overflow:hidden;}
+    #productHotBanner .swiper-wrapper .swiper-slide-image{width: 448px;height: 448px;float: left;}
+    #productHotBanner .swiper-wrapper .swiper-slide-image img{width: 448px;height: 448px;display: block;}
+    #productHotBanner .swiper-wrapper .swiper-slide-info{width: 700px;height: 448px;float: right;box-sizing: border-box;padding: 72px 100px;}
+    #productHotBanner .swiper-wrapper .swiper-slide-info .swiper-slide-name{width:100%;height: auto;margin-bottom: 110px;}
+    #productHotBanner .swiper-wrapper .swiper-slide-info .swiper-slide-name p{line-height: 35px;font-size: 24px;color: #4A4F58;text-align: center;}
+    #productHotBanner .swiper-wrapper .swiper-slide-info .swiper-slide-btn {width: 100%;height: 44px;}
+    #productHotBanner .swiper-wrapper .swiper-slide-info .swiper-slide-btn .slide-btn{width: 204px;height: 44px;margin: 0 auto;display:block;background: #F94B4B;line-height: 44px;text-align: center;font-size: 16px;color: #FFFFFF;}
+    #productHotBanner .swiper-button-prev:hover,#productHotBanner .swiper-button-next:hover{background:rgba(255,230,220,.6)}
+    #productHotBanner .swiper-pagination{width:100%;height:14px;position:absolute;left:0;bottom:-44px;z-index:1;text-align:center;font-size:0}
+    #productHotBanner .swiper-pagination span{display:inline-block;border:5px solid transparent;cursor:pointer}
+    #productHotBanner .swiper-pagination span:before{content:"";display:inline-block;width:14px;height:4px;background: rgba(255, 180, 150, 0.39);border-radius:2px}
+    #productHotBanner .swiper-pagination span.on:before{width:28px;background:#E15616}
+    .search-text{float: left;margin-right: 20px;}
+    .search-text-brand{float: left;position: relative; height: 24px;padding: 0 24px 0 12px;line-height: 24px;box-sizing: border-box;border: 1px solid #DDDDDD;border-radius: 2px;text-align: center;font-size: 14px;color: #4A4F58;}
+    .search-text-brand a{color: #E15621;}
+    .search-text-brand .icon:before{background-position: -120px -657px;width: 24px;height: 24px;right: 0;position: absolute;cursor: pointer;}
+    .product-brand{width:1184px;margin:16px auto;box-sizing:border-box;min-height: 88px;padding:24px 12px 12px 12px;font-size:0;text-align:center;background:#FFF;position: relative;}
+    .product-brand .product-brand-name{width: 116px;float: left;border-right: 1px solid #F7F7F7;line-height: 44px;text-align: center;font-size: 16px;color: #4A4F58;}
+    .product-brand .product-brand-name.show{line-height: 88px;}
+    .product-brand-oper{width: 110px;height: 32px;position: absolute;right: 24px;top: 24px;}
+    .product-brand-more{width: 50px;height: 24px;line-height: 24px;font-size: 14px;color: #909090;text-align: left;transition: all 0.2s;cursor: pointer;box-sizing: border-box;float: left;position: relative;}
+    .product-brand-more .icon:before{background-position: -93px 2px;width: 20px;height: 32px;right: 0;position: absolute;}
+    .product-brand-more.show .icon:before{background-position: -123px 2px;width: 20px;height: 32px;right: 0;position: absolute;}
+    .product-brand-add{width: 56px;height: 24px;box-sizing: border-box;border: 1px solid #E2E7EF;float: right;font-size: 14px;color: #9AA5B5;line-height: 24px;text-align: center;cursor: pointer;}
+    .product-brand-list{width: 900px;float: left;box-sizing: border-box;padding:0 24px;height: 44px;overflow: scroll;overflow-x: hidden;overflow-y:auto;}
+    .product-brand-list.show{height: 150px;}
+    .product-brand-list .brand-list{width: 90px;height: 32px;padding: 0 12px;border: 1px solid #E2E7EF;float: left;box-sizing: border-box;line-height: 32px;font-size: 16px;color: #4A4F58;border-radius: 2px;margin-right: 24px;margin-bottom: 12px;}
+    .product-brand-list .brand-list.checked{border-color: #E15621;}
+    .product-brand-list .brand-list.checked a{color: #E15621;}
+    .product-brand-list .brand-list a{width: 100%;height: 100%;display: block;text-align: center;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;word-break: break-all;}
+    .product-brand-list .brand-list a:hover{color: #4A4F58;}
+    .product-brand-list .brand-list.checked a:hover{color: #E15621;}
+    .product-brand-button{width: 100%;height: 32px;float: left;}
+    .product-brand-button .brand-button{width: 160px;height: 32px;margin: 0 auto;}
+    .product-brand-button .brand-button .btn{width: 64px;height: 32px;cursor: pointer;float: left;margin: 0 8px;border-radius: 2px; line-height: 32px;text-align: center;font-size: 14px;box-sizing: border-box;color: #FFFFFF;}
+    .product-brand-button .brand-button .btn.confirm.disabled{background-color: #E2E7EF;}
+    .product-brand-button .brand-button .btn.confirm{background-color: #E15621;}
+    .product-brand-button .brand-button .btn.cancel{background-color: #FFFFFF;border: 1px solid #E2E7EF;color: #4A4F58;}
+    .sortBox{width:1184px;margin:16px auto;box-sizing:border-box;text-align:center;background:#FFFFFF;position: relative;}
+    .sortBox li{display:inline-block;cursor:pointer;width:128px;height:64px;line-height:64px;font-size:16px;background:#FFFFFF;color:#93979F;position:relative;float: left;border-right: 1px solid #F7F7F7;}
+    .sortBox li.on,.sortBox li.up,.sortBox li.down{background:#FFE6DC;color:#E15616}
+    .sortBox li:before,.sortBox li:after{position:absolute;right:35px;content:'';width:0;height:0;border-style:solid}
+    .sortBox li:before{border-width:0 5px 5px 5px;border-color:transparent transparent #BEC2C9 transparent;top:26px}
+    .sortBox li:after{border-width:5px 5px 0 5px;border-color:#BEC2C9 transparent transparent transparent;top:34px}
+    .sortBox li:first-child:before,.sortBox li:first-child:after{display:none}
+    .sortBox li.up:before{border-bottom-color:#E15616}
+    .sortBox li.up:after{border-top-color:#E15616;opacity:.3}
+    .sortBox li.down:after{border-top-color:#E15616}
+    .sortBox li.down:before{border-bottom-color:#E15616;opacity:.3}
+    .sortBox .sortBox-checked{width: 200px;height: 64px;position: absolute;top: 0;right: 0;box-sizing: border-box;padding: 18px;}
+    .sortBox-checked .sortBox-new{float: right;height: 28px;line-height: 16px;box-sizing: border-box;padding: 6px 0;display: flex;cursor: pointer;margin-right: 10px;}
+    .sortBox-checked .coll-checked{width: 16px;height: 16px;background: url("/img/cart/icon_weigouxuan@2x.png") no-repeat;background-size: cover;display: block;margin-right: 6px;}
+    .sortBox-checked .coll-checked.checked{background: url("/img/cart/icon_yixuanze@2x.png") no-repeat;background-size: cover;}
+
+    .productList{width:1184px;margin:0 auto;box-sizing:border-box}
+    .productList .productItem{width:184px;height:268px;float:left;background:#fff;position:relative;margin:0 16px 16px 0;overflow:hidden;float:left}
+    .productList .productItem:nth-child(6n){margin-right:0}
+    .productList .productItem img{width:100%;height:164px}
+    .productList .productItem .name{display:block;padding:0 8px;margin-top:8px;height:40px;line-height:21px;vertical-align:middle;word-break:break-all;overflow:hidden;-o-text-overflow:ellipsis;text-overflow:ellipsis;display:-webkit-inline-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
+    .productItem .page_main_type{width: 34px;height: 34px;text-align: justify;box-sizing: border-box;padding: 5px;border-radius: 0 0 8px 8px;background-color: #33CCBF;font-size: 12px;color: #FFFFFF;line-height: 13px;position: absolute;top: 0;right: 10px;z-index: 88;}
+    .productItem .price{border:0;-webkit-box-sizing:border-box;box-sizing:border-box;padding:0 8px;height:54px;width:100%}
+    .productItem .price .icon:before{width:63px}
+    .productItem .price .icon.i5:before{background-position:-2px -832px}
+    .productItem .price .icon.i1:before{background-position:-2px -712px}
+    .productItem .price .icon.i2:before{background-position:-2px -742px}
+    .productItem .price .icon.i3:before{background-position:-2px -772px}
+    .productItem .price .icon.i4:before{background-position:-2px -802px}
+    .listTag{margin:12px 8px 0 0;padding:0 2px}
+    .productItem .image .icon{position:inherit}
+    .sortBox li.on,.sortBox li.up,.sortBox li.down{background:#FFE6DC;color:#E15616}
+    .empty{margin-top:32px;background:#fff}
+    .empty p{color:#909090;font-size:14px}
+
+    .productItem .price em{font-weight: normal}
+    .productItem .price em.bold{font-weight: bold}
+    .productItem .price .price_text_tag{width: 100%;height: 22px;box-sizing: border-box;float: left;margin-top: 3px;}
+    .productItem .price .price_text_tag .listTag{margin: 0;float: left}
+    .productItem .price .price_text_tag .couponTag{margin: 0 4px 0 0;float: left}
+    .productItem .price .main_price_unde { width: 100%;height: 31px;line-height: 31px;font-size: 14px;color: #f94b4b;text-align: left;float: left;}
+    .productItem .price .main_price_show { width: 100%;height: 30px;line-height: 30px;font-size: 14px;color: #f94b4b;text-align: left;float: left;}
+    .productItem .price .main_price_show.none { color: #999999; text-decoration: line-through;}
+    .productItem .name .tag{width: 44px;height: 18px;line-height: 18px;font-size: 12px;display: inline-block;margin-right: 5px;text-align: center;color: #FFFFFF !important;background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);border-radius: 0px 10px 0px 0px;}
+
+    .login-btn{font-size: 12px}
+    .listTitle{width:1184px;margin:0 auto 16px auto;box-sizing:border-box;padding:16px 30px;border-radius:0 0 2px 2px;background:#fc5331 url(/img/cart/promotions.png) no-repeat right;background-size:auto 100%;color:#FFF}
+    .listTitle h1{font-size:20px;line-height:42px;font-weight:normal;margin-bottom:16px}
+    .listTitle p{text-indent:1em;line-height:36px;font-size:16px}
+    .listTitle p em{color:#e15616;font-style:normal;display:inline-block;height:24px;line-height:24px;padding:0 10px;background:#FFF}
+    .productItem .name span.tag{width: 44px;height: 18px;line-height: 18px;font-size: 12px;display: inline-block;margin-right: 5px;text-align: center;color: #FFFFFF !important;background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);border-radius: 0px 10px 0px 0px;margin-top: 2px;}
+    /*会员标签*/
+    .productItem .price .price_text_tag {-webkit-transform: scale(0.8) translateX(-18px);-ms-transform: scale(0.8) translateX(-18px);transform: scale(0.8) translateX(-18px)}
+    .productItem .price .price_text_tag .svip-tag,
+    .productItem .price .price_text_tag .listTag{-webkit-transform: translateX(4px);-ms-transform: translateX(4px);transform: translateX(4px)}
+    .productItem .price .svip-tag{width:100%;height:22px;letter-spacing:0}
+    .productItem .price .svip-tag .svip-icon{position:relative;z-index:9;display:inline-block;width:30px;height:22px;text-align:center;line-height:22px;font-size:12px;font-weight:400;color:#F0CB72;opacity:1;background:#333333}
+    .productItem .price .svip-tag .svip-icon.btr{border-radius:2px 8px 0px 2px}
+    .productItem .price .svip-tag .svip-price{z-index:1;position:relative;display:inline-block;padding-left:24px;padding-right:2px;margin-left:-27px;line-height:22px;background:#F0CB72;opacity:1;border-radius:2px;font-size:12px}
+    .productItem .price .svip-tag .svip-price span{color: #333}
+}
+/**
+* 移动端
+*/
+@media screen and (max-width:768px){
+    #productList{position: relative;}
+    /*footer{display:none!important;}*/
+    .sortBox{width:100%;margin:1px auto;box-sizing:border-box;background:#FFF;}
+    .sortBox li{width:15vw;height:11.6vw;line-height:11.6vw;text-align:center;font-size:3.4vw;color:#93979F;position:relative;margin:0 5vw}
+    .sortBox li.on,.sortBox li.up,.sortBox li.down{color:#E15616}
+    .sortBox li:before,.sortBox li:after{position:absolute;right:0vw;content:'';width:0;height:0;border-style:solid}
+    .sortBox li:before{border-width:0 .8vw .8vw .8vw;border-color:transparent transparent #BEC2C9 transparent;top:5vw}
+    .sortBox li:after{border-width:.8vw .8vw 0 .8vw;border-color:#BEC2C9 transparent transparent transparent;top:6.5vw}
+    .sortBox li:first-child:before,.sortBox li:first-child:after{display:none}
+    .sortBox li.up:before{border-bottom-color:#E15616}
+    .sortBox li.up:after{border-top-color:#E15616;opacity:.3}
+    .sortBox li.down:after{border-top-color:#E15616}
+    .sortBox li.down:before{border-bottom-color:#E15616;opacity:.3}
+    .sortBox li.screen:before{border-width:0 0 0 0;border-color:transparent transparent transparent transparent;top:5vw;}
+    .sortBox li.screen:after{border-width:0 0 0 0;border-color:transparent transparent transparent transparent;top:5vw}
+    .sortBox li.screen .mIcon{width: 4vw;height: 4vw;display: block;position: absolute;top: 0.8vw;right: -2vw;}
+    .sortBox li.screen .mIcon:before{width: 4vw;height: 4vw;background-position: -70vw -78vw;}
+    .productList{margin: 3.2vw auto;width: 97vw;}
+    .productList .productItem{width: 45.6vw;height: 70vw;overflow: hidden;margin: 0 1.3vw 2.6vw 1.3vw;background: #fff;text-align: left;position: relative;}
+    .productItem .page_main_type{width: 8.8vw;height: 8.8vw;text-align: justify;box-sizing: border-box;padding: 1vw;border-radius: 0 0 2vw 2vw;background-color: #33CCBF;font-size: 2.6vw;color: #FFFFFF;line-height: 3.4vw;position: absolute;top: 0;right: 2vw;}
+    .productItem .price em {display: block;height: 7vw;line-height: 7vw;color: #4A4F58;font-style: normal;float: left;}
+    .productItem .price .mIcon:before{width:15.8vw;height: 5vw}
+    .productItem .price .mIcon.i5:before {background-position: -84vw -97.5vw;}
+    .productItem .price .mIcon.i1:before {background-position: -84vw -69.5vw;}
+    .productItem .price .mIcon.i2:before {background-position: -84vw -76.5vw;}
+    .productItem .price .mIcon.i3:before {background-position: -84vw -83.7vw;}
+    .productItem .price .mIcon.i4:before {background-position: -84vw -90.7vw;}
+    .productItem .price .mIcon {display: inline-block;font-size: 0;height: 5vw;line-height: 5vw;vertical-align: text-bottom;}
+    .productItem img {width: 45.6vw;height: 45.6vw;}
+    .productItem .name {display: block;padding: 0 1.2vw;height: 9.3vw;line-height: 4.8vw;font-size: 3.4vw;vertical-align: middle;word-break: break-all;overflow: hidden;text-overflow: ellipsis;display: -webkit-inline-box;-webkit-line-clamp: 2;-webkit-box-orient: vertical;}
+    .price {padding: 2vw 1.2vw;overflow: hidden;}
+    .couponTag{padding:0 .4vw;border:.27vw solid #f94b4b;background:#fff1eb;font-size:2.8vw;float:left;height:4.2vw;line-height:4.2vw;color: #f94b4b;border-radius: 0.2vw;margin-right: .4vw;}
+    .listTag{padding:0 2vw;border:.27vw solid #ffe6dc;background:none;font-size:2.8vw;float:left;height:4.2vw;line-height:4.2vw;border-radius: 0.2vw;}
+    .price_grade{width: 100%;float: left;margin-top: 2vw;}
+    .productItem .price .main_price_unde {width: 100%;height: 6.5vw;line-height: 6.5vw;font-size: 3.4vw;color: #4a4f58;text-align: left;float: left;}
+    .productItem .price .price_text_tag {width: 100%;box-sizing: border-box;}
+    .productItem .price .main_price_show{color: #f94b4b}
+    .productItem .name span.tag{width: 11.3vw;height: 4.3vw;line-height: 4.3vw;font-size: 2.8vw;display: inline-block;margin-right: 1.3vw;text-align: center;color: #FFFFFF !important;background-image: linear-gradient(270deg, #f9c023 0%, #f83600 100%);border-radius: 0px 10px 0px 0px;margin-top: .25vw;}
+
+    .original-price{text-decoration:line-through}
+    .listTitle{width:100%;min-height:3.2vw;box-sizing:border-box;padding:3.3vw;background:#fc5331 url(/img/cart/promotions.png) no-repeat right;background-size:auto 100%;color:#FFF}
+    .listTitle h1{font-size:4vw;line-height:8vw;font-weight:normal}
+    .listTitle p{text-indent:1em;line-height:7vw;font-size:3.2vw}
+    .listTitle p em{color:#e15616;font-style:normal;display:inline-block;height:4.8vw;line-height:4.8vw;padding:0 1.5vw;background:#FFF}
+
+    /*会员标签*/
+    .productItem .price .price_text_tag {-webkit-transform: scale(0.8) translateX(-4.2vw);-ms-transform: scale(0.8) translateX(-4.2vw);transform: scale(0.8) translateX(-4.2vw)}
+    .productItem .price .price_text_tag .svip-tag,
+    .productItem .price .price_text_tag .listTag{-webkit-transform: translateX(1.2vw);-ms-transform: translateX(1.2vw);transform: translateX(1.2vw)}
+    .productItem .price .svip-tag{float: left; height:4.74vw;letter-spacing:0;overflow: hidden}
+    .productItem .price .svip-tag .svip-icon{position:relative;z-index:9;float: left; width:9.8vw;height:4.74vw;text-align:center;line-height:4.74vw;font-size:2.8vw;font-weight:400;color:#F0CB72;opacity:1;background:#333333}
+    .productItem .price .svip-tag .svip-icon.btr{border-radius:2px 8px 0px 2px}
+    .productItem .price .svip-tag .svip-price{z-index:1;position:relative;float: left;padding-left:5.4vw;padding-right:0.6vw;margin-left:-6vw;line-height:4.74vw;height: 4.74vw; background:#F0CB72;opacity:1;border-radius:2px;font-size:2.8vw}
+    .productItem .price .svip-tag .svip-price span{color: #333}
+    .productItem .price .svip-tag .svip-price span:nth-child(2){margin-left: -0.4vw}
+    /*筛选项*/
+    .product-brand-fiexd{width: 100%;height: 100%;position: fixed;top: 15vw;left: 0;background: rgba(0,0,0,0.6);z-index: 9999;}
+    .product-brand{width: 100%;position: relative;top: 0;left: 0;background: #FFFFFF;z-index: 9999;padding: 3vw 0;border-radius: 0 0 1.6vw 1.6vw;box-sizing: border-box;}
+    .product-brand .product-brand-name{width: 100%;float: left;line-height: 10.4vw;background: #F7F7F7;height: 10.4vw;padding:0 3vw;box-sizing: border-box;}
+    .product-brand .product-brand-name .title{float: left;}
+    .product-brand .product-brand-name .num{float: right;font-size: 3vw;}
+    .product-brand .product-brand-name .num span{color: #E15621;}
+    .product-brand-more{width: 100%;height: 32px;line-height: 32px;font-size: 3.4vw;float: left;color: #909090;text-align: center;box-sizing: border-box;}
+    .product-brand-more .icon:before{background-position: -51.5vw 0px;width: 5.4vw;height: 6.7vw;right: 37vw;position: absolute;}
+    .product-brand-more.show .icon:before{background-position: -43.5vw 0px;width: 5.4vw;height: 6.7vw;right: 37vw;position: absolute;}
+    .product-brand-list{width: 100%;float: left;box-sizing: border-box;padding:3vw;height:22vw;overflow: scroll;overflow-x: hidden;overflow-y:auto;}
+    .product-brand-list.show{height: 44vw;}
+    .product-brand-list .brand-list{width: 20.5vw;height: 7.2vw;padding: 0 2.4vw;border: 1px solid #E2E7EF;float: left;box-sizing: border-box;line-height: 7.2vw;;font-size: 3vw;color: #4A4F58;border-radius: 1vw;margin-right: 3.2vw;margin-bottom: 2.4vw;}
+    .product-brand-list .brand-list:nth-child(4n){margin-right: 0;}
+    .product-brand-list .brand-list.checked{border-color: #E15621;}
+    .product-brand-list .brand-list.checked a{color: #E15621;}
+    .product-brand-list .brand-list a{width: 100%;height: 100%;display: block;text-align: center;text-overflow: ellipsis;overflow: hidden;display: -webkit-box;-webkit-line-clamp: 1;line-clamp: 1;-webkit-box-orient: vertical;word-break: break-all;}
+    .product-brand-list .brand-list a:hover{color: #4A4F58;}
+    .product-brand-list .brand-list.checked a:hover{color: #E15621;}
+    .product-screen{width: 100%;height: auto;padding:0 3vw;box-sizing: border-box;}
+    .product-screen .sortBox-new{width: 100%;height: 9vw;line-height: 16px;box-sizing: border-box;padding: 2.5vw 0;cursor: pointer;margin-right: 10px;}
+    .product-screen .coll-checked{width: 16px;height: 16px;background: url("/img/cart/icon_weigouxuan@2x.png") no-repeat;background-size: cover;display: block;float: right;}
+    .product-screen .coll-checked.checked{background: url("/img/cart/icon_yixuanze@2x.png") no-repeat;background-size: cover;}
+    .product-screen-btn{width: 100%;height: 11.2vw;float: left;margin-top: 4vw;}
+    .product-screen-btn .sub-button{width: 64vw;height: 11.2vw;margin: 0 auto;line-height: 11.2vw;background-color: #E15621;text-align: center;font-size: 3.4ve;color: #FFFFFF;}
+
+}

src/main/resources/static/js/common/serviceapi/utils.service.js

@@ -38,6 +38,42 @@ var PublicApi = {
                 callback(res)
             });
         },
+        GetHomeRecommend:function(params,callback){ //新品橱窗重点推荐
+            Http.AjaxService({
+                url:'/commodity/home/recommend',
+                type:'get',
+                data:params,
+                json:false,
+                isHost:true
+            })
+            .then(function(res){
+                callback(res)
+            });
+        },
+        GetHomeNewFloorList:function(params,callback){ //新品橱窗商品列表
+            Http.AjaxService({
+                url:'/commodity/home/NewFloorList',
+                type:'get',
+                data:params,
+                json:false,
+                isHost:true
+            })
+            .then(function(res){
+                callback(res)
+            });
+        },
+        GetHomeNBrandName:function(params,callback){ //新品橱窗品牌列表
+            Http.AjaxService({
+                url:'/commodity/home/BrandName',
+                type:'get',
+                data:params,
+                json:false,
+                isHost:true
+            })
+            .then(function(res){
+                callback(res)
+            });
+        },
         GetHomeInit:function(params,callback){ //首页数据
             Http.AjaxService({
                 url:'/commodity/home/init',

src/main/resources/static/js/flea-market/form.js

@@ -23,7 +23,7 @@ var fleaMarketForm = new Vue({
         BrandList:[],
         isShow:false,
         includedTax:'',
-        GoodsImagesList:[],
+        GoodsImagesList:['https://img.caimei365.com/group1/M00/04/0A/rB-lGGJ0lfeAYI29AAFbP2cQhCY71.jpeg'],
         oldNum:0,
         secondType:0,
         vShow_GoodsImages:false,
@@ -39,20 +39,31 @@ var fleaMarketForm = new Vue({
             fixedYears:null,//出厂
             companyName:'',//公司名称
             // maturityYears:'',//产品到期
+            price:'',//交易价
             detailTalkFlag:1,//是否启用详聊
             // normalPrice:'',//市场价
             // originalPrice:'',//采购价
             // stock:'',//数量
             productQuality:'',//商品成色
+            fileType:'', // 商品包含文件类型
             contactName:'',//联系人
             contactMobile:'',//联系方式
             checkCode:'', // 联系人手机验证码
+            cardNumber:'',// 收款账号
             secondProductType:'',//
             townId:'',//县区地址
             address:'',//详细地址
-            image:'https://img0.baidu.com/it/u=1213827208,2559395113&fm=26&fmt=auto',//图片
+            image:'',//图片
             productDetails:'',//商品详细信息
             source:1,
+            dockingPeopleMobile:'',
+            dockingPeopleName:'',
+            authenticationImage:'',//身份证正面照片
+            authenticationBackImage:'',//身份证反面照片
+            licenseImage:'',//营业执照照片
+            commitmentImage:'',//承诺函图片
+            fileName:'',//文件名称
+            ossName:'',//文件OSS名称
          },
         brandname:'请选择',
         checkbox:false,

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

@@ -11,6 +11,7 @@ var homeData = new Vue({
         newsList:[],
         popupFlag:false,
         couponEntry:2,// 活动优惠券弹窗显示控制
+        hotListPageFloor:[],// 新皮橱窗
         homePageFloor:[]//楼层
     },
     filters: {
@@ -134,6 +135,7 @@ var homeData = new Vue({
                 if(response.code == 0){
                     var data = response.data;
                     _self.homePageFloor = data.homePageFloor;
+                    _self.hotListPageFloor =  data.PageFloor;
                     setTimeout(function(){
                         // 图片懒加载
                         $("img[data-original]").lazyload();
@@ -182,7 +184,7 @@ var homeData = new Vue({
                         span += '<span></span>';
                     }
                     cell.html(span);
-                    $('#recommendBox').slide({
+                    $('.swiper-container-floor').slide({
                         mainCell:".recommendBox-wrapper",
                         titCell:".swiper-pagination-floor span",
                         effect: "leftLoop",

src/main/resources/static/js/product/product-hot.js

@@ -0,0 +1,319 @@
+var productList = new Vue({
+    el: "#productList",
+    data: {
+        // searchFlag: false,
+        listLoading: true,
+        requestFlag: true,
+        noMore: false,
+        topGoodList: [],
+        listQuery: {
+            brandID:0,
+            pageNum:1,
+            pageSize:10
+        },
+        classify: [],
+        listData: [], //priceflag 0公开价格 1不公开价格 2仅对会员机构公开,//userIdentity: 2-会员机构, 4-普通机构
+        listRecord: 0,
+        pageInput: '1',
+        bigType: "",
+        smallType: "",
+        tinyType: "",
+        userId: 0,
+        shopID:0,
+        userIdentity: '',
+        userToken: '',
+        addhtml:'<span class="tag">美博会</span>',
+        brandParam: {
+            keyword: '',
+            id: '',
+            idType: '',
+            identity: 0
+        },
+        hrefBrandId:null,
+        brandLists: [],
+        defaultBrandLists:[],
+        checkedBrandList:[],
+        checkedBrandLength:0,
+        isProductScreen:false,
+        isActiviChecked:false,
+        isNewsChecked:false,
+        isShowAllBrands:false,
+        isShowAllBrandsButton:false,
+        isAllcheckedBrand:false,
+        isListEmpty:false,
+        isChoiceBrandText:false,
+        choiceBrandText:''
+    },
+    filters: {
+        NumFormat:function(value) {
+            return Number(value).toFixed(2);
+        }
+    },
+    computed: {
+
+    },
+    methods: {
+        // 是否显示vip标签价格
+        showVipPriceTag: function(pros){
+            //非会员
+            if(!GLOBAL_VIP_FLAG === 1) return false;
+            // 商品所有机构可见
+            if(pros.priceFlag === 0  && pros.svipProductFlag === 1 ) return true;
+            // 商品价格仅资质机构可见
+            if(pros.priceFlag === 2  && pros.svipProductFlag === 1 && GLOBAL_USER_IDENTITY === 2) return true;
+            // 商品价格仅医美机构可见
+            if(pros.priceFlag === 3  && pros.svipProductFlag === 1 && GLOBAL_USER_IDENTITY === 2 &&  GLOBAL_CLUB_TYPE == 1) return true;
+            // 其它
+            return false;
+        },
+        PromotionsFormat:function(promo){//促销活动类型数据处理
+            if(promo!=null){
+                if(promo.type == 1 && promo.mode == 1){
+                    return true
+                }else{
+                    return false
+                }
+            }
+            return false
+        },
+        GetHomeRecommend:function () {
+            var _self = this;
+            PublicApi.GetHomeRecommend({ },function(response){
+                if(response.code == 0){
+                    _self.topGoodList = response.data;
+                    // 图片懒加载
+                    if (isPC) {
+                        $('#productHotBanner').slide({
+                            mainCell:".swiper-wrapper"
+                            ,titCell:".swiper-pagination span"
+                            ,effect: "leftLoop"
+                            ,interTime: 5000
+                            ,autoPlay: true
+                            ,autoPage: false
+                            ,trigger: "mouseover"
+                        });
+                    } else {
+                        var swiper = new Swiper('#productHotBanner', {
+                            loop : true,
+                            autoplay: {
+                                delay: 2000,
+                                disableOnInteraction: false
+                            },
+                            navigation: {
+                                nextEl: '.swiper-button-next',
+                                prevEl: '.swiper-button-prev'
+                            },
+                            pagination: {
+                                el: '.swiper-pagination',
+                                clickable :true
+                            }
+                        });
+                    }
+                }else{
+                    console.log('获取新品橱窗数据错误')
+                }
+            });
+        },
+        GetHomeNewFloorList: function () {
+            var _self = this;
+            PublicApi.GetHomeNewFloorList(_self.listQuery,function (response) {
+                if(response.code === 0){
+                    var data = response.data
+                    _self.listData = _self.listData.concat(data.results);
+                    setTimeout(function(){
+                        $("img[data-original]").lazyload();
+                    },500);
+                    if( _self.listData.length>0){
+                        _self.isListEmpty = false;
+                    }else{
+                        _self.isListEmpty = true;
+                    }
+                    _self.listLoading = false;
+                    _self.requestFlag = true;
+                }else {
+                    _self.listLoading = false;
+                    _self.isListEmpty = true;
+                    console.log('获取新品橱窗列表数据错误')
+                }
+            });
+        },
+        getCommoditySearchQUeryBrand:function() { // 查询筛选项品牌
+            var _self = this;
+            ProductApi.getCommoditySearchQUeryBrand(_self.brandParam,function (response) {
+                if (response.code === 0 && response.data ) {
+                    var data = response.data;
+                    _self.defaultBrandLists = data.map((el, index) => {
+                        if(_self.hrefBrandId && _self.hrefBrandId == el.id){
+                            el.isChecked = true;
+                        }else{
+                            el.isChecked = false;
+                        }
+                        return el;
+                    })
+                    _self.brandLists = _self.defaultBrandLists.slice(0,7)
+                }else {
+                    console.log('查询品牌列表异常')
+                }
+            });
+        },
+        choiceBrandHref: function (brand, index) {// PC端跳转链接
+            if(this.isShowAllBrandsButton){// 如果多选的情况下
+                var _self = this;
+                brand.isChecked = !brand.isChecked;
+                if (brand.isChecked) {
+                    _self.checkedBrandList.push(brand.id);
+                } else {
+                    for (var i = 0; i < _self.checkedBrandList.length; i++){
+                        // 删除掉未勾选中的元素
+                        if(_self.checkedBrandList[i] === brand.id) {
+                            _self.checkedBrandList.splice(i, 1);
+                        }
+                    }
+                }
+                _self.isAllcheckedBrand = false;
+                _self.checkedBrandLength = _self.checkedBrandList.length;
+                _self.params.brandIds = this.checkedBrandList.join(',');
+            }else{
+                window.location.href =  '/product/list.html?keyword=' + encodeURIComponent(this.params.keyword) +
+                    '&bpn=' + brand.id + '&pro=' + this.params.promotionFlag +
+                    '&newg='+ this.params.newFlag;
+            }
+        },
+        choiceBrandAllHref:function(){// PC全部品牌跳转链接
+            window.location.href =  '/product/list.html?keyword=' + encodeURIComponent(this.params.keyword) +
+                '&bpn=&pro=' + this.params.promotionFlag +
+                '&newg='+ this.params.newFlag;
+        },
+        choiceBrand:function(brand,index){// 选择品牌
+            var _self = this;
+            brand.isChecked = !brand.isChecked;
+            if (brand.isChecked) {
+                _self.checkedBrandList.push(brand.id);
+            } else {
+                for (var i = 0; i < _self.checkedBrandList.length; i++){
+                    // 删除掉未勾选中的元素
+                    if(_self.checkedBrandList[i] === brand.id) {
+                        _self.checkedBrandList.splice(i, 1);
+                    }
+                }
+                _self.params.brandIds = this.checkedBrandList.join(',');
+            }
+            _self.isAllcheckedBrand = false;
+            _self.checkedBrandLength = _self.checkedBrandList.length;
+            _self.params.brandIds = this.checkedBrandList.join(',');
+        },
+        choiceBrandAll:function(){
+            // 点击选择全部品牌
+            this.isAllcheckedBrand = true;
+            this.params.brandIds = '';
+            this.brandLists.forEach(function(el){
+                el.isChecked = false;
+            });
+        },
+        showMoreItem:function(){// 点击更多品牌
+            this.isShowAllBrands = !this.isShowAllBrands;
+            if( this.isShowAllBrands){
+                this.brandLists = this.defaultBrandLists;
+            }else{
+                this.brandLists = this.defaultBrandLists.slice(0,6)
+            }
+        },
+        showMoreItemCheckedAll:function () {//点击多选按钮
+            this.isShowAllBrands = true;
+            this.isShowAllBrandsButton = true
+            this.brandLists = this.defaultBrandLists;
+        },
+        handleCancel:function () {//取消多选
+            this.isShowAllBrandsButton = false
+        },
+        handleConfirm:function () {// 确认查询多选
+            if(this.checkedBrandList.length == 0){return;}
+            window.location.href =  '/product/list.html?keyword=' + encodeURIComponent(this.params.keyword) +
+                '&bpn=' + this.params.brandIds + '&pro=' + this.params.promotionFlag +
+                '&newg='+ this.params.newFlag;
+        },
+        handleDeleteBrands:function () {// 删除选择的品牌
+            window.location.href =  '/product/list.html?keyword=' + encodeURIComponent(this.params.keyword)+ '&pro=' + this.params.promotionFlag +'&newg='+this.params.newFlag;
+        },
+        hanldCheckedActivi:function(){// 选择促销商品选项
+            this.isActiviChecked = !this.isActiviChecked;
+            if(this.isActiviChecked){
+                this.params.promotionFlag = 1
+            }else{
+                this.params.promotionFlag = 0
+            }
+        },
+        hanldCheckedNews:function(){// 选择新品选项
+            this.isNewsChecked = !this.isNewsChecked;
+            if(this.isNewsChecked){
+                this.params.newFlag = 1
+            }else{
+                this.params.newFlag = 0
+            }
+        },
+        hanldCheckedActiviHref(){// 选择促销商品选项跳转链接(PC专用)
+            var promotionFlag = this.isActiviChecked ? 0 : 1;
+            window.location.href = '/product/list.html?keyword='+encodeURIComponent(this.params.keyword)+
+                                   '&bpn='+this.hrefBrandId+ '&pro='+promotionFlag+'&newg='+ this.params.newFlag;
+        },
+        hanldCheckedNewsHref(){// 选择新品选项跳转链接(PC专用)
+            var newFlag = this.isNewsChecked ? 0 : 1;
+            window.location.href = '/product/list.html?keyword='+encodeURIComponent(this.params.keyword)+
+                                   '&bpn='+this.hrefBrandId+ '&pro=' + this.params.promotionFlag +
+                                   '&newg='+newFlag;
+        },
+        showIsProductScreen:function(){//
+            this.isProductScreen = true;
+        },
+        handleConfirmScreen:function(){
+            this.listQuery.pageNum = 1;
+            this.listData = [];
+            this.GetHomeNewFloorList();
+            this.isProductScreen = false;
+        }
+    },
+    created: function () {
+        var _self = this
+        // this.searchFlag = (this.params.keyword !== "");
+        if(globalUserData){
+            this.userId = globalUserData.userId;
+            this.userIdentity = globalUserData.identity;
+            this.userToken = globalUserData.token;
+        }
+        var userInfo = localStorage.getItem('userInfo');
+        if(userInfo){
+            this.userId = JSON.parse(userInfo).userId;
+            this.shopID = JSON.parse(userInfo).shopId;
+        }
+        this.GetHomeRecommend();
+        // 获取列表数据
+        this.GetHomeNewFloorList();
+        // 获取对应品牌列表
+        this.getCommoditySearchQUeryBrand();
+    },
+    mounted: function () {
+        var _self = this;
+        //上垃加载更多
+        $(window).on('scroll', function(){
+            var scrollTop = $(this).scrollTop();
+            var scrollHeight = $(document).height();
+            var windowHeight = window.innerHeight + $("footer").height();
+            if (scrollTop + windowHeight >= scrollHeight) {
+                //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
+                var totalPage = Math.ceil(_self.listRecord / _self.listQuery.pageSize)?Math.ceil(_self.listRecord / _self.listQuery.pageSize):1;
+                var next = _self.listQuery.pageNum+1;
+                if(next <= totalPage){
+                    if (_self.requestFlag){
+                        _self.listQuery.pageNum = next;
+                        // 获取列表数据
+                        _self.getListByKeyword();
+                    }
+                    _self.requestFlag = false;
+                }
+            }
+        });
+        if(!isPC){
+            $('footer').addClass("noneImportant");
+        }
+    }
+});

src/main/resources/templates/index.html

@@ -132,13 +132,105 @@
             </div>
             <div class="section_left ">
                 <template v-if="userId > 0">
+                    <!--固定楼层-->
+                    <div class="section_page section_page_user hot" v-for="(floor,index) in hotListPageFloor">
+                        <div class="section_page_title" >
+                            <h1 :data-id="0">{{ floor.title }}</h1>
+                            <p>{{ floor.detail }}</p>
+                            <a class="section_page_btn" href="/product/hot.html" target="_blank"></a>
+                        </div>
+                        <div class="swiper-container-floor hotList" id="recommendBox">
+                            <div class="section_page_main type_08 swiper-wrapper recommendBox-wrapper clear mfw section_8 max">
+                                <!-- 商品/图片 列表 -->
+                                <a :href="pros.link" class="page_main_item hot ad_04 swiper-slide" target="_blank" v-for="pros in floor.newfloorlist">
+                                    <img class="page_main_image" src="/img/base/placeholder.png" :data-original="pros.image" :alt="pros.name">
+                                    <div class="page_main_type" v-if="pros && pros.productType && pros.productType === 2">医疗器械</div>
+                                    <div class="page_main_text">
+                                        <span class="tag" v-if="pros.beautyActFlag == 1">美博会</span>
+                                        <span v-text="pros.name"></span>
+                                    </div>
+                                    <div class="page_main_price">
+                                        <!-- 商品价格 -->
+                                        <div class="main_price_text">
+                                            <!-- 正常商品 -->
+                                            <template v-if="pros.productCategory == 1">
+                                                <div class="price_text_tag">
+                                                    <p class="couponTag" v-if="pros.couponsLogo">优惠券</p>
+                                                    <!--超级会员价格标签 svipProductFlag 1:超级会员优惠商品 0 不是商超级会员优惠商品-->
+                                                    <template v-if="pros.svipProductFlag === 1">
+                                                        <div class="svip-tag">
+                                                            <div class="svip-icon">SVIP</div>
+                                                            <!-- 公开价格 && (个人机构 || 资质机构) && 开通SVIP 可查看价格-->
+                                                            <template v-if="showVipPriceTag(pros)">
+                                                                <div class="svip-price">
+                                                                    <span v-html="pros.svipPriceTag"></span>
+                                                                </div>
+                                                            </template>
+                                                        </div>
+                                                    </template>
+                                                    <template v-else>
+                                                        <p class="listTag" v-if="pros.actStatus ==1 && pros.promotions">
+                                                            <span v-text="pros.promotions.name"></span>
+                                                            <template v-if="PromotionsFormat(pros.promotions)">
+                                                                <!--单品优惠:优惠价-->
+                                                                <span class="price_unit">:￥</span><span class="price_num">{{ pros.price | NumFormat }}</span>
+                                                            </template>
+                                                        </p>
+                                                    </template>
+                                                </div>
+                                                <div class="main_price_login">
+                                                    <!--priceFlag 0公开价格 1不公开价格 2仅对会员机构公开-->
+                                                    <template v-if="pros.priceFlag == 1">
+                                                        <em class="price_grade"><span>￥</span>价格未公开</em>
+                                                    </template>
+                                                    <!--机构价仅会员可见 && 用户是普通机构-->
+                                                    <template v-else-if="pros.priceFlag==2 && GLOBAL_USER_IDENTITY === 4 && GLOBAL_VIP_FLAG!=1">
+                                                        <em class="price_grade_club"><span>￥</span>会员可见</em>
+                                                    </template>
+                                                    <!--机构价仅医美机构可见-->
+                                                    <template v-else-if="pros.priceFlag==3 && (GLOBAL_CLUB_TYPE !=1)">
+                                                        <em class="price_grade_club red"><span>￥</span>仅医美机构可见</em>
+                                                    </template>
+                                                    <!-- 资质机构 || (价格全部机构可见 && 普通机构) || (供应商 && 商品为供应商下的商品) || 超级会员用户 -->
+                                                    <template v-else-if="GLOBAL_USER_IDENTITY === 2 || (pros.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) || (GLOBAL_USER_IDENTITY === 3 && pros.shopID==GLOBAL_SHOP_ID) || GLOBAL_VIP_FLAG === 1">
+                                                        <div class="main_price_show" :class="{none: showVipPriceTag(pros.product) || PromotionsFormat(pros.promotions)}">
+                                                            ￥<span class="price_num" v-if="showVipPriceTag(pros)">{{ pros.originalPrice | NumFormat }}</span>
+                                                            <span class="price_num" v-else>{{ pros.price | NumFormat }}</span>
+                                                        </div>
+                                                    </template>
+                                                    <template v-else>
+                                                        <!--供应商除自己的商品外，也显示价格等级-->
+                                                        <em class="price_grade_shop">
+                                                            <span class="bold">￥</span><i :class="'icon mIcon price_grade_'+pros.priceGrade"></i>
+                                                        </em>
+                                                    </template>
+                                                </div>
+                                            </template>
+                                            <!-- 二手商品 -->
+                                            <template v-else>
+                                                <div class="main_price_login">
+                                                    <div class="price_text_tag"></div>
+                                                    <div v-if="pros.detailTalkFlag==2" class="main_price_show">￥价格祥聊</div>
+                                                    <div v-else class="main_price_show">
+                                                        ￥<span class="price_num">{{ pros.price | NumFormat }}</span>
+                                                    </div>
+                                                </div>
+                                            </template>
+                                        </div>
+                                    </div>
+                                </a>
+                            </div>
+                            <div class="swiper-pagination swiper-pagination-floor mfc hot"  :data-id="floor.newfloorlist.length"></div>
+                        </div>
+                    </div>
+                    <!--楼层-->
                     <div class="section_page section_page_user" v-for="(floor,index) in homePageFloor">
                         <template v-if="floor.floorContent">
                             <div class="section_page_title" >
                                 <h1 :data-id="index+1">{{ floor.title }}</h1>
                                 <p>{{ floor.detail }}</p>
                             </div>
-                            <div :class="floor.floorContent.templateType == 8 ? 'hotList swiper-container-floor' : ''"
+                            <div :class="floor.floorContent.templateType == 8 ? 'swiper-container-floor' : ''"
                                  :id="floor.floorContent.templateType == 8 ? 'recommendBox' : ''"
                             >
                                 <div :class="floor.floorContent.templateType == 8 ?

src/main/resources/templates/product/product-hot.html

@@ -0,0 +1,198 @@
+<!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/head-link"></template>
+  <link th:href="@{/css/product/product-hot.css(v=${version})}" rel="stylesheet" type="text/css">
+  <template th:replace="components/analysis"></template>
+</head>
+<body>
+<!-- 引用头部 -->
+<template th:replace="components/header"></template>
+
+<!-- 商品列表 -->
+<div id="productList" v-cloak>
+  <div v-if="listLoading" class="loading">
+    <img src="/img/base/loading.gif">
+  </div>
+  <template v-else>
+    <!--品牌选择-->
+    <template v-if="isPC">
+      <div class="product-banner">
+        <div class="product-banner-top">
+          <p class="title">采美新品橱窗</p>
+        </div>
+        <div class="product-banner-bot">
+          <div class="inner">
+            <div id="productHotBanner" class="swiper-container">
+              <div class="swiper-wrapper">
+                  <div class="swiper-slide mfc" v-for="pros in topGoodList">
+                    <a :href="'/product-'+pros.productId+'.html'" target="_blank">
+                      <div class="swiper-slide-image">
+                        <img :src="pros.mainImage" alt="">
+                      </div>
+                      <div class="swiper-slide-info">
+                        <div class="swiper-slide-name">
+                          <P v-text="pros.name"></P>
+                        </div>
+                        <div class="swiper-slide-btn">
+                          <div class="slide-btn" >立即购买</div>
+                        </div>
+                      </div>
+                    </a>
+                  </div>
+              </div>
+              <div class="swiper-pagination mfc"><span v-for="i in topGoodList.length"></span></div>
+            </div>
+          </div>
+        </div>
+      </div>
+      <div class="product-brand clear">
+        <div class="product-brand-name" :class="isShowAllBrands ? 'show' : ''">
+          <p class="title">品牌</p>
+        </div>
+        <div class="product-brand-list" :class="isShowAllBrands ? 'show' : ''">
+          <div class="brand-list" v-if="!isShowAllBrandsButton" @click="choiceBrandAllHref" :class="hrefBrandId ? '' : 'checked'"><a href="javascript:void(0)">全部</a></div>
+          <div class="brand-list" @click="choiceBrandHref(brand, index)" v-for="(brand,index) in brandLists"
+               :key="index" :class="brand.isChecked ? 'checked' : ''">
+            <a href="javascript:void(0)" :title="brand.name" v-html="brand.name"></a>
+          </div>
+        </div>
+        <div class="product-brand-oper" v-if="!isShowAllBrandsButton">
+          <div class="product-brand-more" v-if="defaultBrandLists.length>8" :class="isShowAllBrands ? 'show' : ''"
+               @click="showMoreItem">{{
+            isShowAllBrands ? '收起' : '更多' }} <i class="icon mIcon"></i></div>
+          <div class="product-brand-add" v-if="defaultBrandLists.length>2" @click="showMoreItemCheckedAll">+多选</div>
+        </div>
+        <div class="product-brand-button" v-if="isShowAllBrandsButton">
+          <div class="brand-button">
+            <div class="btn confirm" :class="checkedBrandList.length>0 ? '' : 'disabled'" @click="handleConfirm">确定</div>
+            <div class="btn cancel" @click="handleCancel">取消</div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <template v-else>
+      <div class="product-brand-fiexd" v-if="isProductScreen">
+        <div class="product-brand clear">
+          <div class="product-screen">
+            <div class="sortBox-new" @click="hanldCheckedActivi">
+              <span>促销商品</span>
+              <span class="coll-checked" :class="[isActiviChecked ? 'checked': '']"></span>
+            </div>
+            <div class="sortBox-new" @click="hanldCheckedNews">
+              <span>新品</span>
+              <span class="coll-checked" :class="[isNewsChecked ? 'checked': '']"></span>
+            </div>
+          </div>
+          <div class="product-brand-name" :class="isShowAllBrands ? 'show' : ''">
+            <p class="title">品牌</p>
+            <p v-if="!isPC" class="num">已选中<span>{{ checkedBrandLength }}</span>个品牌</p>
+          </div>
+          <div class="product-brand-list" :class="isShowAllBrands ? 'show' : ''">
+            <div class="brand-list" @click="choiceBrandAll" :class="isAllcheckedBrand ? 'checked' : ''"><a href="javascript:void(0)">全部</a></div>
+            <div class="brand-list" v-for="(brand,index) in brandLists" :key="index"
+                 @click="choiceBrand(brand, index)" :class="brand.isChecked ? 'checked' : ''">
+              <a href="javascript:void(0)" :title="brand.name" v-html="brand.name"></a>
+            </div>
+          </div>
+          <div class="product-brand-more" v-if="defaultBrandLists.length>8" :class="isShowAllBrands ? 'show' : ''" @click="showMoreItem">{{
+            isShowAllBrands ? '收起' : '查看全部' }} <i
+                    class="icon mIcon"></i></div>
+          <div class="product-screen-btn" @click="handleConfirmScreen">
+            <div class="sub-button">确定</div>
+          </div>
+        </div>
+      </div>
+    </template>
+    <!--数据为空-->
+    <div v-if="isListEmpty" class="empty">
+      <img src="/img/common/empty.png">
+      <div class="msg">
+        <p>暂未找到你搜索的商品，去<a href="/">商城</a>，逛逛吧~</p>
+      </div>
+    </div>
+    <template v-else>
+      <!--商品列表-->
+      <ul class="productList clear mfw">
+        <li class="productItem " v-for="p in listData">
+          <div class="page_main_type" v-if="p.productType === 2">医疗器械</div>
+          <a class="image" :href="'/product-'+p.productId+'.html'">
+            <img src="/img/base/placeholder.png" :data-original="p.mainImage" :alt="p.name">
+            <p class="name" v-html="addhtml + p.name" v-if="p.beautyActFlag==1"></p>
+            <p class="name" v-html="p.name" v-else></p>
+            <div class="price">
+              <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
+              <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
+                <div class="price_text_tag clear">
+                  <p class="couponTag" v-if="p.couponsLogo">优惠券</p>
+                  <template v-if="p.svipProductFlag === 1">
+                    <div class="svip-tag">
+                      <div class="svip-icon">SVIP</div>
+                      <template v-if="showVipPriceTag(p)">
+                        <div class="svip-price">
+                          <span v-html="p.svipPriceTag"></span>
+                        </div>
+                      </template>
+                    </div>
+                  </template>
+                  <template v-else>
+                    <p class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}
+                      <span v-if="p.priceFlag != 1 && PromotionsFormat(p.promotions)">:￥{{p.price | NumFormat}}</span>
+                    </p>
+                  </template>
+                </div>
+                <!--0公开价格 1不公开价格 2仅对会员机构公开-->
+                <div class="main_price_unde" v-if="p.priceFlag==1">￥价格未公开</div>
+                <!--机构价仅会员可见 && 用户是普通机构-->
+                <div class="main_price_unde" v-else-if="p.priceFlag==2 && GLOBAL_USER_IDENTITY === 4 && GLOBAL_VIP_FLAG!=1">
+                  ￥会员可见
+                </div>
+                <!--机构价仅会员可见 && 用户是普通机构-->
+                <div class="main_price_unde" v-else-if="p.priceFlag==3 && (GLOBAL_CLUB_TYPE !=1)">
+                  ￥仅医美机构可见
+                </div>
+                <!-- 资质机构 || (价格全部机构可见 && 普通机构) || (供应商 && 商品为供应商下的商品) || 超级会员用户 -->
+                <template
+                        v-else-if="GLOBAL_USER_IDENTITY === 2 || (p.priceFlag === 0 && GLOBAL_USER_IDENTITY === 4) || (GLOBAL_USER_IDENTITY === 3 && p.shopId === GLOBAL_SHOP_ID) || GLOBAL_VIP_FLAG === 1">
+                  <div class="main_price_show"
+                       :class="{none: PromotionsFormat(p.promotions) || (p.svipProductFlag === 1 && showVipPriceTag(p))}">
+                    ￥{{ (PromotionsFormat(p.promotions) || showVipPriceTag(p) ? p.originalPrice :
+                    p.price ) | NumFormat }}
+                  </div>
+                </template>
+                <!--供应商除自己的商品外，也显示价格等级-->
+                <div class="price_grade" v-else><span class="bold">￥</span><i
+                        :class="'icon mIcon i'+p.priceGrade"></i></div>
+              </template>
+              <template v-else>
+                <div class="price_text_tag">
+                  <p class="couponTag" v-if="p.couponsLogo">优惠券</p>
+                  <template v-if="p.svipProductFlag === 1">
+                    <div class="svip-tag">
+                      <div class="svip-icon">SVIP</div>
+                    </div>
+                  </template>
+                  <template v-else>
+                    <p class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</p>
+                  </template>
+                </div>
+                <div class="price_grade"><span class="bold">￥</span><i
+                        :class="'icon mIcon i'+p.priceGrade"></i></div>
+              </template>
+            </div>
+          </a>
+        </li>
+      </ul>
+    </template>
+  </template>
+</div>
+<!-- 引入底部 -->
+<template th:replace="components/footer"></template>
+<template th:replace="components/foot-link"></template>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/product.service.js(v=${version})}"></script>
+<script charset="utf-8" src="/js/activity/beautyTopic/swiper.min.js"></script>
+<script charset="utf-8" type="text/javascript" th:src="@{/js/product/product-hot.js(v=${version})}"></script>
+</body>
+</html>