list.vue
3.4 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
<template>
<u-navbar autoBack :title="Event?.title" :safeAreaInsetTop="true" placeholder>
<template #right>
<view style="font-size: 26rpx; font-weight: 700" @click="onclickPreviewHandler">一键已读</view>
</template>
</u-navbar>
<view class="msglist">
<template v-if="pageList?.records.length">
<view class="msglist-item" v-for="_ in pageList?.records" :key="_.id" @click="jumpUrlHandler(_)">
<view class="flexJ" style="margin-bottom: 28rpx">
<view class="msglist-title">{{ proxy.$h.optObjectValue('MessageType', _?.type) }}</view>
<view class="msglist-time">{{ _?.time }}</view>
</view>
<view class="msglist-message">{{ _?.content }}</view>
<u-line margin="32rpx 0"></u-line>
<view class="flexJ">
<view class="msglist-todetail">查看详情</view>
<u-icon size="20" name="arrow-right" color="#c1c1c1"></u-icon>
</view>
</view>
<view class="msglist-empty flexC">没有更多数据了~</view>
</template>
<template v-else>
<Empty text="暂无通知" />
</template>
</view>
</template>
<script setup lang="ts">
import { ref, getCurrentInstance, ComponentPublicInstance } from 'vue'
import { onLoad, onReachBottom } from '@dcloudio/uni-app'
import Empty from '@/components/Empty.vue'
import { getMsg_list, getis_all_read } from '../../api'
import { MessageListParamsType, PageListType, MessageListType } from '../../types'
const { proxy } = getCurrentInstance() as { proxy: ComponentPublicInstance }
interface EventType {
title: string
type: string
}
const Event = ref<EventType>()
const pageList = ref<PageListType<MessageListType>>({ records: [] })
const params = ref<MessageListParamsType>({
type: 0,
pageNo: 0,
pageSize: 10
})
onLoad((e: EventType) => {
Event.value = e
params.value.type = Number(e.type)
getListHandler(true)
})
onReachBottom(() => getListHandler(false))
const getListHandler = async (refresh: boolean) => {
refresh ? ((params.value.pageNo = 1), pageList.value?.records.splice(0)) : params.value.pageNo++
const { result }: { result: PageListType<MessageListType> } = await getMsg_list(params.value)
if (!result.records.length) return
result.records.map(_ => pageList.value?.records.push(_))
}
const data = {
'1': '/pages2/message/detail',
'2': '/pages2/message/mineComment'
}
const jumpUrlHandler = (_: MessageListType) => proxy.$h.jumpUrl(`${data[Event.value?.type as string]}?id=${_.id}`)
const onclickPreviewHandler = async () => {
uni.showModal({
title: '您确定要一键已读所有消息吗?',
showCancel: true,
success: async ({ confirm, cancel }) => {
if (confirm) {
await getis_all_read({ type: Event.value?.type as string })
getListHandler(true)
}
}
})
}
</script>
<style>
page {
background: #f7f8fa !important;
}
</style>
<style lang="scss" scoped>
.msglist {
box-sizing: border-box;
padding: 26rpx 24rpx;
&-item {
box-sizing: border-box;
padding: 32rpx 24rpx;
background: #fff;
margin-bottom: 22rpx;
}
&-title {
color: #323233;
font-size: 36rpx;
font-weight: 700;
}
&-time {
color: #999999;
font-size: 26rpx;
}
&-message {
color: #666666;
font-size: 26rpx;
}
&-todetail {
color: #323233;
font-size: 28rpx;
font-weight: 700;
}
&-empty {
margin: 58rpx auto 0;
color: #999999;
font-size: 26rpx;
}
}
</style>