ygoa_miniapp/pages/message/index.vue

<template>
	<view class="index_container">
		<view class="user_info">
			
		</view>
		<!-- <view class="grid_container">
			<uni-grid :column="2" :showBorder="false" :square="false">
				<uni-grid-item>
					<view class="grid-item-box">
						<text class="iconfont icon-clock-in grid_icon"></text>
						<text class="text">打卡</text>
					</view>
				</uni-grid-item>
				<uni-grid-item>
					<view class="grid-item-box">
						<text class="iconfont icon-init-process grid_icon"></text>
						<text class="text">发起流程</text>
					</view>
				</uni-grid-item>
			</uni-grid>
		</view> -->
		<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="no_process">
						<uni-section title="无待办消息"></uni-section>
					</view>
					<view class="process_list">
						
					</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="onClickmessage(message)" v-for="(message, index) in messages" :key="index"
						:class="message.is_read?' ':'message_container_unread'" class="message_container">
						<uni-card :title="message.user" :sub-title="message.title" :extra="message.time" :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';
	const items = reactive(['全部', '已读', '未读'])
	const current = ref(1)
	let messages = reactive([])
	onMounted(() => {
		onClickItem({ currentIndex: 0 })
		console.log(messages);
	})
	// 点击消息分段器
	function onClickItem({ currentIndex }) {
		switch (currentIndex) {
			case 0:
				current.value = 0;
				messages = [
					{
						user: "账户1",
						title: "已读公告1",
						content: "消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容",
						time: "2024/10/10",
						icon: 'icon-announce',
						is_read: 1
					},
					{
						user: "账户2",
						title: "已读通知2",
						content: "消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容",
						time: "2024/10/10",
						icon: 'icon-notify',
						is_read: 1
					},
					{
						user: "账户3",
						title: "未读公告3未读公告3未读公告3未读公告3未读公告3未读公告3",
						content: "消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容",
						time: "2024/10/10",
						icon: 'icon-announce',
						is_read: 0
					},
					{
						user: "账户4",
						title: "未读通知4",
						content: "消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容",
						time: "2024/10/10",
						icon: 'icon-notify',
						is_read: 0
					}
				]
				break;
			case 1:
				current.value = 1;
				messages = [
					{
						user: "账户1",
						title: "已读公告1",
						content: "消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容",
						time: "2024/10/10",
						icon: 'icon-announce',
						is_read: 1
					},
					{
						user: "账户2",
						title: "已读通知2",
						content: "消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容",
						time: "2024/10/10",
						icon: 'icon-notify',
						is_read: 1
					}
				]
				break;
			case 2:
				current.value = 2;
				messages = [
					{
						user: "账户3",
						title: "未读公告3",
						content: "消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容",
						time: "2024/10/10",
						icon: 'icon-announce',
						is_read: 0
					},
					{
						user: "账户4",
						title: "未读通知4",
						content: "消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容消息内容",
						time: "2024/10/10",
						icon: 'icon-notify',
						is_read: 0
					}
				]
				break;
		}
	}
	// 点击消息
	function onClickmessage(e) {
		console.log('onClickmessage', e);
	}
</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: #f5f5f5 .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;
		}

	}

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