nebula/pages/search.vue

<template>
  <el-row class="wrapper">
    <el-col>
      <el-input v-model="q" @keyup.enter.native="search" placeholder="搜索文章,作品集,用户" :clearable="true">
        <el-button slot="append" icon="el-icon-search" @click="search"></el-button>
      </el-input>
    </el-col>
    <el-col>
      <el-tabs v-model="activeName">
        <el-tab-pane :label="'文章 (' + getLength(articles.pagination) + ')'" name="articles">
          <article-list :articles="articles" @currentChange="currentChangeArticle"/>
        </el-tab-pane>
        <el-tab-pane :label="'用户 (' + getLength(users.pagination) + ')'" name="users">
          <user-list :users="users" @currentChange="currentChangeUser"/>
        </el-tab-pane>
        <el-tab-pane :label="'作品集 (' + getLength(portfolios.pagination) + ')'" name="portfolios">
          <portfolio-list :portfolios="portfolios" @currentChange="currentChangePortfolio"/>
        </el-tab-pane>
      </el-tabs>
    </el-col>
  </el-row>
</template>

<script>
import {mapState} from "vuex";
import ArticleList from "../components/archive/list";
import UserList from "../components/common/user/list";
import PortfolioList from "../components/common/portfolio/list";

export default {
  name: "search",
  fetch({store, query, error}) {
    return Promise.all([
      store
        .dispatch('search/fetchArticleList', {queryString: query.q})
        .catch(err => error({statusCode: 404})),
      store
        .dispatch('search/fetchUserList', {queryString: query.q})
        .catch(err => error({statusCode: 404})),
      store
        .dispatch('search/fetchPortfolioList', {queryString: query.q})
        .catch(err => error({statusCode: 404}))
    ])
  },
  watch: {
    '$route.query': function () {
      let _ts = this;
      let queryString = _ts.$route.query.q;
      _ts.$set(_ts, "q", queryString);
      this.$store.dispatch('search/fetchArticleList', {queryString: queryString})
      this.$store.dispatch('search/fetchUserList', {queryString: queryString})
      this.$store.dispatch('search/fetchPortfolioList', {queryString: queryString})
    }
  },
  components: {PortfolioList, UserList, ArticleList},
  computed: {
    ...mapState({
      articles: state => state.search.articles.data,
      users: state => state.search.users.data,
      portfolios: state => state.search.portfolios.data
    })
  },
  data() {
    return {
      q: '',
      activeName: 'articles'
    }
  },
  methods: {
    search() {
      let _ts = this
      if (_ts.q) {
        _ts.$router.push({
          path: `/search?q=${_ts.q}`
        })
      }
    },
    currentChangeArticle(page) {
      this.$store.dispatch("search/fetchArticleList", {queryString: this.q, page: page});
    },
    currentChangeUser(page) {
      this.$store.dispatch("search/fetchUserList", {queryString: this.q, page: page});
    },
    currentChangePortfolio(page) {
      this.$store.dispatch("search/fetchPortfolioList", {queryString: this.q, page: page});
    },
    getLength(pagination) {
      if (pagination.total) {
        return pagination.total;
      }
      return 0;
    }
  },
  mounted() {
    let _ts = this;
    let queryString = _ts.$route.query.q;
    _ts.$set(_ts, "q", queryString);
    _ts.$store.commit('setActiveMenu', 'search')
  }
}
</script>

<style scoped>

</style>