com.kasite.client.uniapp.patient/pagesNetHos/st1/business/other/doctorLike/doctorLike.vue

<template>
	<view class="container">
		<view class="content">
			<view class="doc_tab p_flexCenter">
				<view
					class="doc_tab_item p_flexCenter"
					:class="[tabInd == 0 ? 'doc_tab_item_ac p_color' : 'p_color_6']"
					@click="tabClick(0)">
					关注医生
				</view>
				<view
					class="doc_tab_item p_flexCenter"
					:class="[tabInd == 1 ? 'doc_tab_item_ac p_color' : 'p_color_6']"
					@click="tabClick(1)">
					最近咨询
				</view>
				<view
					class="doc_tab_item p_flexCenter"
					:class="[tabInd == 2 ? 'doc_tab_item_ac p_color' : 'p_color_6']"
					@click="tabClick(2)">
					关注团队
				</view>
			</view>
			<view class="doctor_list_con p_format" v-if="!showNoData">
				<!-- 医生列表 -->
				<template v-if="tabInd != 2">
					<view class="p_doctor_item p_flexCenter"
						v-for="(item, index) in (tabInd == 0 ? collectDoctorList : hisDoctorList)" :key="index"
						@click="toDocInfo(item)">
						<view class="p_doctor_img_con">
							<image class="p_doctor_img" :src="item.DoctorPhotourl"></image>
						</view>
						<view class="p_doctor_item_con">
							<view class="doctor_item_con p_flexBetween">
								<view class="p_doctor_infocon">
									<view class="p_doctor_tit">
										<view class="p_doctor_name">{{ item.DoctorName }}</view>
									</view>
									<view class="p_doctor_info p_color_6">{{ item.LczcName }} {{ item.DeptName }}</view>
								</view>
								<view class="p_doctor_btn doc_his_btn_like p_flexCenter" :class="{ doc_his_btn_liked: item.like }">
									<image class="doc_his_btn_img" :src="iconUrl.doctor_like_n" v-if="!item.like"></image>
									<view class="doc_his_btn_val" @click.stop="likeFn(item)">
										{{ item.like ? '已关注' : '关注' }}
									</view>
								</view>
							</view>
							<view class="p_doctor_item_introduce p_color_9 p_lineClamp">
								擅长：{{ item.DoctorSkill }}
							</view>
							<view class="p_doctor_item_introduce p_color_3" v-if="tabInd == 1">
								咨询时间：{{ item.ConsultStartTime }}
							</view>
						</view>
					</view>
				</template>
				<!-- 团队列表 -->
				<template v-if="tabInd == 2">
					<view class="group_item displayFlexCol" v-for="(item, index) in groupList" :key="index"
						@click="jumpGroupInfo(item)">
						<image class="group_photo" :src="item.GroupUrl" mode="aspectFill" />
						<text class="group_name">{{ item.GroupName }}</text>
						<view class="group_introduce">
							<text class="skill_label">简介：</text>
							<text class="group_introduce_text p_color_6">{{ item.GroupIntro }}</text>
						</view>
					</view>
				</template>
			</view>
			<view class="noData" v-else>
				<noData :value="noDataValue"></noData>
			</view>
		</view>
	</view>
</template>

<script lang="ts" setup>
import { ref, getCurrentInstance } from 'vue';
import { useOnLoad } from '@/hook';
import { queryConsultDoctorGroup, queryUserCollect, queryBDoctorList, queryHistoryConsultDoctor, userCollect, unUserCollect } from '/pagesNetHos/st1/service/doctor/index';
import icon from '@/utils/icon';
import { common } from '@/utils';
import { doctorListHandle } from '/pagesNetHos/st1/static/js/pagesNetHosFn';
import noData from '@/pages/st1/components/noData/noData.vue';

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

// 图片icon
const iconUrl = ref(icon);
// 0关注医生 1最近咨询
const tabInd = ref(0);
// 关注医生列表
const collectDoctorList = ref<any[]>([]);
// 历史医生列表
const hisDoctorList = ref<any[]>([]);
// 是否展示暂无数据
const showNoData = ref(false);
// 暂无数据
const noDataValue = ref('暂无数据');
const groupList = ref<any[]>([]);

// 返回上一级页面时执行的当前页面函数
const refresh = () => {

};

// 页面加载
useOnLoad(() => {
	main();
});

// 查询关注医生
const queryCollectDoctor = async () => {
	const collectData = { resourceType: '1' };
	const { resp: respCollect } = await queryUserCollect(collectData);
	let collectDocList: any[] = [];
	if (!common.isEmpty(respCollect)) {
		const arr: string[] = [];
		for (let i = 0; i < respCollect.length; i++) {
			arr.push(respCollect[i].ResourceId);
		}
		const queryBDoctorListData = {
			DoctorUid: arr.join()
		};
		const { resp: collectDocListResp } = await queryBDoctorList(queryBDoctorListData);
		if (!common.isEmpty(collectDocListResp)) {
			// 添加关注状态
			collectDocListResp.map((item: any) => item.like = true);
			collectDocList = doctorListHandle(collectDocListResp);
		}
	}
	collectDoctorList.value = collectDocList;
};

// 查询最近咨询
const queryHisDoctor = async () => {
	const data = { ConsultType: '' };
	const { resp: respHis } = await queryHistoryConsultDoctor(data);
	let hisDocList: any[] = [];
	if (!common.isEmpty(respHis)) {
		// 获取已关注的医生ID
		const likedDoctorIds = collectDoctorList.value.filter(item => item.like).map(item => item.DoctorUid);
		for (let i of respHis) {
			// 判断是否已关注
			if (likedDoctorIds.includes(i.DoctorUid)) {
				i.like = true;
			}
		}
		hisDocList = doctorListHandle(respHis);
	}
	hisDoctorList.value = hisDocList;
};

// 查询咨询医生组
const queryConsultDoctorGroupFn = async () => {
	const data = {
		IsMemberCollect: 1
	};

	const { resp } = await queryConsultDoctorGroup(data);
	if (common.isNotEmpty(resp)) {
		groupList.value = resp;
	}
};

// 更新暂无数据显示
const updateShowNoData = () => {
	const currentTabInd = tabInd.value;
	if (currentTabInd == 0) {
		showNoData.value = common.isEmpty(collectDoctorList.value);
	} else if (currentTabInd == 1) {
		showNoData.value = common.isEmpty(hisDoctorList.value);
	} else {
		showNoData.value = common.isEmpty(groupList.value);
	}
  console.log(showNoData.value,'v')
};

const main = async () => {
	const currentTabInd = tabInd.value;
	// 根据 tabInd 请求对应接口
	if (currentTabInd == 0) {
		// 关注医生
		await queryCollectDoctor();
	} else if (currentTabInd == 1) {
		// 最近咨询
		await queryHisDoctor();
	} else if (currentTabInd == 2) {
		// 关注团队
		await queryConsultDoctorGroupFn();
	}
	// 更新暂无数据显示
	updateShowNoData();
};

const tabClick = (ind: number) => {
	if (ind == tabInd.value) {
		return;
	}
	tabInd.value = ind;
	main();
};

const likeFn = async (item: any) => {
	const data = {
		resourceId: item.DoctorUid,
		resourceType: 1
	};
	let res;
	if (item.like) {
		// 取消关注
		({ resData: res } = await unUserCollect(data));
	} else {
		// 关注
		({ resData: res } = await userCollect(data));
	}
	if (res.RespCode == '10000') {
		collectDoctorList.value.map(cell => {
			if (cell.DoctorUid == item.DoctorUid) {
				cell.like = !cell.like;
			}
		});
		hisDoctorList.value.map(cell => {
			if (cell.DoctorUid == item.DoctorUid) {
				cell.like = !cell.like;
			}
		});
	}
};

const toDocInfo = (item: any) => {
	const queryBean = common.stringify(item);
	const url = `/pagesNetHos/st1/business/doctor/doctorInfo/doctorInfo?queryBean=${queryBean}`;
	common.menuClick({ Url: url }, proxy);
};

/** 跳转团队主页 */
const jumpGroupInfo = (item: any) => {
	const url = `/pagesNetHos/st1/business/doctorGroup/doctorGroupInfo/doctorGroupInfo?groupId=${item.GroupId}`;
	common.goToUrl(url);
};

// 暴露方法供父组件调用
defineExpose({
	refresh
});
</script>

<style lang="scss" scoped>
@import "/pagesNetHos/st1/static/css/common";
@import "/pagesNetHos/st1/static/css/doctorInfo";

.doc_tab_item {
	width: 50%;
	position: relative;
	height: 100upx;
	font-size: 30upx;
	background-color: #fff;
}

.doc_tab_item_ac {
	font-size: 36upx;
	font-weight: 500;
}

.doc_tab_item_ac:after {
	content: "";
	display: block;
	height: 6upx;
	width: 48upx;
	background: #01BF8E;
	border-radius: 3upx;
	position: absolute;
	bottom: 0;
	left: 50%;
	transform: translateX(-50%);
}

.p_doctor_item {
	margin: 20upx 30upx;
	padding: 30upx 24upx 15upx;
	background-color: #fff;
	border-radius: 20upx;
}

.p_doctor_item_con {
	padding-bottom: 0;
}

.doc_his_btn_like {
	padding: 0 18upx;
	height: 54upx;
	background: linear-gradient(90deg, rgba(177, 236, 195, 0.2) 0%, rgba(6, 186, 132, 0.2) 100%);
	font-size: 26upx;
	font-weight: 500;
	color: #01BF8E;
	border-radius: 50px;
	border: 1px solid rgba(6, 186, 132, 0.2);
}

.doc_his_btn_liked {
	background: linear-gradient(90deg, rgba(232, 233, 240, 0.2) 0%, rgba(170, 173, 189, 0.2) 100%);
	color: #AAADBD;
	border-radius: 50px;
	border: 1px solid rgba(170, 173, 189, 0.2);
}

.doc_his_btn_img {
	width: 32upx;
	height: 32upx;
}

.doc_his_btn_val {
	margin-left: 8upx;
}

.doctor_item_con {
	align-items: flex-start !important;
}

/* 团队 */
.group_item {
	padding: 30upx;
	box-sizing: border-box;
	background: white;
	border-radius: 20upx;
	margin-bottom: 20upx;
	margin: 20upx 30upx;
}

.group_item text {
	font-size: 30upx;
}

.group_photo {
	width: 100%;
	height: 160upx;
	background: #f9f9f9;
	border-radius: 10upx;
}

.group_name {
	width: 100%;
	text-align: left;
	margin-top: 30upx;
}

.group_introduce {
	width: 100%;
	overflow: hidden;
	text-overflow: ellipsis;
	flex-wrap: wrap;
	display: -webkit-box;
	/* 几行后显示省略号 */
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	position: relative;
}

.group_introduce text:nth-child(1) {
	font-weight: bold;
}

.group_introduce_text {
	font-size: 30upx;
	font-family: PingFang SC;
	line-height: 40upx;
}
</style>