Skip to content

G
gs1
Commit f8daac7c by FangYuan
Options

医疗卫生及其详情页

parent e775c8bd
Showing with 157 additions and 42 deletions
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
......@@ -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:[
typeList: [
{
icon:require("../../assets/image/news/ylws1.png"),
title:'政策法规',
list:['药品','医疗器械']
icon: require("../../assets/image/news/ylws1.png"),
title: "政策法规",
list: ["药品", "医疗器械"],
},
{
icon:require("../../assets/image/news/ylws2.png"),
title:'追溯',
list:['EPCIS','药品追溯']
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/ylws3.png"),
title: "医疗机构",
list: ["标准实施十步走", "优秀案例", "GS1医疗奖"],
},
{
icon:require("../../assets/image/news/ylws4.png"),
title:'GS1标准与解决方案',
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/ylws5.png"),
title: "GS1医疗标准",
list: ["用于医疗的GS1标准", "临床试验标准"],
},
{
icon:require("../../assets/image/news/ylws6.png"),
title:'应用案例',
list:['报告','案例','立场书']
}
]
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">
......@@ -101,16 +144,17 @@ export default {
margin-top: 30px;
li {
width: 363px;
height: 480px;
background: #ffffff;
// border-radius: 4px;
margin-bottom: 30px;
border-top: 5px solid #00B6DE;
border-top: 5px solid #00b6de;
transition: all 0.22s;
&:hover{
&:hover {
transform: translateY(-10px);
box-shadow: 0px 4px 15px 2px rgba(4, 64, 141, 0.08);
}
.health-li-tp{
.health-li-tp {
margin-top: -1px;
}
img {
......@@ -122,25 +166,24 @@ export default {
color: #414345;
font-size: 14px;
padding: 19px 0;
.title{
color: #0E2C6B;
.title {
color: #0e2c6b;
font-size: 18px;
}
.listyle{
.listyle {
font-size: 14px;
color: #00B6DE;
color: #00b6de;
cursor: pointer;
}
.listyle::before{
.listyle::before {
content: "\25CF";
margin-right: 5px;
}
}
}
}
.health-top {
@include module-box;
}
.health-bottom {
@include module-box;
......
src/views/News/HealthDetail.vue 0 → 100644
<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