风险地区查询完善

src/views/searchview/searchriskarea.vue

@@ -3,12 +3,56 @@
     <header-top>
       <span slot="Bigtitle">搜索疫情地区</span>
     </header-top>
+    <!-- 查询结果的地区 -->
+    <van-tabs v-model="active">
+      <van-tab title="高风险地区">
+        <!-- <div class="line"></div> -->
+        <div v-if="isLoad">
+          <van-skeleton
+            title
+            :row="2"
+            style="padding-top: 5vw; padding-bottom: 5vw"
+            v-for="(item, index) in this.higharea"
+            :key="index"
+          >
+          </van-skeleton>
+        </div>
+        <tap-item-messsage
+          v-if="!isLoad"
+          :RiskArealist="higharealist"
+          :riskcolor="riskcolorhigh"
+          :sicklevel="sicklevelhigh"
+        ></tap-item-messsage>
+      </van-tab>
+
+      <van-tab title="中风险地区">
+        <!-- <div class="line"></div> -->
+        <div v-if="isLoad">
+          <van-skeleton
+            title
+            :row="2"
+            style="padding-top: 5vw; padding-bottom: 5vw"
+            v-for="(item, index) in this.middlearea"
+            :key="index"
+          >
+          </van-skeleton>
+        </div>
+        <tap-item-messsage
+          v-if="!isLoad"
+          :RiskArealist="middlearealist"
+          :riskcolor="riskcolormiddle"
+          :sicklevel="sicklevelmiddle"
+        ></tap-item-messsage>
+      </van-tab>
+    </van-tabs>
   </div>
 </template>
 
 <script>
 //导入的插件
 import HeaderTop from "../../components/header/header.vue";
+import TapItem from "../../components/Tapitem/TapItem.vue";
+import TapItemMesssage from "../../components/Tapitem/children/TapItemMesssage.vue"
 // 方法
 import { getRiskArea } from "../../network/CovidRiskArea";
 
@@ -16,6 +60,8 @@ export default {
   name: "Searchriskarea",
   components: {
     HeaderTop,
+    TapItem,
+    TapItemMesssage 
   },
   data() {
     return {
@@ -23,6 +69,16 @@ export default {
       //   showriskarealist: {
       higharea: [],
       middlearea: [],
+      higharealist:[],
+      middlearealist:[],
+      isLoad: true,
+      // 风险颜色
+      riskcolorhigh: "",
+      riskcolormiddle: "",
+      // 中风险|高风险
+      sicklevelhigh: "",
+      sicklevelmiddle: "",
+      active: 0,
       //   },
     };
   },
@@ -33,35 +89,56 @@ export default {
   },
 
   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("不包含这个区域");
-    //     //   }
-
-    //     // });
-    //   });
-    // },
-
+    // 2022.3.31 还未优化
     getRiskArea() {
       getRiskArea().then((res) => {
         console.log(res);
         // 高风险地区
         this.higharea.push(...res.data.highlist);
+        this.riskcolorhigh = "#E82C2C";
+        this.sicklevelhigh = "高风险";
+        console.log(this.higharea);
         // 中风险地区
         this.middlearea.push(...res.data.middlelist);
+        this.riskcolormiddle = "#FFA500";
+        this.sicklevelmiddle = "中风险";
+
+        // 判断高风险字段中是否有area_name的关键词
+        this.higharea.forEach((item, index) => {
+          console.log(item.area_name);
+          console.log(this.area_name);
+          if (item.area_name.includes(this.area_name)) {
+            // 把符合条件的字段push进去
+            this.higharealist.push(item);
+          } else {
+            // console.log("不包含");
+          }
+        });
+        // 判断中风险字段中是否有area_name的关键词
+        this.middlearea.forEach((item, index) => {
+          console.log(item.area_name);
+          console.log(this.area_name);
+          if (item.area_name.includes(this.area_name)) {
+            // 把符合条件的字段push进去
+            this.middlearealist.push(item);
+            // console.log("包含");
+          } else {
+            // console.log("不包含");
+          }
+        });
       });
     },
   },
+  mounted() {
+    // 静态数据，所以用了计时器。正式项目中不用这样做
+    // setInterval
+    setTimeout(
+      function () {
+        this.isLoad = false;
+      }.bind(this),
+      2000
+    );
+  },
 };
 </script>