feat: 移动端搜索页面&接口联调

jydocs-mobile/src/api/main.ts

@@ -18,24 +18,32 @@ export function getHomeActivity (data: any) {
   })
 }
 
-export function getCashOutInfo (data: any) {
-  data = qs.stringify(data)
+export function getIndexTags () {
   return $request({
-    url: '/buy',
-    method: 'post',
-    data: data
+    url: '/indexTag',
+    method: 'GET'
   })
 }
 
-export function submitCashOutInfo (data: any) {
+export function doSearchDocs (data: any) {
   data = qs.stringify(data)
   return $request({
-    url: '/distribution/cashout/submit',
-    method: 'post',
+    url: '/search',
+    method: 'POST',
     data
   })
 }
 
+// 我的文库
+export function getMyLibList (data: any) {
+  data = qs.stringify(data)
+  return $request({
+    url: '/user/list',
+    method: 'get',
+    params: data
+  })
+}
+
 export function getDetails (data: any) {
   console.log(data)
   // data = qs.stringify(data)

jydocs-mobile/src/components/Search.vue

@@ -19,8 +19,13 @@ import { Icon, Search } from 'vant'
   })
 export default class Empty extends Vue {
     @Prop({ default: 'input' }) type?: string | undefined;
+    @Prop({ default: '' }) defalultValue?: string | undefined;
     input = ''
 
+    created () {
+      this.input = this.defalultValue
+    }
+
     onSearch () {
       this.$emit('submit', this.input)
     }

jydocs-mobile/src/components/docs-card/Card.vue

@@ -1,5 +1,5 @@
 <template>
-  <div class="doc-container" @click="clickCard">
+  <div class="doc-container van-hairline--bottom" @click="clickCard">
     <div class="docs-card oneline" v-if="cardType === 'oneline'" key="docs-card">
       <div class="docs-header flex-r-c center">
         <van-icon :name="docTypeIcon" />
@@ -7,7 +7,7 @@
         <Price :price="price" />
       </div>
     </div>
-    <div class="docs-card image flex-r-c" v-if="cardType === 'image'" key="docs-card">
+    <div class="docs-card image flex-r-c" v-else-if="cardType === 'image'" key="docs-card">
       <div class="image-container">
         <img v-lazy="imageSrc" />
         <van-icon class="doc-type-icon" :name="docTypeIcon" />
@@ -27,7 +27,7 @@
             </div>
           </div>
           <div class="card-info-item price">
-            <Price :price="price" />
+            <slot name="price"><Price :price="price" /></slot>
           </div>
         </div>
       </div>
@@ -48,7 +48,7 @@
           >{{ item }}</span>
         </div>
         <div class="c-f-right flex-r-c">
-          <Price :price="price" />
+          <slot name="price"><Price :price="price" /></slot>
         </div>
       </div>
     </div>
@@ -58,7 +58,7 @@
 import { Component, Vue, Prop } from 'vue-property-decorator'
 import Price from '@/components/docs-card/Price.vue'
 import { Icon } from 'vant'
-import { replaceKeyword } from '@/utils/globalFunctions'
+import { replaceKeyword, docTypeConvert } from '@/utils/globalFunctions'
 
 @Component({
   name: 'docs-card',
@@ -71,20 +71,28 @@ import { replaceKeyword } from '@/utils/globalFunctions'
 export default class DocsCard extends Vue {
   @Prop({ default: '' }) title!: string;
   @Prop({ default: '' }) cardType?: string | undefined; // oneline, image
-  @Prop({ default: [] }) highlightKey?: Array<string> | undefined;
   @Prop({ default: '' }) desc?: string | undefined;
   @Prop({ default: 'pdf' }) docType?: string | undefined; // 文档类型
-  @Prop({ default: [] }) subInfo?: Array<string> | undefined;
   @Prop({ default: '' }) imageSrc?: string | undefined;
   @Prop({ default: '' }) uploader?: string | undefined;
-  @Prop({ default: 0 }) price?: string | number | undefined;
+  @Prop({ default: 0 }) price?: string | number;
 
-  created () {
-    console.log(123)
-  }
+  @Prop({
+    type: Array,
+    default () {
+      return []
+    }
+  }) subInfo?: Array<string>;
+
+  @Prop({
+    type: Array,
+    default () {
+      return []
+    }
+  }) highlightKey?: Array<string>;
 
   get docTypeIcon () {
-    return `diy-${this.docType}`
+    return `diy-${docTypeConvert(this.docType)}`
   }
 
   get hightLightTitle () {
@@ -130,7 +138,6 @@ export default class DocsCard extends Vue {
     .d-title {
       margin-left: 4px;
       font-size: 16px;
-      line-height: 24px;
       color: #171826;
     }
   }

jydocs-mobile/src/router/modules/main.ts

@@ -2,7 +2,7 @@ export default [
   {
     path: '/search',
     name: 'search',
-    component: () => import(/* webpackChunkName: "test" */ '@/views/Search.vue'),
+    component: () => import('@/views/Search.vue'),
     meta: {
       title: '剑鱼文库'
     }
@@ -10,7 +10,7 @@ export default [
   {
     path: '/purchasesuccess',
     name: 'purchasesuccess',
-    component: () => import(/* webpackChunkName: "test" */ '@/views/purchase/purchasesuccess.vue'),
+    component: () => import('@/views/purchase/purchasesuccess.vue'),
     meta: {
       title: '剑鱼文库'
     }
@@ -18,7 +18,7 @@ export default [
   {
     path: '/purchase/:id',
     name: 'purchase',
-    component: () => import(/* webpackChunkName: "test" */ '@/views/purchase/purchase.vue'),
+    component: () => import('@/views/purchase/purchase.vue'),
     meta: {
       title: '剑鱼文库'
     }
@@ -26,15 +26,23 @@ export default [
   {
     path: '/details/:id',
     name: 'details',
-    component: () => import(/* webpackChunkName: "test" */ '@/views/details/details.vue'),
+    component: () => import('@/views/details/details.vue'),
     meta: {
       title: '文库详情'
     }
   },
+  {
+    path: '/user/library',
+    name: 'userLibrary',
+    component: () => import('@/views/user/Library.vue'),
+    meta: {
+      title: '我的文库'
+    }
+  },
   {
     path: '/onlineterm',
     name: 'onlineterm',
-    component: () => import(/* webpackChunkName: "test" */ '@/views/purchase/onlineterm.vue'),
+    component: () => import('@/views/purchase/onlineterm.vue'),
     meta: {
       title: '剑鱼标讯线上服务条款'
     }

jydocs-mobile/src/store/modules/main.ts

@@ -3,14 +3,15 @@ import Vue from 'vue'
 import {
   getHomeHot,
   getHomeActivity,
-  getCashOutInfo,
-  submitCashOutInfo,
-  getDocPay,
+  doSearchDocs,
+  getMyLibList,
   getDetails,
   getListDetail,
   getRemove,
   getAdd,
   getCoin,
+  getDocPay,
+  getIndexTags
 } from '@/api/main'
 
 interface InterfaceStore<S> extends StoreOptions<S> {
@@ -69,42 +70,43 @@ function formatData (v: APIStructure) {
 const modulesOption: modulesOption = {
   namespaced: true,
   state: {
-    // 提现页面数据缓存(用于跳出页面返回时恢复)
-    cashOutInfo: recoveryPageData('partner-cashout'),
-    cashOutSuccess: recoveryPageData('partner-cashout-success'),
-    homePageData: recoveryPageData('jy-docs-home-page')
+    // 页面数据缓存(用于跳出页面返回时恢复)
+    homePageData: recoveryPageData('jy-docs-home-page'),
+    searchPageData: recoveryPageData('jy-docs-search-page'),
+    userLib: recoveryPageData('jy-docs-user-lib')
   },
   mutations: {
-    // 保存提现页面数据
-    saveCashOutInfo (state, data) {
+    // 保存首页数据
+    saveHomeData (state, data) {
       for (const key in data) {
-        state.cashOutInfo[key] = data[key]
+        Vue.set(state.homePageData, key, data[key])
       }
-      sessionStorage.setItem('partner-cashout', JSON.stringify(data))
-    },
-    // 清除提现页面数据
-    clearCashOutInfo (state) {
-      state.cashOutInfo = {}
-      sessionStorage.setItem('partner-cashout', JSON.stringify({}))
+      sessionStorage.setItem('jy-docs-home-page', JSON.stringify(state.homePageData))
     },
-    // 保存提现成功数据
-    saveCashOutSuccessInfo (state, data) {
+    // 我的文库页面数据
+    saveSearchPageState (state, data) {
+      console.log(data)
       for (const key in data) {
-        state.cashOutSuccess[key] = data[key]
+        state.searchPageData[key] = data[key]
       }
-      sessionStorage.setItem('partner-cashout-success', JSON.stringify(data))
+      sessionStorage.setItem('jy-docs-search-page', JSON.stringify(data))
     },
     // 清除提现成功数据
-    clearCashOutSuccessInfo (state) {
-      state.cashOutSuccess = {}
-      sessionStorage.setItem('partner-cashout-success', JSON.stringify({}))
+    clearSearchPageState (state) {
+      state.searchPageData = {}
+      sessionStorage.setItem('jy-docs-search-page', JSON.stringify({}))
     },
-    // 保存首页数据
-    saveHomeData (state, data) {
+    // 我的文库页面数据
+    saveMyLibState (state, data) {
       for (const key in data) {
-        Vue.set(state.homePageData, key, data[key])
+        state.userLib[key] = data[key]
       }
-      sessionStorage.setItem('jy-docs-home-page', JSON.stringify(state.homePageData))
+      sessionStorage.setItem('jy-docs-user-lib', JSON.stringify(data))
+    },
+    // 清除提现成功数据
+    clearMyLibState (state) {
+      state.userLib = {}
+      sessionStorage.setItem('jy-docs-user-lib', JSON.stringify({}))
     }
   },
   actions: {
@@ -132,24 +134,17 @@ const modulesOption: modulesOption = {
         }
       })
     },
-    // 文库购买
-    async getDocPay (state, data) {
+    // 文库查询
+    async doSearchDocs (state, data) {
       try {
-        const res = await getDocPay(data)
+        const res = await doSearchDocs(data)
         return res.data
       } catch (error) {}
     },
-    // 提现查询
-    async getCashOutInfo (state, data) {
+    // 我的文库查询
+    async getMyLibList (state, data) {
       try {
-        const res = await getCashOutInfo(data)
-        return res.data
-      } catch (error) {}
-    },
-    // 提现提交
-    async submitCashOutInfo (state, data) {
-      try {
-        const res = await submitCashOutInfo(data)
+        const res = await getMyLibList(data)
         return res.data
       } catch (error) {}
     },
@@ -169,6 +164,13 @@ const modulesOption: modulesOption = {
         return res.data
       } catch (error) {}
     },
+    // 文库购买
+    async getDocPay (state, data) {
+      try {
+        const res = await getDocPay(data)
+        return res.data
+      } catch (error) {}
+    },
     // 文库收藏
     async getAdd (state, data) {
       try {
@@ -192,6 +194,14 @@ const modulesOption: modulesOption = {
         console.log(res)
         return res.data
       } catch (error) {}
+    },
+    // 剑鱼币
+    async getIndexTags () {
+      try {
+        const res = await getIndexTags()
+        console.log(res)
+        return res.data
+      } catch (error) {}
     }
   },
   getters: {}

jydocs-mobile/src/utils/globalFunctions.ts

@@ -322,6 +322,21 @@ export function formatSize (size: string | number, pointLength: number, units: A
   }
   return (unit === 'B' ? size : size.toFixed(pointLength === undefined ? 2 : pointLength)) + (unit || '')
 }
+
+// 文件类型转换
+export function docTypeConvert (docType = 'pdf') {
+  const typeMap: any = {
+    doc: 'word',
+    docx: 'word',
+    xls: 'excel',
+    xlsx: 'excel',
+    ppt: 'ppt',
+    pdf: 'pdf'
+  }
+  const type = typeMap[docType]
+  return type || docType // map中不存在的，则返回原始类型
+}
+
 /**
  * 通用关键字高亮替换
  * @param {String} value 要高亮的字符串

jydocs-mobile/src/views/Search.vue

@@ -1,170 +1,346 @@
 <template>
-  <div class="pages--search" :data-top="Offset">
-    <search ref="getH" id="mySearch" key="search-page" @input="goSearchInput" @submit="goSearch"></search>
-    <van-sticky :offset-top="Offset">
-      <van-tabs v-model="active"
-          title-active-color="#2ABED1"
-          title-inactive-color="#5F5E64"
-          color="#2ABED1"
-        >
-        <van-tab :title="item.label" :name="item.type" v-for="item in tabs" :key="item.type"></van-tab>
+  <div class="pages--search">
+    <div class="j-header">
+      <search id="mySearch" key="search-page" :defalultValue="listState.value" @input="onInput" @submit="doSearch"></search>
+      <van-tabs v-model="docsTypeConf.active"
+        v-if="docsTypeConf.list.length"
+        title-active-color="#2ABED1"
+        title-inactive-color="#5F5E64"
+        color="#2ABED1"
+        @change="docTypeChange"
+      >
+        <van-tab v-for="(item, index) in docsTypeConf.list" :key="index" :title="item.label" :name="item.type"></van-tab>
       </van-tabs>
-    </van-sticky>
-    <h1>4544454545454</h1>
-    <h1>4544454545454</h1>
-    <h1>4544454545454</h1>
-    <h1>4544454545454</h1>
-    <h1>4544454545454</h1>
-    <h1>4544454545454</h1>
-    <h1>4544454545454</h1>
-    <h1>4544454545454</h1>
-    <h1>4544454545454</h1>
-    <h1>4544454545454</h1>
-    <h1>4544454545454</h1>
-    <h1>4544454545454</h1>
-    <h1>4544454545454</h1>
-    <h1>4544454545454</h1>
-    <h1>4544454545454</h1>
-    <h1>4544454545454</h1>
-    <h1>4544454545454</h1>
-    <h1>4544454545454</h1>
+      <div class="sort-list flex-r-c center">
+        <div
+          class="sort-list-item flex-r-c center flex"
+          :class="{
+            active: item.active,
+            reverse: item.sort
+          }"
+          v-for="(item, index) in sortTypeList"
+          :key="index"
+          @click="sortAndSearch(item, index)"
+        >
+          <span class="s-i-label">{{ item.label }}</span>
+          <van-icon name="down" class="s-i-icon" />
+        </div>
+      </div>
+    </div>
+    <div class="j-main" ref="scrollWrap">
+      <van-list
+        v-model="listState.loading"
+        :finished="listState.finished"
+        :offset="listState.offset"
+        @load="getList"
+        class="more-list calc-height-1px"
+        ref="vanList"
+      >
+        <div>
+          <Card
+            v-for="(item, index) in listState.list"
+            :key="index"
+            :title="item.docName"
+            :desc="item.docSummary"
+            :docType="item.docFileType"
+            :highlightKey="highlightKey"
+            :price="item.price"
+            :subInfo="calcSubInfo(item)"
+            @onClick="toDocDetail(item)"
+          />
+        </div>
+        <Empty v-if="listState.list.length === 0 && listState.loaded">暂无数据</Empty>
+      </van-list>
+    </div>
   </div>
 </template>
 
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator'
+import { Tabs, Tab, Icon, List } from 'vant'
 import Search from '@/components/Search.vue'
-import { Tabs, Tab, Icon, Sticky } from 'vant'
-// import { mapActions } from 'vuex'
-  // import { MixinTop } from '@/utils/mixin-top'
-  @Component({
-    name: 'home',
-    // mixins: [MixinTop],
-    components: {
-      [Tab.name]: Tab,
-      [Tabs.name]: Tabs,
-      [Sticky.name]: Sticky,
-      [Icon.name]: Icon,
-      Search
+import Card from '@/components/docs-card/Card.vue'
+import Empty from '@/components/common/Empty.vue'
+import { mapState, mapMutations, mapActions } from 'vuex'
+import { dateFormatter } from '@/utils/globalFunctions'
+
+@Component({
+  name: 'home',
+  components: {
+    [Tab.name]: Tab,
+    [Tabs.name]: Tabs,
+    [List.name]: List,
+    [Icon.name]: Icon,
+    Search,
+    Card,
+    Empty
+  },
+  methods: {
+    ...mapState('main', {
+      searchState: (state: any) => state.searchPageData
+    }),
+    ...mapMutations({
+      saveSearchState: 'main/saveSearchPageState',
+      clearSearchState: 'main/clearSearchPageState'
+    }),
+    ...mapActions({
+      doSearchRquesst: 'main/doSearchDocs',
+      getIndexTags: 'main/getIndexTags'
+    })
+  }
+})
+
+export default class extends Vue {
+  protected searchState: any
+  protected saveSearchState: any
+  protected clearSearchState: any
+
+  protected doSearchRquesst: any
+  protected getIndexTags: any
+
+  docsTypeConf = {
+    active: '',
+    list: []
+  }
+
+  sortTypeList = [
+    {
+      type: 'tSort',
+      label: '上传时间',
+      sort: 0,
+      active: true
+    },
+    {
+      type: 'dSort',
+      label: '下载次数',
+      sort: 0,
+      active: false
     },
-    methods: {
-      // ...mapActions({
-      //   ajaxData: 'main/getHome'
-      // })
+    {
+      type: 'vSort',
+      label: '浏览人数',
+      sort: 0,
+      active: false
     }
-  })
+  ]
 
-export default class extends Vue {
-    // protected ajaxData: any
-    pageData: any = {}
-    searchTop = 54
-    active = 'all1'
-    searchInput = ''
-    tabs = [
-      {
-        type: 'all1',
-        label: '全部'
-      },
-      {
-        type: 'all2',
-        label: '招标'
-      },
-      {
-        type: 'all3',
-        label: '法律法规'
-      },
-      {
-        type: 'all4',
-        label: '行业报告'
-      }
-    ]
-
-    created () {
-      this.pageData = {
-        new: [
-          {
-            img: require('@/assets/images/bgApp.png'),
-            type: 'pdf',
-            id: '1',
-            title: '优化招投标市场营商环境与国企优化招投标市场营商环境与国企...',
-            money: 200000
-          },
-          {
-            type: 'excel',
-            img: require('@/assets/images/bgApp.png'),
-            id: '2',
-            title: '优化招投标市场营商环境与国企优化招投标市场营商环境与国企...',
-            money: 200
-          },
-          {
-            type: 'word',
-            img: require('@/assets/images/bgApp.png'),
-            id: '3',
-            title: '优化招投标市场营商环境与国企优化招投标市场营商环境与国企...',
-            money: 200
-          },
-          {
-            type: 'ppt',
-            img: require('@/assets/images/bgApp.png'),
-            id: '4',
-            title: '优化招投标市场营商环境与国企优化招投标市场营商环境与国企...',
-            money: 200
-          },
-          {
-            type: 'other',
-            img: require('@/assets/images/bgApp.png'),
-            id: '5',
-            title: '优化招投标市场营商环境与国企优化招投标市场营商环境与国企...',
-            money: 200
-          }
-        ]
-      }
+  listState ={
+    value: '',
+    loaded: false, // 是否首次加载完成
+    loading: false,
+    finished: true,
+    pageNum: 1,
+    pageSize: 10,
+    offset: 80,
+    scrollTop: 0,
+    total: 0,
+    list: []
+  }
+
+  get activeSortType () {
+    return this.sortTypeList.find(item => {
+      return item.active
+    })
+  }
+
+  get highlightKey () {
+    return this.listState.value.split(/\s+/)
+  }
+
+  created () {
+    const y = this.reStoreState()
+    if (!y) {
+      this.getTags()
     }
+  }
+
+  mounted () {
+    this.onFocus()
+  }
 
-    mounted () {
-      this.onFocus()
-      const tempI = (this.$refs.getH as Vue).$el as HTMLDivElement
-      this.searchTop = tempI.offsetHeight
+  onFocus () {
+    const dom = document.querySelector('#mySearch input') as HTMLInputElement
+    if (dom) {
+      this.$nextTick(() => {
+        setTimeout(() => {
+          dom.focus()
+        }, 200)
+      })
     }
+  }
 
-    get Offset () {
-      const tempN = document.querySelector('.j-header.jy-app-header') as HTMLDivElement
-      if (tempN) {
-        return tempN.offsetHeight - 1 + this.searchTop
-      } else {
-        return 0
-      }
+  // 恢复数据至第一次请求的状态(页码等)
+  resetListState () {
+    const state = {
+      loading: false,
+      finished: true,
+      pageNum: 1,
+      total: 0,
+      list: []
     }
+    Object.assign(this.listState, state)
+  }
+
+  onInput (search: string) {
+    this.listState.value = search
+  }
 
-    onFocus () {
-      const tempN = document.querySelector('#mySearch input') as HTMLInputElement
-      if (tempN) {
-        this.$nextTick(() => {
-          tempN.focus()
-          setTimeout(() => {
-            tempN.focus()
-          }, 200)
-        })
+  docTypeChange () {
+    if (!this.listState.value) return
+    this.resetListState()
+    this.listState.finished = false
+    this.getList()
+  }
+
+  sortAndSearch (item: any) {
+    if (item.active) {
+      // 改变sort
+      // item.sort = item.sort ? 0 : 1
+    } else {
+      this.sortTypeList.forEach(s => {
+        s.active = false
+      })
+      item.active = true
+    }
+    if (!this.listState.value) return
+    this.resetListState()
+    this.listState.finished = false
+    this.getList()
+  }
+
+  doSearch () {
+    this.resetListState()
+    this.listState.finished = false
+    this.getList()
+  }
+
+  toDocDetail (item: any) {
+    const { docId: id } = item
+    this.saveState()
+    this.$router.push({
+      name: 'details',
+      params: { id }
+    })
+  }
+
+  async getTags () {
+    const { data } = await this.getIndexTags()
+    if (Array.isArray(data)) {
+      const list: any = data.map(item => {
+        return {
+          type: item,
+          label: item
+        }
+      })
+      this.docsTypeConf.list = list
+      if (data.length) {
+        const i: any = this.docsTypeConf.list[0]
+        this.docsTypeConf.active = i.type
       }
     }
+    return data
+  }
 
-    goSearch (search: any) {
-      console.log(search)
+  async getList () {
+    if (!this.listState.value) return
+    const query = {
+      keyWord: this.listState.value,
+      tag: this.docsTypeConf.active === '全部' ? '' : this.docsTypeConf.active,
+      sort: this.activeSortType?.type,
+      num: this.listState.pageNum,
+      size: this.listState.pageSize
+    }
+    console.log('搜索参数：', query)
+    this.listState.loading = true
+    const { data } = await this.doSearchRquesst(query)
+    this.listState.loading = false
+    this.listState.loaded = true
+    if (data && Array.isArray(data.list)) {
+      this.listState.pageNum += 1
+      this.listState.total = data.total
+      this.listState.list = this.listState.list.concat(data.list)
+    } else {
+      this.listState.finished = true
     }
 
-    goSearchInput (search: string) {
-      this.searchInput = search
+    // 数据请求完成(根据页码计算，当前页是否是最后一页)
+    // 请求完成后，页码就变为了下一页的页面，所以这里要-1
+    const isLastPage = (this.listState.pageNum - 1) * this.listState.pageSize >= this.listState.total
+    if (isLastPage) {
+      this.listState.finished = true
     }
+  }
+
+  calcSubInfo (item: any) {
+    const { uploadDate, downTimes } = item
+    return [dateFormatter(uploadDate, 'yyyy/MM/dd'), `${downTimes}次下载`]
+  }
 
-    goContent (item: any) {
-      console.log(item)
+  reStoreState () {
+    const listInfo = this.searchState()
+    if (!listInfo || Object.keys(listInfo).length === 0) {
+      return false
+    } else {
+      for (const key in listInfo) {
+        this.$data[key] = listInfo[key]
+      }
+      this.$nextTick(() => {
+        const wrapper: any = this.$refs.scrollWrap
+        wrapper.scrollTop = this.listState.scrollTop
+      })
+      return true
     }
+  }
+
+  saveState () {
+    const wrapper: any = this.$refs.scrollWrap
+    this.listState.scrollTop = wrapper.scrollTop
+    const d = {
+      docsTypeConf: this.docsTypeConf,
+      sortTypeList: this.sortTypeList,
+      listState: this.listState
+    }
+    console.log(d)
+    this.saveSearchState(d)
+  }
 }
 </script>
 <style scoped lang="scss">
 .pages--search {
-  background: #F5F6F7;
-  padding-bottom: 40px;
+  background-color: #F5F6F7;
   box-sizing: border-box;
+  ::v-deep .van-tabs {
+    width: 100%;
+    font-size: 14px;
+    line-height: 20px;
+  }
+
+  .j-header {
+    flex-direction: column;
+  }
+
+  .sort-list {
+    width: 100%;
+    font-size: 14px;
+    line-height: 20px;
+    .sort-list-item {
+      padding: 12px 16px;
+      &.active {
+        color: #2ABED1;
+      }
+      &.reverse {
+        .s-i-icon {
+          transform: rotate(180deg);
+        }
+      }
+      .s-i-label {
+        margin-right: 4px;
+      }
+      .s-i-icon {
+        font-weight: bold;
+        transition: transform .2 ease;
+      }
+    }
+  }
 }
 </style>

jydocs-mobile/vue.config.js

@@ -46,19 +46,11 @@ module.exports = {
     disableHostCheck: true,
     proxy: {
       '^/dev/api': {
-        target: 'http://app207-jytest.jianyu360.cn',
+        target: 'http://192.168.20.180:821',
         changeOrigin: true,
         logLevel: 'debug',
         pathRewrite: {
-          '^/dev/api': ''
-        }
-      },
-      '^/distribution': {
-        target: 'http://app207-jytest.jianyu360.cn',
-        changeOrigin: true,
-        logLevel: 'debug',
-        pathRewrite: {
-          '^/distribution': '/distribution'
+          '^/dev/api': '/jydocs'
         }
       },
       '^/jydocs': {

jydocs-pc/src/views/Search.vue

@@ -106,7 +106,7 @@ export default {
       })
     },
     highlightKey () {
-      return [this.searchQuery.text]
+      return this.searchQuery.text.split(/\s+/)
     }
   },
   methods: {
@@ -136,7 +136,7 @@ export default {
       if (!this.searchQuery.text) return
       const query = {
         keyWord: this.searchQuery.text,
-        tag: this.searchQuery.type === 'all' ? '' : this.searchQuery.type,
+        tag: this.searchQuery.type === '全部' ? '' : this.searchQuery.type,
         sort: this.activeSortList.type,
         num: this.listState.pageNum,
         size: this.listState.pageSize