jy-docs/jydocs-pc/src/views/Search.vue

<template>
  <div class="search-container">
    <search-input ref="search" @submit="doSearch" @recovery="doSearch"></search-input>
    <div class="search-result-container">
      <div class="sort-list">
        <span
          class="sort-item"
          v-for="(item, index) in sortTypeList"
          :key="index"
          @click="sortAndSearch(item, index)"
          :class="{ active: item.active }"
        >
          <span class="sort-text">{{ item.label }}</span>
          <span class="sort-icon" :class="item.sort ? 'el-icon-top' : 'el-icon-bottom'"></span>
        </span>
      </div>
      <div class="search-result-list" v-loading="listState.loading">
        <doc-card
          v-for="(item, index) in listState.list"
          :key="index"
          :title="item.docName"
          :desc="item.docSummary"
          :docType="item.docFileType"
          :price="item.price"
          :highlightKey="highlightKey"
          :subInfo="calcSubInfo(item)"
          @onClick="toDocDetail(item)"
        />
        <no-data v-if="listState.list.length === 0 && listState.loaded"></no-data>
      </div>
      <div class="search-pagination">
        <el-pagination
          background
          layout="prev, pager, next, ->, total"
          :hide-on-single-page="true"
          :current-page="listState.pageNum"
          :page-size="listState.pageSize"
          :total="listState.total"
          @current-change="onPageChange"
        >
        </el-pagination>
      </div>
    </div>
  </div>
</template>

<script>
import { Icon, Pagination } from 'element-ui'
import SearchInput from '@/components/Search'
import DocCard from '@/components/doc-item-card/Card'
import NoData from '@/components/NoData'
import { getSearch } from '../api/modules/search'
import { formatSize, dateFormatter } from '@/utils/'
import { mixinBackground } from '@/utils/mixins'

export default {
  name: 'seach',
  mixins: [mixinBackground],
  components: {
    [Icon.name]: Icon,
    [Pagination.name]: Pagination,
    SearchInput,
    DocCard,
    NoData
  },
  data () {
    return {
      sortTypeList: [
        {
          type: 'tSort',
          label: '上传时间',
          sort: 0,
          active: true
        },
        {
          type: 'dSort',
          label: '下载次数',
          sort: 0,
          active: false
        },
        {
          type: 'vSort',
          label: '浏览人数',
          sort: 0,
          active: false
        }
      ],
      searchQuery: {
        type: '',
        text: ''
      },
      listState: {
        loaded: false, // 是否已经搜索过
        loading: false,
        pageNum: 1, // 当前页
        pageSize: 10, // 每页多少条数据
        total: 0, // 一共多少条数据
        list: [] // 查询请求返回的数据
      }
    }
  },
  computed: {
    activeSortList () {
      return this.sortTypeList.find(item => {
        return item.active
      })
    },
    highlightKey () {
      return this.searchQuery.text.split(/\s+/)
    }
  },
  methods: {
    getLoginStatus: function () {
      console.log(loginflag)
    },
    // 恢复数据至第一次请求的状态(页码等)
    resetListState () {
      const state = {
        loaded: false,
        loading: false,
        pageNum: 1,
        list: []
      }
      Object.assign(this.listState, state)
    },
    doSearch (search) {
      if (search) {
        Object.assign(this.searchQuery, search)
      } else {
        this.searchQuery.type = this.$refs.search.type
        this.searchQuery.text = this.$refs.search.input
      }
      this.getList()
    },
    async getList () {
      if (!this.searchQuery.text) return
      const query = {
        keyWord: this.searchQuery.text,
        tag: this.searchQuery.type === '全部' ? '' : this.searchQuery.type,
        sort: this.activeSortList.type,
        num: this.listState.pageNum,
        size: this.listState.pageSize
      }
      console.log(query)

      this.listState.loading = true
      this.listState.loaded = false
      const r = await getSearch(query)
      this.listState.loading = false
      this.listState.loaded = true

      const res = r.data
      if (res.error_code === 0) {
        this.listState.total = res.data.total
        this.listState.list = res.data.list || []
      }
    },
    sortAndSearch (item, index) {
      if (item.active) {
        // 改变sort
        // item.sort = item.sort ? 0 : 1
      } else {
        this.sortTypeList.forEach(s => {
          s.active = false
        })
        item.active = true
      }
      this.resetListState()
      this.doSearch()
    },
    toDocDetail (item) {
      const { docId: id } = item
      window.open(`./content/${id}`) // 打开新窗口
      // this.$router.push({
      //   name: 'content',
      //   params: { id }
      // })
    },
    onPageChange (p) {
      this.listState.pageNum = p
      this.doSearch()
    },
    calcSubInfo (item) {
      const { docFileSize: size, downTimes, uploadDate, docPageSize } = item
      const subInfoArr = []
      if (uploadDate !== undefined) {
        const data = uploadDate.replace(/-/g, '/')
        subInfoArr.push(dateFormatter(data, 'yyyy/MM/dd'))
      }
      if (downTimes !== undefined) {
        subInfoArr.push(`${downTimes}次下载`)
      }
      if (docPageSize !== undefined) {
        subInfoArr.push(`共${docPageSize}页`)
      }
      if (size !== undefined) {
        subInfoArr.push(formatSize(size))
      }
      return subInfoArr
    }
  }
}
</script>
<style lang="scss" scoped>
.search-container {
  padding-top: 48px;
}
.search-result-container {
  margin: 0 auto;
  .sort-list {
    display: flex;
    align-items: center;
    margin: 18px;
    height: 48px;
    border-radius: 4px;
    background: #F5F6F7;
    .sort-item {
      display: flex;
      align-items: center;
      padding: 0 20px;
      height: 100%;
      font-size: 14px;
      color: #686868;
      cursor: pointer;
      .sort-text {
        margin-right: 4px;
      }
      .sort-icon {
        color: #aaa;
      }
      &.active {
        .sort-text,
        .sort-icon {
          color: $color-text--highlight;
        }
      }
      &:hover {
        .sort-text,
        .sort-icon {
          color: $color-text--highlight;
        }
      }
    }
  }
  .search-result-list {
    min-height: 500px;
  }
  .search-pagination {
    margin-top: 28px;
    padding-bottom: 60px;
    text-align: right;
  }
}
</style>