瀏覽代碼

商品分类列表SEO优化

chao 3 年之前
父節點
當前提交
d1fe9b83b5

+ 147 - 3
src/main/java/com/caimei/www/controller/unlimited/ProductController.java

@@ -1,6 +1,7 @@
 package com.caimei.www.controller.unlimited;
 
 import com.alibaba.fastjson.JSONArray;
+import com.alibaba.fastjson.JSONObject;
 import com.caimei.www.controller.BaseController;
 import com.caimei.www.pojo.page.ProductDetail;
 import com.caimei.www.service.page.ProductService;
@@ -10,8 +11,10 @@ import org.springframework.stereotype.Controller;
 import org.springframework.ui.Model;
 import org.springframework.web.bind.annotation.GetMapping;
 import org.springframework.web.bind.annotation.PathVariable;
+import org.thymeleaf.util.StringUtils;
 
-import java.util.Map;
+import java.util.*;
+import java.util.concurrent.atomic.AtomicReference;
 
 /**
  * 商品(product)
@@ -105,8 +108,149 @@ public class ProductController extends BaseController {
     /**
      * 商品分类列表页面
      */
-    @GetMapping("/product/classify{ids}.html")
-    public String instruelist(@PathVariable("ids") String ids) {
+    @GetMapping("/product/classify-{ids}.html")
+    public String instruelist(final Model model, @PathVariable("ids") String ids) {
+        String[] split = ids.split("-");
+        // 分类类型:1产品,2仪器,0全部
+        Integer typeSort =  split.length>=1 ? Integer.valueOf(split[0]) : 0;
+        model.addAttribute("typeSort", typeSort);
+        // 一级分类Id
+        Integer bigTypeId = split.length>=2 ? Integer.valueOf(split[1]) : 0;
+        model.addAttribute("bigTypeId", bigTypeId);
+        // 二级分类Id
+        Integer smallTypeId = split.length>=3 ? Integer.valueOf(split[2]) : 0;
+        model.addAttribute("smallTypeId", smallTypeId);
+        // 三级级分类Id
+        Integer tinyTypeId = split.length>=4 ? Integer.valueOf(split[3]) : 0;
+        model.addAttribute("tinyTypeId", tinyTypeId);
+        // 页码
+        Integer pageNum = split.length>=5 ? Integer.valueOf(split[4]) : 1;
+        // 每页数量
+        Integer pageSize = split.length>=6 ? Integer.valueOf(split[5]) : 4;
+        // 排序字段:价格price,销量sales,人气favorite
+        String sortField = split.length>=7 ? split[6] : "";
+        // 排序规则:1降序,其他升序
+        Integer sortType = split.length>=8 ? Integer.valueOf(split[7]) : 1;
+        /*
+         * 获取一级分类
+         */
+        JSONArray bigTypeArr = productService.getBigTypeJson(typeSort);
+        model.addAttribute("bigTypeJson", bigTypeArr);
+        AtomicReference<String> bigTypeName = new AtomicReference<>("");
+        bigTypeArr.forEach(temp -> {
+            JSONObject bigType = (JSONObject) temp;
+            if (null != bigType && bigTypeId.equals(bigType.getInteger("bigTypeId"))) {
+                bigTypeName.set(bigType.getString("name"));
+            }
+        });
+        model.addAttribute("bigTypeName", bigTypeName.get());
+        /*
+         * 获取二级分类
+         */
+        JSONArray smallTypeArr = productService.getSmallTypeJson(bigTypeId);
+        model.addAttribute("smallTypeJson", smallTypeArr);
+        AtomicReference<String> smallTypeName = new AtomicReference<>("");
+        smallTypeArr.forEach(temp -> {
+            JSONObject smallType = (JSONObject) temp;
+            if (null != smallType && smallTypeId.equals(smallType.getInteger("smallTypeId"))) {
+                smallTypeName.set(smallType.getString("name"));
+            }
+        });
+        model.addAttribute("smallTypeName", smallTypeName.get());
+        /*
+         * 获取三级分类
+         */
+        JSONArray tinyTypeArr = productService.getTinyTypeJson(smallTypeId);
+        model.addAttribute("tinyTypeJson", tinyTypeArr);
+        AtomicReference<String> tinyTypeName = new AtomicReference<>("");
+        tinyTypeArr.forEach(temp -> {
+            JSONObject tinyType = (JSONObject) temp;
+            if (null != tinyType && tinyTypeId.equals(tinyType.getInteger("tinyTypeId"))) {
+                tinyTypeName.set(tinyType.getString("name"));
+            }
+        });
+        model.addAttribute("tinyTypeName", tinyTypeName.get());
+        /*
+         * 获取商品信息
+         */
+        StringBuilder productParams = new StringBuilder();
+        if (tinyTypeId > 0) {
+            productParams.append("?id=").append(tinyTypeId).append("&idType=3");
+        } else if (smallTypeId > 0) {
+            productParams.append("?id=").append(smallTypeId).append("&idType=2");
+        } else {
+            productParams.append("?id=").append(bigTypeId).append("&idType=1");
+        }
+        productParams.append("&pageNum=").append(pageNum).append("&pageSize=").append(pageSize).append("&sortField=").append(sortField).append("&sortType=").append(sortType);
+        JSONObject productObj = productService.getProductListJson(productParams.toString());
+        Integer totalCount = productObj.getInteger("total");
+        JSONArray productList = (JSONArray) productObj.get("items");
+        model.addAttribute("productCount", totalCount);
+        model.addAttribute("productListJson", productList);
+
+        int totalPage = (int) Math.ceil((double) totalCount/pageSize);
+        totalPage = totalPage > 0 ? totalPage : 1;
+        int[] arr = null;
+        if (totalPage <= 6) {
+            int[] tmp = new int[]{1, 2, 3, 4, 5, 6};
+            arr = Arrays.copyOf(tmp, totalPage);
+        }else if (pageNum <= 3) {
+            arr = new int[]{1, 2, 3, 4, 5, 0, totalPage};
+        }else if (pageNum >= totalPage - 2) {
+            arr = new int[]{1, 0, totalPage - 4, totalPage - 3, totalPage - 2, totalPage - 1, totalPage};
+        }else{
+            arr = new int[]{1, 0, pageNum - 2, pageNum - 1, pageNum, pageNum + 1, pageNum + 2, 0, totalPage};
+        }
+
+        List<Map<String,Object>> arrPath = new ArrayList<>();
+
+        final String basePath = "/product/classify-" + typeSort + "-" + bigTypeId + "-" + smallTypeId + "-" + tinyTypeId;
+        if (pageNum > 1) {
+            StringBuilder prevPath = new StringBuilder(basePath);
+            prevPath.append("-").append(pageNum-1).append("-").append(pageSize);
+            if (!StringUtils.isEmpty(sortField)) {
+                prevPath.append("-").append(sortField).append("-").append(sortType).append(".html");
+            } else {
+                prevPath.append(".html");
+            }
+            Map<String,Object> tempPath = new HashMap<>();
+            tempPath.put("btn", -1);
+            tempPath.put("path", prevPath);
+            arrPath.add(tempPath);
+        }
+        for (int j : arr) {
+            Map<String,Object> tempPath = new HashMap<>();
+            tempPath.put("btn", j);
+            if (j > 0) {
+                StringBuilder btnPath = new StringBuilder(basePath);
+                btnPath.append("-").append(j).append("-").append(pageSize);
+                if (!StringUtils.isEmpty(sortField)) {
+                    btnPath.append("-").append(sortField).append("-").append(sortType).append(".html");
+                } else {
+                    btnPath.append(".html");
+                }
+                tempPath.put("path", btnPath);
+            } else {
+                tempPath.put("path", "");
+            }
+            arrPath.add(tempPath);
+        }
+        if (pageNum < totalPage) {
+            StringBuilder nextPath = new StringBuilder(basePath);
+            nextPath.append("-").append(pageNum+1).append("-").append(pageSize);
+            if (!StringUtils.isEmpty(sortField)) {
+                nextPath.append("-").append(sortField).append("-").append(sortType).append(".html");
+            } else {
+                nextPath.append(".html");
+            }
+            Map<String,Object> tempPath = new HashMap<>();
+            tempPath.put("btn", -2);
+            tempPath.put("path", nextPath);
+            arrPath.add(tempPath);
+        }
+        model.addAttribute("pageBtnNum", pageNum);
+        model.addAttribute("pageBtnList", arrPath);
+
         return INSTRUMENT_LIST_PATH;
     }
 

+ 26 - 0
src/main/java/com/caimei/www/service/page/ProductService.java

@@ -1,6 +1,7 @@
 package com.caimei.www.service.page;
 
 import com.alibaba.fastjson.JSONArray;
+import com.alibaba.fastjson.JSONObject;
 import com.caimei.www.pojo.page.ProductDetail;
 
 import java.util.Map;
@@ -31,4 +32,29 @@ public interface ProductService {
      * @param pageId
      */
     Map<String, Object> getTypeFloorJson(Integer pageId);
+
+    /**
+     * 一级分类下拉
+     * @param typeSort
+     */
+    JSONArray getBigTypeJson(Integer typeSort);
+
+    /**
+     * 二级分类下拉
+     * @param bigTypeId
+     */
+    JSONArray getSmallTypeJson(Integer bigTypeId);
+
+    /**
+     * 获取三级分类
+     * @param smallTypeId
+     * @return
+     */
+    JSONArray getTinyTypeJson(Integer smallTypeId);
+
+    /**
+     * 获取分类列表商品信息
+     * @param params
+     */
+    JSONObject getProductListJson(String params);
 }

+ 78 - 0
src/main/java/com/caimei/www/service/page/impl/ProductServiceImpl.java

@@ -92,4 +92,82 @@ public class ProductServiceImpl implements ProductService {
         }
     }
 
+    /**
+     * 一级分类下拉
+     *
+     * @param typeSort
+     */
+    @Override
+    public JSONArray getBigTypeJson(Integer typeSort) {
+        String dataUrl = coreServer+"/commodity/type/first?typeSort="+typeSort;
+        try {
+            String classifyResult = RequestUtil.sendGet(dataUrl);
+            log.debug(classifyResult);
+            Map<String, Object> classifyMap = JSONObject.parseObject(classifyResult, Map.class);
+            return (JSONArray) classifyMap.get("data");
+        } catch (Exception e) {
+            log.error("try-catch:",e);
+            return null;
+        }
+    }
+
+    /**
+     * 二级分类下拉
+     *
+     * @param bigTypeId
+     */
+    @Override
+    public JSONArray getSmallTypeJson(Integer bigTypeId) {
+        String dataUrl = coreServer+"/commodity/type/second?bigTypeId="+bigTypeId;
+        try {
+            String classifyResult = RequestUtil.sendGet(dataUrl);
+            log.debug(classifyResult);
+            Map<String, Object> classifyMap = JSONObject.parseObject(classifyResult, Map.class);
+            return (JSONArray) classifyMap.get("data");
+        } catch (Exception e) {
+            log.error("try-catch:",e);
+            return null;
+        }
+    }
+
+    /**
+     * 获取三级分类
+     *
+     * @param smallTypeId
+     * @return
+     */
+    @Override
+    public JSONArray getTinyTypeJson(Integer smallTypeId) {
+        String dataUrl = coreServer+"/commodity/type/third?smallTypeId="+smallTypeId;
+        try {
+            String classifyResult = RequestUtil.sendGet(dataUrl);
+            log.debug(classifyResult);
+            Map<String, Object> classifyMap = JSONObject.parseObject(classifyResult, Map.class);
+            return (JSONArray) classifyMap.get("data");
+        } catch (Exception e) {
+            log.error("try-catch:",e);
+            return null;
+        }
+    }
+
+    /**
+     * 获取分类列表商品信息
+     *
+     * @param params
+     */
+    @Override
+    public JSONObject getProductListJson(String params) {
+        String dataUrl = coreServer+"/commodity/search/query/product/type"+params;
+        try {
+            String productResult = RequestUtil.sendGet(dataUrl);
+            log.debug(productResult);
+            Map<String, Object> productMap = JSONObject.parseObject(productResult, Map.class);
+            String data = (String) productMap.get("data");
+            return JSONObject.parseObject(data);
+        } catch (Exception e) {
+            log.error("try-catch:",e);
+            return null;
+        }
+    }
+
 }

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

@@ -42,7 +42,7 @@
         border-left: 1px solid #f7f7f7;
         font-size: 0;
     }
-    .classification .class-nav-main div.on{
+    .classification .class-nav-main div.on, .classification .class-nav-main div.on a{
         color: #e15616;
     }
     .crumbs-nav >div{display: inline-block}

+ 40 - 141
src/main/resources/static/js/product/produce-list.js

@@ -2,20 +2,14 @@ var productList = new Vue({
     el:'#productList',
     data:{
         userId:0,
-        searchFlag: false,
         listLoading: true,
         requestFlag: true,
         noMore: false,
-        classify:[],
-        smalltypeList:[],//二级分类
-        tinytypeList:[],//三级分类
         listData:[],
-        bigName:'',
-        smallName:'',
-        tinyName:'',
-        bigTypeId:'',
-        smallTypeId:'',//二级分类id
-        tinyTypeId:'',//三级分类id
+        typeSort:0,
+        bigTypeId:0,
+        smallTypeId:0,//二级分类id
+        tinyTypeId:0,//三级分类id
         listRecord: 0,
         pageInput: '1',
         source:'www',
@@ -24,7 +18,7 @@ var productList = new Vue({
             identity:GLOBAL_USER_IDENTITY,
             sortField:'',
             sortType: 1, // 上传0,下传1 綜合1
-            pageSize: 24,
+            pageSize: 4,
             pageNum: 1,
             idType:1
         },
@@ -40,32 +34,8 @@ var productList = new Vue({
             var total = Math.ceil(this.listRecord / this.params.pageSize);
             return total > 0 ? total : 1;
         },
-        showPageBtn: function () {
-            var total = Math.ceil(this.listRecord / this.params.pageSize);
-            total = total > 0 ? total : 1;
-            var index = this.params.pageNum, arr = [];
-            if (total <= 6) {
-                for (var i = 1; i <= total; i++) {
-                    arr.push(i);
-                }
-                return arr;
-            }
-            if (index <= 3) return [1, 2, 3, 4, 5, 0, total];
-            if (index >= total - 2) return [1, 0, total - 4, total - 3, total - 2, total - 1, total];
-            return [1, 0, index - 2, index - 1, index, index + 1, index + 2, 0, total];
-        }
     },
     methods:{
-        getclassify:function(){
-            var _self = this;
-            ProductApi.GetbigTypeclassify({ typeId:_self.bigTypeId, idType:1, source:_self.source },function (res) {
-                if(res.code==0){
-                    _self.smalltypeList = res.data.smallTypeList;
-                }else {
-               CAIMEI.Alert(res.msg,'确定',false)
-                }
-            })
-        },
        getproductList:function(){//商品列表
            var _self=this;
            ProductApi.GetSearchProduct(_self.params,function (res) {
@@ -101,35 +71,22 @@ var productList = new Vue({
         },
         toPagination: function (pageNum) {
             if (pageNum <= this.pageTotal) {
-                this.params.pageNum = pageNum;
-                this.listData=[];
-                this.getproductList();
+                this.params.pageNum = pageNum*1;
+                var url = '/product/classify-'+this.typeSort+'-'+this.bigTypeId+'-'+this.smallTypeId+'-'+this.tinyTypeId+'-'+this.params.pageNum+'-'+this.params.pageSize;
+                if (this.params.sortField) {
+                    url += '-'+this.params.sortField+'-'+this.params.sortType+'.html';
+                } else {
+                    url += '.html';
+                }
+                window.location.href = url;
             }
         },
         toSortList: function (sortField, sortType) {
-             this.params.sortField= sortField;
-             this.params.sortType = sortType;
-             this.params.pageNum = 1;
-             this.listData=[];
-             this.getproductList();
-        },
-        removeNama:function(index){//删除三级分类+
-            this.params.idType = index;
-            switch (index) {
-                case 1:
-                    this.smallName = '';
-                    this.params.id = this.bigTypeId;
-                    this.smallTypeId='';
-                    this.getproductList();
-                    break;
-                case 2:
-                    this.tinyName = '';
-                    this.params.id = this.smallTypeId;
-                    this.tinyTypeId='';
-                    this.getproductList();
-                    break;
-            }
-
+            var url = '/product/classify-'+this.typeSort+'-'+this.bigTypeId+'-'+this.smallTypeId+'-'+this.tinyTypeId+'-1-'+this.params.pageSize+'-'+sortField+'-'+sortType+'.html';
+            this.params.sortField= sortField;
+            this.params.sortType = sortType;
+            this.params.pageNum = 1;
+            window.location.href = url;
         },
         PromotionsFormat:function(promo){//促销活动类型数据处理
             if(promo!=null){
@@ -141,102 +98,44 @@ var productList = new Vue({
             }
             return false
         },
-        checkedClasslyFn:function(item,index){
-            this.params.pageNum = 1;
-            this.params.idType = index;
-            switch (index) {
-                case 1://选择1集分类查询
-                    this.bigName=item.name;
-                    this.smallName = '';
-                    this.bigTypeId = item.bigTypeId;
-                    this.params.id = item.bigTypeId;
-                    this.smallName ='';
-                    this.tinyName ='';
-                    this.smallTypeId='';
-                    this.tinyTypeId='';
-                    this.tinytypeList=[];
-                    this.getclassify();
-                    break;
-                case 2://选择二级分类查询
-                    this.smallName = item.name;
-                    this.tinyName = '';
-                    this.smallTypeId = item.smallTypeId;
-                    this.params.id = item.smallTypeId;
-                    this.tinyTypeId='';
-                    this.tinytypeList =item.tinytypeList;
-                    break;
-                case 3://选择三级分类查询
-                    this.tinyName = item.name;
-                    this.tinyTypeId = item.tinyTypeId;
-                    this.params.id = item.tinyTypeId;
-                    break;
-            }
-           this.listData=[];
-           this.getproductList();
-        },
     },
     created:function () {
         var userInfo = localStorage.getItem('userInfo');
         if(userInfo){
             this.userId = JSON.parse(userInfo).userId;
         }
+        var paramsArr = window.location.pathname.split(".")[0].split("-");
+        this.typeSort =  paramsArr.length>=2 ? paramsArr[1]*1 : 0;
+        this.bigTypeId = paramsArr.length>=3 ? paramsArr[2]*1 : 0;
+        this.smallTypeId = paramsArr.length>=4 ? paramsArr[3]*1 : 0;
+        this.tinyTypeId = paramsArr.length>=5 ? paramsArr[4]*1 : 0;
+        this.params.pageNum = paramsArr.length>=6 ? paramsArr[5]*1 : 1;
+        this.params.sortField= paramsArr.length>=8 ? paramsArr[7] : "";
+        this.params.sortType = paramsArr.length>=9 ? paramsArr[8]*1 : 1;
     },
     mounted:function () {
         var _self = this;
-        var paramsArr = window.location.pathname.split(".")[0].split("-");
-        var typeSort =  paramsArr.length>=1 ? paramsArr[1] : '';
-        this.bigTypeId = paramsArr.length>=2 ? paramsArr[2] : '';
-        this.smallTypeId = paramsArr.length>=3 ? paramsArr[3] : '';
-        this.tinyTypeId = paramsArr.length>=4 ? paramsArr[4] : '';
-        console.log( this.smallTypeId)
-        console.log( this.tinyTypeId)
-        if(this.tinyTypeId==null &&  this.smallTypeId==null){
-            this.params.id=this.bigTypeId;
-            this.params.idType = 1;
-        }else if(this.tinyTypeId==null){
+        this.listRecord = $('#productCount').val() ? $('#productCount').val()*1 : 0;
+        if (this.bigTypeId && this.smallTypeId && this.tinyTypeId) {
+            this.params.id=this.tinyTypeId;
+            this.params.idType = 3;
+        } else if (this.bigTypeId && this.smallTypeId) {
             this.params.id=this.smallTypeId;
             this.params.idType = 2;
-        }else if(this.smallTypeId==null){
+        } else {
             this.params.id=this.bigTypeId;
             this.params.idType = 1;
-        }else {
-            this.params.id=this.tinyTypeId;
-            this.params.idType = 3;
         }
-
-
-        PublicApi.GetProductClassify({typeSort:typeSort,source:'www'},function (res) {
-                if (res.code==0){
-                    _self.classify = res.data;
-                    _self.classify.forEach(function (item) {
-                        if(_self.bigTypeId == item.bigTypeId){
-                            _self.bigName = item.name;
-                            if (item.smallTypeList!='' && item.smallTypeList!=null){
-                                _self.smalltypeList= item.smallTypeList;
-                                _self.smalltypeList.forEach(function (pros) {
-                                    if(_self.smallTypeId == pros.smallTypeId){
-                                        _self.smallName = pros.name;
-                                        if(pros.tinyTypeList!=''&&pros.tinyTypeList!=null){
-                                            _self.tinytypeList = pros.tinyTypeList;
-                                            _self.tinytypeList.forEach(function (thiny) {
-                                                if (thiny.tinyTypeId ==_self.tinyTypeId){
-                                                    _self.tinyName=thiny.name;
-                                                }
-                                            })
-                                        }
-                                    }
-                                })
-                            }
-                        }
-                    })
-                }else {
-                     CAIMEI.Alert(res.msg, '确定', false);
-                }
+        if (GLOBAL_USER_ID && GLOBAL_USER_ID>0) {
+            _self.getproductList();
+        } else {
+            _self.listLoading = false;
+            _self.$nextTick(function(){
+                // 图片懒加载
+                $("img[data-original]").lazyload();
             });
-        this.getclassify();
-        this.getproductList();
+        }
         if(!isPC){
-            _self.getproductList();
             $('footer').addClass("noneImportant");
             //移动端上垃加载更多
             $(window).on('scroll', function(){

+ 60 - 35
src/main/resources/templates/product/instruelist.html

@@ -10,9 +10,10 @@
 <body>
 <!-- 引用头部 -->
 <template th:replace="components/header"></template>
-
+<!--页面参数-->
+<input type="hidden" th:value="${productCount}" id="productCount">
 <!-- 商品列表 -->
-<div id="productList">
+<div id="productList" v-cloak>
      <!--loading-->
     <div v-if="listLoading" class="loading">
         <img src="/img/base/loading.gif">
@@ -21,10 +22,9 @@
         <div class="crumbs-nav" v-if="isPC">
             <div class="crumbs-link"> 筛选条件: </div>
             <div  class="crumbs-nav-main">
-               <div class="crumbs-nav-item" v-if="bigName !=''">{{bigName}}</div>
-               <div class="crumbs-nav-item" v-if="tinyName!=''&& smallName!=''">{{smallName}}</div>
-               <div class="crumbs-nav-item on" @click="removeNama(1)" v-if="smallName!=''&& tinyName==''">{{smallName}} x</div>
-               <div class="crumbs-nav-item on" @click="removeNama(2)" v-if="tinyName!=''">{{tinyName}} x</div>
+                <div class="crumbs-nav-item" th:if="not${#strings.isEmpty(bigTypeName)}" th:text="${bigTypeName}"></div>
+                <div class="crumbs-nav-item on" th:if="not${#strings.isEmpty(smallTypeName)}" th:text="${smallTypeName}"></div>
+                <div class="crumbs-nav-item on" th:if="not${#strings.isEmpty(tinyTypeName)}" th:text="${tinyTypeName}"></div>
             </div>
         </div>
         <div id="listClassify">
@@ -32,19 +32,25 @@
             <div class="classification">
                 <div class="class-title">分类</div>
                 <div class="class-nav-main">
-                    <div v-for="item in classify" @click="checkedClasslyFn(item,1)" :class="{'on':item.bigTypeId == bigTypeId}">{{item.name}}</div>
+                    <div th:each="bigType : ${bigTypeJson}" th:class="${bigType.bigTypeId == bigTypeId}?'on':''">
+                        <a th:text="${bigType.name}" th:href="'/product/classify-'+ ${typeSort} +'-'+ ${bigType.bigTypeId} +'.html'"></a>
+                    </div>
                 </div>
             </div>
-            <div class="classification" v-if="smalltypeList!='' && smalltypeList!=null">
+            <div class="classification" th:if="not${#lists.isEmpty(smallTypeJson)}">
                 <div class="class-title">二级</div>
                 <div class="class-nav-main">
-                    <div v-for="item in smalltypeList" @click="checkedClasslyFn(item,2)" :class="{'on':item.smallTypeId == smallTypeId}">{{item.name}}</div>
+                    <div th:each="smallType : ${smallTypeJson}" th:class="${smallType.smallTypeId == smallTypeId}?'on':''">
+                        <a th:text="${smallType.name}" th:href="'/product/classify-'+ ${typeSort} +'-'+ ${bigTypeId} +'-'+ ${smallType.smallTypeId} +'.html'"></a>
+                    </div>
                 </div>
             </div>
-            <div class="classification" v-if="params.smallTypeId!=''&& tinytypeList!=''&& tinytypeList!=null">
+            <div class="classification" th:if="not${#lists.isEmpty(tinyTypeJson)}">
                 <div class="class-title">三级</div>
                 <div class="class-nav-main">
-                    <div v-for="item in tinytypeList" @click="checkedClasslyFn(item,3)" :class="{'on':item.tinyTypeId == tinyTypeId}">{{item.name}}</div>
+                    <div th:each="tinyType : ${tinyTypeJson}" th:class="${tinyType.tinyTypeId == tinyTypeId}?'on':''">
+                        <a th:text="${tinyType.name}" th:href="'/product/classify-'+ ${typeSort} +'-'+ ${bigTypeId} +'-'+ ${smallTypeId} +'-'+ ${tinyType.tinyTypeId} +'.html'"></a>
+                    </div>
                 </div>
             </div>
         </template>
@@ -75,10 +81,30 @@
                 </ul>
             </div>
         </div>
-        <template v-if="listData && listData.length>0">
-            <div class="list-container">
+        <!--商品列表-->
+        <div th:if="not${#lists.isEmpty(productListJson)}" class="list-container">
+            <!--未登录游客,后台渲染便于SEO-->
+            <div v-if="!GLOBAL_USER_ID">
                 <ul class="clear mfw">
-                    <li class="productItem " v-for="p in listData">
+                    <li class="productItem" th:each="product : ${productListJson}" th:object="${product}">
+                        <a class="image" th:href="'/product-'+ *{productId} +'.html'">
+                            <img src="/img/base/placeholder.png"  th:attr="data-original=*{image}" th:alt="*{name}">
+                            <p class="name">
+                                <span th:if="*{beautyActFlag}==1" class="tag">美博会</span>
+                                <th:block th:text="*{name}"></th:block>
+                            </p>
+                            <div class="price">
+                                <div class="price_text_tag "></div>
+                                <div class="price_grade "><span class="bold">¥</span><i th:attr="class=*{'icon mIcon i'+priceGrade}"></i></div>
+                            </div>
+                        </a>
+                    </li>
+                </ul>
+            </div>
+            <div v-else>
+                <ul class="clear mfw">
+                    <!--登陆后获取动态数据-->
+                    <li class="productItem" v-for="p in listData">
                         <a class="image" :href="'/product-'+p.productId+'.html'">
                             <img src="/img/base/placeholder.png" :data-original="p.image" :alt="p.name">
                             <p class="name" v-html="addhtml + p.name" v-if="p.beautyActFlag==1"></p>
@@ -87,14 +113,14 @@
                                 <template v-if="GLOBAL_USER_ID && GLOBAL_USER_ID>0">
                                     <!--用户身份 0、个人 1、协销 2、会员机构 3、供应商 4,普通机构-->
                                     <template v-if="p.priceFlag==1">
-                                       <div class="price_text_tag">
+                                        <div class="price_text_tag">
                                             <p class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</p>
                                         </div>
                                         <div class="main_price_unde">¥价格未公开</div>
                                     </template>
                                     <template v-else>
                                         <template v-if="(p.priceFlag==0 && p.userIdentity!=3) || p.userIdentity==2 || (p.userIdentity==3 && p.shopId==GLOBAL_SHOP_ID)">
-                                           <div class="price_text_tag">
+                                            <div class="price_text_tag">
                                                 <p class="listTag" v-if="p.actStatus==1">
                                                     {{p.promotions.name}}
                                                     <span v-if="p.priceFlag != 1 && PromotionsFormat(p.promotions)">:¥{{p.price | NumFormat}}</span>
@@ -105,48 +131,47 @@
                                             </div>
                                         </template>
                                         <template v-else-if="p.priceFlag==2 && p.userIdentity==4">
-                                             <div class="price_text_tag">
+                                            <div class="price_text_tag">
                                                 <p class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</p>
                                             </div>
                                             <div class="main_price_unde">¥会员可见</div>
                                         </template>
                                         <template v-else>
-                                         <div class="price_text_tag">
-                                            <p class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</p>
-                                        </div>
-                                        <div class="price_grade"><span class="bold">¥</span><i :class="'icon mIcon i'+p.priceGrade"></i></div>
+                                            <div class="price_text_tag">
+                                                <p class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</p>
+                                            </div>
+                                            <div class="price_grade"><span class="bold">¥</span><i :class="'icon mIcon i'+p.priceGrade"></i></div>
                                         </template>
                                     </template>
                                 </template>
                                 <template v-else>
-                                     <div class="price_text_tag ">
-                                            <p class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</p>
-                                      </div>
-                                      <div class="price_grade "><span class="bold">¥</span><i :class="'icon mIcon i'+p.priceGrade"></i></div>
+                                    <div class="price_text_tag ">
+                                        <p class="listTag" v-if="p.actStatus==1">{{p.promotions.name}}</p>
+                                    </div>
+                                    <div class="price_grade "><span class="bold">¥</span><i :class="'icon mIcon i'+p.priceGrade"></i></div>
                                 </template>
                             </div>
                         </a>
                     </li>
                 </ul>
             </div>
-        </template>
-         <!--数据为空-->
-        <div v-if="!listLoading && (!listData || listData.length==0)" class="empty">
+        </div>
+         <!--数据为空 -->
+        <div th:if="${#lists.isEmpty(productListJson)}" class="empty">
             <img src="/img/common/list-empty.png">
             <div class="msg">
                 <p>此分类下暂无商品</p>
             </div>
         </div>
     </template>
-    <!--分页-->
     <div v-if="(!isPC) && noMore" class="noMore">---- 没有更多了 ----</div>
     <div v-if="isPC && pageTotal>1" class="pageWrap clear">
-        <a v-if="params.pageNum>1" class="prev" @click="toPagination(params.pageNum*1-1)" href="javascript:void(0);"></a>
-        <template v-for="n in showPageBtn">
-            <a v-if="n" :class="{'on':(n==params.pageNum)}" @click="toPagination(n)" href="javascript:void(0);" v-text="n"></a>
-            <span v-else>···</span>
-        </template>
-        <a v-if="params.pageNum<pageTotal" class="next" @click="toPagination(params.pageNum*1+1)" href="javascript:void(0);"></a>
+        <th:block th:each="page : ${pageBtnList}">
+            <a th:if="${page.btn} == -1" class="prev" th:href="${page.path}"></a>
+            <span th:if="${page.btn} == 0">···</span>
+            <a th:if="${page.btn} > 0" th:class="${page.btn == pageBtnNum} ? 'on' : ''" th:href="${page.path}" th:text="${page.btn}"></a>
+            <a th:if="${page.btn} == -2" class="next" th:href="${page.path}"></a>
+        </th:block>
         <span>共<b v-text="pageTotal>1?pageTotal:1"></b>页</span>
         <span>跳至</span>
         <input v-model="pageInput" @blur="checkNum()"/>