ygoa_miniapp/pages/message/index.vue

<template>
	<view class="index_container">
		<uni-collapse>
			<uni-collapse-item title-border="show" :border="true" :show-animation="false" :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="false" :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="iconfont"></text>
												{{ message.title }}
											</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>
</template>

<script setup lang="ts">
	import { onMounted, reactive, ref } from 'vue';
	import $tab from '@/plugins/tab.js';
	import processList from '@/components/ygoa/processList.vue'
	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
					}])
	onMounted(() => {
		onClickItem({ currentIndex: 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);
	}
</script>

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

	.grid_container {
		.grid-item-box {
			flex: 1;
			/* #ifndef APP-NVUE */
			display: flex;
			/* #endif */
			flex-direction: column;
			align-items: center;
			justify-content: center;
			padding: 15px 0;

			.grid_icon {
				color: #ff8500;
				font-size: 30px;
			}

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

	}

	.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;
			font-weight: bold;

			.icon-announce {}

			.icon-notify {}
		}

	}

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