Skip to content

F
frontend-h5
Commit 5ac19f65 authored by songrui's avatar songrui
Browse files
Options

慢病筛查详情

parent b1c77146
Hide whitespace changes
Inline Side-by-side
Showing with 212 additions and 69 deletions
src/assets/css/base.less
View file @ 5ac19f65
...@@ -107,13 +107,3 @@ body { ...@@ -107,13 +107,3 @@ body {
margin-left: var(--van-padding-sm); margin-left: var(--van-padding-sm);
} }
} }
// 顶部导航栏
.doc-nav-bar {
position: relative;
border-bottom: 1px solid #3C3C435C;
.back-bt {
position: absolute;
left: .16rem;
}
}
\ No newline at end of file
src/assets/icons/residentWX/doc-left2.svg 0 → 100644
View file @ 5ac19f65
<svg width="9" height="13" viewBox="0 0 9 13" fill="none" xmlns="http://www.w3.org/2000/svg">
<path d="M3.09167 6.38109L8.04167 11.3311L6.62767 12.7451L0.263672 6.38109L6.62767 0.0170898L8.04167 1.43109L3.09167 6.38109Z" fill="#061938"/>
</svg>
src/residentWX/ResidentWX.vue
View file @ 5ac19f65
...@@ -29,6 +29,9 @@ export default { ...@@ -29,6 +29,9 @@ export default {
checkboxCheckedIconColor: '#54CCBD', checkboxCheckedIconColor: '#54CCBD',
// tab // tab
tabsBottomBarColor: '#54CCBD', tabsBottomBarColor: '#54CCBD',
tabActiveTextColor: '#54CCBD',
tabTextColor: '#8C8C8C',
tabFontSize: '.16rem',
// 级联选项 // 级联选项
cascaderActiveColor: '#54CCBD', cascaderActiveColor: '#54CCBD',
// 表单相关 // 表单相关
......
src/residentWX/screening/List.vue
View file @ 5ac19f65
<template> <template>
<div class="h-full"> <div class="flex flex-col screening-list" 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">
<doc-icon type="doc-left" />
</span>
</span> -->
<span>慢病筛查记录</span> <span>慢病筛查记录</span>
</div> </div>
<div class='card' v-for='item in list' :key="item.id"> <van-tabs v-model:active='activeTab' class='shrink-0 doc-tabs' v-if='tabList.length'
<div class="p-4"> @change='tabChange'
<div class='text-16 font-semibold mb-2 title'>{{ item.residentName }}</div> shrink>
<div class="mb-2"> <van-tab v-for='item in tabList' :key='item.name'
<span class="label">证件号码</span> :title='item.title' :name='item.name'></van-tab>
<span>{{ $idCardHide(item.idCard) }}</span> </van-tabs>
</div> <div class='grow overflow-y-auto' ref='list'>
<div class="mb-2"> <van-pull-refresh v-model='loadingRefresh' @refresh='onRefresh'
<span class="label">筛查日期</span> :disabled='isRefreshDisable'
<span>{{ item.screenDate }}</span> class="h-full">
</div> <van-list
<div class="mb-2"> v-model:loading='loading'
<span class="label">筛查机构</span> :finished='finished'
<span>{{ item.screenUnitName }}</span> :finished-text="list.length ? '没有更多了' : ''"
</div> :immediate-check='false'
<div class="bt-box flex pt-2 justify-end"> @load='onMore'
<van-button type="primary" size="small" >
@click="toDetail(item)">详 情</van-button> <div class="p-2 flex flex-col gap-y-2.5 card-list">
</div> <div class="py-3 px-4 card" v-for='item in list' :key="item.id"
</div> @click="toDetail(item)">
<div class="divide"></div> <div>
<span class="label">居民姓名</span>
<span>1</span>
</div>
<div>
<span class="label">证件号码</span>
<span>2</span>
</div>
<div>
<span class="label">筛查日期</span>
<span>3</span>
</div>
<div>
<span class="label">筛查机构</span>
<span>4</span>
</div>
<span class="tag tag-red" v-show="activeTab == '1'">高危筛查</span>
<span class="tag tag-blue" v-show="activeTab == '2'">专病筛查</span>
</div>
</div>
</van-list>
</van-pull-refresh>
</div> </div>
</div> </div>
</template> </template>
<script> <script>
import { showNotify } from 'vant' import { showNotify } from 'vant'
import { querScreenList } from '@/api/resident/screening.js'
export default { export default {
data() { data() {
return { return {
list: [] activeTab: undefined,
tabList: [
{ title: '高危筛查', name: '1' },
{ title: '专病筛查', name: '2' }
],
list: [{id: 1}, {id: 2}],
pagination: {
total: 0,
pageIndex: 1,
pageSize: 5
},
loading: false,
finished: false,
loadingRefresh: false,
isRefreshDisable: false
} }
}, },
computed: { computed: {
...@@ -58,15 +87,43 @@ export default { ...@@ -58,15 +87,43 @@ export default {
} }
this.init() this.init()
}, },
mounted() {
const list = this.$refs.list
list.addEventListener('scroll', () => {
if (list.scrollTop > 0) {
this.isRefreshDisable = true
} else {
this.isRefreshDisable = false
}
})
},
methods: { methods: {
init() { init() {
querScreenList({ idCard: this.idCard }).then(res => { this.load()
this.list = res.data || [] },
}) load() {
},
onMore() {
this.pagination.pageIndex++
this.load()
},
onRefresh() {
// this.list = []
this.pagination.pageIndex = 1
this.load(false)
},
tabChange() {
// this.list = []
this.pagination.pageIndex = 1
this.load()
}, },
toDetail(record) { toDetail(record) {
if (!record) return if (!record) return
const path = `/resident/screening/first/detail/${record.id}` let path = `/residentWX/screening/firstDetail/${record.id}`
if (this.activeTab == '2') {
path = `/residentWX/screening/SecondDetail/${record.id}`
}
this.$router.push({ path }) this.$router.push({ path })
} }
} }
...@@ -75,20 +132,45 @@ export default { ...@@ -75,20 +132,45 @@ export default {
<style lang="less" scoped> <style lang="less" scoped>
@import url('../utils/common.less'); @import url('../utils/common.less');
.screening-list {
background-color: #f9f9f9;
}
.card-list {
padding-bottom: 76px;
}
.card { .card {
position: relative;
background-color: #fff;
border-radius: 12px;
>div {
position: relative;
display: flex;
margin-bottom: 8px;
&:last-child {
margin-bottom: 0;
}
}
.label { .label {
display: inline-block; min-width: 6em;
min-width: 5em;
color: #8C8C8C; color: #8C8C8C;
} }
.bt-box { }
border-top: 1px solid var(--van-border-color); .tag {
} position: absolute;
.divide { top: 8px;
border-top: 6px solid #f5f5f5; right: 8px;
} border-radius: 2px;
&:last-child { padding: 4px 8px;
.divide { display: none; } font-size: 12px;
} }
.tag-red {
border: 1px solid #FFA39E;
color: #F5222D;
background-color: #FFF1F0;
}
.tag-blue {
border: 1px solid #ADC6FF;
color: #2F54EB;
background-color: #F0F5FF;
} }
</style> </style>
src/residentWX/screening/detail/FirstDetail.vue
View file @ 5ac19f65
<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>
<span>居民慢病筛查详情</span> <span>筛查详情</span>
</div> </div>
<div class="py-4 border-bottom"> <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">
<div class="grow flex flex-col justify-between pl-3">
<div class="flex justify-between">
<span class="name">张一华</span>
<span>筛查日期：2024-10-11</span>
</div>
<div>
<span>慢病高危评估结果：</span>
<span>高危风险人群</span>
</div>
</div>
</div>
</div>
<div class="p-3 grow cont-box">
<div class="p-3 h-full cont-inner">
<div class="flex justify-between">
<span>全部内容</span>
<span>展开全部</span>
</div>
</div>
</div>
<!-- <div class="py-4 border-bottom">
<div class="px-4 doc-title">居民信息</div> <div class="px-4 doc-title">居民信息</div>
</div> </div>
<div class="px-4 list"> <div class="px-4 list">
...@@ -69,13 +91,12 @@ ...@@ -69,13 +91,12 @@
</div> </div>
</template> </template>
</div> </div> -->
</div> </div>
</template> </template>
<script> <script>
import { showNotify } from 'vant' import { showNotify } from 'vant'
import { querScreenDetail } from '@/api/resident/screening.js'
export default { export default {
data() { data() {
...@@ -132,9 +153,7 @@ export default { ...@@ -132,9 +153,7 @@ export default {
}, },
methods: { methods: {
init() { init() {
querScreenDetail({ id: this.id }).then(res => {
this.info = res.data || {}
})
}, },
onBack() { onBack() {
this.$router.back() this.$router.back()
...@@ -145,6 +164,26 @@ export default { ...@@ -145,6 +164,26 @@ export default {
<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;
}
}
.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;
}
}
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);
......
src/residentWX/utils/common.less
View file @ 5ac19f65
:deep(.doc-tabs) {
border-bottom: 1px solid #EBEBEC;
.van-tab {
font-weight: 500;
}
.van-tabs__line {
border-radius: 0;
border-top-left-radius: 10px;
border-top-right-radius: 10px;
}
}
// 顶部导航栏
.doc-nav-bar {
position: relative;
border-bottom: 1px solid #3C3C435C;
font-size: 18px;
font-weight: 600;
.back-bt {
position: absolute;
left: .16rem;
top: 50%;
transform: translateY(-50%);
}
}
\ No newline at end of file
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