搜索商品列表

src/main/resources/static/css/product/list.css

@@ -4,17 +4,32 @@ li{list-style:none}
  * PC端
  */
 @media screen and (min-width:768px){
-    .sortBox{width:1184px;margin:16px auto;box-sizing:border-box;padding:12px;font-size:0;text-align:center;background:#FFF}
-    .sortBox li{display:inline-block;cursor:pointer;width:128px;height:40px;line-height:40px;font-size:16px;background:#F5F5F5;color:#93979F;position:relative;margin:0 8px}
+    .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-more{width: 50px;height: 32px;line-height: 32px;font-size: 14px;margin: 0 auto;color: #909090;text-align: left;transition: all 0.2s;cursor: pointer;box-sizing: border-box;position: absolute;right: 24px;top: 24px;}
+    .product-brand-more .icon:before{background-position: -93px 7px;width: 20px;height: 32px;right: 0;position: absolute;}
+    .product-brand-list{width: 970px;float: left;box-sizing: border-box;padding:0 24px;height: 44px;overflow: scroll;overflow-x: hidden;overflow-y:auto;}
+    .product-brand-list.show{line-height: 88px;}
+    .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 a{width: 100%;height: 100%;display: block;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;}
+    .sortBox{width:1184px;margin:16px auto;box-sizing:border-box;font-size:0;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:14px}
-    .sortBox li:after{border-width:5px 5px 0 5px;border-color:#BEC2C9 transparent transparent transparent;top:22px}
+    .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{float: right;}
+    .sortBox-checked .coll-span{display: block;float: left;margin-left: 20px;height: 28px;line-height: 16px;box-sizing: border-box;padding: 6px 0;display: flex;cursor: pointer;}
+    .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}

src/main/resources/static/js/product/list.js

@@ -26,7 +26,18 @@ var productList = new Vue({
         shopID:0,
         userIdentity: '',
         userToken: '',
-        addhtml:'<span class="tag">美博会</span>'
+        addhtml:'<span class="tag">美博会</span>',
+        brandLists: [
+            { name: '斯蒂芬斯', isChecked: false },
+            { name: 'Beautsecre', isChecked: false },
+            { name: '意大利DEP', isChecked: false },
+            { name: '美生美', isChecked: false },
+            { name: '三诺激光', isChecked: false },
+            { name: '三诺激光', isChecked: false },
+            { name: '三诺激光', isChecked: false },
+        ],
+        isAllChecked:false,
+        isShowAllBrands:false
     },
     filters: {
         NumFormat:function(value) {
@@ -54,6 +65,9 @@ var productList = new Vue({
         }
     },
     methods: {
+        showMoreItem(){
+            this.isShowAllBrands = true;
+        },
         // 是否显示vip标签价格
         showVipPriceTag: function(product){
             return (product.priceFlag !== 1 && product.svipProductFlag === 1 && ((GLOBAL_USER_IDENTITY === 4 && GLOBAL_VIP_FLAG === 1) || GLOBAL_USER_IDENTITY === 2));

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

@@ -78,9 +78,19 @@
         </div>
     </div>
     <template v-else>
+        <!--品牌选择-->
+        <div class="product-brand clear">
+            <div class="product-brand-name" :class="isShowAllBrands ? 'show' : ''">品牌</div>
+            <div class="product-brand-list" :class="isShowAllBrands ? 'show' : ''">
+                <div class="brand-list" v-for="(brand,index) in brandLists" :key="index">
+                    <a href="javascript:void(0)" :title="brand.name" v-html="brand.name"></a>
+                </div>
+            </div>
+            <div class="product-brand-more" @click="showMoreItem">更多<i class="icon mIcon"></i></div>
+        </div>
         <!--排序-->
         <div class="sortBox">
-            <ul class="mfc">
+            <ul class="mfc clear">
                 <li :class="{'on':params.sortField == ''}" @click="toSortList('',1)">综合</li>
                 <template>
                     <li v-if="params.sortField == 'sales' && params.sortType == 1" class="down"
@@ -104,6 +114,16 @@
                     <li v-else @click="toSortList('price',0)"><span>价格</span></li>
                 </template>
             </ul>
+            <div class="sortBox-checked">
+                <div class="sortBox-new" @click="">
+                    <span class="coll-checked" :class="[isAllChecked ? 'checked': '']"></span>
+                    <span>新品</span>
+                </div>
+                <div class="sortBox-new" @click="">
+                    <span class="coll-checked" :class="[isAllChecked ? 'checked': '']"></span>
+                    <span>促销商品</span>
+                </div>
+            </div>
         </div>
         <!--商品列表-->
         <ul class="productList clear mfw">