caimei365-www/src/main/resources/static/js/article/list.js

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: {
        loginStatus: false,
        listLoading: true,
        requestFlag: true,
        noMore: false,
        params: {
            size: 8,
            num: 1,
            typeId: '',
            labelId: '',
            keyword: '',
            status: 1,
            startDate: '',
            endDate: ''
        },
        listData: [],
        listRecord: 0,
        productRecord: 0,
        pageInput: '1',
        keyword: '',
        requestType: '', // 请求链接类型keyword | labelId | typeId
    },
    computed: {
        pageTotal: function () {
            var total = Math.ceil(this.listRecord / this.params.size);
            return total > 0 ? total : 1;
        },
        showPageBtn: function () {
            var total = Math.ceil(this.listRecord / this.params.size);
            total = total > 0 ? total : 1;
            var index = this.params.num, 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];
        }
    },
    created: function () {
        // 判断登录状态
        if (globalUserData.token) {
            this.loginStatus = true;
        }
        var self = this;
        this.$nextTick(function () {
            self.initQueryParam();
            self.initBase();
        });
    },
    methods: {
        // 初始化链接参数
        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;
        },

        //初始化页面
        initBase: function () {
            this.params.typeId = $("#typeId").val() * 1;
            this.params.labelId = $("#labelId").val() * 1;
            if (!this.params.typeId) {
                $(".content").addClass("sea-top");
            }
            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();
        },

        // 发起文章列表请求
        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);
        },

        //文章标签查询文章列表
        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;
            $.getJSON(url, params, function (r) {
                if (r.code === 0 && r.data) {
                    var result = JSON.parse(r.data);
                    self.listRecord = result.total;
                    var resultData = [];
                    result.items.map(function (item) {
                        resultData.push({
                            id: item.articleId,
                            title: item.title,
                            image: item.image,
                            intro: item.intro,
                            typeId: item.typeId,
                            type: item.typeText,
                            labelIds: item.labelIds.replace(/[^[\d|\S]]*/g, ',').split(","),
                            labels: item.labelText.replace(/[^[\d|\S]]*/g, ',').split(","),
                            pv: item.pv,
                            publisher: item.publisher,
                            publishDate: item.publishDate
                        });
                    });
                    if (isPC) {
                        self.listData = resultData;
                    } else {
                        self.listData = self.listData.concat(resultData);
                    }
                }
                self.listLoading = false;
                self.requestFlag = true;
            })
        },

        // 搜索
        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'
                        }
                    }
                });
                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('取消');
                },
            });
        },

        // 页面样式初始化
        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();
            })
        },
    }
});