caimei365-www/src/main/resources/static/js/encyclopedia/search.js

"use strict";
var search = new Vue({
    el: '#search',
    data: {
        listQuery: {
            keyword: '',
            pageSize: 12,
            pageNum: 1
        },
        searchList: [], // 查询列表
        totalRecord: 100,
        totalPage: 10,
        jumpInput: 1
    },
    filters: {
        // 处理url
        formatUrl: function (item) {
            if (item.commodityType === 1) {
                return 'product-' + item.productId + '.html';
            } else {
                return 'instrument-' + item.productId + '.html';
            }
        }
    },
    computed: {
        // 页码
        pagination: function () {
            return this.makePagination(this.listQuery.pageNum, this.totalPage);
        }
    },
    mounted: function () {
        this.initSearchWord();
        this.fetchSearchList();
    },
    methods: {
        // 初始化关键字
        initSearchWord: function () {
            console.log(decodeURI(window.location.search.slice(1)));
            var query = this.queryString(window.location.search.slice(1));
            document.querySelector('#searchKeyword').value = query.keyword;
            this.listQuery.keyword = query.keyword || '';
        },
        // 获取查询列表
        fetchSearchList: function () {
            var self = this;
            EncyclopediaApi.FetchListByKeyword(this.listQuery, function (res) {
                if (res.code === 0) {
                    var data = res.data;
                    self.listQuery.pageNum = data.pageNum;
                    self.searchList = data.results;
                    self.totalRecord = data.totalRecord;
                    self.totalPage = data.totalPage;
                } else {
                    CAIMEI.Alert(res.msg, '确定', false);
                }
            });
        },
        // 页码切换
        pageChange: function (pageNum) {
            console.log(pageNum);
            if (pageNum < 1 || pageNum > this.totalPage) return;
            this.listQuery.pageNum = pageNum;
            this.fetchSearchList();
        },
        // 根据关键词进行标题格式化
        formatFromKeyword: function (name) {
            var reg = new RegExp(this.listQuery.keyword, 'ig');
            return name.replace(reg, function ($1) {
                return '<span style="color: #e15616">' + $1 + '</span>';
            });
        },
        // 处理url参数 返回参数键值对
        queryString: function (queryStr) {
            var queryStrList = decodeURI(queryStr).split('&');
            var query = Object.create(null);
            queryStrList.forEach(function (str) {
                var temp = str.split('=');
                var key = temp[0];
                var val = temp[1] || '';
                query[key] = val;
            });
            return query;
        },
        // 处理页码
        makePagination: function (pageNum, totalPage) {
            // 页码列表
            var arr = [];
            // 初始化页码列表
            for (var i = 1; i <= totalPage; i++) {
                arr[i - 1] = i;
            }
            if (totalPage <= 7) return arr;
            // 查找当前页码在页码列表中的位置
            var pop = arr.indexOf(pageNum);
            // 截取页码
            if (pageNum < 4) {
                arr = arr.splice(pop + 1 - pageNum, 6);
            } else if (pageNum > totalPage - 3) {
                arr = arr.reverse().splice(0, 6).reverse();
            } else {
                arr = arr.splice(pop - 2, 5);
            }
            return arr;
        }
    }
});