ygoa_miniapp/components/ygoa/messageList.vue

<template>
	<view class="msg_list_container">
		<View style="height: 63.5vh;">
			<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">
									<text class="message_user">
										{{ message.name }}
									</text>
								</view>
							</uni-row>
							<uni-row>
								<view class="message_mid_container">
									<uni-col :xs="18" :sm="20">
										<view class="message_title uni-ellipsis">
											{{ message.title }}
										</view>
									</uni-col>
									<uni-col :xs="6" :sm="4">
										<view class="message_time">
											{{ formatDate(message.sendtime) }}
										</view>
									</uni-col>
								</view>
							</uni-row>
						</template>
						<view v-if="message.content" class="message_bottom_container">
							<text class="message_content uni-ellipsis">
								{{ message.content }}
							</text>
						</view>
					</uni-card>
				</view>
			</z-paging>
		</View>
	</view>
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue';

const props = defineProps({
	// anime: { type: Boolean, default: false }, // 是否开启动画
	// open: { type: Boolean, default: false }, // 是否默认打开
	// title: { type: String, required: true }, // 标题
	segments: { type: Array, default: undefined }, // 分段器数据
	pSize: { type: Number, default: 10 }, // 分页大小
	pageNo: { type: Number, default: 1 }, // 默认页
	defaultCurrent: { type: Number, default: 0 }, // 默认选中项
	// unReadNum: { type: Number, default: undefined }, // 未读消息数
})
const emits = defineEmits([
	'clickSegment', // 点击分段器
	'clickItem', // 点击内容项
	'scrollToBottom', // 到达底部
	// 'readMsg',//消息已读
])
// 分段器 键值
const segmentKeys = ref({})
const segmentValues = ref({})
onMounted(() => {
	if (props.segments !== undefined) {
		segmentKeys.value = Object.keys(props.segments)
		segmentValues.value = Object.values(props.segments)
	}
})
// function clickReadButton() {
// 	console.log('clickReadButton');
// 	emits('readMsg')
// }
const paging = ref(null)
const totalPage = ref(0)
// 数据列表
const list = ref([])
// 加载完成 更新数据
function complete(dataList, total, pageNo) {
	totalPage.value = Math.ceil(total / props.pSize)
	if (pageNo <= totalPage.value) {
		list.value.push(...dataList);
	}
	// 第一页直接加载数据
	if (pageNo === 1) {
		list.value = dataList
		paging.value.complete(dataList)
		return
	}
	// 防止重复获取最后一次信息
	if (props.pSize * pageNo < total) {
		paging.value.complete(dataList)
	} else {
		paging.value.complete([])
	}
}

function reload() {
	paging.value.reload()
}

// 点击分段器
const current = ref(props.defaultCurrent)
function onClickItem({ currentIndex }) {
	current.value = currentIndex
	// 重新加载数据 pageNo恢复为默认值
	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)
}
// 格式化时间
function formatDate(now) {
	const [date, time] = now.split(" ")
	if (isInTimeRange(now)) {
		return time
	} else {
		return date
	}
}
//判断时间是否在今天内
function isInTimeRange(inputDate) {
	const inputTime = new Date(inputDate).getTime();
	// 获取当前时间戳
	const now = new Date();
	const year = now.getFullYear();
	const month = now.getMonth();
	const day = now.getDate();

	// 构建当天的起始时间和结束时间的时间戳
	const startTime = new Date(year, month, day, 0, 0, 0).getTime();
	const endTime = new Date(year, month, day, 23, 59, 59).getTime();
	// 判断当前时间是否在范围内
	return inputTime >= startTime && inputTime <= endTime;
}

defineExpose({
	reload,
});
</script>

<style lang="scss" scoped>
.msg_list_container {
	.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-left: 10px;
			height: 1.8rem;

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

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

		.message_bottom_container {
			.message_content {
				max-width: 100%;
				display: inline-block;
				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>