feat(message,messageList):新增未读消息和待办流程角标

components/ygoa/messageList.vue

@@ -3,7 +3,11 @@
 		<uni-collapse>
 			<uni-collapse-item title-border="show" :border="true" :show-animation="anime" :open="open">
 				<template v-slot:title>
-					<uni-section :title="title" type="line" titleFontSize="1.5rem"></uni-section>
+					<uni-section :title="title" type="line" titleFontSize="1.5rem">
+						<template v-slot:right>
+							<uni-badge :text="unReadNum" style="margin-left: 5px;" v-if="unReadNum!==undefine&&unReadNum>0"></uni-badge>
+						</template>
+					</uni-section>
 				</template>
 				<View style="height: 67.8vh;">
 					<z-paging :fixed="false" @query="queryData" :value="list" :default-page-size="pSize"
@@ -70,6 +74,7 @@ const props = defineProps({
 	list: { type: Array, required: true }, // 消息数据
 	pSize: { type: Number, default: 10 }, // 分页大小
 	pageNo: { type: Number, default: 1 }, // 默认页
+	unReadNum: { type: Number, default: undefined }, // 未读消息数
 })
 const emits = defineEmits([
 	'clickSegment', // 点击分段器
@@ -108,6 +113,7 @@ function onClickItem({ currentIndex }) {
 	// 重新加载数据 pageNo恢复为默认值
 	paging.value.reload()
 }
+
 // 刷新
 function queryData(pageNo, pSize, queryType) {
 	switch (queryType) {

pages/message/index.vue

@@ -5,27 +5,32 @@
 		<uni-collapse>
 			<uni-collapse-item title-border="show" :border="true" :show-animation="true" :open="true">
 				<template v-slot:title>
-					<uni-section title="待办" type="line" titleFontSize="1.5rem"></uni-section>
+					<uni-section title="待办" type="line" titleFontSize="1.5rem">
+						<template v-slot:right>
+							<uni-badge :text="unProcessNum" style="margin-left: 5px;" v-if="unProcessNum>0"></uni-badge>
+						</template>
+					</uni-section>
 				</template>
 				<view class="process_container">
 					<view class="process_list">
-						<process-list :list="processes" @clickSegment="getProcessData" @clickItem="handleToProcessDetail" @scrollToBottom="getProcessPage" :current="0" :pSize="5" :pageNo="1" contentHeight="67.8vh"></process-list>
+						<process-list :list="processes" @clickSegment="getProcessData"
+							@clickItem="handleToProcessDetail" @scrollToBottom="getProcessPage" :current="0" :pSize="5"
+							:pageNo="1" contentHeight="67.8vh"></process-list>
 					</view>
 				</view>
 			</uni-collapse-item>
 		</uni-collapse>
 
-		<!-- 公告列表 type=0为公告 -->
+		<!-- 公告列表  -->
 		<message-list :list="notices" @clickSegment="getNoticeData" @clickItem="handleToNoticeDetail"
 			@scrollToBottom="getNoticePage" :pSize="5" :pageNo="1" :anime="true" :open="false"
 			title="公告"></message-list>
 
-		<!-- 消息列表 type=1为消息 -->
-		<message-list :list="messages" @clickSegment="getMessageData" @clickItem="handleToMessageDetail"
+		<!-- 消息列表 -->
+		<message-list :unReadNum="unReadNum" :list="messages" @clickSegment="getMessageData" @clickItem="handleToMessageDetail"
 			@scrollToBottom="getMessagePage" :pSize="5" :pageNo="1" :anime="true" :open="false"
-			:segments="{ '全部': '', '未读': '0', '已读': '1' }" 
-			title="消息"></message-list>
-			
+			:segments="{ '全部': '', '未读': '0', '已读': '1' }" title="消息"></message-list>
+
 		<!-- AI咨询按钮 -->
 		<view class="fab_button">
 			<uni-fab :pattern="{ icon: 'headphones' }" :popMenu="false" horizontal="right"
@@ -36,158 +41,190 @@
 </template>
 
 <script setup lang="ts">
-import { ref } from 'vue';
-import { onLoad } from '@dcloudio/uni-app'
-import { getMessageList, getNoticeList } from '@/api/message.js';
-import { getUserProcess } from '@/api/process';
-import $tab from '@/plugins/tab.js';
-import $modal from '@/plugins/modal.js';
-import processList from '@/components/ygoa/processList.vue'
-import messageList from '@/components/ygoa/messageList.vue'
-import { useUserStore } from '@/store/user.js'
-const userStore = useUserStore()
+	import { onMounted, ref } from 'vue';
+	import { onLoad } from '@dcloudio/uni-app'
+	import { getMessageList, getNoticeList ,getUnReadMessageNum} from '@/api/message.js';
+	import { getUserProcess,getUnProcessNum } from '@/api/process';
+	import $tab from '@/plugins/tab.js';
+	import $modal from '@/plugins/modal.js';
+	import processList from '@/components/ygoa/processList.vue'
+	import messageList from '@/components/ygoa/messageList.vue'
+	import { useUserStore } from '@/store/user.js'
+	const userStore = useUserStore()
 
-onLoad((options) => {
-	// 是否跳转打卡页
-	if (options.to == 'clockIn') toClockIn()
-})
-// 跳转打卡页
-function toClockIn() {
-	// 确认是否跳转打卡页
-	$modal.confirm('当前未打卡，是否前往打卡').then(() => {
-		$tab.navigateTo('/pages/mine/clockIn/clockIn')
+	onLoad((options) => {
+		// 是否跳转打卡页
+		if (options.to == 'clockIn') toClockIn()
+	})
+	onMounted(()=>{
+		showTarBarBadge();
 	})
-}
+	// 跳转打卡页
+	function toClockIn() {
+		// 确认是否跳转打卡页
+		$modal.confirm('当前未打卡，是否前往打卡').then(() => {
+			$tab.navigateTo('/pages/mine/clockIn/clockIn')
+		})
+	}
 
-// 待办列表
-const processes = ref([])
-// 获取待办消息列表数据
-function getProcessData({ pSize, pageNo }, callback) {
-	const params = {
-		staffId: userStore.user.useId,
-		page: pageNo,
-		pageNum: pSize,
-		modelId: "",
-		control: 1
+	// 待办列表
+	const processes = ref([])
+	// 获取待办消息列表数据
+	function getProcessData({ pSize, pageNo }, callback) {
+		const params = {
+			staffId: userStore.user.useId,
+			page: pageNo,
+			pageNum: pSize,
+			modelId: "",
+			control: 1
+		}
+		getUserProcess(params).then(({ returnParams }) => {
+			if (returnParams == undefined) {
+				processes.value = []
+				return
+			}
+			processes.value = returnParams.list
+			callback(returnParams.list, returnParams.total, pageNo)
+		});
 	}
-	getUserProcess(params).then(({ returnParams }) => {
-		if (returnParams == undefined) {
-			processes.value = []
-			return
+	// 分页获取待办消息列表数据
+	function getProcessPage({ pSize, pageNo }, callback) {
+		const params = {
+			staffId: userStore.user.useId,
+			page: pageNo,
+			pageNum: pSize,
+			modelId: "",
+			control: 1
 		}
-		processes.value = returnParams.list
-		callback(returnParams.list, returnParams.total, pageNo)
-	});
-}
-// 分页获取待办消息列表数据
-function getProcessPage({ pSize, pageNo }, callback) {
-	const params = {
-		staffId: userStore.user.useId,
-		page: pageNo,
-		pageNum: pSize,
-		modelId: "",
-		control: 1
+		getUserProcess(params).then(({ returnParams }) => {
+			processes.value.push(...returnParams.list)
+			callback(returnParams.list, returnParams.total, pageNo)
+		});
+	}
+	// 点击待办消息列表项
+	function handleToProcessDetail({ insId, insName }) {
+		$tab.navigateTo('/pages/process/detail/index?insId=' + insId + '&insName=' + insName)
 	}
-	getUserProcess(params).then(({ returnParams }) => {
-		processes.value.push(...returnParams.list)
-		callback(returnParams.list, returnParams.total, pageNo)
-	});
-}
-// 点击待办消息列表项
-function handleToProcessDetail({ insId, insName }) {
-	$tab.navigateTo('/pages/process/detail/index?insId=' + insId + '&insName=' + insName)
-}
 
-// 公告列表
-const notices = ref([])
-// 获取公告列表数据
-function getNoticeData({ pSize, pageNo }, callback) {
-	const params = {
-		notice_title: "",
-		p: pageNo,
-		pSize,
-		userId: userStore.user.useId,
-		unitId: userStore.user.unitId,
+	// 公告列表
+	const notices = ref([])
+	// 获取公告列表数据
+	function getNoticeData({ pSize, pageNo }, callback) {
+		const params = {
+			notice_title: "",
+			p: pageNo,
+			pSize,
+			userId: userStore.user.useId,
+			unitId: userStore.user.unitId,
+		}
+		getNoticeList(params).then(({ returnParams }) => {
+			notices.value = returnParams.noticelist.list
+			// 通知子组件加载完成
+			callback(returnParams.noticelist.list, returnParams.total, pageNo)
+		})
 	}
-	getNoticeList(params).then(({ returnParams }) => {
-		notices.value = returnParams.noticelist.list
-		// 通知子组件加载完成
-		callback(returnParams.noticelist.list, returnParams.total, pageNo)
-	})
-}
-// 分页获取公告数据
-function getNoticePage({ pSize, pageNo }, callback) {
-	const params = {
-		notice_title: "",
-		p: pageNo,
-		pSize,
-		userId: userStore.user.useId,
-		unitId: userStore.user.unitId,
+	// 分页获取公告数据
+	function getNoticePage({ pSize, pageNo }, callback) {
+		const params = {
+			notice_title: "",
+			p: pageNo,
+			pSize,
+			userId: userStore.user.useId,
+			unitId: userStore.user.unitId,
+		}
+		getNoticeList(params).then(({ returnParams }) => {
+			// 更新数据
+			notices.value.push(...returnParams.noticelist.list)
+			// 通知子组件加载完成
+			callback(returnParams.noticelist.list, returnParams.total, pageNo)
+		})
+	}
+	// 点击公告列表项
+	function handleToNoticeDetail(notice) {
+		$tab.navigateTo('/pages/message/detail/index?noticeId=' + notice.id)
 	}
-	getNoticeList(params).then(({ returnParams }) => {
-		// 更新数据
-		notices.value.push(...returnParams.noticelist.list)
-		// 通知子组件加载完成
-		callback(returnParams.noticelist.list, returnParams.total, pageNo)
-	})
-}
-// 点击公告列表项
-function handleToNoticeDetail(notice) {
-	$tab.navigateTo('/pages/message/detail/index?noticeId=' + notice.id)
-}
 
-// 消息列表
-const messages = ref([])
-// 获取消息列表数据
-function getMessageData({ pSize, pageNo, type, segmentValue }, callback) {
-	const params = {
-		currentUser: userStore.user.useId,
-		isRead: segmentValue,
-		pSize: pSize,
-		type: type,
-		p: pageNo,
+	// 消息列表
+	const messages = ref([])
+	// 获取消息列表数据
+	function getMessageData({ pSize, pageNo, type, segmentValue }, callback) {
+		const params = {
+			currentUser: userStore.user.useId,
+			isRead: segmentValue,
+			pSize: pSize,
+			type: type,
+			p: pageNo,
+		}
+		getMessageList(params).then(({ returnParams }) => {
+			messages.value = returnParams.list;
+			// 通知子组件加载完成
+			callback(returnParams.list, returnParams.total, pageNo)
+		})
 	}
-	getMessageList(params).then(({ returnParams }) => {
-		messages.value = returnParams.list;
-		// 通知子组件加载完成
-		callback(returnParams.list, returnParams.total, pageNo)
-	})
-}
-// 分页获取消息数据
-function getMessagePage({ pSize, pageNo, type, segmentValue }, callback) {
-	const params = {
-		currentUser: userStore.user.useId,
-		isRead: segmentValue,
-		pSize: pSize,
-		type: type,
-		p: pageNo,
+	// 分页获取消息数据
+	function getMessagePage({ pSize, pageNo, type, segmentValue }, callback) {
+		const params = {
+			currentUser: userStore.user.useId,
+			isRead: segmentValue,
+			pSize: pSize,
+			type: type,
+			p: pageNo,
+		}
+		getMessageList(params).then(({ returnParams }) => {
+			// 更新数据
+			messages.value.push(...returnParams.list)
+			// 通知子组件加载完成
+			callback(returnParams.list, returnParams.total, pageNo)
+		})
+	}
+	// 点击消息列表项
+	function handleToMessageDetail({ messageid, universalid }) {
+		$tab.navigateTo('/pages/message/detail/index?messageId=' + messageid + '&universalId=' + universalid)
 	}
-	getMessageList(params).then(({ returnParams }) => {
-		// 更新数据
-		messages.value.push(...returnParams.list)
-		// 通知子组件加载完成
-		callback(returnParams.list, returnParams.total, pageNo)
-	})
-}
-// 点击消息列表项
-function handleToMessageDetail({ messageid, universalid}) {
-	$tab.navigateTo('/pages/message/detail/index?messageId=' + messageid + '&universalId=' + universalid)
-}
 
-// AI咨询按钮
-function clickFabButton() {
-	console.log('clickFabButton');
-	$tab.navigateTo('/pages/message/chat/index')
-}
+	// AI咨询按钮
+	function clickFabButton() {
+		console.log('clickFabButton');
+		$tab.navigateTo('/pages/message/chat/index')
+	}
+	//待办流程数
+	const unProcessNum = ref(0)
+	//未读消息数
+	const unReadNum=ref(0)
+	//待阅消息数+待办流程数(用于tarbar导航栏)
+	const unReadMsgNum=ref(0)
+	function showTarBarBadge(){
+		getUnProcessNum(userStore.user.useId,"").then(res=>{
+			unProcessNum.value=parseInt(res.returnParams.total, 10);
+			getUnReadMessageNum(userStore.user.useId).then(res=>{
+				unReadNum.value=parseInt(res.returnParams, 10);
+				unReadMsgNum.value=unReadNum.value+unProcessNum.value;
+				if(unReadMsgNum.value==0){
+					uni.removeTabBarBadge({
+						index:0
+					})
+				}else{
+					uni.setTabBarBadge({
+					  index: 0,
+					  text: String(unReadMsgNum.value)
+					})
+				}
+			})
+		})
+		
+	}
 </script>
 
 <style lang="scss">
-@import "@/static/font/ygoa/iconfont.css";
+	@import "@/static/font/ygoa/iconfont.css";
 
-.text {
-	text-align: center;
-	font-size: 26rpx;
-	margin-top: 10rpx;
-}
+	.text {
+		text-align: center;
+		font-size: 26rpx;
+		margin-top: 10rpx;
+	}
 
+	::v-deep .uni-section-header__content {
+		max-width: 3rem;
+	}
 </style>