add

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

@@ -0,0 +1,107 @@
+#productList{width: 1184px;margin:32px auto}
+.crumbs-nav{height: 40px}
+.crumbs-nav .crumbs-link{color:#4a4f58 }
+.classifyBox .classification div{
+    display: inline-block;
+    line-height: 64px;
+    text-align: center;
+    color: #4a4f58;
+    font-size: 16px;
+    cursor: pointer;
+}
+.classifyBox .classification {
+    border-bottom: 1px solid #f7f7f7;
+}
+.classifyBox .classification .class-title{
+    border-right: 1px solid #f7f7f7;
+    width: 127px;
+}
+.classifyBox .classification .class-nav-main{
+}
+.classifyBox .classification .class-nav-main div.on{
+    color: #e15616;
+}
+.classifyBox .classification .class-nav-main div{
+    width: 127px;
+}
+.crumbs-nav >div{display: inline-block}
+.crumbs-nav-item{
+    display: inline-block;
+    padding: 0 12px;
+    border: 1px solid #cccccc;
+    line-height: 24px;
+    margin-right: 16px;
+    color: #909090;
+    border-radius: 2px;
+    cursor: pointer;
+}
+.crumbs-nav-item.on{
+color: #e15616;
+border: 1px solid #e15616;
+}
+
+.sortBox .down{position:relative;margin:0 8px}
+.sortBox .down:before,.sortBox .down:after{position:absolute;right:32px;content:'';width:0;height:0;border-style:solid}
+.sortBox .down:before{border-width:0 5px 5px 5px;border-color:transparent transparent #BEC2C9 transparent;top:25px}
+.sortBox .down:after{border-width:5px 5px 0 5px;border-color:#BEC2C9 transparent transparent transparent;top:31px}
+.sortBox .down.up:before{border-bottom-color:#E15616}
+.sortBox .down.up:after{border-top-color:#E15616;opacity:.3}
+.sortBox .on{background:#ffe6dc }
+.list-container{
+    margin-top: 32px;
+}
+.list-container ul li.productItem {
+    width: 184px;
+    height: 288px;
+    float: left;
+    background: #fff;
+    position: relative;
+    margin: 0 16px 16px 0;
+    overflow: hidden;
+    float: left;
+}
+.list-container ul li img {
+    width: 100%;
+    height: 184px;
+}
+.list-container ul li .name{
+    display: block;
+    padding: 0 16px;
+    height: 40px;
+    line-height: 21px;
+    vertical-align: middle;
+    word-break: break-all;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    display: -webkit-inline-box;
+    -webkit-line-clamp: 2;
+    -webkit-box-orient: vertical
+}
+.productItem .price{
+    border: 0;
+}
+.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;
+}

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

@@ -92,12 +92,12 @@
 .hotList ul.height{
     height: auto;
 }
-.hotList ul:after{
-    display:block;
-    content:"";
-    width: 164px;
-    height:0px;
-}
+/*.hotList ul:after{*/
+/*    display:block;*/
+/*    content:"";*/
+/*    width: 164px;*/
+/*    height:0px;*/
+/*}*/
 .hotList ul li {
     width: 164px;
     height: 268px;

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

@@ -1,17 +1,63 @@
 var productList = new Vue({
     el:'#productList',
-    dat:{
+    data:{
+        searchFlag: false,
+        listLoading: true,
+        requestFlag: true,
+        noMore: false,
+        classify:[
+            {
+            name:'面部抗衰',
+            smallTypeID:'1001',
+            tinytypeList:[
+                { name: "高端护理",smallTypeID:'101'},
+                { name: "高端护理",smallTypeID:'102'},
+                { name: "高端护理",smallTypeID:'103'},
+                { name: "高端护理",smallTypeID:'104'},
+                { name: "高端护理",smallTypeID:'105'},
+            ]},
+            {
+            name:'瘦身塑形',
+            smallTypeID:'1002',
+            tinytypeList:[
+                { name: "超声",smallTypeID:'2002'},
+                { name: "射频",smallTypeID:'2003'},
+                { name: "激光",smallTypeID:'2004'},
+                { name: "高端护理",smallTypeID:'2005'},
+                { name: "高端护理",smallTypeID:'2001'},
+            ]},
+            {
+            name:'产后修复',
+            smallTypeID:'1003',
+            tinytypeList:[
+                { name: "修复",smallTypeID:'3003'},
+                { name: "修复",smallTypeID:'3002'},
+                { name: "修复",smallTypeID:'3004'},
+                { name: "修复",smallTypeID:'3005'},
+                { name: "修复",smallTypeID:'3001'},
+            ]},
+            {
+            name:'精油系列',
+            smallTypeID:'1004',
+            tinytypeList:[
+                { name: "补水",smallTypeID:'4005'},
+                { name: "保湿",smallTypeID:'4004'},
+                { name: "保湿",smallTypeID:'4003'},
+                { name: "保湿",smallTypeID:'4002'},
+                { name: "补水",smallTypeID:'4001'},
+            ]},
+        ],
         listData:[
             {
             actStatus: 1,
             brand: "测试品牌",
             id: "4367",
-            image: "http://img-b.caimei365.com/group1/M00/02/ED/Cmgy618imB-AdeRoAAAx62Su3Fg469.png",
+            image: "http://www.caimei365.com/uploadFile/product/XR73P9DFM620151125103659.JPEG",
             ladderPriceFlag: 0,
-            name: "*商品显示名:",
+            name: "华熙生物润百颜液体润百颜液体敷料",
             price: 50,
             priceFlag: "0",
-            priceGrade: "0",
+            priceGrade: "1",
             priceLoaded: true,
             promotions: {
             id: 208, name: "优惠价", description: null, type: 1, mode: 1,productId: 4367,status: 1,touchPrice: 50,type:1},
@@ -23,12 +69,12 @@ var productList = new Vue({
             actStatus: 1,
             brand: "测试品牌",
             id: "4367",
-            image: "http://img-b.caimei365.com/group1/M00/02/ED/Cmgy618imB-AdeRoAAAx62Su3Fg469.png",
+            image: "http://www.caimei365.com/uploadFile/product/XR73P9DFM620151125103659.JPEG",
             ladderPriceFlag: 0,
-            name: "*商品显示名:",
+            name: "华熙生物润百颜液体润百颜液体敷料:",
             price: 50,
             priceFlag: "0",
-            priceGrade: "0",
+            priceGrade: "2",
             priceLoaded: true,
             promotions: {
             id: 208, name: "优惠价", description: null, type: 1, mode: 1,productId: 4367,status: 1,touchPrice: 50,type:1},
@@ -40,12 +86,12 @@ var productList = new Vue({
             actStatus: 1,
             brand: "测试品牌",
             id: "4367",
-            image: "http://img-b.caimei365.com/group1/M00/02/ED/Cmgy618imB-AdeRoAAAx62Su3Fg469.png",
+            image: "http://www.caimei365.com/uploadFile/product/XR73P9DFM620151125103659.JPEG",
             ladderPriceFlag: 0,
-            name: "*商品显示名:",
+            name: "华熙生物润百颜液体润百颜液体敷料:",
             price: 50,
             priceFlag: "0",
-            priceGrade: "0",
+            priceGrade: "3",
             priceLoaded: true,
             promotions: {
             id: 208, name: "优惠价", description: null, type: 1, mode: 1,productId: 4367,status: 1,touchPrice: 50,type:1},
@@ -57,12 +103,12 @@ var productList = new Vue({
             actStatus: 1,
             brand: "测试品牌",
             id: "4367",
-            image: "http://img-b.caimei365.com/group1/M00/02/ED/Cmgy618imB-AdeRoAAAx62Su3Fg469.png",
+            image: "http://www.caimei365.com/uploadFile/product/XR73P9DFM620151125103659.JPEG",
             ladderPriceFlag: 0,
-            name: "*商品显示名:",
+            name: "华熙生物润百颜液体润百颜液体敷料:",
             price: 50,
             priceFlag: "0",
-            priceGrade: "0",
+            priceGrade: "4",
             priceLoaded: true,
             promotions: {
             id: 208, name: "优惠价", description: null, type: 1, mode: 1,productId: 4367,status: 1,touchPrice: 50,type:1},
@@ -70,11 +116,53 @@ var productList = new Vue({
             unit: "方法",
             userIdentity: 3,
             },
-        ]
+        ],
+         termsName:'',
+         twoclassName:'',
+         smallTypeID:'',
+         twosmallTypeID:'',
+         tinytypeList:[],
+         termsNameflag:false,
+         twoclassflag:false,
+          params: {
+            size: 0,
+            num: 0,
+            keyword: "",
+            sortField: "",
+            sortType: 1, // 1降序，其他升序
+            bid: "",
+            sid: "",
+            tid: ""
+        },
+    },
+    methods:{
+     toSortList: function (sortField, sortType) {
+            var params = {
+                sortfield: sortField,
+                sorttype: sortType
+            };
+            window.location.href = updateUrlParam(params);
+        },
+        remove:function(){
+            this.twoclassflag = false;
+        },
+        oneclass:function (item) {//选择一及分类
+            this.termsName=item.name;
+            this.smallTypeID = item.smallTypeID;
+            this.tinytypeList = item.tinytypeList;
+            this.termsNameflag = true
+        },
+        twoclass:function (item) {//选择二级分类
+            this.twoclassName = item.name;
+            this.twosmallTypeID = item.smallTypeID;
+            this.twoclassflag = true;
+        }
     },
-    methods:{},
     created:function () {
-
+        setTimeout(function(){
+            // 图片懒加载
+            $("img[data-original]").lazyload();
+        },500)
     }
 
 })

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

@@ -4,7 +4,7 @@
 <head>
     <title>采美365网-仪器列表</title>
     <template th:replace="components/head-link"></template>
-    <link th:href="@{/css/product/list.css(v=${version})}" rel="stylesheet" type="text/css">
+    <link th:href="@{/css/product/instruement-list.css(v=${version})}" rel="stylesheet" type="text/css">
 </head>
 <body>
 <!-- 引用头部 -->
@@ -12,110 +12,53 @@
 
 <!-- 商品列表 -->
 <div id="productList">
-    <template v-if="isPC && listData && listData.length>0">
-        <!-- 面包屑 -->
-        <div v-if="searchFlag" class="crumbs">
-            <span>搜索结果</span>
-            <span>&gt;</span> <a href="javascript:void(0);" @click="toPagination(1)" v-text="params.keyword"></a>
+    <div class="crumbs-nav">
+        <div class="crumbs-link"> 筛选条件： </div>
+        <div  class="crumbs-nav-main">
+            <div class="crumbs-nav-item" v-if="termsNameflag">{{termsName}}</div>
+            <div class="crumbs-nav-item on" @click="remove" v-if="twoclassflag">{{twoclassName}} x</div>
         </div>
-        <div v-else class="crumbs">
-            <a href="/">首页</a>
-            <template v-if="params.bid && params.bid>0">
-                <template v-if="params.sid && params.sid>0">
-                    <span>&gt;</span> <a :href="'/product/list.html?category='+params.bid+'-0-0'" v-text="bigType"></a>
-                    <template v-if="params.tid && params.tid>0">
-                        <span>&gt;</span> <a :href="'/product/list.html?category='+params.bid+'-'+params.sid+'-0'" v-text="smallType"></a>
-                        <span>&gt;</span> <span v-text="tinyType"></span>
-                    </template>
-                    <template v-else>
-                        <span>&gt;</span> <span v-text="smallType"></span>
-                    </template>
-                </template>
-                <template v-else>
-                    <span>&gt;</span> <span v-text="bigType"></span>
-                </template>
-            </template>
-        </div>
-        <!--分类-->
-        <div v-if="(!searchFlag)" id="listClassify" class="classifyBox">
-            <div class="clsTab">
-                <template v-for="(big,i) in classify">
-                    <a :class="{'on': params.bid==big.bigTypeID}" v-if="big.validFlag==1" href="javascript:void(0);" v-text="big.name"></a>
-                </template>
-            </div>
-            <div class="clsCon">
-                <div class="tabItem" v-for="big in classify" :bid="big.bigTypeID" style="display: none;">
-                    <div class="line" :class="{'on': params.sid==small.smallTypeID}" v-for="small in big.smalltypeList" v-if="small.validFlag==1">
-                        <div class="lft" :class="{'on': params.sid==small.smallTypeID}">
-                            <a :href="'/product/list.html?category='+big.bigTypeID+'-'+small.smallTypeID+'-0'" v-text="small.name"></a>
-                        </div>
-                        <div class="rgt">
-                            <template v-for="tiny in small.tinytypeList">
-                                <a v-if="tiny.validFlag==1" :class="{'on': params.tid==tiny.tinyTypeID}" :href="'/product/list.html?category='+big.bigTypeID+'-'+small.smallTypeID+'-'+tiny.tinyTypeID" v-text="tiny.name"></a>
-                            </template>
-                        </div>
-                    </div>
-                </div>
+    </div>
+     <div  id="listClassify" class="classifyBox">
+        <div class="classification">
+            <div class="class-title">分类</div>
+            <div class="class-nav-main">
+                <div v-for="item in classify" @click="oneclass(item)" :class="{'on':item.smallTypeID==smallTypeID}">{{item.name}}</div>
             </div>
         </div>
-    </template>
-    <!--loading-->
-    <div v-if="listLoading" class="loading">
-        <img src="/img/base/loading.gif">
-    </div>
-    <!--数据为空-->
-    <div v-else-if="!listLoading && (!listData || listData.length==0)" class="empty">
-        <img src="/img/common/empty.png">
-        <div class="msg">
-            <p>暂未找到你搜索的商品，去<a href="/">商城</a>，逛逛吧~</p>
+        <div class="classification">
+            <div class="class-title">二级</div>
+            <div class="class-nav-main">
+                <div v-for="item in tinytypeList" @click="twoclass(item)" :class="{'on':item.smallTypeID==twosmallTypeID}">{{item.name}}</div>
+            </div>
         </div>
-    </div>
-    <template v-else>
-        <!--排序-->
-        <div class="sortBox">
-            <ul class="mfc">
-                <li :class="{'on':params.sortField == ''}" @click="toSortList('',1)">综合</li>
+        <div class="sortBox classification">
+            <div class="class-title" :class="{'on':params.sortField == ''}" @click="toSortList('',1)">综合</div>
+                <div class="class-nav-main">
                 <template>
-                    <li v-if="params.sortField == 'sales' && params.sortType == 1" class="down"
-                        @click="toSortList('sales',0)"><span>销量</span></li>
-                    <li v-else-if="params.sortField == 'sales' && params.sortType == 0" class="up"
-                        @click="toSortList('sales',1)"><span>销量</span></li>
-                    <li v-else @click="toSortList('sales',0)"><span>销量</span></li>
+                    <div class="down" @click="toSortList('sales',0)"><span>销量</span></div>
                 </template>
                 <template>
-                    <li v-if="params.sortField == 'favorite' && params.sortType == 1" class="down"
-                        @click="toSortList('favorite',0)"><span>人气</span></li>
-                    <li v-else-if="params.sortField == 'favorite' && params.sortType == 0" class="up"
-                        @click="toSortList('favorite',1)"><span>人气</span></li>
-                    <li v-else @click="toSortList('favorite',0)"><span>人气</span></li>
+                    <div class="down" @click="toSortList('favorite',0)"><span>人气</span></div>
                 </template>
                 <template>
-                    <li v-if="params.sortField == 'price' && params.sortType == 1" class="down"
-                        @click="toSortList('price',0)"><span>价格</span></li>
-                    <li v-else-if="params.sortField == 'price' && params.sortType == 0" class="up"
-                        @click="toSortList('price',1)"><span>价格</span></li>
-                    <li v-else @click="toSortList('price',0)"><span>价格</span></li>
+                    <div class="down"  @click="toSortList('price',0)"><span>价格</span></div>
                 </template>
-            </ul>
+                </div>
         </div>
-        <!--商品列表-->
-        <ul class="productList clear mfw">
-            <li class="productItem mfc" v-for="p in listData">
-                <div class="item">
+     </div>
+    <template>
+        <div class="list-container">
+            <ul class="clear mfw">
+                <li class="productItem " v-for="p in listData">
                     <a class="image" :href="'/product-'+p.id+'.html'">
-                        <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
-                    </a>
-                    <a class="name" :href="'/product-'+p.id+'.html'">
-                        <span v-html="p.name"></span>
-                    </a>
-                    <div class="price mfhc">
+                     <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
+                     <p class="name" v-html="p.name"></p>
+                     <div class="price mfhc">
                         <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
                             <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
                             <template v-if="p.priceFlag==1">
                                 <em>￥价格未公开</em>
-                                <div class="btnBox">
-                                    <a href="javascript:void(0)" class="btn cat">价格未公开，请联系 0755-22907771</a>
-                                </div>
                             </template>
                             <template v-else>
                                 <template v-if="(p.priceFlag==0 && p.userIdentity!=3) || p.userIdentity==2 || (p.userIdentity==3 && p.supplierId==GLOBAL_SHOP_ID)">
@@ -125,9 +68,6 @@
                                 <template v-else-if="p.priceFlag==2 && p.userIdentity==4">
                                     <em>￥会员可见</em>
                                     <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
-                                    <div class="btnBox">
-                                        <a href="/user/setting/upgrade.html" class="btn">升级会员查看价格</a>
-                                    </div>
                                 </template>
                                 <template v-else>
                                     <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
@@ -137,29 +77,14 @@
                         </template>
                         <template v-else>
                             <em>￥<i :class="'icon mIcon i'+p.priceGrade"></i></em>
-                            <span class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</span>
-                            <div class="btnBox"><a href="javascript:void(0)" class="btn add toLogin">登录查看价格</a></div>
+                            <span class="listTag" >单品满减</span>
                         </template>
-                    </div>
-                </div>
-            </li>
-        </ul>
+                     </div>
+                    </a>
+                </li>
+            </ul>
+        </div>
     </template>
-    <!--分页-->
-    <div v-if="(!isPC) && noMore" class="noMore">---- 没有更多了 ----</div>
-    <div v-if="isPC && pageTotal>1" class="pageWrap clear">
-        <a v-if="params.num>1" class="prev" @click="toPagination(params.num*1-1)" href="javascript:void(0);"></a>
-        <template v-for="n in showPageBtn">
-            <a v-if="n" :class="{'on':(n==params.num)}" @click="toPagination(n)" href="javascript:void(0);" v-text="n"></a>
-            <span v-else>···</span>
-        </template>
-        <a v-if="params.num<pageTotal" class="next" @click="toPagination(params.num*1+1)" href="javascript:void(0);"></a>
-        <span>共<b v-text="pageTotal>1?pageTotal:1"></b>页</span>
-        <span>跳至</span>
-        <input v-model="pageInput" @blur="checkNum()"/>
-        <span>页</span>&nbsp;
-        <a class="btn" href="javascript:void(0);" @click="toPagination(pageInput)">点击跳转</a>
-    </div>
 </div>
 <!-- 引入底部 -->
 <template th:replace="components/footer"></template>