feat: 搜索交互方式优化

jydocs-mobile/src/components/Search.vue

@@ -1,6 +1,7 @@
 <template>
-  <van-sticky :offset-top="Offset">
-    <van-search class="my-search" left-icon="diy-search" v-model.trim="input" placeholder="搜索文档" />
+  <van-sticky class="van-fade-an" :offset-top="Offset">
+      <div class="click-pop" v-if="type === 'click'"  @click="onClick"></div>
+      <van-search @input="$emit('input', $event)" @search="onSearch" class="my-search" left-icon="diy-search" v-model.trim="input" placeholder="搜索文档" />
   </van-sticky>
 </template>
 
@@ -18,13 +19,23 @@ import { Icon, Search, Sticky } from 'vant'
     }
   })
 export default class Empty extends Vue {
-    @Prop({ default: 'empty-image' }) state?: string | undefined;
+    @Prop({ default: 'input' }) type?: string | undefined;
     input = ''
 
+    onSearch () {
+      this.$emit('submit', this.input)
+    }
+
+    onClick () {
+      if (this.type === 'click') {
+        this.$emit('click')
+      }
+    }
+
     get Offset () {
       const tempN = document.querySelector('.j-header.jy-app-header') as HTMLDivElement
       if (tempN) {
-        return tempN.offsetHeight
+        return tempN.offsetHeight - 1
       } else {
         return 0
       }
@@ -33,6 +44,24 @@ export default class Empty extends Vue {
 </script>
 
 <style scoped lang="scss">
+@keyframes show {
+  to {
+    opacity: 1;
+  }
+}
+.van-fade-an {
+  opacity: 0;
+  animation: show 1s 300ms ease forwards;
+  z-index: 666;
+  position: relative;
+}
+.click-pop {
+  position: absolute;
+  width: 100%;
+  height: 100%;
+  z-index: 99;
+  opacity: 0;
+}
 .my-search {
   &::v-deep.van-search {
     padding: 7px 16px;

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

@@ -1,4 +1,12 @@
 export default [
+  {
+    path: '/search',
+    name: 'search',
+    component: () => import(/* webpackChunkName: "test" */ '@/views/Search.vue'),
+    meta: {
+      title: '剑鱼文库'
+    }
+  },
   {
     path: '/purchasesuccess',
     name: 'purchasesuccess',

jydocs-mobile/src/views/Home.vue

@@ -1,6 +1,6 @@
 <template>
   <div class="pages--home">
-    <search></search>
+    <search type="click" @click="goSearch"></search>
     <div class="new-group base-group">
       <div class="title-group flex-r-c center left">
         <span></span>
@@ -141,6 +141,12 @@ export default class extends Vue {
       }
     }
 
+    goSearch () {
+      this.$router.push({
+        name: 'search'
+      })
+    }
+
     goContent (item: any) {
       console.log(item)
     }

jydocs-mobile/src/views/Search.vue

@@ -0,0 +1,170 @@
+<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>
+      </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>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from 'vue-property-decorator'
+import Search from '@/components/Search.vue'
+import { Tabs, Tab, Icon, Sticky, Toast } 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
+    },
+    methods: {
+      // ...mapActions({
+      //   ajaxData: 'main/getHome'
+      // })
+    }
+  })
+
+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
+          }
+        ]
+      }
+    }
+
+    mounted () {
+      this.onFocus()
+      const tempI = (this.$refs.getH as Vue).$el as HTMLDivElement
+      this.searchTop = tempI.offsetHeight
+    }
+
+    get Offset () {
+      const tempN = document.querySelector('.j-header.jy-app-header') as HTMLDivElement
+      if (tempN) {
+        return tempN.offsetHeight - 1 + this.searchTop
+      } else {
+        return 0
+      }
+    }
+
+    onFocus () {
+      const tempN = document.querySelector('#mySearch input') as HTMLInputElement
+      if (tempN) {
+        this.$nextTick(() => {
+          tempN.focus()
+          setTimeout(() => {
+            tempN.focus()
+          }, 200)
+        })
+      }
+    }
+
+    goSearch (search: any) {
+      console.log(search)
+    }
+
+    goSearchInput (search: string) {
+      this.searchInput = search
+    }
+
+    goContent (item: any) {
+      console.log(item)
+    }
+}
+</script>
+<style scoped lang="scss">
+.pages--search {
+  background: #F5F6F7;
+  padding-bottom: 40px;
+  box-sizing: border-box;
+}
+</style>