Commit f8daac7c by FangYuan

医疗卫生及其详情页

parent e775c8bd
...@@ -62,6 +62,16 @@ const newsTop10 = (params = {}) => { ...@@ -62,6 +62,16 @@ const newsTop10 = (params = {}) => {
return GET(`${Prefix}/office/news/api/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 { export default {
pictureList, pictureList,
pictureInfo, pictureInfo,
...@@ -75,5 +85,7 @@ export default { ...@@ -75,5 +85,7 @@ export default {
newsList, newsList,
newsInfo, newsInfo,
iotList, iotList,
newsTop10 newsTop10,
medicalAndHealthTenData,
medicalAndHealthDetailById,
} }
...@@ -550,7 +550,7 @@ const routes = [ ...@@ -550,7 +550,7 @@ const routes = [
}, },
component: () => import("@/views/News/Notice.vue"), component: () => import("@/views/News/Notice.vue"),
}, },
{ {
path: "/News/FoodSafety", path: "/News/FoodSafety",
name: "FoodSafety", name: "FoodSafety",
...@@ -610,6 +610,14 @@ const routes = [ ...@@ -610,6 +610,14 @@ const routes = [
component: () => import("@/views/News/Health.vue"), component: () => import("@/views/News/Health.vue"),
}, },
{ {
path: "/News/HealthDetail",
name: "HealthDetail",
meta: {
name: "医疗卫生详情",
},
component: () => import("@/views/News/HealthDetail.vue"),
},
{
path: "/News/StatuteDes", path: "/News/StatuteDes",
name: "StatuteDes", name: "StatuteDes",
meta: { meta: {
......
<template> <template>
<div class="container" > <div class="container">
<breadcrumb /> <breadcrumb />
<div class="health"> <div class="health">
<div class=""> <div class="">
<ul class="health-ul"> <ul class="health-ul">
<li v-for="(tmp, i) in typeList" :key="i"> <li v-for="(tmp, i) in typeList" :key="i">
...@@ -10,58 +9,74 @@ ...@@ -10,58 +9,74 @@
<img :src="tmp.icon" alt="" /> <img :src="tmp.icon" alt="" />
</div> </div>
<div class="health-li-bt"> <div class="health-li-bt">
<p class="title">{{tmp.title}}</p> <p class="title">{{ tmp.title }}</p>
<p v-for="(item,index) in tmp.list" :key="index" class="listyle">{{item}}</p> <p
v-for="(item, index) in tmp.list"
:key="index"
class="listyle"
@click="lookDetail(item.id)"
>
{{ item.title }}
</p>
</div> </div>
</li> </li>
</ul> </ul>
</div> </div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import breadcrumb from "../comps/breadcrumb.vue"; import breadcrumb from "../comps/breadcrumb.vue";
export default { export default {
components: { components: {
breadcrumb breadcrumb,
}, },
data() { data() {
return { return {
typeList:[ typeList: [
{ {
icon:require("../../assets/image/news/ylws1.png"), icon: require("../../assets/image/news/ylws1.png"),
title:'政策法规', title: "政策法规",
list:['药品','医疗器械'] list: ["药品", "医疗器械"],
}, },
{ {
icon:require("../../assets/image/news/ylws2.png"), icon: require("../../assets/image/news/ylws2.png"),
title:'追溯', title: "追溯",
list:['EPCIS','药品追溯'] list: ["EPCIS", "药品追溯"],
}, },
{ {
icon:require("../../assets/image/news/ylws3.png"), icon: require("../../assets/image/news/ylws3.png"),
title:'医疗机构', title: "医疗机构",
list:['标准实施十步走','优秀案例','GS1医疗奖'] list: ["标准实施十步走", "优秀案例", "GS1医疗奖"],
}, },
{ {
icon:require("../../assets/image/news/ylws4.png"), icon: require("../../assets/image/news/ylws4.png"),
title:'GS1标准与解决方案', title: "GS1标准与解决方案",
list:['GS1如何帮助解决方案提供商'] list: ["GS1如何帮助解决方案提供商"],
}, },
{ {
icon:require("../../assets/image/news/ylws5.png"), icon: require("../../assets/image/news/ylws5.png"),
title:'GS1医疗标准', title: "GS1医疗标准",
list:['用于医疗的GS1标准','临床试验标准'] list: ["用于医疗的GS1标准", "临床试验标准"],
}, },
{ {
icon:require("../../assets/image/news/ylws6.png"), icon: require("../../assets/image/news/ylws6.png"),
title:'应用案例', title: "应用案例",
list:['报告','案例','立场书'] list: [
} "报告",
] "案例",
"立场书",
"报告",
"案例",
"立场书",
"报告",
"案例",
"立场书",
"报告",
],
},
],
medicalData: [],
}; };
}, },
mounted() { mounted() {
...@@ -71,8 +86,36 @@ export default { ...@@ -71,8 +86,36 @@ export default {
{ name: "医疗卫生" }, { 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> </script>
<style lang="scss"> <style lang="scss">
...@@ -96,51 +139,51 @@ export default { ...@@ -96,51 +139,51 @@ export default {
margin: 0; margin: 0;
} }
.health-ul { .health-ul {
display: flex; display: flex;
flex-wrap: wrap; flex-wrap: wrap;
margin-top: 30px; margin-top: 30px;
li { li {
width: 363px; width: 363px;
background: #ffffff; height: 480px;
// border-radius: 4px; background: #ffffff;
margin-bottom: 30px; // border-radius: 4px;
border-top: 5px solid #00B6DE; margin-bottom: 30px;
transition: all 0.22s; border-top: 5px solid #00b6de;
&:hover{ transition: all 0.22s;
transform: translateY(-10px); &:hover {
box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08); transform: translateY(-10px);
} box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
.health-li-tp{ }
margin-top: -1px; .health-li-tp {
} margin-top: -1px;
img { }
width: 100%; 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 { .listyle {
width: 90%;
margin: 0 auto;
color: #414345;
font-size: 14px; font-size: 14px;
padding: 19px 0; color: #00b6de;
.title{ cursor: pointer;
color: #0E2C6B; }
font-size: 18px; .listyle::before {
} content: "\25CF";
.listyle{ margin-right: 5px;
font-size: 14px;
color: #00B6DE;
}
.listyle::before{
content: "\25CF";
margin-right: 5px;
}
} }
} }
} }
}
.health-top { .health-top {
@include module-box; @include module-box;
} }
.health-bottom { .health-bottom {
@include module-box; @include module-box;
......
<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>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or to comment