Search.vue

<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-if="!total">
                    <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,
            total: 0,
            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.total = res.data.total || 0
                this.setHistory()
            }).finally(() => {
                this.state = 2
            })
        },
        toSearch(idCard) {
            this.idCard = idCard
            this.search()
        },
        toDetail() {
            this.$router.push({
                path: `/doctor/patient-detail`,
                query: {
                    residentInfoId: 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>