<template>
<div class="flex flex-col pt-2 search">
<div class="flex items-center px-4 pb-1 shrink-0 top-bar">
<span class="shrink-0 pr-2 back-bt" @click="toBack">
<doc-icon type="doc-left-1" style="color: #262626"/>
</span>
<div class="grow flex items-center mr-2 input-box">
<!-- <doc-icon type="doc-search" class="shrink-0" style="color: #595959"/> -->
<van-field v-model="idCard" placeholder="请输入身份证号查询"
autocomplete="off"
clearable
:formatter="formatter"
@clear="idCardClear"
ref="idCardField"/>
<IdCardScan>
<doc-icon type="doc-camera" class="shrink-0 mr-3" style="color: #575B66"/>
</IdCardScan>
</div>
<span class="text-16 shrink-0 text-primary" @click="search">
搜索
</span>
</div>
<div class="grow px-4 overflow-y-auto">
<div class="pt-3" v-if="state === 1">
<div class="flex justify-between items-end pt-2 pb-1">
<span class="text-16 font-semibold">搜索历史</span>
<span class="flex items-center"
@click="clearHistory">
<doc-icon type="doc-delete" style="color: #8c8c8c"/>
<span class="ml-1" style="color: #595959">清除历史</span>
</span>
</div>
<div class="flex flex-wrap mt-4 history-list">
<span v-for="item in history" :key="item"
@click="toSearch(item)">{{ $idCardHide(item) }}</span>
</div>
</div>
<div class="pt-2" v-if="state === 2">
<div class="text-12" style="color: #8c8c8c">查找结果：</div>
<div class="card"
v-if="result.chronicTagsArrayName || result.firstScreenResult || result.highTagsArray">
<div class="py-3">
<span class="text-16 font-semibold mr-3">{{ result.residentName }}</span>
<span class="text-12 mr-3">{{ result.currentAge || '-' }} 岁</span>
<span class="text-12 mr-3">{{ result.genderName }}</span>
<span class="text-12" v-if="result.chronicStatus == 9">死亡</span>
</div>
<div class="mb-2">
<span class="label">身份证号</span>
<span>{{ $idCardHide(result.idCard) }}</span>
</div>
<div class="mb-2">
<span class="label">人群分类</span>
<span>{{ result.chronicCrowdName || '-' }}</span>
</div>
<!-- <div class="flex mb-2">
<span class="shrink-0 label">专病高危评估</span>
<span>{{ result.highTagsArrayName || '-' }}</span>
</div> -->
<div class="flex mb-2">
<span class="shrink-0 label">慢病标签</span>
<ChronicTag :list="result.chronicTagsArray"/>
<!-- <span>{{ result.chronicTagsArrayName }}</span> -->
</div>
<div class="text-12 tip">
<div style="color: #A5AEBE;" >提示：</div>
<div style="color: #768092;">如需为居民进行 慢病诊断筛查 ，请在医生PC端进行操作</div>
</div>
<div class="text-center mt-5">
<van-button round type="primary" class="detail-bt" @click="toDetail">详情</van-button>
</div>
</div>
<div class="card" v-else-if="!!result.id">
<div class="py-3">
<span class="text-16 font-semibold mr-3">{{ result.residentName }}</span>
<span class="text-12 mr-3">{{ result.currentAge || '-' }} 岁</span>
<span class="text-12">{{ result.genderName }}</span>
</div>
<div class="mb-2">
<span class="label">身份证号</span>
<span>{{ $idCardHide(result.idCard) }}</span>
</div>
<div class="text-12 tip">
<div style="color: #A5AEBE;" >提示：</div>
<div style="color: #768092;">如需为居民进行 慢病诊断筛查 ，请在医生PC端进行操作</div>
</div>
</div>
<div class="text-center empty" v-else>
<img src="@/assets/image/doctor/empty.png" alt="" style="width: 1.2rem;">
<p>暂无数据</p>
</div>
</div>
</div>
</div>
</template>
<script>
import { getResidentByPage } from '@/api/doctor/resident.js'
import { validateIdCard } from '@/utils/commonReg.js'
import { setLocalStorage, getLocalStorage } from '@/utils/common.js'
import { showFailToast } from 'vant'
import ChronicTag from '@/doctor/components/chronicTag/ChronicTag.vue'
import IdCardScan from '@/doctor/components/idCardScan/IdCardScan.vue'
export default {
components: {
ChronicTag,
IdCardScan
},
data() {
return {
// 查询使用
idCard: undefined,
// 历史记录
history: [],
result: {},
state: 1,
show: false,
value1: undefined,
value2: undefined
}
},
computed: {
historyKey() {
return 'search-history'
},
},
created() {
this.history = getLocalStorage(this.historyKey) || []
},
methods: {
formatter(value) {
return value.replace(/[\u4e00-\u9fa5/\s+/]|[^a-zA-Z0-9\u4E00-\u9FA5]/g, '');
},
search() {
if (!this.idCard) return
if (!validateIdCard(this.idCard)) {
showFailToast('请输入正确的身份证号')
return
}
const query = {
idCard: this.idCard,
pageIndex: 1,
pageSize: 10
}
getResidentByPage(query).then(res => {
const result = res?.data?.dataList || []
this.result = result[0] || {}
this.setHistory()
}).finally(() => {
this.state = 2
})
},
toSearch(idCard) {
this.idCard = idCard
this.search()
},
toDetail() {
this.$router.push({
path: `/doctor/resident/base`,
query: {
residentId: this.result.residentInfoId
}
})
},
toBack() {
this.$router.back()
},
idCardClear() {
this.state = 1
},
setHistory() {
const history = getLocalStorage(this.historyKey) || []
const index = history.findIndex(e => e === this.idCard)
if (index > -1) {
history.splice(index, 1)
}
history.unshift(this.idCard)
if (history.length > 8) {
history.pop()
}
this.history = history
setLocalStorage(this.historyKey, history)
},
clearHistory() {
setLocalStorage(this.historyKey, [])
this.history = []
}
}
}
</script>
<style lang="less" scoped>
.search {
height: 100vh;
}
.top-bar {
border-bottom: 1px solid #e5e5e5;
.back-bt {
flex-basis: 24px;
text-align: center;
}
.input-box {
background-color: #FAFAFA;
border: 1px solid #F5F5F5;
border-radius: 4px;
.svg-icon {
font-size: 16px;
}
.van-cell {
font-size: 14px;
padding: 4px 10px;
background: transparent;
&::after {
display: none;
}
}
}
}
.history-list {
gap: 10px;
>span {
border-radius: 34px;
background-color: #EFF2F7;
padding: 2px 12px;
}
}
.card {
line-height: 1.2;
.label {
display: inline-block;
color: #8C8C8C;
min-width: 8em;
}
.tip {
background-color: #F8FAFC;
padding: 8px 10px;
line-height: 1.5;
}
.detail-bt {
color: #607FF0;
background-color: #F0F3FF;
border: 0;
width: 50%;
height: 32px;
}
}
</style>