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="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)" v-for="(message, index) in messages" :key="index"
						:class="message.is_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.user }}
											</text>
										</uni-col>
									</view>
								</uni-row>
								<uni-row>
									<view class="message_mid_container">
										<uni-col :span="19">
											<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="4">
											<text class="message_time">
												{{ message.time }}
											</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 class="checkIn_button">
			<uni-fab :pattern="{icon:'calendar'}" :popMenu="false" horizontal="left" @fabClick="clickCheckIn"></uni-fab>
		</view>
	</view>
</template>

<script setup lang="ts">
	import { onMounted, reactive, ref } from 'vue';
	import $tab from '@/plugins/tab.js';
	import processList from '@/components/ygoa/processList.vue'
	onMounted(() => {
		onClickItem({ currentIndex: 0 })
	})
	function changeIndexGrid(e) {

	}
	function clickCheckIn() {
		console.log('clickCheckIn');
		$tab.navigateTo('/pages/mine/clockIn/clockIn')
	}
	// 分段器选项列表
	const items = reactive(['全部', '已读', '未读'])
	// 分段器选项
	const current = ref(-1)
	// 消息列表
	let messages = reactive([])
	// 待办列表
	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
		switch (currentIndex) {
			case 0:
				messages = [
					{
						id: 1,
						user: "账户1",
						title: "已读公告1",
						content: "消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容",
						time: "2024/10/10",
						icon: 'icon-announce',
						is_read: 1
					},
					{
						id: 2,
						user: "账户2",
						title: "已读通知2",
						content: "消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容",
						time: "2024/10/10",
						icon: 'icon-notify',
						is_read: 1
					},
					{
						id: 3,
						user: "账户3",
						title: "未读公告3未读公告3未读公告3未读公告3未读公告3未读公告3",
						content: "消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容",
						time: "2024/10/10",
						icon: 'icon-announce',
						is_read: 0
					},
					{
						id: 4,
						user: "账户4",
						title: "未读通知4",
						content: "消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容",
						time: "2024/10/10",
						icon: 'icon-notify',
						is_read: 0
					}
				]
				break;
			case 1:
				messages = [
					{
						id: 1,
						user: "账户1",
						title: "已读公告1",
						content: "消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容",
						time: "2024/10/10",
						icon: 'icon-announce',
						is_read: 1
					},
					{
						id: 2,
						user: "账户2",
						title: "已读通知2",
						content: "消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容",
						time: "2024/10/10",
						icon: 'icon-notify',
						is_read: 1
					}
				]
				break;
			case 2:
				messages = [
					{
						id: 3,
						user: "账户3",
						title: "未读公告3未读公告3未读公告3未读公告3未读公告3未读公告3",
						content: "消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容",
						time: "2024/10/10",
						icon: 'icon-announce',
						is_read: 0
					},
					{
						id: 4,
						user: "账户4",
						title: "未读通知4",
						content: "消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容",
						time: "2024/10/10",
						icon: 'icon-notify',
						is_read: 0
					}
				]
				break;
		}
	}
	// 点击消息
	function handleToDetail({ id }) {
		$tab.navigateTo('/pages/message/detail/index?id=' + id)
		console.log('handleToDetail', id);
	}
	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>