消息中心

pages/user/message/index.vue

@@ -0,0 +1,81 @@
+<template>
+	<view class="container">
+		<view class="list-wrap">
+			<view class="item" v-for="item in list.data" :key="item.id">
+				<msg-list-item :content="item.content" :title="item.title"
+					:create-time="item.createTime"></msg-list-item>
+			</view>
+		</view>
+		<u-loadmore :status="list.status"></u-loadmore>
+	</view>
+</template>
+
+<script setup>
+	// 导入 Vue 的响应式 API
+	import {
+		onMounted,
+		reactive
+	} from 'vue'
+	import {
+		onReachBottom
+	} from '@dcloudio/uni-app';
+	import {
+		getUserMsgPageReq
+	} from '@/common/api/account/message'
+
+	import MsgListItem from '@/components/msg-list-item/msg-list-item.vue'
+
+	const list = reactive({
+		page: 1,
+		size: 10,
+		status: 'loading',
+		data: []
+	});
+
+	onMounted(() => {
+		getMessageList()
+	})
+
+	const getMessageList = async () => {
+		uni.showLoading({
+			title: '加载中...',
+			mask: true
+		});
+		let res = await getUserMsgPageReq({
+			page: list.page,
+			size: list.size
+		})
+
+		if (list.page == 1) {
+			list.data = res.records;
+		} else {
+			list.data.push(...res.records);
+		}
+
+		if (res.pageNumber == res.totalPage || res.records.length == 0) {
+			list.status = 'nomore';
+		}
+		uni.hideLoading();
+	}
+
+	onReachBottom(() => {
+		if (list.status != 'nomore') {
+			list.page++;
+			getMessageList();
+		}
+	});
+</script>
+
+<style lang="scss" scoped>
+	.container {
+		background-color: #F7F7F7;
+		display: flex;
+		flex-direction: column;
+		min-height: 100vh;
+		padding: 30rpx 30rpx 0 30rpx;
+
+		.list-wrap {
+			flex: 1;
+		}
+	}
+</style>