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">
						<template v-slot:right>
							<uni-badge :text="unReadNum" style="margin-left: 5px;" v-if="unReadNum!==undefine&&unReadNum>0"></uni-badge>
						</template>
					</uni-section>
				</template>
				<View style="height: 67.8vh;">
					<z-paging :fixed="false" @query="queryData" :value="list" :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 list" :key="index"
							:class="message.isread == 'Y' || message.if_read ? ' ' : 'message_container_unread'"
							class="message_container">
							<uni-card :is-full="true" padding="5px 10px">
								<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 :xs="18" :sm="20">
												<view class="message_title hidden_over">
													{{ message.title }}
												</view>
											</uni-col>
											<uni-col :xs="6" :sm="4">
												<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: { type: Boolean, default: false }, // 是否开启动画
	open: { type: Boolean, default: false }, // 是否默认打开
	title: { type: String, required: true }, // 标题
	segments: { type: Array, default: undefined }, // 分段器数据
	list: { type: Array, required: true }, // 消息数据
	pSize: { type: Number, default: 10 }, // 分页大小
	pageNo: { type: Number, default: 1 }, // 默认页
	unReadNum: { type: Number, default: undefined }, // 未读消息数
})
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, total, pageNo) {
	// 第一页直接加载数据
	if (pageNo === 1) {
		paging.value.complete(list)
		return
	}
	// 防止重复获取最后一次信息
	if (props.pSize*pageNo < total) {
		paging.value.complete(list)
	} else {
		paging.value.complete([])
	}
}
// 点击分段器
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" scoped>
.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: 10px 10px 10px;

			.message_user {
				color: #333;
				font-size: 0.875rem;
			}
		}

		.message_mid_container {
			// padding-top: 10px;
			padding-left: 10px;
			height: 1.8rem;

			.message_title {
				font-size: 1.1rem;
				color: #333;
			}

			.message_time {
				color: #888;
				text-align: right;
				font-size: 0.8rem;
			}
		}

		.message_bottom_container {
			.message_content {
				font-size: 1rem;
				color: #666;
			}
		}
	}

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

		.message_top_container {
			.message_user {
				font-weight: bold;
			}
		}

		.message_mid_container {
			.message_title {
				color: #0f6cbd;
				font-weight: bold;
			}
		}
	}
}
</style>