feat: pc搜索结果页面接口调用

jydocs-pc/src/views/Search.vue

@@ -1,159 +1,202 @@
 <template>
   <div class="search-container">
-    <search-input @submit="goSubmit" @recovery="getTest"></search-input>
+    <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 sortList"
+          v-for="(item, index) in sortTypeList"
           :key="index"
           @click="sortAndSearch(item, index)"
-          :class="index === listState.sortActive ? 'active': ''"
+          :class="{ active: item.active }"
         >
-          <span class="sort-text">{{ item.name }}</span>
-          <span class="sort-icon" :class="item.sortBy ? 'el-icon-top' : 'el-icon-bottom'"></span>
+          <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
-          :title="title"
-          desc="关于设计图。。。"
-          :highlightKey="['设计图','更新']"
-          :subInfo="['设计图','更新']"
-          @onClick="clickFn"
+          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>
+        <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.currentPage"
+          :current-page="listState.pageNum"
           :page-size="listState.pageSize"
-          :page-count="listState.pageCount"
           :total="listState.total"
           @current-change="onPageChange"
         >
         </el-pagination>
       </div>
     </div>
-    {{ajaxData}}
-    <button @click="getTest" type="primary">模拟Ajax</button>
-    <button  @click="getLoginStatus" type="info">获取登录状态</button>
   </div>
 </template>
 
 <script>
-import { Icon, Pagination, Image } from 'element-ui'
+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 { ajaxGetSearch } from '../api/modules/search'
+import { getSearch } from '../api/modules/search'
+import { formatSize } from '@/utils/'
+import { mixinBackground } from '@/utils/mixins'
 
 export default {
   name: 'seach',
+  mixins: [mixinBackground],
   components: {
     [Icon.name]: Icon,
     [Pagination.name]: Pagination,
-    [Image.name]: Image,
     SearchInput,
     DocCard,
     NoData
   },
   data () {
     return {
-      sortList: [
+      sortTypeList: [
         {
-          name: '上传时间',
-          sortBy: 1
+          type: 'tSort',
+          label: '上传时间',
+          sort: 0,
+          active: true
         },
         {
-          name: '下载次数',
-          sortBy: 0
+          type: 'dSort',
+          label: '下载次数',
+          sort: 0,
+          active: false
         },
         {
-          name: '浏览人数',
-          sortBy: 0
+          type: 'vSort',
+          label: '浏览人数',
+          sort: 0,
+          active: false
         }
       ],
+      searchQuery: {
+        type: '',
+        text: ''
+      },
       listState: {
         loaded: false, // 是否已经搜索过
-        sortActive: 0,
         loading: false,
-        currentPage: 2, // 当前页
+        pageNum: 1, // 当前页
         pageSize: 10, // 每页多少条数据
-        pageCount: 10, // 一共多少页
-        total: 100, // 一共多少条数据
+        total: 0, // 一共多少条数据
         list: [] // 查询请求返回的数据
-      },
-      searchQuery: {},
-      ajaxData: {},
-      title: '设计图变动更新设计图变动更新设计图变动更新设计图变动更新'
+      }
     }
   },
-  methods: {
-    goSubmit (search) {
-      this.$router.replace({
-        name: 'search',
-        query: search
-      })
-      this.searchQuery = search
-      this.getTest(search)
-    },
-    getTest (search) {
-      ajaxGetSearch({
-        keyWord: search.text,
-        tag: search.type,
-        // tSort时间倒叙 dSort下载倒叙 vSort浏览量倒叙
-        sort: 'tSort',
-        num: 1,
-        size: 10
-      }).then(res => {
-        console.log(res.data)
-        this.ajaxData = res.data
+  computed: {
+    activeSortList () {
+      return this.sortTypeList.find(item => {
+        return item.active
       })
     },
+    highlightKey () {
+      return [this.searchQuery.text]
+    }
+  },
+  methods: {
     getLoginStatus: function () {
-      alert(loginflag)
+      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 === 'all' ? '' : 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) {
-      console.log(...arguments)
+      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()
     },
-    clickFn () {
-      console.log('clickItem')
+    toDocDetail (item) {
+      const { docId: id } = item
+      this.$router.push({
+        name: 'content',
+        params: { id }
+      })
     },
     onPageChange (p) {
-      this.listState.currentPage = p
+      this.listState.pageNum = p
       this.listState.loading = true
-      setTimeout(() => {
-        this.listState.loading = false
-      }, 2000)
-      console.log(JSON.stringify(this.listState, null, 4))
+      this.doSearch()
+    },
+    calcSubInfo (item) {
+      const { docFileSize: size, downTimes, uploadDate, docPageSize } = item
+      return [uploadDate, `${downTimes}次下载`, `共${docPageSize}页`, formatSize(size)]
     }
   }
 }
 </script>
-<style lang="scss">
-.el-pagination.is-background .el-pager {
-  li {
-    background-color: #fff;
-    border: 1px solid rgba($color: #000, $alpha: 0.05);
-  }
-
-  li:not(.disabled):hover {
-    color: #fff;
-    background-color: $color-text--highlight;
-  }
-}
-</style>
 <style lang="scss" scoped>
+.search-container {
+  padding-top: 48px;
+}
 .search-result-container {
   margin: 0 auto;
   .sort-list {
     display: flex;
     align-items: center;
-    margin: 0 18px;
+    margin: 18px;
     height: 48px;
     border-radius: 4px;
     background: #F5F6F7;
@@ -189,6 +232,7 @@ export default {
     min-height: 500px;
   }
   .search-pagination {
+    margin: 28px 0 60px;
     text-align: right;
   }
 }