ygoa_miniapp/pages/message/index.vue

<template>
	<view class="index_container">
		<uni-nav-bar dark :border="false" :fixed="true" title="宇光同行">
		</uni-nav-bar>
		<uni-collapse>
			<uni-collapse-item title-border="show" :border="true" :show-animation="true" :open="false">
				<template v-slot:title>
					<uni-section title="待办" type="line" titleFontSize="1.3rem">
						<template v-slot:right>
							<uni-badge :text="unProcessNum" style="margin-left: -10px;"
								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="69.5vh"></process-list>
					</view>
				</view>
			</uni-collapse-item>
		</uni-collapse>

		<!-- 公告列表  -->
		<message-list :list="notices" @clickSegment="getNoticeData" @clickItem="handleToNoticeDetail"
			@scrollToBottom="getNoticePage" :pSize="5" :pageNo="1" :anime="true" :open="false"
			title="公告"></message-list>

		<!-- 消息列表 -->
		<message-list ref="msgListRef" @readMsg="setMsgRead" :unReadNum="unReadNum" :list="messages" @clickSegment="getMessageData"
			@clickItem="handleToMessageDetail" @scrollToBottom="getMessagePage" :defaultCurrent="1" :pSize="5"
			:pageNo="1" :anime="true" :open="true" :segments="{ '全部': '', '未读': '0', '已读': '1' }"
			title="消息"></message-list>

		<!-- AI咨询按钮 -->
		<view class="fab_button">
			<uni-fab :pattern="{ icon: 'headphones' }" :popMenu="false" horizontal="right"
				@fabClick="clickFabButton"></uni-fab>
		</view>

	</view>
</template>

<script setup lang="ts">
	import { onBeforeMount, onMounted, ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import { getMessageList, getNoticeList, getUnReadMessageNum, setMsgIsRead } 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()
	})
	onBeforeMount(()=>{
		
	})
	onMounted(() => {
		showTarBarBadge();
	})
	// 跳转打卡页
	function toClockIn() {
		// 确认是否跳转打卡页
		$modal.confirm('当前未打卡，是否前往打卡').then(() => {
			$tab.navigateTo('/pages/mine/clockIn/clockIn')
		})
	}

//子组件
	const msgListRef=ref(null)
	//设置消息已读
	function setMsgRead() {
		const params = {
			currentUser: userStore.user.useId,
			isRead: "0",
			pSize: unReadNum.value,
			type: "",
			p: 1,
		}
		getMessageList(params).then(({ returnParams }) => {
			const unReadMsgIds= returnParams.ids === "" ? "" : returnParams.ids + ",";
			setMsgIsRead(unReadMsgIds).then((res) => {
				if (Number.isInteger(res)) {
					switch (res) {
						case -1:
							$modal.msgError('操作失败')
							break
						case -2:
						case 0:
							$modal.msg('不存在未读消息')
							break
						default:
							$modal.msgSuccess('操作成功')
							//刷新页面
							msgListRef.value.reload();// 调用子组件刷新数据
							showTarBarBadge();
					}
				} else {
					$modal.msgError('jssesionid失效')
				}
			})
		})
		
	}

	// 待办列表
	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)
		});
	}
	// 分页获取待办消息列表数据
	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)
	}

	// 公告列表
	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)
		})
	}
	// 分页获取公告数据
	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)
	}

	// 消息列表
	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 }) => {
			returnParams.list.forEach(item => {
				if ('(流程提醒)您有一个流程' == item.title.substring(0, 12)) {
					item.title = '(流程提醒)' + item.title.slice(12)
				}
				// return item
			})
			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,
		}
		getMessageList(params).then(({ returnParams }) => {
			returnParams.list.forEach(item => {
				if ('(流程提醒)您有一个流程' == item.title.substring(0, 12)) {
					item.title = '(流程提醒)' + item.title.slice(12)
				}
				// return item
			})
			// 更新数据
			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')
	}
	//待办流程数
	const unProcessNum = ref(0)
	//未读消息数
	const unReadNum = ref(0)
	//待阅消息数+待办流程数(用于tarbar导航栏)
	const unReadMsgNum = ref(0)
	function showTarBarBadge() {
		getUnProcessNum(userStore.user.useId, "").then(res => {
			if ("failed" == res.returnMsg) {
				$modal.msgError('待办流程数获取失败')
				return
			} else {
				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: unReadMsgNum.value > 99 ? '99+' : String(unReadMsgNum.value)
					})
				}
			})
		})

	}
</script>

<style lang="scss">
	@import "@/static/font/ygoa/iconfont.css";

	.text {
		text-align: center;
		font-size: 26rpx;
		margin-top: 10rpx;
	}

	::v-deep .uni-section-header__content {
		max-width: 3rem;
	}
</style>