99 lines
1.9 KiB
Vue
99 lines
1.9 KiB
Vue
<!-- 消息中心 -->
|
|
<template>
|
|
<view class="container">
|
|
|
|
<view v-if="data.msgList.length" class="list" v-for="(item,index) in data.msgList"
|
|
:key='index'>
|
|
<image class="icon" src="@/static/me/message.png" mode="aspectFit"></image>
|
|
<view class="item-right">
|
|
<view class="top">
|
|
<view class="title">{{item.title}}</view>
|
|
<view class="text-gray">{{item.createAt}}</view>
|
|
</view>
|
|
<view class="text-gray">{{item.content}}</view>
|
|
</view>
|
|
</view>
|
|
<emprty-card v-if="!data.msgList.length" />
|
|
</view>
|
|
</template>
|
|
|
|
<script setup>
|
|
import { reactive } from 'vue';
|
|
import { onLoad,onPullDownRefresh, onReachBottom } from '@dcloudio/uni-app'
|
|
import { selectMessageByUserId } from '@/api/me/message.js';
|
|
|
|
let data = reactive({
|
|
page: 1,
|
|
limit: 10,
|
|
msgList: []
|
|
})
|
|
|
|
onLoad(() => {
|
|
getMsg()
|
|
})
|
|
async function getMsg() {
|
|
uni.showLoading({
|
|
title: '加载中'
|
|
})
|
|
|
|
let params = {
|
|
page: data.page,
|
|
limit: data.limit,
|
|
state: 5
|
|
}
|
|
let res = await selectMessageByUserId(params)
|
|
uni.hideLoading()
|
|
uni.stopPullDownRefresh();
|
|
if (data.page == 1) {
|
|
data.msgList = res.list
|
|
uni.stopPullDownRefresh();
|
|
return
|
|
}
|
|
data.msgList = [...data.msgList, ...res.list]
|
|
}
|
|
onReachBottom(() => {
|
|
data.page = data.page + 1;
|
|
getMsg()
|
|
})
|
|
onPullDownRefresh(() => {
|
|
data.page = 1;
|
|
data.msgList = []
|
|
getMsg()
|
|
})
|
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
page {
|
|
background-color: white;
|
|
}
|
|
.container{
|
|
padding: 0 30rpx;
|
|
}
|
|
.list{
|
|
display: flex;
|
|
padding: 20rpx 0;
|
|
border-bottom: 1rpx solid #e4e7ed;
|
|
.icon{
|
|
width: 85rpx;
|
|
height: 85rpx;
|
|
}
|
|
.item-right{
|
|
width: 100%;
|
|
display: flex;
|
|
flex-direction: column;
|
|
margin-left: 30rpx;
|
|
font-size: 28rpx;
|
|
color: #333;
|
|
.top{
|
|
display: flex;
|
|
justify-content: space-between;
|
|
.title{
|
|
font-size: 32rpx;
|
|
font-weight: bold;
|
|
color: #333;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style> |