中高风险地区展示

src/components/Tapitem/TapItem.vue

@@ -1,30 +1,130 @@
 <template>
   <van-tabs v-model="active">
     <van-tab title="高风险地区">
-        <tap-item-messsage></tap-item-messsage>
+          <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.HighRiskArealist"
+          :key="index"
+        >
+        </van-skeleton>
+      </div>
+      <tap-item-messsage
+        v-if="!isLoad"
+        :RiskArealist="HighRiskArealist"
+        :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.MiddleRiskArealist"
+          :key="index"
+        >
+        </van-skeleton>
+      </div>
+      <tap-item-messsage
+        v-if="!isLoad"
+        :RiskArealist="MiddleRiskArealist"
+                :riskcolor="riskcolormiddle"
+                :sicklevel="sicklevelmiddle"
+      ></tap-item-messsage>
     </van-tab>
-    <van-tab title="中风险地区">内容 2</van-tab>
   </van-tabs>
 </template>
 
 <script>
 // 引入子组件
-import TapItemMesssage from "./children/TapItemMesssage.vue"
+import Vue from "vue";
+import { Skeleton } from "vant";
+Vue.use(Skeleton);
 
+import TapItemMesssage from "./children/TapItemMesssage.vue";
+import { getRiskArea } from "../../network/CovidRiskArea";
 export default {
-    name:"TapItem",
-    data() {
-        return {
-        active: 0,
-        };
+  name: "TapItem",
+  data() {
+    return {
+      active: 0,
+      // 全部风险地区信息
+      HighRiskArealist: [],
+      MiddleRiskArealist: [],
+      isLoad: true,
+
+      // 风险颜色
+      riskcolorhigh:"",
+      riskcolormiddle:"",
+      // 中风险|高风险
+      sicklevelhigh:"",
+      sicklevelmiddle:"",
+    };
+  },
+  // props: {
+  //   HighRiskArealist: {
+  //     type: Array,
+  //     default() {
+  //       return [];
+  //     },
+  //   },
+  //   MiddleRiskArealist: {
+  //     type: Array,
+  //     default() {
+  //       return [];
+  //     },
+  //   },
+  // },
+  components: {
+    TapItemMesssage,
+  },
+  created() {
+    this.getRiskArea();
+  },
+  methods: {
+    // // 获取全部风险地区信息
+    getRiskArea() {
+      getRiskArea().then((res) => {
+        console.log(res);
+        // 高风险地区
+        this.HighRiskArealist.push(...res.data.highlist);
+        this.riskcolorhigh="#E82C2C"
+        this.sicklevelhigh="高风险"
+        // 中风险地区
+        this.MiddleRiskArealist.push(...res.data.middlelist);
+        this.riskcolormiddle="#FFA500"
+        this.sicklevelmiddle="中风险"
+      });
     },
-    components:{
-        TapItemMesssage
-    }
+  },
+  mounted() {
+    // 静态数据，所以用了计时器。正式项目中不用这样做
+    // setInterval
+     setTimeout(function(){
+      this.isLoad = false;
+    }.bind(this),2000)
+  },
 };
 </script>
 
 <style scoped>
-
-
+/deep/.van-skeleton__row,
+.van-skeleton__title {
+  background-color: #b0c4de;
+}
+/deep/.van-tabs__nav--line{
+  border-bottom: 0.1vw solid rgb(151, 151, 151) !important;
+}
+.line{
+  background: rgb(151, 151, 151);
+  height: 0.1vw;
+  width: 100%;
+}
 </style>

src/components/Tapitem/children/TapItemMesssage.vue

@@ -1,21 +1,76 @@
 <template>
-  <div class="TapItemMesssage">
-    <div class="title">
-      <span>天津市 西河区</span>
-    </div>
-    <div class="area">
-      <span>天塔街青海湾大众浴池</span>
-      <span class="sicklevel">高风险</span>
+  <div>
+    <div
+      class="TapItemMesssage"
+      v-for="(item, index) in RiskArealist"
+      :key="index"
+    >
+      <!-- <div v-if="isLoad">
+        <van-skeleton
+          title
+          :row="2"
+          style="padding-top: 5vw; padding-bottom: 5vw"
+        >
+        </van-skeleton>
+      </div> -->
+
+      <div>
+        <div class="title">
+          <span>{{ item.area_name }}</span>
+        </div>
+        <div class="area" v-for="(item, index) in item.communitys" :key="index">
+          <span>{{ item }}</span>
+          <span class="sicklevel" :style="showriskcolor">{{
+            showsicklevel
+          }}</span>
+        </div>
+      </div>
     </div>
   </div>
 </template>
 
 <script>
+// import Vue from "vue";
+// import { Skeleton } from "vant";
+// Vue.use(Skeleton);
+
 export default {
   name: "TapItemMesssage",
-  // data() {
-
-  // },
+  props: {
+    RiskArealist: {
+      type: Array,
+      default() {
+        return [];
+      },
+    },
+    // 颜色
+    riskcolor: {
+      type: String,
+      default() {
+        return "#800000";
+      },
+    },
+    // 中风险|高风险
+    sicklevel: {
+      type: String,
+      default() {
+        return "风险确认中";
+      },
+    },
+  },
+  data() {
+    return {};
+  },
+  computed: {
+    // 展示颜色
+    showriskcolor() {
+      return { color: this.riskcolor };
+    },
+    // 展示风险
+    showsicklevel() {
+      return this.sicklevel;
+    },
+  },
 };
 </script>
 
@@ -24,18 +79,28 @@ export default {
   background-color: #fff;
   padding-left: 5vw;
   padding-right: 5vw;
-  border-top: 1px solid rgb(151,151,151);
+  /* border-top: 1px solid rgb(151, 151, 151); */
   margin-bottom: 4vw;
+  border-radius: 2vw;
+  padding-bottom: 8vw;
 }
 .title {
   line-height: 15vw;
   height: 15vw;
-  border-bottom: 1px solid rgb(151,151,151);
+  border-bottom: 0.1vw solid rgb(151, 151, 151);
+  font-size: 4.5vw;
+  font-weight: bold;
 }
 .area {
-  display: flex;
-  justify-content: space-between;
-  line-height: 15vw;
-  height: 15vw;
+  /* display: flex;
+  justify-content: space-between; */
+  line-height: 8vw;
+  height: auto;
+  /* padding-bottom: 4vw; */
+  padding-top: 4vw;
+}
+.sicklevel {
+  float: right;
+  color: red;
 }
 </style>

src/main.js

@@ -4,11 +4,12 @@ import router from './router'
 import store from './store'
 import Vant from 'vant';
 import 'vant/lib/index.css';
-
+import { Skeleton } from "vant";
 
 
 Vue.config.productionTip = false
 Vue.use(Vant);
+Vue.use(Skeleton);
 
 new Vue({
   router,

src/network/CovidRiskArea.js

@@ -0,0 +1,10 @@
+import request from "./request";
+import {
+    get
+} from "./request";
+
+
+// 全部风险地区
+export const getRiskArea = () => {
+    return get(`/api/outer/riskAreas`);
+}

src/views/HomeView.vue

@@ -20,7 +20,7 @@
           </div>
         </van-tab>
         <van-tab title="最新文件">
-       <card :poicefilelist="poicefilelist"></card>
+          <card :poicefilelist="poicefilelist"></card>
         </van-tab>
         <van-tab title="中高风险地区">
           <!-- 风险地区搜索 -->
@@ -38,7 +38,7 @@
           </div>
 
           <!-- 中高风险地区切换TAP -->
-          <tap-item></tap-item>
+          <tap-item ></tap-item>
         </van-tab>
       </van-tabs>
     </div>
@@ -56,14 +56,14 @@ import NavBar from "../components/navbar/navbar.vue";
 // 导入缙云县疫情服务
 import CovidServe from "../components/covidserve/CovidServe.vue";
 // 导入 最新文件 循环组件
-import Card from '@/components/carditem/card.vue';
+import Card from "@/components/carditem/card.vue";
 
 // 导入 中高风险地区切换tap
-import TapItem from "../components/Tapitem/TapItem.vue"
-
-import { getpoicefile } from "../network/poicefile"
-
+import TapItem from "../components/Tapitem/TapItem.vue";
+// 导入network方法
+import { getpoicefile } from "../network/poicefile";
 
+// import { getRiskArea } from "../network/CovidRiskArea";
 
 export default {
   name: "index",
@@ -72,7 +72,7 @@ export default {
     NavBar,
     CovidServe,
     TapItem,
-    Card
+    Card,
   },
 
   data() {
@@ -80,26 +80,26 @@ export default {
       // 搜索属性
       value: " ",
       active: 0,
-      poicefilelist:[]
+      // 全部文件信息
+      poicefilelist: [],
     };
   },
-  created(){
-     this.getpoicefile();
+  created() {
+    this.getpoicefile();
+
   },
 
   methods: {
-    // 搜索方法
-    // onSearch() {},
-        getpoicefile() {
+    // 获取全部文件信息
+    getpoicefile() {
       getpoicefile("", 0, 12).then((res) => {
         console.log(res);
         this.poicefilelist.push(...res.data.data);
         console.log("file+" + this.poicefilelist);
       });
-    },
-  }
-
-}
+    }, 
+  },
+};
 </script>