医疗卫生及其详情页

src/axios/module/news.js

@@ -62,6 +62,16 @@ const newsTop10 = (params = {}) => {
 	return GET(`${Prefix}/office/news/api/newsTop10`, params)
 }
 
+// 医疗卫生首页10条数据查询
+const medicalAndHealthTenData = (params = {}) => {
+	return POST(`${Prefix}/office/medical/api/getList10ByType`, params);
+}
+
+// 根据ID获取医疗卫生详情
+const medicalAndHealthDetailById = (params = {}) => {
+	return POST(`${Prefix}/office/medical/api/getDetailById`, params);
+}
+
 export default {
 	pictureList,
 	pictureInfo,
@@ -75,5 +85,7 @@ export default {
 	newsList,
 	newsInfo,
 	iotList,
-	newsTop10
+	newsTop10,
+	medicalAndHealthTenData,
+	medicalAndHealthDetailById,
 }

src/router/index.js

@@ -550,7 +550,7 @@ const routes = [
                         },
                         component: () => import("@/views/News/Notice.vue"),
                     },
-
+                    
                     {
                         path: "/News/FoodSafety",
                         name: "FoodSafety",
@@ -610,6 +610,14 @@ const routes = [
                 component: () => import("@/views/News/Health.vue"),
             },
             {
+                path: "/News/HealthDetail",
+                name: "HealthDetail",
+                meta: {
+                    name: "医疗卫生详情",
+                },
+                component: () => import("@/views/News/HealthDetail.vue"),
+            },
+            {
                 path: "/News/StatuteDes",
                 name: "StatuteDes",
                 meta: {

src/views/News/Health.vue

 <template>
-  <div class="container" >
+  <div class="container">
     <breadcrumb />
     <div class="health">
-
       <div class="">
         <ul class="health-ul">
           <li v-for="(tmp, i) in typeList" :key="i">
@@ -10,58 +9,74 @@
               <img :src="tmp.icon" alt="" />
             </div>
             <div class="health-li-bt">
-              <p class="title">{{tmp.title}}</p>
-              <p v-for="(item,index) in tmp.list" :key="index" class="listyle">{{item}}</p>
+              <p class="title">{{ tmp.title }}</p>
+              <p
+                v-for="(item, index) in tmp.list"
+                :key="index"
+                class="listyle"
+                @click="lookDetail(item.id)"
+              >
+                {{ item.title }}
+              </p>
             </div>
           </li>
         </ul>
       </div>
     </div>
-
   </div>
 </template>
 <script>
-
 import breadcrumb from "../comps/breadcrumb.vue";
 export default {
   components: {
-   breadcrumb
-
+    breadcrumb,
   },
   data() {
     return {
-     typeList:[
-       {
-         icon:require("../../assets/image/news/ylws1.png"),
-         title:'政策法规',
-         list:['药品','医疗器械']
-       },
-       {
-         icon:require("../../assets/image/news/ylws2.png"),
-         title:'追溯',
-         list:['EPCIS','药品追溯']
-       },
-       {
-         icon:require("../../assets/image/news/ylws3.png"),
-         title:'医疗机构',
-         list:['标准实施十步走','优秀案例','GS1医疗奖']
-       },
-       {
-         icon:require("../../assets/image/news/ylws4.png"),
-         title:'GS1标准与解决方案',
-         list:['GS1如何帮助解决方案提供商']
-       },
-       {
-         icon:require("../../assets/image/news/ylws5.png"),
-         title:'GS1医疗标准',
-         list:['用于医疗的GS1标准','临床试验标准']
-       },
-       {
-         icon:require("../../assets/image/news/ylws6.png"),
-         title:'应用案例',
-         list:['报告','案例','立场书']
-       }
-     ]
+      typeList: [
+        {
+          icon: require("../../assets/image/news/ylws1.png"),
+          title: "政策法规",
+          list: ["药品", "医疗器械"],
+        },
+        {
+          icon: require("../../assets/image/news/ylws2.png"),
+          title: "追溯",
+          list: ["EPCIS", "药品追溯"],
+        },
+        {
+          icon: require("../../assets/image/news/ylws3.png"),
+          title: "医疗机构",
+          list: ["标准实施十步走", "优秀案例", "GS1医疗奖"],
+        },
+        {
+          icon: require("../../assets/image/news/ylws4.png"),
+          title: "GS1标准与解决方案",
+          list: ["GS1如何帮助解决方案提供商"],
+        },
+        {
+          icon: require("../../assets/image/news/ylws5.png"),
+          title: "GS1医疗标准",
+          list: ["用于医疗的GS1标准", "临床试验标准"],
+        },
+        {
+          icon: require("../../assets/image/news/ylws6.png"),
+          title: "应用案例",
+          list: [
+            "报告",
+            "案例",
+            "立场书",
+            "报告",
+            "案例",
+            "立场书",
+            "报告",
+            "案例",
+            "立场书",
+            "报告",
+          ],
+        },
+      ],
+      medicalData: [],
     };
   },
   mounted() {
@@ -71,8 +86,36 @@ export default {
       { name: "医疗卫生" },
     ]);
   },
-  methods: {},
-
+  created() {
+    this.typeList.map((item) => {
+      this.medicalAndHealthTenData(item);
+      return item;
+    });
+  },
+  methods: {
+    async medicalAndHealthTenData(item) {
+      const params = {
+        type: item.title, // 类型
+      };
+      const listRes = await this.$api.news.medicalAndHealthTenData(params);
+      const { returnCode, data } = listRes;
+      if (returnCode === "0") {
+        item.list = data.map((item) => {
+          return {
+            title: item.title,
+            id: item.id,
+          };
+        });
+        this.medicalData.push(item);
+      }
+    },
+    lookDetail(id) {
+      this.$router.push({
+        path: "/News/HealthDetail",
+        query: { id },
+      });
+    },
+  },
 };
 </script>
 <style lang="scss">
@@ -96,51 +139,51 @@ export default {
     margin: 0;
   }
   .health-ul {
-      display: flex;
-      flex-wrap: wrap;
-      margin-top: 30px;
-      li {
-        width: 363px;
-        background: #ffffff;
-        // border-radius: 4px;
-        margin-bottom: 30px;
-        border-top: 5px solid #00B6DE;
-        transition: all 0.22s;
-        &:hover{
-          transform: translateY(-10px);
-          box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
-        }
-        .health-li-tp{
-          margin-top: -1px;
-        }
-        img {
-          width: 100%;
+    display: flex;
+    flex-wrap: wrap;
+    margin-top: 30px;
+    li {
+      width: 363px;
+      height: 480px;
+      background: #ffffff;
+      // border-radius: 4px;
+      margin-bottom: 30px;
+      border-top: 5px solid #00b6de;
+      transition: all 0.22s;
+      &:hover {
+        transform: translateY(-10px);
+        box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
+      }
+      .health-li-tp {
+        margin-top: -1px;
+      }
+      img {
+        width: 100%;
+      }
+      .health-li-bt {
+        width: 90%;
+        margin: 0 auto;
+        color: #414345;
+        font-size: 14px;
+        padding: 19px 0;
+        .title {
+          color: #0e2c6b;
+          font-size: 18px;
         }
-        .health-li-bt {
-          width: 90%;
-          margin: 0 auto;
-          color: #414345;
+        .listyle {
           font-size: 14px;
-          padding: 19px 0;
-          .title{
-            color: #0E2C6B;
-            font-size: 18px;
-          }
-          .listyle{
-            font-size: 14px;
-            color: #00B6DE;
-          }
-          .listyle::before{
-            content: "\25CF";
-            margin-right: 5px;
-          }
-
+          color: #00b6de;
+          cursor: pointer;
+        }
+        .listyle::before {
+          content: "\25CF";
+          margin-right: 5px;
         }
       }
     }
+  }
   .health-top {
     @include module-box;
-
   }
   .health-bottom {
     @include module-box;

src/views/News/HealthDetail.vue

+<template>
+  <div class="container">
+    <breadcrumb />
+    <div class="health-detail" v-html="detailInfo">
+      
+    </div>
+  </div>
+</template>
+<script>
+import breadcrumb from "../comps/breadcrumb.vue";
+export default {
+  components: {
+    breadcrumb,
+  },
+  data() {
+    return {
+      detailInfo: '',
+    };
+  },
+  mounted() {
+    // 面包屑单独处理
+    this.$store.commit("system/SET_BREADCRUMB", [
+      { name: "应用领域", path: "/News/index" },
+      { name: "医疗卫生", path: "/News/Health" },
+      { name: "医疗卫生详情" },
+    ]);
+  },
+  created() {
+    this.medicalAndHealthDetailById();
+  },
+  methods: {
+    async medicalAndHealthDetailById(item) {
+      const id = this.$route.query && this.$route.query.id ? this.$route.query.id : '';
+      const params = {
+        id, // id
+      };
+      const listRes = await this.$api.news.medicalAndHealthDetailById(params);
+      const { returnCode, data } = listRes;
+      if (returnCode === "0") {
+        console.log('medicalAndHealthDetailById', returnCode, data)
+        this.detailInfo = data.content;
+      }
+    },
+  },
+};
+</script>
+<style lang="scss">
+
+</style>
+<style lang="scss" scoped>
+
+</style>