疫情地区搜索还未优化

src/components/Tapitem/TapItem.vue

@@ -1,7 +1,7 @@
 <template>
   <van-tabs v-model="active">
     <van-tab title="高风险地区">
-          <div class="line"></div>
+          <!-- <div class="line"></div> -->
       <div v-if="isLoad">
         <van-skeleton
           title
@@ -21,7 +21,7 @@
     </van-tab>
 
     <van-tab title="中风险地区">
-          <div class="line"></div>
+          <!-- <div class="line"></div> -->
       <div v-if="isLoad">
         <van-skeleton
           title
@@ -127,4 +127,7 @@ export default {
   height: 0.1vw;
   width: 100%;
 }
+/deep/.van-skeleton__content{
+  background-color: #fff;
+}
 </style>

src/components/Tapitem/children/TapItemMesssage.vue

@@ -85,18 +85,20 @@ export default {
   padding-bottom: 8vw;
 }
 .title {
-  line-height: 15vw;
-  height: 15vw;
+  line-height: 7vw;
+  height: auto;
   border-bottom: 0.1vw solid rgb(151, 151, 151);
   font-size: 4.5vw;
   font-weight: bold;
+      padding-top: 4vw;
+    padding-bottom: 4vw;
 }
 .area {
   /* display: flex;
   justify-content: space-between; */
   line-height: 8vw;
   height: auto;
-  /* padding-bottom: 4vw; */
+  padding-bottom: 4vw;
   padding-top: 4vw;
 }
 .sicklevel {

src/router/index.js

@@ -9,7 +9,7 @@ const Login = () => import('../views/login/login.vue')
 const PoiceMessage = () => import('../views/Poice/PoiceMessage.vue')
 const articles = () => import('../views/article/articles.vue')
 const Search =() => import('../views/searchview/search.vue')
-
+const Searchriskarea =() => import('../views/searchview/searchriskarea.vue')
 
 const routes = [{
     path: '/articles/:fileID',
@@ -33,6 +33,16 @@ const routes = [{
       auth: true,
     }
   },
+  {  // 搜索疫情地区
+    path: '/Searchriskarea/:area_name',
+    name: 'Searchriskarea',
+    component: Searchriskarea,
+    meta: {
+      title: '搜索疫情页面',
+      keepAlive: false,
+      auth: true,
+    }
+  },
   {
     path: '/PoiceMessage',
     name: 'PoiceMessage',
@@ -55,7 +65,7 @@ const routes = [{
     component: HomeView,
     meta: {
       title: '首页',
-      keepAlive: false,
+      keepAlive: true,
       // 需要验证登录才能访问
       auth: true,
     }

src/views/HomeView.vue

@@ -28,12 +28,12 @@
           <div class="sickarea">
             <div class="search">
               <van-search
-                v-model="value"
+                v-model="areakw"
                 placeholder="请输入搜索关键词"
-                @search=""
+                @search="SearchRiskArea"
               >
               </van-search>
-              <van-button @click="" type="info">搜索</van-button>
+              <van-button @click="SearchRiskArea" type="info">搜索</van-button>
             </div>
           </div>
 
@@ -49,6 +49,7 @@
 
 
 <script>
+import { Toast } from "vant";
 // 导入 header组件
 import HeaderTop from "../components/header/header.vue";
 // 导入navbar
@@ -82,6 +83,7 @@ export default {
       active: 0,
       // 全部文件信息
       poicefilelist: [],
+      areakw: "",
     };
   },
   created() {
@@ -98,6 +100,25 @@ export default {
         console.log("file+" + this.poicefilelist);
       });
     }, 
+
+    SearchRiskArea(val) {
+      if (this.areakw == "") {
+        Toast("请输入关键词");
+      } else {
+        Toast("正在检索中");
+        if (this.$route.path.indexOf("Searchriskarea") !== 1) {
+          setTimeout(() => {
+            //需要延迟跳转  可以后续优化速度 =。=
+            this.$router.push("/Searchriskarea/" + this.areakw);
+            //延迟时间：2秒
+          }, 2000);
+        } else {
+          return false;
+        }
+      }
+
+      // 点击跳转
+    },
   },
 };
 </script>

src/views/searchview/searchriskarea.vue

@@ -0,0 +1,72 @@
+<template>
+  <div class="Search">
+    <header-top>
+      <span slot="Bigtitle">搜索疫情地区</span>
+    </header-top>
+  </div>
+</template>
+
+<script>
+//导入的插件
+import HeaderTop from "../../components/header/header.vue";
+// 方法
+import { getRiskArea } from "../../network/CovidRiskArea";
+
+export default {
+  name: "Searchriskarea",
+  components: {
+    HeaderTop,
+  },
+  data() {
+    return {
+      area_name: "",
+      //   showriskarealist: {
+      higharea: [],
+      middlearea: [],
+      //   },
+    };
+  },
+  created() {
+    // 获取当前关键词
+    this.area_name = this.$route.params.area_name;
+    this.getRiskArea();
+  },
+
+  methods: {
+    // getRiskArea() {
+    //   getRiskArea().then((res) => {
+    //     console.log(res.data.highlist);
+
+    //     this.higharea.psuh(...res.data.highlist);
+    //     this.middlearea.psuh(...res.data.middlelist);
+    //     // 判断字段中是否有area_name的关键词
+    //     // this.higharea.forEach((item, index) => {
+    //     //   if (item.area_name.indexOf(this.area_name)) {
+    //     //     //  表示包含
+    //     //     console.log("包含这个地区");
+    //     //   } else {
+    //     //     console.log("不包含这个区域");
+    //     //   }
+
+    //     // });
+    //   });
+    // },
+
+    getRiskArea() {
+      getRiskArea().then((res) => {
+        console.log(res);
+        // 高风险地区
+        this.higharea.push(...res.data.highlist);
+        // 中风险地区
+        this.middlearea.push(...res.data.middlelist);
+      });
+    },
+  },
+};
+</script>
+
+<style scoped>
+/deep/.search {
+  display: none;
+}
+</style>