caimei365-www/src/main/resources/static/js/document/beauty-archive.js

var isPC = $(window).width() > 768;
var clientWidth = $(window).width() ;
$(window).on('resize', function () {
    var change = $(window).width() > 768;
    clientWidth = $(window).width();
    if (isPC === change) return;
    window.location.reload();
});

//美业资料库列表
var beautyArchive = new Vue({
    el: '#beautyArchive',
    data: {
        listLoading: false,
        total: 0, // 商品总数
        totalPage: 0,// 分页数
        jumpPageSize: '',
        listQuery: {
            keyword: '', //查询关键词
            productType: 0, //商品类型 0 全部 1 仪器 2 产品
            pageNum: 1,
            pageSize: 10
        },
        keyword: '',
        productList: [],  //商品列表
        hasNextPage: false,
        showPageBtn: 6,
        openSearch: false, //开启搜索
        currentTab: 0,
        tabList: [{
            id: 0,
            name: '全部'
        }, {
            id: 1,
            name: '产品'
        }, {
            id: 2,
            name: '仪器'
        }]
    },
    watch: {
        keyword: function (val) {
            if (val) return;
            this.openSearch = false;
            this.listQuery.keyword = '';
            this.getList();
        }
    },
    mounted() {
        this.getList();
    },
    computed: {
        loadingText: function () {
            return this.hasNextPage ? '上滑加载更多' : '没有更多了';
        },
        pagination: function () {
            var index = this.listQuery.pageNum, arr = [];
            if (this.totalPage <= 6) {
                for (var i = 1; i <= this.totalPage; i++) {
                    arr.push(i);
                }
                return arr;
            }
            if (index <= 3) {
                return [1, 2, 3, 4, 5, 0, this.totalPage];
            }
            if (index >= this.totalPage - 2) {
                return [1, 0, this.totalPage - 4, this.totalPage - 3, this.totalPage - 2, this.totalPage - 1, this.totalPage];
            }
            return [1, 0, index - 2, index - 1, index, index + 1, index + 2, 0, this.totalPage];
        }
    },
    filters: {
        productType: function (val) {
            if (val === 1) {
                return '产品';
            }
            if (val === 2) {
                return '仪器';
            }
            return '未知';
        }
    },
    methods: {
        //页码跳转
        toPagination: function (pageNum) {
            if (pageNum > this.totalPage || pageNum <= 0) {
                return this.jumpPageSize = '';
            }
            this.listQuery.pageNum = parseInt(pageNum);
            this.getList(); //获取列表
        },
        //获取商品列表
        getList: function () {
            const _that = this;
            _that.listLoading = true;
            BeautyArchiveApi.GetArchiveProduct(this.listQuery, function (res) {
                if (res.code !== 0) return console.log('请求失败');
                _that.hasNextPage = res.data.hasNextPage;
                _that.listQuery.pageNum = res.data.pageNum;
                _that.listQuery.pageSize = res.data.pageSize;
                _that.total = res.data.totalRecord;
                _that.totalPage = res.data.totalPage;
                if (isPC) {
                    _that.productList = res.data.results;
                } else {
                    _that.productList = _that.productList.concat(res.data.results);
                }
                _that.listLoading = false;
                _that.windowScroll();
            })
        },
        //tab切换
        tabClick: function (productType, index) {
            this.currentTab = index;
            this.listQuery.pageNum = 1;
            this.listQuery.productType = productType;
            this.productList = [];
            this.getList();
        },
        // 高亮文字
        formatTitle: function(val){
            var reg = new RegExp(this.listQuery.keyword, 'g');
            var str = '<span>' + this.listQuery.keyword + '</span>';
            return val.replace(reg, str);
        },
        //搜索
        handleSearch: function (keyword) {
            this.listQuery.keyword = keyword;
            this.listQuery.pageNum = 1;
            this.productList = [];
            this.openSearch = true;
            this.getList();
            console.log(this.listQuery.keyword);
        },
        //跳转到商品详情
        handleToDetail: function (product) {
            var url = '';
            if(!product.archiveId) {
                window.location.href = '/404.html'
            }
            if (product.redirectType === 1) {
                url = '/product-' + product.productId +'-'+globalUserData.userId+ '.html?open=caimei365';
            } else if (product.redirectType === 2) {
                url = '/document/archive-detail.html' + '?id=' + product.archiveId;
            } else {
                return;
            }
            window.open(url, '_blank');
        },
        //打开新窗口
        openWindow: function (url) {
            window.open(url, '_blank');
        },
        //窗口滚动事件
        windowScroll: function () {
            if (isPC) return;
            var _that = this;
            $(function () {
                $(window).scroll(function () {
                    clearTimeout(window.scrollTimer);
                    window.scrollTimer = setTimeout(function () {
                        var scorllTop = $(window).scrollTop();
                        var contentHeight = $('body').height();
                        var clientHeight = $(window).height();
                        if (contentHeight - scorllTop - 10 <= clientHeight) {
                            if(!_that.hasNextPage) return;
                            _that.listQuery.pageNum ++;
                            _that.getList();
                        }
                    }, 200);
                });
            });
        }
    }
});