添加搜索页面

src/router/index.js

@@ -5,6 +5,7 @@ import userRouter from './modules/user'
 import memberRouter from './modules/member'
 import memberRouter from './modules/member'
 import qulificationRouter from './modules/qualification'
 import qulificationRouter from './modules/qualification'
 import regIssueRouter from './modules/regIssue'
 import regIssueRouter from './modules/regIssue'
+import homeRouter from './modules/home'
 import { NativeMenuApi } from '@/api/NativeApis'
 import { NativeMenuApi } from '@/api/NativeApis'
 
 
 const APP_ENV = process.env.VUE_APP_NODE_ENV
 const APP_ENV = process.env.VUE_APP_NODE_ENV
@@ -40,7 +41,7 @@ const routes = [
     },
     },
     component: () => import(/* webpackChunkName: "catalog" */ '@/views/catalog/') // 首页
     component: () => import(/* webpackChunkName: "catalog" */ '@/views/catalog/') // 首页
   }
   }
-].concat(userRouter, memberRouter, qulificationRouter, regIssueRouter)
+].concat(userRouter, memberRouter, qulificationRouter, regIssueRouter, homeRouter)
 
 
 const router = new VueRouter({
 const router = new VueRouter({
   routes
   routes

src/router/modules/home.js

+const Routers = [
+    {
+        path: '/home/search',
+        name: 'GlobalSearch',
+        meta: {
+            title: '全局搜索',
+            isLogin: false
+        },
+        component: () => import(/* webpackChunkName: "GlobalSearch" */ '@/views/home/search.vue') // 全局搜索
+    },
+    {
+        path: '/home/search/result',
+        name: 'GlobalSearchResult',
+        meta: {
+            title: '全局搜索',
+            isLogin: false
+        },
+        component: () => import(/* webpackChunkName: "GlobalSearchResult" */ '@/views/home/search.vue') // 全局搜索
+    },
+]
+
+export default Routers
\ No newline at end of file

src/views/home/index.vue

@@ -40,7 +40,9 @@ export default {
       });
       });
     },
     },
 
 
-    handleSearch () { },
+    handleSearch () {
+      this.$router.push({ name: 'GlobalSearch' })
+    },
 
 
     handleTop (module) {
     handleTop (module) {
       const modules = []
       const modules = []

src/views/home/search.vue

+<template>
+  <div class="global-search nafmii-head-bg3">
+    <nafm-header navClass="nafmii-head-bg3">
+      <SearchInput class="search-input" v-model="keyword" :placeholder="$t('home.searchPlaceholder')" @search="handleSearch" />
+    </nafm-header>
+    <main>
+      <div class="search-history-title">
+        <span>搜索历史</span>
+        <div class="clear">
+          <img src="" alt="">
+        </div>
+      </div>
+      <div class="search-history-values">
+        <span>ksdj离开</span>
+        <span>ksdj离开</span>
+        <span>ksdj离开水电费会计师</span>
+        <span>ksdj离开水电费会计师</span>
+        <span>水电费会计师</span>
+        <span>电费会计师</span>
+      </div>
+    </main>
+  </div>
+</template>
+
+<script>
+import SearchInput from '@/components/SearchInput'
+export default {
+  name: 'GlobalSearch',
+  components: { SearchInput },
+  data () {
+    return {
+      keyword: null
+    }
+  },
+  methods: {
+    handleSearch (val) {
+    }
+  }
+}
+</script>
+
+<style lang="less" scoped>
+.global-search {
+  height: 100%;
+  display: flex;
+  flex-direction: column;
+  .search-input {
+    width: 100%;
+    padding-left: 40px;
+  }
+  main {
+    background: #fafafa;
+    height: 100%;
+    padding: 20px 15px;
+    .search-history-title {
+      display: flex;
+      align-items: center;
+      justify-content: space-between;
+      span {
+        color: #333333;
+        font-size: 12px;
+      }
+      .clear {
+        width: 25px;
+        height: 25px;
+        background: white;
+      }
+    }
+    .search-history-values {
+      padding-top: 5px;
+      display: flex;
+      flex-wrap: wrap;
+
+      span {
+        background: white;
+        line-height: 30px;
+        font-size: 12px;
+        padding: 0 15px;
+        border-radius: 15px;
+        color: #161818;
+        margin-right: 10px;
+        margin-bottom: 10px;
+      }
+    }
+  }
+}
+</style>
\ No newline at end of file