Skip to content

F
frontend-h5
Commit 7ebe6efc authored by gengchunlei's avatar gengchunlei
Browse files
Options

居民端小程序 复筛详情调整

parent 7e83d0e1
Show whitespace changes
Inline Side-by-side
Showing with 313 additions and 174 deletions
src/residentWX/screening/detail/FirstDetail.vue
View file @ 7ebe6efc
...@@ -4,7 +4,7 @@ ...@@ -4,7 +4,7 @@
<span @click="onBack" class="text-12 back-bt"> <span @click="onBack" class="text-12 back-bt">
<doc-icon type="doc-left2" /> <doc-icon type="doc-left2" />
</span> </span>
<span>筛查详情</span> <span>高危筛查详情</span>
</div> </div>
<div class="px-4 py-3 flex shrink-0 base-info"> <div class="px-4 py-3 flex shrink-0 base-info">
<div class="flex w-full"> <div class="flex w-full">
......
src/residentWX/screening/detail/SecondDetail.vue
View file @ 7ebe6efc
<template> <template>
<div class="h-full pb-5"> <div class='flex flex-col' style='height: 100vh'>
<div class="p-3 text-16 text-black text-center shrink-0 top-bar"> <div class='p-3 text-black text-center shrink-0 doc-nav-bar'>
<span class="back-bt"> <span @click='onBack' class='text-12 back-bt'>
<span @click="onBack"> <doc-icon type='doc-left2' />
<doc-icon type="doc-left" /> </span>
<span>专病筛查详情</span>
</div>
<div class='px-4 py-3 flex shrink-0 base-info'>
<div class='flex w-full'>
<img src='@/assets/image/residentWX/avatar.png' alt='' class='shrink-0'
style='width: .56rem;height: .56rem'>
<div class='grow flex flex-col justify-between pl-3'>
<div class='flex justify-between'>
<span class='name'>{{ userInfo.residentName }}</span>
<span class='top-label'>报告日期：<span class='color-b'>{{ info.screenDate || '-' }}</span></span>
</div>
<div class='top-label mt-3'>
<span>慢病高危评估结果：</span>
</div>
<div class='top-label color-b'>
<span v-if='info.specialScreenResult && info.specialScreenResult !=9'>您存在<span class='color-red'>{{ info.specialScreenResultName }}</span>风险，请及时前往医院诊断确认。</span>
<span v-if='info.specialScreenResult ==9'>您并未存在高危风险。</span>
</div>
<div v-if='info.specialScreenResult && info.specialScreenResult !=9'>
</div>
</div>
</div>
</div>
<div class='p-3 grow cont-box'>
<div class='p-3 h-full cont-inner'>
<div class='flex justify-between collapse-head'>
<span class='text-16'>全部内容</span>
<span @click='toggleAll'>
<span v-if='!collapseAll'>展开全部</span>
<span v-else>展开收起</span>
<span :class="['ml-2 icon-down', { 'icon-down-expanded': collapseAll }]">
<doc-icon type='doc-down' />
</span> </span>
</span> </span>
<span>居民慢病筛查详情</span>
</div>
<div class="py-4 border-bottom">
<div class="px-4 doc-title">居民信息</div>
</div>
<div class="px-4 list">
<div v-for="item in columnsBase" :key="item.key"
class="flex justify-between py-4 border-bottom item">
<span class="shrink-0 mr-2 label">{{ item.title }}</span>
<span v-if="item.key === 'idCard'">{{ $idCardHide(residentInfo.idCard) || '-' }}</span>
<span class="text-end" v-else>{{ residentInfo[item.key] || '-' }}</span>
</div>
</div>
<div class="py-4 border-bottom">
<div class="px-4 doc-title">筛查信息</div>
</div>
<div class="px-4 list">
<template v-for="item in columnsScreen" :key="item.key">
<div v-if="item.key == 'pressure'" class="pt-3">
<table class="w-full">
<tr>
<td style="width: 7.1em">血压值(mmHg)</td>
<td>低压值(左侧)</td>
<td></td>
<td>高压值(右侧)</td>
</tr>
<tr>
<td>
第1次测量
</td>
<td>
{{ info.pressureOneDbp || '-' }}
</td>
<td>/</td>
<td>
{{ info.pressureOneSbp || '-' }}
</td>
</tr>
<tr>
<td>
第2次测量
</td>
<td class="flex">
{{ info.pressureTwoDbp || '-' }}
</td>
<td>/</td>
<td>
{{ info.pressureTwoSbp || '-' }}
</td>
</tr>
</table>
</div>
<div v-else
class="flex justify-between py-4 border-bottom item">
<span class="shrink-0 mr-2 label">{{ item.title }}</span>
<div>
<span>{{ info[item.key] || '-' }}</span>
<span v-if="item.unit" class="ml-1">{{ item.unit }}</span>
</div> </div>
<van-collapse v-model='activeCollapse' ref='collapse' class='doc-collapse'
@change='collapseChange'>
<van-collapse-item v-for='collapse in collapseList' :key='collapse.name'
:title='collapse.title' :name='collapse.name'>
<template #right-icon>
<doc-icon type='doc-down' />
</template>
<div class='list'>
<van-collapse-item key='1' title='居民信息' name='1'>
<template #right-icon>
<doc-icon type='doc-down' />
</template>
<div class='list'>
<div v-for='item in columnsBase' :key='item.key'>
<div class='flex justify-between py-1 border-bottom item'>
<span class='shrink-0 mr-2 label'>{{ item.title }}</span>
<span
v-if="item.key === 'idCard'">{{ $idCardHide(residentInfo.idCard) || '-'
}}</span>
<span class='text-end' v-else>
<span>{{ residentInfo[item.key] || '-' }}</span>
<span v-if='item.unit' class='ml-1'>{{ item.unit }}</span>
</span>
</div>
</div>
</div> </div>
</van-collapse-item>
<van-collapse-item key='2' title='筛查详情' name='2'>
<template #right-icon>
<doc-icon type='doc-down' />
</template> </template>
<div class='list'>
<div class='flex justify-between py-1 border-bottom item'>
<span class='shrink-0 mr-2 label'>本次随访情况</span>
<span class='text-end'>
<span>{{ info.visitSituationName || '-' }}</span>
</span>
</div>
<div class='flex justify-between py-1 border-bottom item'
v-if='info.visitSituation == 2'>
<span class='shrink-0 mr-2 label'>失访原因</span>
<span class='text-end'>
<span v-if='info.lossReason != 9'>{{ info.lossReasonName || '-' }}</span>
<span v-if='info.lossReason == 9'>{{ info.lossReasonOther || '-' }}</span>
</span>
</div>
</div>
</van-collapse-item>
<van-collapse-item key='3' title='筛查机构' name='3'>
<template #right-icon>
<doc-icon type='doc-down' />
</template>
<div class='list'>
<div v-for='item in columnsOrg' :key='item.key'>
<div class='flex justify-between py-1 border-bottom item'>
<span class='shrink-0 mr-2 label'>{{ item.title }}</span>
<span class='text-end'>
<span>{{ info[item.key] || '-' }}</span>
</span>
</div>
</div>
</div>
</van-collapse-item>
</div>
</van-collapse-item>
</van-collapse>
</div>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { showNotify } from 'vant' import { showNotify } from 'vant'
import { querScreenDetail } from '@/api/resident/screening.js' import { secondScreenDetail } from '@/api/residentWX/screening.js'
import { useStore } from '@/residentWX/store'
export default { export default {
data() { data() {
return { return {
store: useStore(),
activeCollapse: [],
collapseList: [
{ title: '居民信息', name: '1', columns: [], info: {} },
{ title: '筛查信息', name: '2', columns: [], info: {} },
{ title: '筛查机构', name: '3', columns: [], info: {} }
],
// 全部展开、收起
collapseAll: false,
info: {}, info: {},
columnsBase: [ columnsBase: [
{ title: '姓名', key: 'residentName' }, { title: '姓名', key: 'residentName' },
{ title: '证件号码', key: 'idCard'}, { title: '证件号码', key: 'idCard' },
{ title: '性别', key: 'genderName' }, { title: '性别', key: 'genderName' },
{ title: '出生日期', key: 'dataBirth' }, { title: '出生日期', key: 'dataBirth' },
{ title: '年龄', key: 'currentAge' }, { title: '年龄', key: 'currentAge' },
...@@ -119,8 +168,8 @@ export default { ...@@ -119,8 +168,8 @@ export default {
id() { id() {
return this.$route.params.id return this.$route.params.id
}, },
residentInfo() { userInfo() {
return this.info.residentsRecord || {} return this.store.userInfo
} }
}, },
created() { created() {
...@@ -132,26 +181,108 @@ export default { ...@@ -132,26 +181,108 @@ export default {
}, },
methods: { methods: {
init() { init() {
querScreenDetail({ id: this.id }).then(res => { secondScreenDetail({ id: this.id }).then(res => {
this.info = res.data || {} this.info = res.data || {}
}) })
}, },
onBack() { onBack() {
this.$router.back() this.$router.back()
},
// 折叠面板切换
collapseChange(val) {
if (val && val.length === this.collapseList.length) {
this.collapseAll = true
} else {
this.collapseAll = false
}
},
// 全部展开、收起
toggleAll() {
if (this.collapseAll) {
this.activeCollapse = []
} else {
this.activeCollapse = this.collapseList.map(e => e.name)
}
this.collapseAll = !this.collapseAll
} }
} }
} }
</script> </script>
<style lang="less" scoped> <style lang='less' scoped>
@import url('../../utils/common.less'); @import url('../../utils/common.less');
.base-info {
background: linear-gradient(to bottom, #DFF5F4, #fff 50%);
color: #8c8c8c;
.name {
font-weight: 600;
color: #000;
font-size: 18px;
}
.top-label {
font-size: 13px;
line-height: 22px;
}
.color-b {
color: #262626;
}
.color-red {
color: #F5222D;
}
.tag {
border-radius: 2px;
padding: 3px 8px;
font-size: 12px;
}
.tag-red {
border: 1px solid #FFA39E;
color: #F5222D;
background-color: #FFF1F0;
}
}
.cont-box {
background-color: #f9f9f9;
.cont-inner {
background: linear-gradient(to bottom, #DFF5F4, #fff .6rem);
border-top-left-radius: .08rem;
border-top-right-radius: .08rem;
}
}
.collapse-head {
.icon-down {
vertical-align: middle;
font-size: .12rem;
.svg-icon {
transition: all .2s;
}
}
.icon-down-expanded {
.svg-icon {
transform: rotate(-180deg);
}
}
}
table { table {
text-align: left; text-align: left;
border-bottom: 1px solid var(--van-cell-border-color); // border-bottom: 1px solid var(--van-cell-border-color);
>tr { > tr {
>td { > td {
padding-left: 14px; padding-left: 14px;
padding-bottom: 12px; padding-bottom: 12px;
&:first-child { &:first-child {
text-align: right; text-align: right;
padding-left: 0; padding-left: 0;
...@@ -159,7 +290,10 @@ table { ...@@ -159,7 +290,10 @@ table {
} }
} }
} }
.list { .list {
color: #262626;
.label { .label {
min-width: 5em; min-width: 5em;
} }
......
src/residentWX/visit/List.vue
View file @ 7ebe6efc
...@@ -161,7 +161,7 @@ export default { ...@@ -161,7 +161,7 @@ export default {
let par = {} let par = {}
let path = `` let path = ``
if (item.serveType == 5) { if (item.serveType == 5) {
path = `/visit/GeneralFUDetail/${item.relationId}` path = `GeneralFUDetail/${item.relationId}`
} }
if (item.serveType == 3 || item.serveType == 4){ if (item.serveType == 3 || item.serveType == 4){
......
src/residentWX/visit/detail/GeneralFUDetail.vue
View file @ 7ebe6efc
<!--通用随访详情--> <!--通用随访详情-->
<template> <template>
<div class="flex flex-col" style="height: 100vh"> <div class='flex flex-col' style='height: 100vh'>
<div class="p-3 text-black text-center shrink-0 doc-nav-bar"> <div class='p-3 text-black text-center shrink-0 doc-nav-bar'>
<span @click="onBack" class="text-12 back-bt"> <span @click='onBack' class='text-12 back-bt'>
<doc-icon type="doc-left2" /> <doc-icon type='doc-left2' />
</span> </span>
<span>随访详情</span> <span>随访详情</span>
</div> </div>
<div class="px-4 py-3 flex shrink-0 base-info"> <div class='px-4 py-3 flex shrink-0 base-info'>
<div class="flex w-full"> <div class='flex w-full'>
<img src="@/assets/image/residentWX/avatar.png" alt="" class="shrink-0" <img src='@/assets/image/residentWX/avatar.png' alt='' class='shrink-0'
style="width: .56rem;height: .56rem"> style='width: .56rem;height: .56rem'>
<div class="grow flex flex-col justify-between pl-3"> <div class='grow flex flex-col justify-between pl-3'>
<div class="flex justify-between"> <div class='flex justify-between'>
<span class="name">张一华</span> <span class='name'>{{ residentInfo.residentName }}</span>
</div> </div>
<div class='top-label'>
<div class='mt-3 flex'> <div class='mt-3 flex'>
<div>随访方式：通用随访</div> <div><span>随访方式：</span><span class='color-b'>{{ info.visitWayName }}</span></div>
<div class='ml-4'>随访日期：2024-10-11</div> <div class='ml-4'>随访日期：<span class='color-b'>{{ info.visitDate }}</span></div>
</div> </div>
<div> <div><span>下次随访日期：</span><span class='color-b'>{{ info.nextVisitDate }}</span></div>
<span>下次随访日期：</span>
<span>高危风险人群</span>
</div> </div>
</div> </div>
</div> </div>
</div> </div>
<div class="p-3 grow cont-box"> <div class='p-3 grow cont-box'>
<div class="p-3 h-full cont-inner"> <div class='p-3 h-full cont-inner'>
<div class="flex justify-between collapse-head"> <div class='flex justify-between collapse-head'>
<span class="text-16">全部内容</span> <span class='text-16'>全部内容</span>
<span @click="toggleAll"> <span @click='toggleAll'>
<span v-if="!collapseAll">展开全部</span> <span v-if='!collapseAll'>展开全部</span>
<span v-else>收起全部</span> <span v-else>收起全部</span>
<span :class="['ml-2 icon-down', { 'icon-down-expanded': collapseAll }]"> <span :class="['ml-2 icon-down', { 'icon-down-expanded': collapseAll }]">
<doc-icon type="doc-down" /> <doc-icon type='doc-down' />
</span> </span>
</span> </span>
</div> </div>
<van-collapse v-model="activeCollapse" ref="collapse" class="doc-collapse" <van-collapse v-model='activeCollapse' ref='collapse' class='doc-collapse'
@change="collapseChange"> @change='collapseChange'>
<van-collapse-item v-for="item in collapseList" :key="item.name" <van-collapse-item key='1' title='居民信息' name='1'>
:title="item.title" :name="item.name">
<template #right-icon> <template #right-icon>
<doc-icon type="doc-down" /> <doc-icon type='doc-down' />
</template> </template>
</van-collapse-item> <div class='list'>
</van-collapse> <div v-for='item in columnsBase' :key='item.key'>
</div> <div class='flex justify-between py-1 border-bottom item'>
<span class='shrink-0 mr-2 label'>{{ item.title }}</span>
<span v-if="item.key === 'idCard'">{{ $idCardHide(residentInfo.idCard) || '-'
}}</span>
<span class='text-end' v-else>
<span>{{ residentInfo[item.key] || '-' }}</span>
<span v-if='item.unit' class='ml-1'>{{ item.unit }}</span>
</span>
</div> </div>
<!-- <div class="py-4 border-bottom">
<div class="px-4 doc-title">居民信息</div>
</div> </div>
<div class="px-4 list">
<div v-for="item in columnsBase" :key="item.key"
class="flex justify-between py-4 border-bottom item">
<span class="shrink-0 mr-2 label">{{ item.title }}</span>
<span v-if="item.key === 'idCard'">{{ $idCardHide(residentInfo.idCard) || '-' }}</span>
<span class="text-end" v-else>{{ residentInfo[item.key] || '-' }}</span>
</div> </div>
</van-collapse-item>
<van-collapse-item key='2' title='随访详情' name='2'>
<template #right-icon>
<doc-icon type='doc-down' />
</template>
<div class='list'>
<div class='flex justify-between py-1 border-bottom item'>
<span class='shrink-0 mr-2 label'>本次随访情况</span>
<span class='text-end'>
<span>{{ info.visitSituationName || '-' }}</span>
</span>
</div> </div>
<div class='flex justify-between py-1 border-bottom item' v-if='info.visitSituation == 2'>
<div class="py-4 border-bottom"> <span class='shrink-0 mr-2 label'>失访原因</span>
<div class="px-4 doc-title">筛查信息</div> <span class='text-end'>
<span v-if='info.lossReason != 9'>{{ info.lossReasonName || '-' }}</span>
<span v-if='info.lossReason == 9'>{{ info.lossReasonOther || '-' }}</span>
</span>
</div> </div>
<div class="px-4 list">
<template v-for="item in columnsScreen" :key="item.key">
<div v-if="item.key == 'pressure'" class="pt-3">
<table class="w-full">
<tr>
<td style="width: 7.1em">血压值(mmHg)</td>
<td>低压值(左侧)</td>
<td></td>
<td>高压值(右侧)</td>
</tr>
<tr>
<td>
第1次测量
</td>
<td>
{{ info.pressureOneDbp || '-' }}
</td>
<td>/</td>
<td>
{{ info.pressureOneSbp || '-' }}
</td>
</tr>
<tr>
<td>
第2次测量
</td>
<td class="flex">
{{ info.pressureTwoDbp || '-' }}
</td>
<td>/</td>
<td>
{{ info.pressureTwoSbp || '-' }}
</td>
</tr>
</table>
</div> </div>
<div v-else </van-collapse-item>
class="flex justify-between py-4 border-bottom item"> <van-collapse-item key='3' title='随访机构' name='3'>
<span class="shrink-0 mr-2 label">{{ item.title }}</span> <template #right-icon>
<div> <doc-icon type='doc-down' />
</template>
<div class='list'>
<div v-for='item in columnsOrg' :key='item.key'>
<div class='flex justify-between py-1 border-bottom item'>
<span class='shrink-0 mr-2 label'>{{ item.title }}</span>
<span class='text-end'>
<span>{{ info[item.key] || '-' }}</span> <span>{{ info[item.key] || '-' }}</span>
<span v-if="item.unit" class="ml-1">{{ item.unit }}</span> </span>
</div>
</div>
</div>
</van-collapse-item>
</van-collapse>
</div> </div>
</div> </div>
</template>
</div> -->
</div> </div>
</template> </template>
...@@ -126,16 +110,16 @@ export default { ...@@ -126,16 +110,16 @@ export default {
return { return {
activeCollapse: [], activeCollapse: [],
collapseList: [ collapseList: [
{ title: '居民信息', name: '1' }, { title: '居民信息', name: '1', columns: [], info: {} },
{ title: '筛查信息', name: '2' }, { title: '随访详情', name: '2', columns: [], info: {} },
{ title: '筛查机构', name: '3' } { title: '随访机构', name: '3', columns: [], info: {} }
], ],
// 全部展开、收起 // 全部展开、收起
collapseAll: false, collapseAll: false,
info: {}, info: {},
columnsBase: [ columnsBase: [
{ title: '姓名', key: 'residentName' }, { title: '姓名', key: 'residentName' },
{ title: '证件号码', key: 'idCard'}, { title: '证件号码', key: 'idCard' },
{ title: '性别', key: 'genderName' }, { title: '性别', key: 'genderName' },
{ title: '出生日期', key: 'dataBirth' }, { title: '出生日期', key: 'dataBirth' },
{ title: '年龄', key: 'currentAge' }, { title: '年龄', key: 'currentAge' },
...@@ -146,7 +130,7 @@ export default { ...@@ -146,7 +130,7 @@ export default {
{ title: '户籍地址', key: 'registeredCodeName' }, { title: '户籍地址', key: 'registeredCodeName' },
{ title: '详细地址', key: 'permanentAddress' } { title: '详细地址', key: 'permanentAddress' }
], ],
columnsScreen: [ columnsDetail: [
{ title: '年龄', key: 'currentAge', unit: '岁' }, { title: '年龄', key: 'currentAge', unit: '岁' },
{ title: '既往史', key: 'medicalHistoryName' }, { title: '既往史', key: 'medicalHistoryName' },
{ title: '身高', key: 'height', unit: 'cm' }, { title: '身高', key: 'height', unit: 'cm' },
...@@ -161,9 +145,13 @@ export default { ...@@ -161,9 +145,13 @@ export default {
{ title: '血清总胆固醇', key: 'serumCholesterin', unit: 'mmol/L' }, { title: '血清总胆固醇', key: 'serumCholesterin', unit: 'mmol/L' },
{ title: '高密度脂蛋白胆固醇', key: 'hdlCholesterin', unit: 'mmol/L' }, { title: '高密度脂蛋白胆固醇', key: 'hdlCholesterin', unit: 'mmol/L' },
{ title: '运动', key: 'exerciseIntensityName' }, { title: '运动', key: 'exerciseIntensityName' },
{ title: '慢病高危评估结果', key: 'screenResultName' }, { title: '慢病高危评估结果', key: 'screenResultName' }
{ title: '筛查日期', key: 'screenDate' },
{ title: '筛查机构', key: 'screenUnitName' } ],
columnsOrg: [
{ title: '随访单位', key: 'visitUnitName' },
{ title: '随访科室', key: 'visitOfficeName' },
{ title: '随访医生', key: 'visitDoctorName' }
] ]
} }
}, },
...@@ -188,7 +176,8 @@ export default { ...@@ -188,7 +176,8 @@ export default {
id: this.routerDetail.relationId id: this.routerDetail.relationId
} }
queryGeneralFUDetail(par).then(res => { queryGeneralFUDetail(par).then(res => {
this.info = res.data || {} let result = res.data || {}
this.info = result
}).finally(() => { }).finally(() => {
}) })
}, },
...@@ -216,23 +205,34 @@ export default { ...@@ -216,23 +205,34 @@ export default {
} }
</script> </script>
<style lang="less" scoped> <style lang='less' scoped>
@import url('../../utils/common.less'); @import url('../../utils/common.less');
.base-info { .base-info {
background: linear-gradient(to bottom, #DFF5F4 , #fff 50%); background: linear-gradient(to bottom, #DFF5F4, #fff 50%);
color: #8c8c8c; color: #8c8c8c;
.name { .name {
font-weight: 600; font-weight: 600;
color: #000; color: #000;
font-size: 18px; font-size: 18px;
} }
.top-label {
font-size: 13px;
line-height: 22px;
}
.color-b {
color: #262626;
}
} }
.cont-box { .cont-box {
background-color: #f9f9f9; background-color: #f9f9f9;
.cont-inner { .cont-inner {
background: linear-gradient(to bottom, #DFF5F4 , #fff .6rem); background: linear-gradient(to bottom, #DFF5F4, #fff .6rem);
border-top-left-radius: .08rem; border-top-left-radius: .08rem;
border-top-right-radius: .08rem; border-top-right-radius: .08rem;
} }
...@@ -242,10 +242,12 @@ export default { ...@@ -242,10 +242,12 @@ export default {
.icon-down { .icon-down {
vertical-align: middle; vertical-align: middle;
font-size: .12rem; font-size: .12rem;
.svg-icon { .svg-icon {
transition: all .2s; transition: all .2s;
} }
} }
.icon-down-expanded { .icon-down-expanded {
.svg-icon { .svg-icon {
transform: rotate(-180deg); transform: rotate(-180deg);
...@@ -257,10 +259,12 @@ export default { ...@@ -257,10 +259,12 @@ export default {
table { table {
text-align: left; text-align: left;
border-bottom: 1px solid var(--van-cell-border-color); border-bottom: 1px solid var(--van-cell-border-color);
>tr {
>td { > tr {
> td {
padding-left: 14px; padding-left: 14px;
padding-bottom: 12px; padding-bottom: 12px;
&:first-child { &:first-child {
text-align: right; text-align: right;
padding-left: 0; padding-left: 0;
...@@ -268,6 +272,7 @@ table { ...@@ -268,6 +272,7 @@ table {
} }
} }
} }
.list { .list {
.label { .label {
min-width: 5em; min-width: 5em;
......
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