ygoa_miniapp/components/ygoa/messageList.vue

<template>
	<view class="msg_list_content">
		<uni-collapse>
			<uni-collapse-item title-border="show" :border="true" :show-animation="anime" :open="open">
				<template v-slot:title>
					<uni-section :title="title" type="line" titleFontSize="1.5rem"></uni-section>
				</template>
				<View style="height: 85vh">
					<z-paging :fixed="false" @query="queryData" :value="messages" :default-page-size="pSize"
						:default-page-no="pageNo" ref="paging">
						<template #top>
							<view v-if="props.segments" class="segmented_control_container">
								<uni-segmented-control :current="current" :values="segmentKeys" @clickItem="onClickItem"
									styleType="text" activeColor="#409eff"></uni-segmented-control>
							</view>
						</template>
						<view @click="handleToDetail(message)" v-for="(message, index) in messages" :key="index"
							:class="message.isread == 'Y' || 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="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="5">
												<view class="message_time"
													v-for="(item, index) in message.sendtime.split(' ')" :key="index">
													{{ item }}
												</view>
											</uni-col>
										</view>
									</uni-row>
								</template>
								<view v-if="message.content" class="message_bottom_container">
									<text class="message_content hidden_over">
										{{ message.content }}
									</text>
								</view>
							</uni-card>
						</view>
					</z-paging>
				</View>
			</uni-collapse-item>
		</uni-collapse>
	</view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';
const current = ref(0)

const props = defineProps({
	anime: Boolean, // 是否开启动画
	open: Boolean, // 是否默认打开
	title: String, // 标题
	segments: Array, // 分段器数据
	messages: Array, // 消息数据
	pSize: Number, // 分页大小
	pageNo: Number // 默认页
})
const emits = defineEmits([
	'clickSegment', // 点击分段器
	'clickItem', // 点击内容项
	'scrollToBottom' // 到达底部
])
// 分段器 键值
const segmentKeys = ref({})
const segmentValues = ref({})
onMounted(() => {
	if (props.segments !== undefined) {
		segmentKeys.value = Object.keys(props.segments)
		segmentValues.value = Object.values(props.segments)
	}
})

const paging = ref(null)
// 加载完成 更新数据
function complete(list) {
	paging.value.complete(list)
}
// 点击分段器
function onClickItem({ currentIndex }) {
	current.value = currentIndex
	// 重新加载数据 pageNo恢复为默认值
	paging.value.reload()
}
// 刷新
function queryData(pageNo, pSize, queryType) {
	switch (queryType) {
		case 0: // 下拉刷新
		case 1: // 初始加载
			reloadData()
			break
		case 3: // 上拉加载
			scrollQuery(pageNo, pSize)
			break
		default: // 默认刷新
			reloadData()
			break
	}
}
// 刷新数据
function reloadData() {
	const params = {
		pSize: props.pSize,
		pageNo: props.pageNo,
		type: '',
		segmentValue: segmentValues.value[current.value]
	}
	emits('clickSegment', params, complete)
}
// 上拉加载
function scrollQuery(pageNo, pSize) {
	const params = {
		pSize,
		pageNo,
		type: '',
		segmentValue: segmentValues.value[current.value]
	}
	emits('scrollToBottom', params, complete)
}
// 跳转详情
function handleToDetail(message) {
	emits('clickItem', message)
}
</script>

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

.msg_list_content {

	.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_mid_container {
			.message_title {
				color: #0f6cbd;

				.message_title_text {
					font-weight: bold;
				}
			}
		}
	}
}
</style>