<template> <div class="flex flex-col screening-list" style="height: 100vh"> <div class="p-3 text-black text-center shrink-0 doc-nav-bar" v-if='showNav()'> <span>慢病筛查记录</span> </div> <van-tabs v-model:active='activeTab' class='shrink-0 doc-tabs' v-if='tabList.length' @change='tabChange' shrink> <van-tab v-for='item in tabList' :key='item.name' :title='item.title' :name='item.name'></van-tab> </van-tabs> <div class='grow overflow-y-auto' ref='list'> <van-pull-refresh v-model='loadingRefresh' @refresh='onRefresh' :disabled='isRefreshDisable' style="min-height: 100%"> <van-list v-model:loading='loading' :finished='finished' :finished-text="list.length ? '没有更多了' : ''" :immediate-check='false' @load='onMore' > <div class="p-2 flex flex-col gap-y-2.5 card-list"> <div class="py-3 px-4 card" v-for='item in list' :key="item.id" @click="toDetail(item)"> <div> <span class="label">居民姓名</span> <span>{{ userInfo.residentName }}</span> </div> <div> <span class="label">证件号码</span> <span>{{ $idCardHide(userInfo.idCard) }}</span> </div> <div> <span class="label">筛查日期</span> <span>{{ item.screenDate }}</span> </div> <div> <span class="label">筛查机构</span> <span>{{ item.screenUnitName }}</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> <div class='text-center shrink-0 empty' v-if='!list.length'> <img src='@/assets/image/doctor/empty.png' alt='' style='width: 1.2rem;'> <p>暂无数据</p> </div> </van-pull-refresh> </div> </div> </template> <script> import { useStore } from '@/residentWX/store' import { queryScreenList } from '@/api/residentWX/screening.js' export default { inject:['showNav', 'isResidentInfo'], data() { return { store: useStore(), activeTab: '1', tabList: [ { title: '高危筛查', name: '1' }, { title: '专病筛查', name: '2' } ], list: [], pagination: { total: 0, pageIndex: 1, pageSize: 8 }, loading: false, finished: false, loadingRefresh: false, isRefreshDisable: false } }, computed: { routeQuery() { return this.$route.query }, idCard() { return this.routeQuery.idCard }, userInfo() { return this.store.userInfo }, }, created() { document.title = '慢病筛查记录' this.load() }, mounted() { const list = this.$refs.list list.addEventListener('scroll', () => { if (list.scrollTop > 0) { this.isRefreshDisable = true } else { this.isRefreshDisable = false } }) }, methods: { load(loading = true) { if (!this.isResidentInfo()) return const query = { screeningType: this.activeTab, residentInfoId: this.userInfo.residentInfoId, pageIndex: this.pagination.pageIndex, pageSize: this.pagination.pageSize } queryScreenList(query, loading).then(res => { if (this.pagination.pageIndex === 1) { this.list = [] } this.list = this.list.concat(res.data.dataList || []) this.pagination.total = res.data.total || 0 this.finished = this.list.length >= this.pagination.total }).finally(() => { this.loading = false this.loadingRefresh = false }) }, onMore() { this.pagination.pageIndex++ this.load() }, onRefresh() { this.pagination.pageIndex = 1 this.load(false) }, tabChange() { this.pagination.pageIndex = 1 this.load() }, toDetail(record) { if (!record) return let path = `/residentWX/screening/firstDetail/${record.id}` if (this.activeTab == '2') { path = `/residentWX/screening/SecondDetail/${record.id}` } this.$router.push({ path }) } } } </script> <style lang="less" scoped> @import url('../utils/common.less'); .screening-list { background-color: #f9f9f9; } .card-list { padding-bottom: .3rem; } .card { position: relative; background-color: #fff; border-radius: 12px; >div { display: flex; margin-bottom: 8px; &:last-of-type { margin-bottom: 0!important; } } .label { min-width: 6em; color: #8C8C8C; } } .tag { position: absolute; top: 8px; right: 8px; border-radius: 2px; padding: 4px 8px; 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>