feat：mobile文档搜索页需求调整

jydocs-mobile/src/components/layout.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="j-container" :class="{'transparent-header': headerInfo.transparentHeader}">
-    <div class="j-header jy-app-header" v-if="showHeader" :class="{hideBorder: headerInfo.hideBorder, 'h5-header': $envs.inH5}">
+    <div class="j-header jy-app-header" v-if="showHeader" :class="{hideBorder: headerInfo.hideBorder, 'h5-header': $envs.inH5}" :style="headerInfo.headerStyle">
       <van-icon class="header-left" :style="headerInfo.actionLeftStyle" :class="{ hide: headerInfo.actionLeftHide }" name="arrow-left" @click="goBack" />
       <span class="header-title" :style="headerInfo.titleStyle">{{ headerInfo.title }}</span>
       <span class="header-right" :style="headerInfo.actionRightStyle" @click="actionRight" v-html="headerInfo.actionRightText"></span>
@@ -77,7 +77,8 @@ export default class Layout extends Vue {
       titleStyle: this.conf.titleStyle,
       actionLeftStyle: this.conf.actionLeftStyle,
       actionRightStyle: this.conf.actionRightStyle,
-      hideBorder: this.$route.meta.hideBorder || false
+      hideBorder: this.$route.meta.hideBorder || false,
+      headerStyle: this.conf.headerStyle
     }
   }
 

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

@@ -4,7 +4,9 @@ export default [
     name: 'search',
     component: () => import('@/views/Search.vue'),
     meta: {
-      title: '剑鱼文库'
+      title: '剑鱼文库',
+      layoutConf: true,
+      hideBorder: true
     }
   },
   {

jydocs-mobile/src/store/index.ts

@@ -31,6 +31,7 @@ export default new Vuex.Store({
       titleStyle: {},
       actionLeftStyle: {},
       actionRightStyle: {},
+      headerStyle: {},
       actionRightCallback: ''
     },
     layoutConf: {
@@ -43,6 +44,7 @@ export default new Vuex.Store({
       titleStyle: {},
       actionLeftStyle: {},
       actionRightStyle: {},
+      headerStyle: {},
       actionRightCallback: () => {
         // console.log('actionRight')
       }

jydocs-mobile/src/views/Home.vue

@@ -301,9 +301,11 @@ export default class extends Vue {
   }
 
   goSearch () {
-    this.$router.push({
-      name: 'search'
-    })
+    // this.$router.push({
+    //   name: 'search'
+    // })
+    // P572将搜索页移至剑鱼统一搜索入口
+    location.href = '/jy_mobile/search/middle/docs'
   }
 
   goContent (item: any) {

jydocs-mobile/src/views/Search.vue

@@ -1,8 +1,12 @@
 <template>
   <div class="pages--search">
-    <div class="j-header">
-      <search id="mySearch" ref="input" key="search-page" :defalultValue="listState.value" @input="onInput"
+    <div class="j-header jy-app-header" :class="{'h5-header': $envs.inH5}">
+      <div class="search-header-flex">
+        <van-icon class="header-left" name="arrow-left" @click="clickLeft" />
+        <search id="mySearch" ref="input" key="search-page" :defalultValue="listState.value" @input="onInput"
         @submit="doSearch"></search>
+        <span class="header-right" @click="doSearch">搜索</span>
+      </div>
       <!-- <van-tabs v-model="docsTypeConf.active"
         v-if="docsTypeConf.list.length"
         title-active-color="#2ABED1"
@@ -27,13 +31,13 @@
       </div>
     </div>
     <div class="j-main" ref="scrollWrap">
-      <div class="historySearch" v-if="!listState.loaded && historykeyList.length > 0">
+      <div class="historySearch" v-if="!listState.loaded && historykeyList.length > 0 && isShowHistory">
         <div class="his_head">
           <div class="his_title">历史搜索</div>
           <van-icon :name="'diy-clear'" @click="clearHistory" />
         </div>
         <div class="his_content">
-          <div class="his_item" v-for="item in historykeyList" :key="item" @click="historykeySearch(item)">{{ item }}
+          <div class="his_item" v-for="item in historykeyList" :key="item.label" @click="historykeySearch(item.label)">{{ item.label }}
           </div>
         </div>
       </div>
@@ -79,9 +83,14 @@ import { dateFormatter } from '@/utils/globalFunctions'
     })
   },
   methods: {
+    ...mapState([
+      'layoutConf',
+      'defaultLayoutConf'
+    ]),
     ...mapMutations({
       saveSearchState: 'main/saveSearchPageState',
-      clearSearchState: 'main/clearSearchPageState'
+      clearSearchState: 'main/clearSearchPageState',
+      updateLayoutConfig: 'updateLayoutConfig'
     }),
     ...mapActions({
       doSearchRquesst: 'main/doSearchDocs',
@@ -94,9 +103,12 @@ export default class extends Vue {
   protected searchState: any
   protected saveSearchState: any
   protected clearSearchState: any
+  protected layoutConf!: any
 
   protected doSearchRquesst: any
   protected getIndexTags: any
+  protected updateLayoutConfig!: any
+  $envs: any
   historykeyList: string[] = []
   docsTypeConf = {
     active: '',
@@ -140,6 +152,7 @@ export default class extends Vue {
   }
 
   restored = false // 当前数据是否走过缓存
+  isShowHistory = false // 是否展示搜索历史（P572需求-已将历史记录移至剑鱼搜索页-文档搜索tab），本地开发调试可将置为true
 
   get activeSortType () {
     return this.sortTypeList.find(item => {
@@ -162,9 +175,20 @@ export default class extends Vue {
       this.listState.value = this.$route.query.text as any
       this.doSearch()
     }
-    if (localStorage.getItem('jydocs-searchHistory')) {
-      this.historykeyList = JSON.parse(localStorage.getItem('jydocs-searchHistory') || '[]')
+    // if (localStorage.getItem('jydocs-searchHistory')) {
+    //   this.historykeyList = JSON.parse(localStorage.getItem('jydocs-searchHistory') || '[]')
+    // }
+    const storage = localStorage.getItem('JY-MOBILE--login-clear-AllSearchHistory')
+    if (storage) {
+      const docStorage = JSON.parse(storage)
+      this.historykeyList = docStorage?.data.docs
     }
+    this.updateLayoutConfig({
+      headerStyle: {
+        display: 'none',
+        height: 0
+      }
+    })
   }
 
   onFocus () {
@@ -193,6 +217,9 @@ export default class extends Vue {
 
   onInput (search: string) {
     this.listState.value = search.trim().replace(/\s+/g, ' ')
+    if (!this.listState.value) {
+      history.back()
+    }
   }
 
   historykeySearch (val: any) {
@@ -202,18 +229,64 @@ export default class extends Vue {
 
   savesearchHistory () {
     const key: string = this.listState.value + ''
-    if (key && !this.historykeyList.includes(key)) {
-      this.historykeyList.unshift(key)
+    // 兼容剑鱼搜索通用缓存格式 JY-MOBILE--login-clear-AllSearchHistory
+    const isHave = this.historykeyList.some((v: any) => {
+      return v.label === key
+    })
+    if (key && !isHave) {
+      const items: any = { label: key }
+      this.historykeyList.unshift(items)
       if (this.historykeyList.length > 10) {
         this.historykeyList.pop()
       }
-      localStorage.setItem('jydocs-searchHistory', JSON.stringify(this.historykeyList))
+      // localStorage.setItem('jydocs-searchHistory', JSON.stringify(this.historykeyList))
+      this.setJySearchHistory()
+    } else if (isHave) {
+      console.log('搜索的标签在历史搜索列表内或点击已有的标签需要将标签顺序移至前面')
+      const items: any = { label: key }
+      // 删除当前已有的标签（过滤）
+      const filterList = this.historykeyList.filter((item: any) => {
+        return item.label !== key
+      })
+      this.historykeyList = filterList
+      this.historykeyList.unshift(items)
+      if (this.historykeyList.length > 10) {
+        this.historykeyList.pop()
+      }
+      this.setJySearchHistory()
+    }
+  }
+
+  setJySearchHistory () {
+    const storage = localStorage.getItem('JY-MOBILE--login-clear-AllSearchHistory')
+    if (storage) {
+      const docStorage = JSON.parse(storage)
+      docStorage.data.docs = this.historykeyList
+      localStorage.setItem('JY-MOBILE--login-clear-AllSearchHistory', JSON.stringify(docStorage))
+    } else {
+      const searchHistory = {
+        data: {
+          bidding: [],
+          buyer: [],
+          company: [],
+          supplier: [],
+          docs: this.historykeyList
+        }
+      }
+      localStorage.setItem('JY-MOBILE--login-clear-AllSearchHistory', JSON.stringify(searchHistory))
     }
   }
 
   clearHistory () {
+    if (this.historykeyList.length === 0) return
     this.historykeyList = []
-    localStorage.removeItem('jydocs-searchHistory')
+    // localStorage.removeItem('jydocs-searchHistory')
+    const storage = localStorage.getItem('JY-MOBILE--login-clear-AllSearchHistory')
+    if (storage) {
+      const docStorage = JSON.parse(storage)
+      docStorage.data.docs = this.historykeyList
+      localStorage.setItem('JY-MOBILE--login-clear-AllSearchHistory', JSON.stringify(docStorage))
+    }
   }
 
   docTypeChange () {
@@ -377,6 +450,10 @@ export default class extends Vue {
     }
     this.saveSearchState(d)
   }
+
+  clickLeft () {
+    history.back()
+  }
 }
 </script>
 <style scoped lang="scss">
@@ -395,15 +472,49 @@ export default class extends Vue {
   }
 
   .j-header {
+    height: auto!important;
     flex-direction: column;
+    background: linear-gradient(280.62deg, #D7F6FB 1.93%, #E7FCFF 49.44%, #E7F2FF 98.41%);
   }
 
   .j-header:after {
     height: 0;
   }
 
-  .filter-box {
+  .search-header-flex{
     width: 100%;
+    display: flex;
+    align-items: center;
+    justify-content: space-between;
+    padding-bottom: 12px;
+    .header-right{
+      flex-shrink: 0;
+      font-size: 14px;
+      line-height: 20px;
+      color: #2ABED1;
+      cursor: pointer;
+    }
+    ::v-deep{
+      .my-search{
+        padding: 0 12px;
+      }
+      .van-search__content{
+        background: #fff;
+        border: 0;
+        border-radius: 4px;
+      }
+    }
+  }
+
+  .filter-box {
+    width: calc(100% + 24px);
+    border-radius: 12px 12px 0 0;
+    background: #fff;
+    ::v-deep{
+      .van-dropdown-menu__bar{
+        background: unset;
+      }
+    }
   }
 
   .sort-list {