|
|
@@ -1,3 +1,105 @@
|
|
|
+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');
|
|
|
+ });
|
|
|
+ } else {
|
|
|
+ $(el).on('click', function () {
|
|
|
+ option.confirm && option.confirm({status: 1});
|
|
|
+ dropDown.fadeOut();
|
|
|
+ dropBtn.removeClass('cm-active');
|
|
|
+ })
|
|
|
+ }
|
|
|
+ })
|
|
|
+
|
|
|
+ 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",
|
|
|
+ typeId: coreServer + "/commodity/search/query/article/type"
|
|
|
+};
|
|
|
+
|
|
|
var articleList = new Vue({
|
|
|
el: '#articleList',
|
|
|
data: {
|
|
|
@@ -10,12 +112,17 @@ var articleList = new Vue({
|
|
|
num: 1,
|
|
|
typeId: '',
|
|
|
labelId: '',
|
|
|
- keyword: ''
|
|
|
+ keyword: '',
|
|
|
+ status: 1,
|
|
|
+ startDate: '',
|
|
|
+ endDate: ''
|
|
|
},
|
|
|
listData: [],
|
|
|
listRecord: 0,
|
|
|
productRecord: 0,
|
|
|
- pageInput: '1'
|
|
|
+ pageInput: '1',
|
|
|
+ keyword: '',
|
|
|
+ requestType: '', // 请求链接类型keyword | labelId | typeId
|
|
|
},
|
|
|
computed: {
|
|
|
pageTotal: function () {
|
|
|
@@ -37,49 +144,102 @@ var articleList = new Vue({
|
|
|
return [1, 0, index - 2, index - 1, index, index + 1, index + 2, 0, total];
|
|
|
}
|
|
|
},
|
|
|
+ created: function () {
|
|
|
+ // 判断登录状态
|
|
|
+ if (globalUserData.token) {
|
|
|
+ this.loginStatus = true;
|
|
|
+ }
|
|
|
+ var self = this;
|
|
|
+ this.$nextTick(function () {
|
|
|
+ self.initQueryParam();
|
|
|
+ self.initBase();
|
|
|
+ });
|
|
|
+ },
|
|
|
methods: {
|
|
|
- toPagination: function (pageNum) {
|
|
|
- if (pageNum <= this.pageTotal) {
|
|
|
- var params = {pageNum: pageNum};
|
|
|
- window.location.href = updateUrlParam(params);
|
|
|
+ // 初始化链接参数
|
|
|
+ initQueryParam() {
|
|
|
+ if (isPC) {
|
|
|
+ this.params.size = getUrlParam("pageSize") ? getUrlParam("pageSize") * 1 : 8;
|
|
|
+ this.params.num = $("#pageNum").val() ? $("#pageNum").val() * 1 : 1;
|
|
|
+ } else {
|
|
|
+ this.params.size = 8;
|
|
|
+ this.params.num = 1;
|
|
|
}
|
|
|
+ this.keyword = getUrlParam("keyword") ? getUrlParam("keyword") : '';
|
|
|
+ this.params.keyword = this.keyword;
|
|
|
},
|
|
|
- paginationUrl: function(pageNum) {
|
|
|
- var path = window.location.href;
|
|
|
- var paramsArr = window.location.pathname.split(".")[0].split("-");
|
|
|
- var pageId = paramsArr.length>=1 ? paramsArr[1] : '';
|
|
|
- if (paramsArr[0].indexOf('/info/search') >= 0) {
|
|
|
- var search = window.location.search;
|
|
|
- path = '/info/search-'+pageNum+'.html'+search;
|
|
|
- }else if (paramsArr[0].indexOf('/info/center') >= 0) {
|
|
|
- path = '/info/center-'+pageId+'-'+pageNum+'.html';
|
|
|
- } else if (paramsArr[0].indexOf('/info/label') >= 0) {
|
|
|
- path = '/info/label-'+pageId+'-'+pageNum+'.html';
|
|
|
+
|
|
|
+ //初始化页面
|
|
|
+ initBase: function () {
|
|
|
+ this.params.typeId = $("#typeId").val() * 1;
|
|
|
+ this.params.labelId = $("#labelId").val() * 1;
|
|
|
+ if (!this.params.typeId) {
|
|
|
+ $(".content").addClass("sea-top");
|
|
|
}
|
|
|
- return path;
|
|
|
+ if (this.params.typeId) {
|
|
|
+ this.requestType = 'typeId'
|
|
|
+ } else if (this.params.labelId) {
|
|
|
+ this.requestType = 'labelId'
|
|
|
+ } else if (this.params.keyword) {
|
|
|
+ this.requestType = 'keyword'
|
|
|
+ $("header").find("#topSearch").remove();
|
|
|
+ }
|
|
|
+ this.requestAction(this.requestType);
|
|
|
+ this.initPageReset();
|
|
|
+ this.initSortControl();
|
|
|
+ this.fetchProductList();
|
|
|
},
|
|
|
- checkNum: function () {
|
|
|
- if (this.pageInput > this.pageTotal) {
|
|
|
- this.pageInput = this.pageTotal;
|
|
|
- } else if (this.pageInput < 1) {
|
|
|
- this.pageInput = 1;
|
|
|
+
|
|
|
+ // 发起文章列表请求
|
|
|
+ requestAction: function (type) {
|
|
|
+ var requestAction = {
|
|
|
+ 'typeId': this.initWithTypeId,
|
|
|
+ 'labelId': this.initWithLabelId,
|
|
|
+ 'keyword': this.initWithKeyword,
|
|
|
+ };
|
|
|
+ requestAction[type]();
|
|
|
+ },
|
|
|
+
|
|
|
+ // 文章分类查询列表
|
|
|
+ initWithTypeId: function () {
|
|
|
+ var params = {
|
|
|
+ id: this.params.typeId,
|
|
|
+ pageSize: this.params.size,
|
|
|
+ pageNum: this.params.num
|
|
|
}
|
|
|
+ this.getArticleList(requestUrlConfig['typeId'], params);
|
|
|
},
|
|
|
- fetchProductList : function(){
|
|
|
- var _self = this;
|
|
|
- ProductApi.GetProductSearchList({
|
|
|
- keyword: this.params.keyword
|
|
|
- }, function (res) {
|
|
|
- res = JSON.parse(res.data)
|
|
|
- _self.productRecord = res.total
|
|
|
- })
|
|
|
+
|
|
|
+ //文章标签查询文章列表
|
|
|
+ initWithLabelId: function () {
|
|
|
+ var params = {
|
|
|
+ id: this.params.labelId,
|
|
|
+ pageSize: this.params.size,
|
|
|
+ pageNum: this.params.num
|
|
|
+ }
|
|
|
+ this.getArticleList(requestUrlConfig['labelId'], params);
|
|
|
},
|
|
|
+
|
|
|
+ // 关键词查询文章列表
|
|
|
+ initWithKeyword: function () {
|
|
|
+ var params = {
|
|
|
+ keyword: this.params.keyword,
|
|
|
+ pageSize: this.params.size,
|
|
|
+ pageNum: this.params.num,
|
|
|
+ status: this.params.status,
|
|
|
+ startDate: this.params.startDate,
|
|
|
+ endDate: this.params.endDate
|
|
|
+ }
|
|
|
+ this.getArticleList(requestUrlConfig['keyword'], params);
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取文章列表
|
|
|
getArticleList: function (url, params) {
|
|
|
- var _self = this;
|
|
|
+ var self = this;
|
|
|
$.getJSON(url, params, function (r) {
|
|
|
if (r.code === 0 && r.data) {
|
|
|
var result = JSON.parse(r.data);
|
|
|
- _self.listRecord = result.total;
|
|
|
+ self.listRecord = result.total;
|
|
|
var resultData = [];
|
|
|
result.items.map(function (item) {
|
|
|
resultData.push({
|
|
|
@@ -96,98 +256,151 @@ var articleList = new Vue({
|
|
|
publishDate: item.publishDate
|
|
|
});
|
|
|
});
|
|
|
- if(isPC){
|
|
|
- _self.listData = resultData;
|
|
|
- }else{
|
|
|
- _self.listData = _self.listData.concat(resultData);
|
|
|
+ if (isPC) {
|
|
|
+ self.listData = resultData;
|
|
|
+ } else {
|
|
|
+ self.listData = self.listData.concat(resultData);
|
|
|
}
|
|
|
}
|
|
|
- _self.listLoading = false;
|
|
|
- _self.requestFlag = true;
|
|
|
+ self.listLoading = false;
|
|
|
+ self.requestFlag = true;
|
|
|
})
|
|
|
},
|
|
|
- },
|
|
|
- created: function () {
|
|
|
- if(isPC){
|
|
|
- this.params.size = getUrlParam("pageSize") ? getUrlParam("pageSize") * 1 : 8;
|
|
|
- this.params.num = $("#pageNum").val() ? $("#pageNum").val()*1 : 1;
|
|
|
- }else{
|
|
|
- this.params.size = 8;
|
|
|
- this.params.num = 1;
|
|
|
- }
|
|
|
- this.params.keyword = getUrlParam("keyword")?getUrlParam("keyword"):'';
|
|
|
- // 判断登录状态
|
|
|
- if (globalUserData.token) {
|
|
|
- this.loginStatus = true;
|
|
|
- }
|
|
|
- },
|
|
|
- mounted: function () {
|
|
|
- this.params.typeId = $("#typeId").val()*1;
|
|
|
- this.params.labelId = $("#labelId").val()*1;
|
|
|
- if(!this.params.typeId){$(".content").addClass("sea-top")}
|
|
|
- var requestUrl = '';
|
|
|
- var requestParams = {};
|
|
|
- if (this.params.typeId) {
|
|
|
- requestUrl = coreServer+"/commodity/search/query/article/type";
|
|
|
- requestParams = {
|
|
|
- id: this.params.typeId,
|
|
|
- pageSize: this.params.size,
|
|
|
- pageNum: this.params.num
|
|
|
- };
|
|
|
- } else if (this.params.labelId) {
|
|
|
- requestUrl = coreServer+"/commodity/search/query/article/label";
|
|
|
- requestParams = {
|
|
|
- id: this.params.labelId,
|
|
|
- pageSize: this.params.size,
|
|
|
- pageNum: this.params.num
|
|
|
- };
|
|
|
- } else if(this.params.keyword){
|
|
|
- requestUrl = coreServer+"/commodity/search/query/article";
|
|
|
- requestParams = {
|
|
|
- keyword: this.params.keyword,
|
|
|
- pageSize: this.params.size,
|
|
|
- pageNum: this.params.num
|
|
|
- };
|
|
|
- $("header").find("#topSearch").remove();
|
|
|
- }
|
|
|
- if (requestUrl) {
|
|
|
- this.getArticleList(requestUrl, requestParams);
|
|
|
- this.fetchProductList()
|
|
|
- }
|
|
|
- var _self = this;
|
|
|
- if(!isPC){
|
|
|
- $('footer').addClass("noneImportant");
|
|
|
- //移动端上垃加载更多
|
|
|
- $('body').on('scroll', function(){
|
|
|
- var scrollTop = $(this).scrollTop();
|
|
|
- var documentHeight = $(document).height();
|
|
|
- var windowHeight = $(this).height() ;
|
|
|
- // alert(scrollTop + windowHeight == documentHeight)
|
|
|
- if( scrollTop + windowHeight + 100 > documentHeight ){
|
|
|
- //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
|
|
|
- var totalPage = Math.ceil(_self.listRecord / _self.params.size)?Math.ceil(_self.listRecord / _self.params.size):1;
|
|
|
- var next = _self.params.num+1;
|
|
|
- if(next <= totalPage){ // 获取列表数据
|
|
|
- if (_self.requestFlag){
|
|
|
- _self.params.num = next;
|
|
|
- requestParams.pageNum = next;
|
|
|
- _self.getArticleList(requestUrl, requestParams);
|
|
|
+
|
|
|
+ // 搜索
|
|
|
+ onSearchEnter: function () {
|
|
|
+ if (this.keyword === '') {
|
|
|
+ $.confirm({
|
|
|
+ useBootstrap: false,
|
|
|
+ boxWidth: (isPC ? '300px' : '70%'),
|
|
|
+ title: '提示',
|
|
|
+ content: '请输入文章关键字！',
|
|
|
+ closeIcon: true,
|
|
|
+ animation: 'opacity',
|
|
|
+ closeAnimation: 'opacity',
|
|
|
+ animateFromElement: false,
|
|
|
+ buttons: {
|
|
|
+ close: {
|
|
|
+ text: '确定',
|
|
|
+ btnClass: 'btn-confirm'
|
|
|
}
|
|
|
- _self.requestFlag = false;
|
|
|
- }else{ //到底了
|
|
|
- _self.noMore = false;
|
|
|
- $('footer').removeClass("noneImportant");
|
|
|
}
|
|
|
- }
|
|
|
+ });
|
|
|
+ return;
|
|
|
+ }
|
|
|
+ var query = param({
|
|
|
+ keyword: this.keyword,
|
|
|
+ })
|
|
|
+ window.location.href = '/info/search-1.html?' + query;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 页码跳转
|
|
|
+ toPagination: function (pageNum) {
|
|
|
+ if (pageNum <= this.pageTotal) {
|
|
|
+ var params = {pageNum: pageNum};
|
|
|
+ window.location.href = updateUrlParam(params);
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 页码链接处理
|
|
|
+ paginationUrl: function (pageNum) {
|
|
|
+ var path = window.location.href;
|
|
|
+ var paramsArr = window.location.pathname.split(".")[0].split("-");
|
|
|
+ var pageId = paramsArr.length >= 1 ? paramsArr[1] : '';
|
|
|
+ if (paramsArr[0].indexOf('/info/search') >= 0) {
|
|
|
+ var search = window.location.search;
|
|
|
+ path = '/info/search-' + pageNum + '.html' + search;
|
|
|
+ } else if (paramsArr[0].indexOf('/info/center') >= 0) {
|
|
|
+ path = '/info/center-' + pageId + '-' + pageNum + '.html';
|
|
|
+ } else if (paramsArr[0].indexOf('/info/label') >= 0) {
|
|
|
+ path = '/info/label-' + pageId + '-' + pageNum + '.html';
|
|
|
+ }
|
|
|
+ return path;
|
|
|
+ },
|
|
|
+
|
|
|
+ // 页面修改
|
|
|
+ checkNum: function () {
|
|
|
+ if (this.pageInput > this.pageTotal) {
|
|
|
+ this.pageInput = this.pageTotal;
|
|
|
+ } else if (this.pageInput < 1) {
|
|
|
+ this.pageInput = 1;
|
|
|
+ }
|
|
|
+ },
|
|
|
+
|
|
|
+ // 获取产品列表
|
|
|
+ fetchProductList: function () {
|
|
|
+ var self = this;
|
|
|
+ ProductApi.GetProductSearchList({
|
|
|
+ keyword: this.params.keyword
|
|
|
+ }, function (res) {
|
|
|
+ res = JSON.parse(res.data);
|
|
|
+ self.productRecord = res.total;
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
+ // 初始化排序控件
|
|
|
+ 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;
|
|
|
+ },
|
|
|
+ confirm(result) {
|
|
|
+ console.log('确定')
|
|
|
+ self.listLoading = true;
|
|
|
+ self.requestFlag = false;
|
|
|
+ self.listData = [];
|
|
|
+ self.listRecord = 0;
|
|
|
+ self.params.status = result.status;
|
|
|
+ self.params.num = 1;
|
|
|
+ self.requestAction(self.requestType);
|
|
|
+ },
|
|
|
+ cancel() {
|
|
|
+ console.log('取消');
|
|
|
+ },
|
|
|
});
|
|
|
- }
|
|
|
- $("body").on("click", ".header .hotWord", function(){
|
|
|
- $("#mHotWord").show();
|
|
|
- }).on("click", "#mHotWord .close,#mHotWord", function(){
|
|
|
- $("#mHotWord").hide();
|
|
|
- }).on("click", "#mHotWord .tags", function(e){
|
|
|
- e.stopPropagation();
|
|
|
- })
|
|
|
+ },
|
|
|
|
|
|
+ // 页面样式初始化
|
|
|
+ initPageReset: function () {
|
|
|
+ var self = this;
|
|
|
+ if (!isPC) {
|
|
|
+ $('footer').addClass("noneImportant");
|
|
|
+ //移动端上垃加载更多
|
|
|
+ $('body').on('scroll', function () {
|
|
|
+ var scrollTop = $(this).scrollTop();
|
|
|
+ var documentHeight = $(document).height();
|
|
|
+ var windowHeight = $(this).height();
|
|
|
+ // alert(scrollTop + windowHeight == documentHeight)
|
|
|
+ if (scrollTop + windowHeight + 100 > documentHeight) {
|
|
|
+ //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
|
|
|
+ var totalPage = Math.ceil(self.listRecord / self.params.size) ? Math.ceil(self.listRecord / self.params.size) : 1;
|
|
|
+ self.params.num = self.params.num + 1;
|
|
|
+ if (next <= totalPage) { // 获取列表数据
|
|
|
+ if (self.requestFlag) {
|
|
|
+ self.requestAction(self.requestType);
|
|
|
+ }
|
|
|
+ self.requestFlag = false;
|
|
|
+ } else { //到底了
|
|
|
+ self.noMore = false;
|
|
|
+ $('footer').removeClass("noneImportant");
|
|
|
+ }
|
|
|
+ }
|
|
|
+ });
|
|
|
+ }
|
|
|
+ $("body").on("click", ".header .hotWord", function () {
|
|
|
+ $("#mHotWord").show();
|
|
|
+ }).on("click", "#mHotWord .close,#mHotWord", function () {
|
|
|
+ $("#mHotWord").hide();
|
|
|
+ }).on("click", "#mHotWord .tags", function (e) {
|
|
|
+ e.stopPropagation();
|
|
|
+ })
|
|
|
+ },
|
|
|
}
|
|
|
});
|
yuwenjun1997