notification.vue
4.1 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
<!-- 系统通知 -->
<template>
<!-- 垂直滚动区域 scroll和swiper的高度都要给且是一样的高度-->
<scroll-view scroll-y="true" class="scrollSet">
<!-- 列表 -->
<view class=" newBox">
<scroll-view scroll-y="true" :style="{ height: scrollH + 'px' }" v-if="itemData.length>0">
<view class="systemList">
<view class="boxBg item" v-for="(item, index) in itemData" :key="index">
<view class="tit" :class="item.isRead === 0 ? 'active' : ''">
您有一个新的运输任务
<icon></icon>
</view>
<view class="address" v-html="item.content"></view>
<view class="time">
<text> {{item.created}}</text>
<button class="uni-btn redBtn" @click="handleDetail(item)">查看详情</button>
</view>
</view>
</view>
<view style="height: 50rpx;">
<!-- 下面的加载更多有问题 先占位 -->
</view>
</scroll-view>
<view v-else><EmptyPage :emptyData="emptyData"></EmptyPage></view>
</view>
</scroll-view>
</template>
<script setup>
import { ref, reactive, onMounted, nextTick } from 'vue';
import { onReachBottom } from '@dcloudio/uni-app';
import { taskTimeFormat } from '@/utils/index.js';
// 接口 api
import { getNewList, msgRead, msgAllRead } from '@/pages/api/news.js';
// 导入组件
//空页面
import EmptyPage from '@/components/EmptyPage/index.vue';
// 下拉提示
import ReachBottom from '@/components/reach-bottom/index.vue';
// ------定义变量------
const pages = getCurrentPages(); //获取加载的页面，获取当前页面路由信息uniapp 做安卓不支持 vue-router
const currentPage = pages[pages.length - 1].$page.options; //获取当前页面的对象
const title = currentPage.title; //nav标题
const type = currentPage.type; //当前派件类型
const loadMore = ref(); //定义子组件的ref,可以调取子组件的值
const emptyData = ref('暂无消息');
const rithtText = ref('全部已读');
let pageNumber = ref(1);
let pageSize = ref(10);
let totalPage = ref(0);
let reload = ref(false);
let scrollH = ref(null); //滚动高度
let currentPageData = ref([]);
let itemData = ref([]);
let ids = ref([])
// 监听上拉触底事件
onReachBottom(() => {
totalPage.value = Math.ceil(itemData.value.length / pageSize.value); //计算总页数
totalPage.value = totalPage.value == 0 ? 1 : totalPage.value;
if (pageNumber.value >= totalPage.value) {
loadMore.value.status= 'noMore';
return false;
} else {
loadMore.value.status = 'loading';
let times = setTimeout(() => {
pageNumber.value++;
let begin = (pageNumber.value - 1) * pageSize.value;
let end = pageNumber.value * pageSize.value;
currentPageData.value = [...currentPageData.value, ...itemData.value.slice(begin, end)];
}, 1000); //因为接口没做分页，所以做了数据分页处理，这里延时一秒在加载方法有个loading效果
}
});
// ------生命周期------
onMounted(() => {
getList();
});
// ------定义方法------
const params = ref({
contentType: '201',
page: 1,
pageSize: 10
})
// 获取系统通知列表
const getList = async () => {
await getNewList(params.value)
.then(res => {
if (res.code === 200) {
itemData.value = res.data.items;
}
})
.catch(err => {
return uni.showToast({
title: err.msg,
duration: 1000,
icon: 'none'
});
});
};
// 进入详情，标记已读
const handleDetail = async item => {
await msgRead(item.id)
.then(res => {
uni.navigateTo({
url: '/pages/message/details?obj=' + JSON.stringify(item)
});
})
.catch(err => {
return uni.showToast({
title: err.msg,
duration: 1000,
icon: 'none'
});
});
};
// 全部已读 - 功能暂未实现
const handleAll = async () => {
itemData.value.map(val => {
if(val.isRead===0){
ids.value.push(val.id);
}
});
await msgAllRead(ids.value)
.then(res => {
getList(type)
})
.catch(err => {
return uni.showToast({
title: err.msg,
duration: 1000,
icon: 'none'
});
});
};
// 返回上一页
const goBack = () => {
uni.redirectTo({
url: '/pages/news/index?tabIndex=1'
});
};
</script>
<style src="./../index.scss" lang="scss"></style>