106 lines
3.2 KiB
Vue
106 lines
3.2 KiB
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>
|