<template> <div class="wrap"> <div class="articles"> <div class="top"> <div class="search"> <input ref="search" type="text" :placeholder="$t('column.titlePlaceholder')" v-model="title"> <i class="el-icon-search icon"></i> </div> <p class="result">包含 “{{ title }}” 的搜索结果</p> </div> <ul v-if="articles.length" class="list"> <li v-for="(item, i) in articles" :key="i"> <h6 @click="toArtice(item)">{{ item.title }}</h6> <div class="des" v-html="item.mainBody"></div> <Breadcrumb :data.sync="item.routes"/> </li> </ul> <div v-else class="none"> <img src="@/assets/images/none.png" alt=""> <p class="text">没有找到您搜索的内容,您可尝试搜索其他关键词。</p> </div> </div> </div> </template> <script> import { mapState, mapMutations } from 'vuex' import Setting from '@/setting' import Util from '@/libs/util' import mixins from '@/mixins/article' import Breadcrumb from '@/components/breadcrumb' export default { mixins: [mixins], data() { return { title: this.$store.state.content.keyword, searchTimer: null, articles: [], } }, components: { Breadcrumb }, watch: { title() { clearTimeout(this.searchTimer) this.searchTimer = setTimeout(() => { this.getArticle() }, 500) } }, mounted() { this.getArticle() }, methods: { ...mapMutations('content', [ 'setKeyword' ]), // 查询文章列表 getArticle() { this.setKeyword('') this.$post(this.api.newlyPublishedArticles, { siteId: this.$route.query.siteId || this.site, pageNum: 1, pageSize: 1000, title: this.title }).then(({ data }) => { const list = Util.removeTag(data.records) // 添加面包屑参数 list.map(e => { e.routes = [ { name: e.columnName, query: { id: e.columnId } }, { name: e.title } ] }) this.articles = list }).catch(res => {}) }, } }; </script> <style lang="scss" scoped> .wrap { background: url(../../assets/images/result-bg1.png) no-repeat, url(../../assets/images/result-bg2.png) bottom right/auto no-repeat; background-color: #fff; } .articles { width: 1000px; padding-top: 47px; margin: 0 auto; } .top { display: flex; align-items: center; .result { font-size: 18px; color: #969696; } } .search { position: relative; display: inline-flex; height: 62px; margin-right: 30px; border-radius: 6px; overflow: hidden; input { width: 510px; padding: 0 20px; font-size: 18px; color: #333; border: 0; outline: none; background: #F7F7F7; } .icon { position: absolute; top: 17px; right: 15px; font-size: 26px; color: #ccc; border-radius: 0px 6px 6px 0px; } } .list { li { margin-top: 30px; border-bottom: 1px dashed #e3e3e3; } h6 { margin-bottom: 10px; font-size: 22px; color: #1583FF; line-height: 30px; cursor: pointer; } .des { font-size: 18px; line-height: 36px; color: #333; @include mul-ellipsis(2); } .breadcrumb { margin: 15px 0 30px; } } .none { margin-top: 118px; text-align: center; .text { margin-top: 59px; font-size: 18px; color: #333; } } </style>