81 lines
1.5 KiB
Vue
81 lines
1.5 KiB
Vue
<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> |