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

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',
    filters: {
        keywordSlice: function (keyword) {
            return keyword.length > 6 ? keyword.slice(0, 6) + '…' : keyword;
        }
    },
    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,
        productList: [],
        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();
            self.initAuthInputComplete();
        });
    },

    methods: {
        // init auto-input complete
        initAuthInputComplete(){
            new AutoComplete({
                el: '.auto-input',
                callback: async function(keyword){
                    try {
                        const res = await PublicApi.fetchQueryKeywordList({keyword: keyword});
                        if(!res.data) return [];
                        return res.data.map(item => item.keyword);
                    } catch (e) {
                        console.log(e);
                    }
                },
                itemClick: function (keyword) {
                    window.location.href = '/info/search-1.html?keyword='+keyword;
                }
            });
        },
        // 初始化链接参数
        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'
                $('#topSearch .keyword').val(this.params.keyword);
                $('.tip-bar').css('padding-bottom', 0);
            }
            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
            }
            this.getArticleList(requestUrlConfig['keyword'], params);
        },

        // 高亮关键词
        highlightKeyword: function (str) {
            return str.replace(new RegExp(this.keyword, 'g'), '<span style="color: #E15616">' + this.keyword + '</span>')
        },

        // 获取文章列表
        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
                        });
                    });
                    // 处理标题和描述
                    resultData = resultData.map(function (item) {
                        item.title = self.highlightKeyword(item.title);
                        item.intro = self.highlightKeyword(item.intro);
                        return item
                    });
                    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;
                if (res.total > 8) {
                    self.productList = res.items.slice(0, 6);
                } else {
                    self.productList = res.items.slice(0, 8);
                }
            })
        },

        // 初始化排序控件
        initSortControl: function () {
            var self = this;
            initFilterSort({
                el: '#searchSortControl',
                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);
                },
            })
        },

        onPageScroll: debounce(function () {
            var scrollTop = $('body').scrollTop();
            var documentHeight = $(document).height();
            var windowHeight = $('body').height();
            // alert(scrollTop + windowHeight == documentHeight)
            if (scrollTop > 600) {
                $('#scrollTop').show();
            } else {
                $('#scrollTop').hide();
            }
            if (scrollTop + windowHeight + 100 > documentHeight) {
                //此处是滚动条到底部时候触发的事件，在这里写要加载的数据，或者是拉动滚动条的操作
                if (this.params.num < this.pageTotal) { // 获取列表数据
                    if (this.requestFlag) {
                        this.params.num = this.params.num + 1;
                        this.requestAction(this.requestType);
                    }
                } else { //到底了
                    this.noMore = true;
                    $('footer').removeClass("noneImportant");
                }
            }
        }),

        // 页面样式初始化
        initPageReset: function () {
            if (!isPC) {
                $('footer').addClass("noneImportant");
                //移动端上垃加载更多
                $('body').on('scroll', this.onPageScroll);
            }
        },
    }
});

function initFilterSort(option = {}) {
    var sortControl = $(option.el);
    var sortItem = sortControl.find('.search__sort_select li');
    var sotrCurrent = sortControl.find('.search__sort_current');

    $(window).on('click', function (el) {
        if (sortControl.has(el.target).length > 0) return;
        sortControl.removeClass('active');
    })

    sortControl.on('click', function () {
        $(this).toggleClass('active');
    })

    sortItem.on('click', function (el) {
        $(this).addClass('selected').siblings('li').removeClass('selected');
        var status = parseInt($(this).attr('data-type'));
        console.log(status)
        sotrCurrent.text($(this).text());
        option.confirm && option.confirm({status: status});
    })
}