信息中心搜索结果排序功能修改

src/main/resources/static/css/article/article.css

@@ -100,7 +100,7 @@ dl,dd,dt{zoom:1}
 	.content .mainData{float:left;width: 860px;background:#ffffff;}
 	.content .new-list{width:100%;background:#ffffff;}
 	.content .row:nth-last-child(1){border-bottom:0}
-	.new-list .row{position:relative;display:table;width:800px;height:150px;margin:0 30px;padding:30px 0;border-bottom:solid 1px #ededed}
+	.new-list .row{position:relative;display:table;width:800px;height:150px;margin:0 30px;padding:24px 0;border-bottom:solid 1px #ededed}
 	.row .new-img{position:absolute;width:210px;height:150px;margin-right:20px;background:#FFF url(/img/base/placeholder.png) no-repeat center center;}
 	.row .campaign{position:absolute;top:35px;left:5px;width:56px;height:24px;line-height:24px;font-size:16px;color:#fff;text-align:center;border-radius:2px;background-color:#e15616;opacity:.7;z-index:99}
 	.row .new-img img{width:100%;height:100%;background-color:#FFF;background-size:80%}
@@ -162,6 +162,19 @@ dl,dd,dt{zoom:1}
 	.new-list .search-tip { display: flex; align-items: center; height: 48px; margin: 15px 0; padding: 0 16px; font-size: 16px; color: #4A4F58; background: #FEF6F3; }
 	.new-list .search-tip span { color:#E15616; font-weight:bold; margin: 0 2px; }
 	.new-list .search-tip a { display: block; width: 88px; height: 32px; background: #E15616; color: #fff; text-align: center; line-height: 32px; margin-left: 12px; }
+	/* 搜索结果排序 */
+	.new-list .filter-sort { display: flex; justify-content: flex-start; align-items: center; padding-left: 32px; line-height: 36px; margin-top: 32px; }
+	.new-list .filter-sort .filter__label { font-size: 16px; color: #4A4F58; margin-right: 24px;}
+	.new-list .filter-sort .filter__item_list { color: #8A8A8A; }
+	.new-list .filter-sort .filter__item_list .filter__item { display: inline-block; margin-right: 24px; box-sizing: border-box; padding: 0 16px 0 40px; position: relative; cursor: pointer; }
+	.new-list .filter-sort .filter__item_list .filter__item.active { background: #FEF6F3; color: #E15616; border-radius: 20px; text-align: center; }
+	.new-list .filter-sort .filter__item_list .filter__item.normal::after,
+	.new-list .filter-sort .filter__item_list .filter__item.date::after{ content: ""; display: block; width: 20px; height: 20px; background-position: center;
+		background-repeat: no-repeat; background-size: 20px;position: absolute; left: 16px; top: 50%; transform: translateY(-50%); }
+	.new-list .filter-sort .filter__item_list .filter__item.normal::after { background-image: url("/img/base/pc-icon-sort-normal.png"); }
+	.new-list .filter-sort .filter__item_list .filter__item.date::after { background-image: url("/img/base/pc-icon-sort-date.png"); }
+	.new-list .filter-sort .filter__item_list .filter__item.normal.active::after { background-image: url("/img/base/pc-icon-sort-normal-active.png"); }
+	.new-list .filter-sort .filter__item_list .filter__item.date.active::after { background-image: url("/img/base/pc-icon-sort-date-active.png"); }
 
 	.no-result{width:860px;height:500px;text-align:center;padding-top:100px}
 	.no-result .nofound{color:#333;font-size:18px;margin-top:20px}
@@ -232,8 +245,23 @@ dl,dd,dt{zoom:1}
 	.new-list .search-tip .content div { display: inline }
 	.new-list .search-tip span { color:#E15616; font-weight:bold; }
 	.new-list .search-tip a { display: block; flex-shrink: 0; width: 14.6vw; height: 5.4vw; background: #E15616; color: #fff; text-align: center; line-height: 5.4vw; margin-left: 3.2vw; }
+	/* 搜索结果排序 */
+	.new-list .filter-sort { display: flex; justify-content: flex-start; align-items: center; padding-left: 3.2vw; padding-bottom: 5.8vw; padding-top: 2.4vw; line-height: 8vw; font-size: 3.4vw;}
+	.new-list .filter-sort .filter__label { color: #4A4F58; margin-right: 3.2vw;}
+	.new-list .filter-sort .filter__item_list { color: #8A8A8A; }
+	.new-list .filter-sort .filter__item_list .filter__item { display: inline-block; margin-right: 2.4vw; box-sizing: border-box; padding: 0 2.8vw 0 8.4vw; position: relative; cursor: pointer; }
+	.new-list .filter-sort .filter__item_list .filter__item.active { background: #FEF6F3; color: #E15616; border-radius: 4vw; text-align: center; }
+	.new-list .filter-sort .filter__item_list .filter__item.normal::after,
+	.new-list .filter-sort .filter__item_list .filter__item.date::after{ content: ""; display: block; width: 4.8vw; height: 4.8vw; background-position: center;
+		background-repeat: no-repeat; background-size: 4.8vw;position: absolute; left: 2.8vw; top: 50%; transform: translateY(-50%); }
+	.new-list .filter-sort .filter__item_list .filter__item.normal::after { background-image: url("/img/base/pc-icon-sort-normal.png"); }
+	.new-list .filter-sort .filter__item_list .filter__item.date::after { background-image: url("/img/base/pc-icon-sort-date.png"); }
+	.new-list .filter-sort .filter__item_list .filter__item.normal.active::after { background-image: url("/img/base/pc-icon-sort-normal-active.png"); }
+	.new-list .filter-sort .filter__item_list .filter__item.date.active::after { background-image: url("/img/base/pc-icon-sort-date-active.png"); }
+
 	.dataRousce{width:100%;background:#FFF;overflow:hidden}
 	.dataRousce .row{width:100%;height:34.8vw;border-top:1px solid #F5F5F5;background:#FFF;overflow:hidden;box-sizing:border-box;padding:2vw 3.3vw 2vw 37vw;position:relative;color:#93979F;line-height:3.5vw;font-size:2.6vw}
+	.dataRousce .row:first-child{border-top: 0;}
 	.dataRousce .row img{position:absolute;left:3.3vw;top:2.3vw;width:30.4vw;height:30.4vw}
 	.dataRousce .row .title{margin-bottom:2vw;color:#2D3036;font-size:3.4vw;max-height:9.6vw;line-height:4.8vw;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}
 	.dataRousce .row .xinxi{margin-bottom:2vw;color:#93979f;max-height:8.4vw;line-height:4.2vw;overflow:hidden;text-overflow:ellipsis;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical}

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

@@ -1,101 +1,3 @@
-function initFilter(option) {
-    var comEl = $(option.el);
-    var dropBtn = comEl.find('.cm-drop-btn');
-    var dropDown = comEl.find('.cm-drop-down');
-    var datePicker = comEl.find('.cm-date-picker');
-    var dateFilter = comEl.find('.cm-filter-date');
-    var slideNav = comEl.find('.cm-slide');
-    var slideAlert = comEl.find('.cm-sub-slide');
-    var startDate = datePicker.find('.cm-date-begin');
-    var endDate = datePicker.find('.cm-date-end');
-
-    $(window).on('click', function (el) {
-        if (comEl.has(el.target).length > 0) return;
-        dropDown.fadeOut();
-        dropBtn.removeClass('cm-active');
-    })
-
-    dropBtn.on('click', function () {
-        dropDown.fadeToggle();
-        dropBtn.toggleClass('cm-active');
-    })
-
-    slideNav.on('click', function () {
-        $(this).addClass('cm-active').siblings('.cm-slide').removeClass('cm-active').find('.cm-sub-slide').hide();
-        slideAlert.hide();
-        $($(this).attr('data-target')).show();
-    })
-
-    slideNav.each(function (index, el) {
-        var confirmBtn = $($(el).attr('data-target')).find('.cm-confirm');
-        var cancelBtn = $($(el).attr('data-target')).find('.cm-cancel');
-        if (cancelBtn.length > 0) {
-            cancelBtn.on('click', function () {
-                option.cancel && option.cancel();
-                dropDown.fadeOut();
-                dropBtn.removeClass('cm-active');
-            });
-        }
-        if (confirmBtn.length > 0) {
-            confirmBtn.on('click', function () {
-                option.confirm && option.confirm({status: 2});
-                dropDown.fadeOut();
-                dropBtn.removeClass('cm-active');
-                dropBtn.text($(el).find('.cm-slide-name').text())
-            });
-        } else {
-            $(el).on('click', function () {
-                option.confirm && option.confirm({status: 1});
-                dropDown.fadeOut();
-                dropBtn.removeClass('cm-active');
-                dropBtn.text($(el).find('.cm-slide-name').text())
-            })
-        }
-    })
-
-    function generageDateStr(type) {
-        var dayTimestamp = 24 * 60 * 60 * 1000;
-        var result = {
-            week: 7,
-            month: 30,
-            halfYear: 182,
-            year: 365,
-        };
-        return moment(Date.now() - result[type] * dayTimestamp).format('YYYY-MM-DD');
-    }
-
-    dateFilter.find('.cm-item').on('click', function () {
-        $(this).siblings('.cm-item').removeClass('cm-active');
-        $(this).addClass('cm-active');
-        var days = $(this).attr('data-last-date');
-        var start = generageDateStr(days);
-        var end = moment().format('YYYY-MM-DD');
-        var date = start + ' to ' + end;
-        option.getDate && option.getDate({date, start, end});
-    });
-
-    datePicker.on('click', function () {
-        dateFilter.find('.cm-item').removeClass('cm-active');
-    });
-
-    // 初始化时间选择器
-    datePicker.dateRangePicker({
-        language: 'cn',
-        format: 'YYYY-MM-DD',
-        autoClose: isPC,
-        showShortcuts: false,
-        isNowrap: false,
-        getValue: function () {
-            return option.setDate ? option.setDate() : ''
-        },
-        setValue: function (date, start, end) {
-            option.getDate && option.getDate({date, start, end})
-            startDate.text(start)
-            endDate.text(end)
-        },
-    });
-}
-
 var requestUrlConfig = {
     keyword: coreServer + "/commodity/search/query/article",
     labelId: coreServer + "/commodity/search/query/article/label",
@@ -228,9 +130,7 @@ var articleList = new Vue({
                 keyword: this.params.keyword,
                 pageSize: this.params.size,
                 pageNum: this.params.num,
-                status: this.params.status,
-                startDate: this.params.startDate,
-                endDate: this.params.endDate
+                status: this.params.status
             }
             this.getArticleList(requestUrlConfig['keyword'], params);
         },
@@ -343,16 +243,8 @@ var articleList = new Vue({
         // 初始化排序控件
         initSortControl: function () {
             var self = this;
-            // filter article
             initFilter({
-                el: '#cm-filter-sort',
-                setDate() {
-                    return self.params.startDate + ' to ' + self.params.endDate;
-                },
-                getDate(result) {
-                    self.params.startDate = result.start;
-                    self.params.endDate = result.end;
-                },
+                el: '#filter-sort',
                 confirm(result) {
                     console.log('确定')
                     self.listLoading = true;
@@ -363,10 +255,7 @@ var articleList = new Vue({
                     self.params.num = 1;
                     self.requestAction(self.requestType);
                 },
-                cancel() {
-                    console.log('取消');
-                },
-            });
+            })
         },
 
         // 页面样式初始化
@@ -406,3 +295,112 @@ var articleList = new Vue({
         },
     }
 });
+
+function initFilter(option){
+    var comEl = $(option.el);
+    comEl.find('.filter__item').on('click', function(){
+        $(this).siblings('.filter__item').removeClass('active');
+        $(this).addClass('active');
+        var status = $(this).attr('data-sort-status')
+        option.confirm && option.confirm({ status: status });
+    })
+}
+
+/*
+function initFilter(option) {
+    var comEl = $(option.el);
+    var dropBtn = comEl.find('.cm-drop-btn');
+    var dropDown = comEl.find('.cm-drop-down');
+    var datePicker = comEl.find('.cm-date-picker');
+    var dateFilter = comEl.find('.cm-filter-date');
+    var slideNav = comEl.find('.cm-slide');
+    var slideAlert = comEl.find('.cm-sub-slide');
+    var startDate = datePicker.find('.cm-date-begin');
+    var endDate = datePicker.find('.cm-date-end');
+
+    $(window).on('click', function (el) {
+        if (comEl.has(el.target).length > 0) return;
+        dropDown.fadeOut();
+        dropBtn.removeClass('cm-active');
+    })
+
+    dropBtn.on('click', function () {
+        dropDown.fadeToggle();
+        dropBtn.toggleClass('cm-active');
+    })
+
+    slideNav.on('click', function () {
+        $(this).addClass('cm-active').siblings('.cm-slide').removeClass('cm-active').find('.cm-sub-slide').hide();
+        slideAlert.hide();
+        $($(this).attr('data-target')).show();
+    })
+
+    slideNav.each(function (index, el) {
+        var confirmBtn = $($(el).attr('data-target')).find('.cm-confirm');
+        var cancelBtn = $($(el).attr('data-target')).find('.cm-cancel');
+        if (cancelBtn.length > 0) {
+            cancelBtn.on('click', function () {
+                option.cancel && option.cancel();
+                dropDown.fadeOut();
+                dropBtn.removeClass('cm-active');
+            });
+        }
+        if (confirmBtn.length > 0) {
+            confirmBtn.on('click', function () {
+                option.confirm && option.confirm({status: 2});
+                dropDown.fadeOut();
+                dropBtn.removeClass('cm-active');
+                dropBtn.text($(el).find('.cm-slide-name').text())
+            });
+        } else {
+            $(el).on('click', function () {
+                option.confirm && option.confirm({status: 1});
+                dropDown.fadeOut();
+                dropBtn.removeClass('cm-active');
+                dropBtn.text($(el).find('.cm-slide-name').text())
+            })
+        }
+    })
+
+    function generageDateStr(type) {
+        var dayTimestamp = 24 * 60 * 60 * 1000;
+        var result = {
+            week: 7,
+            month: 30,
+            halfYear: 182,
+            year: 365,
+        };
+        return moment(Date.now() - result[type] * dayTimestamp).format('YYYY-MM-DD');
+    }
+
+    dateFilter.find('.cm-item').on('click', function () {
+        $(this).siblings('.cm-item').removeClass('cm-active');
+        $(this).addClass('cm-active');
+        var days = $(this).attr('data-last-date');
+        var start = generageDateStr(days);
+        var end = moment().format('YYYY-MM-DD');
+        var date = start + ' to ' + end;
+        option.getDate && option.getDate({date, start, end});
+    });
+
+    datePicker.on('click', function () {
+        dateFilter.find('.cm-item').removeClass('cm-active');
+    });
+
+    // 初始化时间选择器
+    datePicker.dateRangePicker({
+        language: 'cn',
+        format: 'YYYY-MM-DD',
+        autoClose: isPC,
+        showShortcuts: false,
+        isNowrap: false,
+        getValue: function () {
+            return option.setDate ? option.setDate() : ''
+        },
+        setValue: function (date, start, end) {
+            option.getDate && option.getDate({date, start, end})
+            startDate.text(start)
+            endDate.text(end)
+        },
+    });
+}*/

src/main/resources/templates/article/components/article-link.html

@@ -14,4 +14,3 @@
     <link href="/lib/datapicker/daterangepicker.css" rel="stylesheet">
     <link th:href="@{/css/base/init.css(v=${version})}" rel="stylesheet" type="text/css">
     <link th:href="@{/css/article/article.css(v=${version})}" rel="stylesheet" type="text/css">
-    <link th:href="@{/css/article/filter-sort.css(v=${version})}" rel="stylesheet" type="text/css">

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

@@ -52,6 +52,7 @@
                 <a target="_blank" :href="'/product/list.html?keyword=' + params.keyword" v-if="productRecord">点击前往</a>
             </div>
             <!-- 排序 -->
+            <!--
             <div class="cm-filter-sort" id="cm-filter-sort" v-show="params.keyword">
                 <div class="cm-tip cm-drop-btn">综合排序</div>
                 <div class="cm-drop-down" style="display: none">
@@ -86,6 +87,15 @@
                     </div>
                 </div>
             </div>
+            -->
+            <!-- 排序 -->
+            <div class="filter-sort" id="filter-sort" v-show="params.keyword">
+                <div class="filter__label">文章排序：</div>
+                <div class="filter__item_list">
+                    <div class="filter__item normal active" data-sort-status="1"><span></span>综合排序</div>
+                    <div class="filter__item date" data-sort-status="2"><span></span>时间排序</div>
+                </div>
+            </div>
             <div v-if="listData.length>0" class="dataRousce">
                 <div class="row" v-for="item in listData">
                     <div class="new-img">
@@ -165,7 +175,6 @@
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/ajax.service.js}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/common/serviceapi/product.service.js}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/article/common.js(v=${version})}"></script>
-<script charset="utf-8" type="text/javascript" th:src="@{/js/article/cm-filter-sort.js(v=${version})}"></script>
 <script charset="utf-8" type="text/javascript" th:src="@{/js/article/list.js(v=${version})}"></script>
 </body>
 </html>