FE_IASF_client/src/pages/column/result.vue

<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.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: 100%;
  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;
  }
}
@media (min-width: 280px) and (max-width: 750px) {
  .articles{
    width: 100%;
    .top{
      flex-direction: column;
      .search{
        width: 95%;
        margin: 0 auto;
      }
    }
    .none{
      margin-top: 50px;
      .text{
        font-size: .5rem;
      }
    }
  }
}
</style>