108 lines
2.7 KiB
Vue
108 lines
2.7 KiB
Vue
|
<template>
|
||
|
|
<NuxtLayout name="default" :categories="categoryTree">
|
||
|
|
<div class="content-wrap">
|
||
|
|
<h2>搜索到 <em>{{ articlePage.pagination.total }}</em> 条记录</h2>
|
||
|
|
<ArticleList :articles="articlePage.data" :keyword="keyword"/>
|
||
|
|
<Pagination
|
||
|
|
v-model="articlePage.pagination"
|
||
|
|
:get-page-url="page => {
|
||
|
|
return `/search?kwd=${keyword}&page=${page}`
|
||
|
|
}"
|
||
|
|
/>
|
||
|
|
</div>
|
||
|
|
</NuxtLayout>
|
||
|
|
</template>
|
||
|
|
|
||
|
|
<script>
|
||
|
|
import { definePageMeta } from '#imports'
|
||
|
|
import { ref } from 'vue'
|
||
|
|
import { useRoute } from 'vue-router'
|
||
|
|
import Pagination from '@/components/common/Pagination'
|
||
|
|
import ArticleList from '@/components/cms/ArticleList'
|
||
|
|
import { fetchTemplateData } from '@/api/cms/template'
|
||
|
|
import { search } from '@/api/cms/search'
|
||
|
|
import { strictPackage } from '@/utils/util'
|
||
|
|
|
||
|
|
export default {
|
||
|
|
components: { ArticleList, Pagination },
|
||
|
|
async setup () {
|
||
|
|
// 去掉默认布局
|
||
|
|
definePageMeta({
|
||
|
|
layout: false,
|
||
|
|
})
|
||
|
|
const route = useRoute()
|
||
|
|
const keyword = route.query.kwd || ''
|
||
|
|
// 获取模板数据
|
||
|
|
const data = strictPackage(await fetchTemplateData({
|
||
|
|
path: '/search.vue',
|
||
|
|
parameters: {
|
||
|
|
keyword
|
||
|
|
}
|
||
|
|
}))
|
||
|
|
return {
|
||
|
|
keyword,
|
||
|
|
// 栏目树
|
||
|
|
categoryTree: data.CATEGORIES_TREE,
|
||
|
|
// 文章数据
|
||
|
|
articlePage: ref({
|
||
|
|
// 文章列表
|
||
|
|
data: data.SEARCH_PAGE.articlePage.records,
|
||
|
|
// 分页数据
|
||
|
|
pagination: {
|
||
|
|
page: data.SEARCH_PAGE.articlePage.page,
|
||
|
|
capacity: data.SEARCH_PAGE.articlePage.capacity,
|
||
|
|
total: data.SEARCH_PAGE.articlePage.total
|
||
|
|
}
|
||
|
|
})
|
||
|
|
}
|
||
|
|
},
|
||
|
|
watch: {
|
||
|
|
// 路由参数变化时，触发数据搜索
|
||
|
|
'$route.query': function (newQuery) {
|
||
|
|
this.keyword = newQuery.kwd || ''
|
||
|
|
this.handlePageChange(Number(newQuery.page) || 1)
|
||
|
|
}
|
||
|
|
},
|
||
|
|
methods: {
|
||
|
|
/**
|
||
|
|
* 页码变更
|
||
|
|
*
|
||
|
|
* @param page 新页码
|
||
|
|
*/
|
||
|
|
handlePageChange (page) {
|
||
|
|
this.articlePage.pagination.page = page
|
||
|
|
search({
|
||
|
|
page: this.articlePage.pagination.page,
|
||
|
|
capacity: this.articlePage.pagination.capacity,
|
||
|
|
model: this.keyword
|
||
|
|
})
|
||
|
|
.then(data => {
|
||
|
|
this.articlePage.data = data.articlePage.records
|
||
|
|
this.articlePage.pagination.total = data.articlePage.total
|
||
|
|
})
|
||
|
|
.catch(e => {
|
||
|
|
this.$tip.apiFailed(e)
|
||
|
|
})
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</script>
|
||
|
|
|
||
|
|
<style scoped lang="scss">
|
||
|
|
.content-wrap {
|
||
|
|
background-color: var(--color-white);
|
||
|
|
padding: 20px;
|
||
|
|
h2 {
|
||
|
|
margin: 0;
|
||
|
|
border-bottom: 1px solid var(--border-color);
|
||
|
|
padding-bottom: 10px;
|
||
|
|
font-weight: normal;
|
||
|
|
em {
|
||
|
|
font-weight: bold;
|
||
|
|
font-style: normal;
|
||
|
|
color: var(--primary-color);
|
||
|
|
}
|
||
|
|
}
|
||
|
|
}
|
||
|
|
</style>
|