uniapp-app/pages_app/patientMsg/patientMsg.vue

<template>
	<view class="content">
		<view class="navbox">
			<view class="status_bar"></view>
			<uni-nav-bar
				left-icon="left"
				title="患者消息"
				@clickLeft="goBack"
				color="#8B2316"
				:border="false"
				backgroundColor="#eee"
			>
				<template #right>
					<view class="nav-right">
						<uni-icons type="search" size="24" color="#8B2316" @click="searchPatients"></uni-icons>
						<uni-icons type="staff" size="24" color="#8B2316" @click="managePatients" style="margin-left: 30rpx;"></uni-icons>
					</view>
				</template>
			</uni-nav-bar>
		</view>

		<scroll-view
			class="message-list"
			scroll-y="true"
			refresher-enabled="true"
			:refresher-triggered="isRefreshing"
			@refresherrefresh="onRefresh"
		>
			<empty></empty>
		</scroll-view>

		<view class="tab-bar">
			<view class="tab-item active">
				<text class="tab-text">患者消息</text>
			</view>
			<view class="tab-item" @click="goListTab">
				<text class="tab-text">患者列表</text>
				<view class="tab-dot" v-if="hasNewPatient">
					<uni-badge class="uni-badge-left-margin" :text="applyList.length" :offset="[-3, -3]" size="small"></uni-badge>
				</view>
			</view>
			<view class="tab-item" @click="goPlanTab">
				<text class="tab-text">随访计划</text>
			</view>
		</view>
	</view>
</template>

<script setup>
import { computed, ref } from 'vue';
import { onBackPress, onLoad, onShow } from '@dcloudio/uni-app';
import api from '@/api/api.js';
import navTo from '@/utils/navTo.js';

const applyList = ref([]);
const isRefreshing = ref(false);
const hasNewPatient = computed(() => applyList.value.length > 0);

const getApplyList = async () => {
	try {
		const res = await api.applyList();
		if (res && res.code === 200) {
			applyList.value = res.data || [];
		}
	} catch (error) {}
};

const onRefresh = async () => {
	isRefreshing.value = true;
	try {
		await getApplyList();
		uni.showToast({
			title: '刷新成功',
			icon: 'none',
			duration: 1200
		});
	} finally {
		isRefreshing.value = false;
	}
};

const searchPatients = () => {
	navTo({
		url: '/pages_app/searchPatient/searchPatient'
	});
};

const managePatients = () => {
	uni.showToast({
		title: '患者管理',
		icon: 'none'
	});
};

const goListTab = () => {
	navTo({
		url: '/pages_app/patientMsg/patientList'
	});
};

const goPlanTab = () => {
	navTo({
		url: '/pages_app/patientMsg/patientPlan'
	});
};

const goBack = () => {
	plus.runtime.quit();
};

const notifyNativePatientMsg = () => {
	uni.sendNativeEvent('goPatientMsg', { msg: 'goPatientMsg' }, () => {});
};

onBackPress(() => {
	plus.runtime.quit();
	return true;
});

onLoad((options) => {
	if (options.type === 'list') {
		goListTab();
		return;
	}
	if (options.type === 'plan') {
		goPlanTab();
		return;
	}
	getApplyList();
	notifyNativePatientMsg();
});

onShow(() => {
	getApplyList();
	notifyNativePatientMsg();
});
</script>

<style lang="scss" scoped>
.content {
	background-color: #f5f5f5;
	height: 100vh;
	overflow-y: hidden;
}

.nav-right {
	display: flex;
	align-items: center;
}

.message-list {
	margin-top: calc(var(--status-bar-height) + 44px);
	height: calc(100vh - var(--status-bar-height) - 44px - 103rpx);
	background: #fff;
}

.tab-bar {
	position: fixed;
	bottom: 0;
	left: 0;
	right: 0;
	height: 100rpx;
	background-color: #f8f8f8;
	display: flex;
	align-items: center;
	border-top: 1rpx solid #e0e0e0;
	z-index: 999;
}

.tab-item {
	flex: 1;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	position: relative;
	height: 100%;
}

.tab-item:nth-child(2) {
	border: 2rpx solid #ccc;
	border-top: none;
	border-bottom: none;
}

.tab-text {
	font-size: 32rpx;
	color: #999;
}

.tab-item.active .tab-text {
	color: #8B2316;
	font-weight: 500;
}

.tab-dot {
	position: absolute;
	top: 18rpx;
	right: 28rpx;
}
</style>