ygoa_miniapp/pages/message/index.vue

<template>
	<view class="index_container">
		<uni-nav-bar dark :border="false" :fixed="true" title="宇光同行">
		</uni-nav-bar>
		<!-- <uni-nav-bar :border="false" :fixed="true">
			<template v-slot:left>研发部</template>
			<template v-slot:right>用户1</template>
		</uni-nav-bar> -->
		<!-- <view class="grid-body">
			<uni-grid :column="2" :square="false" :showBorder="false" @change="changeIndexGrid">
				<uni-grid-item :index="1">
					<view class="grid-item-box">
						<text class="ygoa-icon icon-checkIn"></text>
						<text class="text">考勤打卡</text>
					</view>
				</uni-grid-item>
				<uni-grid-item :index="2">
					<view class="grid-item-box">
						<text class="ygoa-icon icon-init-process"></text>
						<text class="text">流程申请</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view> -->
		<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="20px"></uni-section>
				</template>
				<view class="process_container">
					<view class="process_list" v-if="processes">
						<process-list :processes="processes"></process-list>
					</view>
					<view class="no_process" v-else>
						<uni-section title="无待办消息"></uni-section>
					</view>
				</view>
			</uni-collapse-item>
		</uni-collapse>





		<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="20px"></uni-section>
				</template>

				<view class="segmented_control_container">
					<uni-segmented-control :current="current2" :values="items" @clickItem="onClickItem2"
						styleType="text" activeColor="#409eff"></uni-segmented-control>
				</view>
				<view class="content">
					<view @click="handleToDetail({ message: message, type: 0 })" v-for="(message, index) in notices"
						:key="index" :class="message.if_read ? ' ' : 'message_container_unread'"
						class="message_container">
						<uni-card :is-full="true">
							<template v-slot:title>
								<uni-row>
									<view class="message_top_container">
										<uni-col :span="24">
											<text class="message_user">
												{{ message.name }}
											</text>
										</uni-col>
									</view>
								</uni-row>
								<uni-row>
									<view class="message_mid_container">
										<uni-col :span="15">
											<text class="message_title hidden_over">
												<text :class="message.icon" class="ygoa-icon"></text>
												<text class="message_title_text">{{ message.title }}</text>
											</text>
										</uni-col>
										<uni-col :span="9">
											<text class="message_time">
												{{ message.sendtime }}
											</text>
										</uni-col>
									</view>
								</uni-row>
							</template>
							<!-- <view class="message_bottom_container">
								<text class="message_content hidden_over">
									{{ message.content }}
								</text>
							</view> -->
						</uni-card>
					</view>
				</view>
			</uni-collapse-item>
		</uni-collapse>


		<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="20px"></uni-section>
				</template>

				<view class="segmented_control_container">
					<uni-segmented-control :current="current" :values="items" @clickItem="onClickItem" styleType="text"
						activeColor="#409eff"></uni-segmented-control>
				</view>
				<view class="content">
					<view @click="handleToDetail({ message: message, type: 1 })" v-for="(message, index) in messages"
						:key="index" :class="message.isread=='Y' ? ' ' : 'message_container_unread'"
						class="message_container">
						<uni-card :is-full="true">
							<template v-slot:title>
								<uni-row>
									<view class="message_top_container">
										<uni-col :span="24">
											<text class="message_user">
												{{ message.name }}
											</text>
										</uni-col>
									</view>
								</uni-row>
								<uni-row>
									<view class="message_mid_container">
										<uni-col :span="15">
											<text class="message_title hidden_over">
												<text :class="message.icon" class="ygoa-icon"></text>
												<text class="message_title_text">{{ message.title }}</text>
											</text>
										</uni-col>
										<uni-col :span="9">
											<text class="message_time">
												{{ message.sendtime }}
											</text>
										</uni-col>
									</view>
								</uni-row>
							</template>
							<view class="message_bottom_container">
								<text class="message_content hidden_over">
									{{ message.content }}
								</text>
							</view>
						</uni-card>
					</view>
				</view>
			</uni-collapse-item>
		</uni-collapse>
		<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 { onMounted, reactive, ref } from 'vue';
	import { onLoad } from '@dcloudio/uni-app'
	import $tab from '@/plugins/tab.js';
	import processList from '@/components/ygoa/processList.vue'
	import { useUserStore } from '@/store/user.js'
	import { GetMessageList, GetNoticeList } from '@/api/message.js';
	onLoad((options) => {
		if (options.to == 'clockIn') {
			$tab.navigateTo('/pages/mine/clockIn/clockIn')
		}
	})

	onMounted(() => {
		onClickItem({ currentIndex: 0 })
		onClickItem2({ currentIndex: 0 })
	})
	const userStore = useUserStore()

	// 分段器选项列表
	const items = reactive(['全部', '已读', '未读'])
	// 分段器选项
	const current = ref(-1)
	const current2 = ref(0)
	// 消息列表
	let messages = ref([])
	//公告列表
	let notices = ref([]);
	// 待办列表
	let processes = reactive([
		{
			id: 1,
			title: '账户1 的请假申请',
			user: '账户1',
			createTime: '2024/10/10',
			startTime: '2024/10/10',
			endTime: '2024/10/12',
			totalTime: '2',
			description: '请假说明请假说明请假说明请假说明请假说明',
			type: 'icon-apply-leave',
			step: 0
		},
		{
			id: 1,
			title: '账户2 的请假申请',
			user: '账户2',
			createTime: '2024/10/10',
			startTime: '2024/10/10',
			endTime: '2024/10/12',
			totalTime: '2',
			description: '请假说明请假说明',
			type: 'icon-apply-leave',
			step: 0
		},
		{
			id: 2,
			title: '账户2 的加班申请',
			user: '账户2',
			createTime: '2024/10/10',
			startTime: '2024/10/10 17/30/00',
			endTime: '2024/10/10 18/30/00',
			totalTime: '1',
			description: '加班说明加班说明',
			type: 'icon-apply-overtime',
			step: 0
		},
	])


	// 点击消息分段器
	function onClickItem({ currentIndex }) {
		current.value = currentIndex
		let params = {};
		switch (currentIndex) {
			case 0:
				params = {
					 currentUser : userStore.user.useId,
					 isRead : "",
					 pSize : "5",
					 type : "",
					 p : "1",
				}
				GetMessageList(params).then(res => {
					messages.value = res.returnParams.list;
				})

				break;
			case 1:
				params = {
					 currentUser : userStore.user.useId,
					 isRead : "1",
					 pSize : "5",
					 type : "",
					 p : "1",
				}
				GetMessageList(params).then(res => {
					messages.value = res.returnParams.list;
				})
				break;
			case 2:
				params = {
					 currentUser : userStore.user.useId,
					 isRead : "0",
					 pSize : "5",
					 type : "",
					 p : "1",
				}
				GetMessageList(params).then(res => {
					messages.value = res.returnParams.list;
				})
				break;
		}
	}

	// 点击公告分段器
	function onClickItem2({ currentIndex }) {
		current2.value = currentIndex;
		console.log(currentIndex);
		switch (currentIndex) {
			case 0:
				const params1 = {
					  notice_title  : "",
					 p : "1",
					 pSize : "5",
					 userId : userStore.user.useId,
					 unitId : userStore.user.unitId,
				}
				GetNoticeList(params1).then(res => {
					// console.log(res);
					notices.value = res.returnParams.noticelist.list;
				})
				break;
			case 1:
				notices.value = [];
				break;
			case 2:
				notices.value = [];
				break;
		}
	}
	// 点击消息
	function handleToDetail({ message, type }) {
		switch (type) {
			case 0:
				$tab.navigateTo('/pages/message/detail/index?type=' + type + '&noticeId=' + message.id)
				break
			case 1:
				$tab.navigateTo('/pages/message/detail/index?type=' + type + '&messageId=' + message.messageid+ '&universalId=' + message.universalid)
				break
		}
		console.log('handleToDetail', type);
	}
	function clickFabButton() {
		console.log('clickFabButton');
		$tab.navigateTo('/pages/message/chat/index')
	}
</script>

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

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

	.grid-body {
		.ygoa-icon {
			font-size: 40px;
		}

		.grid-item-box {
			flex: 1;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			border-top: 1px solid #ccc;
			background-color: #ffffff;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 15px 0;
		}
	}

	.segmented_control_container {
		// margin-top: 10px;
	}

	.message_container {
		border-left: #7b7b7b .4rem solid;

		.message_top_container {
			padding: 5px 5px 0;

			.message_user {
				color: #000000;
			}
		}

		.message_mid_container {
			padding: 5px;
			height: 1.1rem;

			.message_title {
				font-size: 1.1rem;
			}

			.message_time {
				font-size: 0.8rem;
			}
		}

		.message_bottom_container {
			.message_content {}
		}
	}

	.message_container_unread {
		// 未读样式
		border-left-color: #0f6cbd;

		.message_user {
			color: #000000;
			font-weight: bold;
		}

		.message_title {
			color: #0f6cbd;

			.message_title_text {
				font-weight: bold;
			}
		}

	}

	.hidden_over {
		white-space: nowrap; // 不换行
		overflow: hidden; // 超出内容隐藏
		text-overflow: ellipsis; // 超出部分显示省略号
		display: inline-block;
		max-width: 100%;
	}
</style>