com.kasite.client.uniapp.patient/pages/st1/business/tabbar/homeSearch/homeSearch.vue

<template>
    <view class="container">
        <view class="content">
            <view class="search">
                <view class="search_box">
                    <input class="search_input" :focus="true" placeholder="请输入医生姓名/科室/服务名称"
                        placeholder-class="placeholder" v-model="searchValue" />
                    <image class="search_icon " :src="iconUrl.search"></image>
                    <image class="remove_icon " v-if="searchValue.length > 0" :src="iconUrl.cha" @click.stop="focusFn">
                    </image>
                    <view class="search_confirm backgroundCustom_F08 search_confirm_active" @click="searchClick">搜索</view>
                </view>
            </view>
            <view class="content_inner">
                <!-- 医生 -->
                <template v-if="doctorList.length > 0">
                    <view class="floot doctor">
                        <view class="floot_title">医生</view>
                        <view class="floot_box doctorBox displayFlexLeft">
                            <view class="doctorBox_item" v-for="(item, index) in doctorList" :key="index"
                                @click="clickDoctor" :data-item="item">{{ item.DoctorName + " " + item.DeptName }}
                            </view>
                        </view>
                    </view>
                </template>
                <!-- 科室 -->
                <template v-if="deptList.length > 0">
                    <view class="floot doctor">
                        <view class="floot_title">科室</view>
                        <view class="floot_box doctorBox displayFlexLeft">
                            <view class="doctorBox_item" v-for="(item, index) in deptList" :key="index"
                                @click="clickDept" :data-item="item">{{ item.DeptName }}</view>
                        </view>
                    </view>
                </template>
                <!-- 功能 -->
                <template v-if="menuList.length > 0">
                    <view class=" menuServices_box">
                        <view class="floot_title">就医服务</view>
                        <view class="floot_box displayFlexLeft">
                            <view class="menuList displayFlexCol" v-for="(item, index) in menuList" :key="index"
                                :data-item="item" @click="menuClickFn">
                                <image class="menuIcon" :src="item.Icon" mode="heightFix"></image>
                                <text class="menuText">{{ item.MenuName }}</text>
                            </view>
                        </view>
                    </view>
                </template>
            </view>
            <view v-if="doctorList.length == 0 && deptList.length == 0 && menuList.length == 0" class="noData">
                <noData :value="'暂无搜索记录'"></noData>
            </view>
        </view>
    </view>

</template>

<script lang="ts" setup>
import { getCurrentInstance, nextTick, ref } from 'vue';
import { useIsToAuthPage, useGetDefaultMember } from '../../../../../hook';
import { onShow, onPullDownRefresh } from '@dcloudio/uni-app';
import { common, menuClick } from '@/utils';
import icon from '@/utils/icon';
import store from '@/store';
import { searchClinicDeptAndDoctor } from '../../../service/base';

import noData from '@/pages/st1/components/noData/noData.vue'

const { proxy } = getCurrentInstance();
const app = getApp();

const iconUrl = ref(icon)
const searchValue = ref("")
const doctorList = ref([])
const deptList = ref([])
const menuList = ref([])


/** 清空查询 */
const focusFn = () => {
    searchValue.value = ''
    menuList.value = []
    doctorList.value = []
    deptList.value = []
}
/** 点击搜索 */
const searchClick = async () => {
    let pageConfig = common.deepCopy(app.globalData.config.pageConfiguration.yyghDeptList_config)
    let searchValueData = searchValue.value;
    if (common.isEmpty(searchValueData)) {
        common.showToast('请输入医生姓名/科室/服务名称')
        return
    }
    let menuListData = uni.getStorageSync('menuList')
    let doctorListData = [], deptListData = [];
    // 获取医生或者科室
    let queryData = {
        HosId: app.globalData.districtId || app.globalData.hosId,
        SearchLike: searchValueData,
        QueryLocal: "1",
        UseBaseInfo: true,
        ExcludeOneLv: pageConfig.showDeptSec ? 1 : 0,// 是否过滤一级科室，
    }
    let { resp } = await searchClinicDeptAndDoctor(queryData)
    if (!common.isEmpty(resp)) {
        doctorListData = resp.filter(item => item.SearchType != '1')   // 过滤医生
        deptListData = resp.filter(item => item.SearchType == '1') // 过滤科室
    }
    // 获取功能菜单
    if (common.isNotEmpty(menuListData)) {
        //遍历成独立的数组
        const childArray = getAllChildren(menuListData.map(item => item.Children));
        console.log('childArray================', childArray,searchValueData)
        // 过滤搜索条件不满足的
        menuListData = childArray.filter(item => item.MenuName && item.MenuName.indexOf(searchValueData) != -1 && item.IsShow == 1 && common.isNotEmpty(item.Url))
        // 去重相同条件的
        menuListData = common.unique(menuListData, 'MenuName')
    }
    console.log('menuListData================', menuListData)
    menuList.value = menuListData
    doctorList.value = doctorListData
    deptList.value = deptListData
}
/** 菜单数组处理 */
const getAllChildren = (arr) => {
    return arr.flatMap(item => {
        if (Array.isArray(item)) {
            return getAllChildren(item);
        } else if (item.Children) {
            return [item, ...getAllChildren(item.Children)];
        } else {
            return [item];
        }
    });
}
/** 就医服务点击 */
const menuClickFn = (e) => {
    menuClick(e, proxy)
}
/** 医生点击 */
const clickDoctor = async (e) => {
    app.globalData.queryBean = e.currentTarget.dataset.item;
    let url = `/pagesPatient/st1/business/yygh/yyghClinicMsg/yyghClinicMsg`;
    /**跳转到挂号页面 需要判断就诊人 和公众号授权*/
    if (useIsToAuthPage()) {
        return;
    }
    // 获取当前设置的患者信息 判断是否可以无卡预约 取不同的值允许无卡预约或者默认就诊人信息 否者获取就诊卡信息，如当前默认就诊人无就诊卡，跳转选卡界面
    let lastOperatorResp = await useGetDefaultMember({
        cardType: app.globalData.withoutCard ? '' : '1',
        url: url,
        isKeepPage: true,
    })
    // 判断返回的操作人为null 代表跳转选择界面了
    if (lastOperatorResp === null) return
    if (common.isEmpty(lastOperatorResp)) {
        app.globalData.toUrl = url; //保存添加成功后跳转地址
        app.globalData.cardType = app.globalData.withoutCard ? '' : '1' //保存添加成功，要查询的默认人信息
        url = `/pagesPersonal/st1/business/patientManagement/addMember/addMember`
    }
    common.goToUrl(url)
}
/** 医生科室 */
const clickDept = (e) => {
    app.globalData.queryBean = e.currentTarget.dataset.item
    common.goToUrl(`/pagesPatient/st1/business/yygh/yyghDoctorList/yyghDoctorList`)
}
</script>

<style lang="scss" scoped>
.container,
.content {
    background-color: #fff;
}

/* 搜索框 */

.search {
    position: fixed;
    z-index: 2;
    height: 110upx;
    width: 100%;
    padding: 0 30upx 20upx;
    top: 0;
    left: 0;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.search_box {
    width: 100%;
    margin-top: 10upx;
    display: flex;
    flex-direction: row;
    justify-content: flex-start;
    align-items: center;
    position: relative;
    z-index: 10;
}

.search_input {
    width: 660upx;
    height: 72upx;
    border-radius: 36px;
    font-size: 28upx;
    color: #333 !important;
    background: #F1F1F6;
    margin-right: 24upx;
    padding-left: 65upx;
    padding-right: 158upx;
}

.search_icon {
    width: 26upx;
    height: 26upx;
    position: absolute;
    top: 33%;
    left: 20upx;
}

.remove_icon {
    width: 36upx;
    height: 36upx;
    position: absolute;
    top: 28%;
    right: 128upx;
    z-index: 50;
}



.search_confirm {
    width: 110upx;
    font-size: 28upx;
    border-radius: 33px;
    line-height: 65upx;
    text-align: center;
    transition: all 0.3s;
    position: absolute;
    right: 0;
    border: 4upx solid #fff;
}

.content_inner {
    margin-top: 110upx;
}

.floot {
    margin: 30upx;
}

.floot_title {
    font-size: 28upx;
    font-family: PingFang SC;
    font-weight: bold;
    color: #222326;
    padding: 20upx 0 30upx;
}

.doctorBox_item {
    background: #F7F7FA;
    border-radius: 28upx;
    font-size: 24upx;
    font-family: PingFang SC;
    color: #62626D;
    padding: 17upx 33upx;
    margin: 0 16upx 16upx 0;
}

.menuServices_box .floot_title {
    margin: 0 30upx;
}

.menuServices_box .menuList {
    width: 25%;
    margin-bottom: 36upx;
}

.menuServices_box .menuIcon {
    width: 78upx;
    height: 84upx;
    margin-bottom: 20upx;
}

.menuServices_box .menuText {
    font-size: 26upx;
    font-family: PingFang SC;
    color: #222326;
}
</style>