|
@@ -22,6 +22,11 @@ import { toast } from '@/utils/toast'
|
|
|
defineOptions({
|
|
|
name: 'Notifications', // 通知
|
|
|
})
|
|
|
+
|
|
|
+// 获取屏幕边界到安全区域距离
|
|
|
+const systemInfo = uni.getSystemInfoSync()
|
|
|
+const safeAreaInsets = systemInfo.safeAreaInsets
|
|
|
+
|
|
|
// z-paging
|
|
|
const paging = ref(null)
|
|
|
// 类似mixins,如果是页面滚动务必要写这一行,并传入当前ref绑定的paging,注意此处是paging,而非paging.value
|
|
@@ -283,63 +288,50 @@ async function clearAllNotifications() {
|
|
|
<template>
|
|
|
<z-paging ref="paging" v-model="dataList" use-page-scroll @query="queryList">
|
|
|
<template #top>
|
|
|
- <wd-navbar
|
|
|
- :bordered="false"
|
|
|
- placeholder
|
|
|
- :title="t('notifications.title')"
|
|
|
- >
|
|
|
- <template #left>
|
|
|
- <wd-icon name="thin-arrow-left" size="32rpx" @click="() => goBack()" />
|
|
|
- </template>
|
|
|
- <template #right>
|
|
|
- <image src="/static/icons/cl.png" class="h-40rpx w-40rpx" @click="clearAllNotifications" />
|
|
|
- </template>
|
|
|
- </wd-navbar>
|
|
|
- <wd-tabs v-model="tab" :auto-line-width="true" custom-class="bg-transparent!" slidable="always" @click="() => queryList(1, 20)">
|
|
|
- <wd-tab v-for="tabItem in tabs" :key="tabItem.value" :name="tabItem.value" :title="tabItem.title" />
|
|
|
- </wd-tabs>
|
|
|
+ <view class="bg-white" :style="{ paddingTop: `${safeAreaInsets?.top}px` }">
|
|
|
+ <wd-navbar :bordered="false" placeholder :title="t('notifications.title')">
|
|
|
+ <template #left>
|
|
|
+ <wd-icon name="thin-arrow-left" size="32rpx" @click="() => goBack()" />
|
|
|
+ </template>
|
|
|
+ <template #right>
|
|
|
+ <image src="/static/icons/cl.png" class="h-40rpx w-40rpx" @click="clearAllNotifications" />
|
|
|
+ </template>
|
|
|
+ </wd-navbar>
|
|
|
+ <wd-tabs
|
|
|
+ v-model="tab" :auto-line-width="true" custom-class="bg-transparent!" slidable="always"
|
|
|
+ @click="() => queryList(1, 20)"
|
|
|
+ >
|
|
|
+ <wd-tab v-for="tabItem in tabs" :key="tabItem.value" :name="tabItem.value" :title="tabItem.title" />
|
|
|
+ </wd-tabs>
|
|
|
+ </view>
|
|
|
</template>
|
|
|
<view class="py-14rpx">
|
|
|
<wd-swipe-action v-for="item in dataList" :key="item.id" class="mb-20rpx">
|
|
|
<view
|
|
|
- class="bg-white px-22rpx py-18rpx"
|
|
|
- :class="{ 'notification-read': item.readFlag }"
|
|
|
+ class="bg-white px-22rpx py-18rpx" :class="{ 'notification-read': item.readFlag }"
|
|
|
@click="handleNoticeClick(item)"
|
|
|
>
|
|
|
<view class="mb-8rpx flex items-center justify-between">
|
|
|
<view class="flex items-center">
|
|
|
<image
|
|
|
- :src="getNoticeIcon(item.noticeType)"
|
|
|
- class="h-36rpx w-36rpx"
|
|
|
+ :src="getNoticeIcon(item.noticeType)" class="h-36rpx w-36rpx"
|
|
|
:class="{ 'opacity-60': item.readFlag }"
|
|
|
/>
|
|
|
- <text
|
|
|
- class="ml-8rpx text-24rpx font-bold"
|
|
|
- :class="item.readFlag ? 'text-#999999' : 'text-#333333'"
|
|
|
- >
|
|
|
+ <text class="ml-8rpx text-24rpx font-bold" :class="item.readFlag ? 'text-#999999' : 'text-#333333'">
|
|
|
{{ getNoticeTitle(item) }}
|
|
|
</text>
|
|
|
</view>
|
|
|
<view class="flex items-center">
|
|
|
- <text
|
|
|
- class="text-22rpx"
|
|
|
- :class="item.readFlag ? 'text-#CCCCCC' : 'text-#3A444C'"
|
|
|
- >
|
|
|
+ <text class="text-22rpx" :class="item.readFlag ? 'text-#CCCCCC' : 'text-#3A444C'">
|
|
|
{{ formatNoticeTime(item.createTime) }}
|
|
|
</text>
|
|
|
</view>
|
|
|
</view>
|
|
|
<view class="flex items-center justify-between text-22rpx">
|
|
|
- <view
|
|
|
- class="line-clamp-2 flex-1 break-all"
|
|
|
- :class="item.readFlag ? 'text-#BBBBBB' : 'text-#3A444C'"
|
|
|
- >
|
|
|
+ <view class="line-clamp-2 flex-1 break-all" :class="item.readFlag ? 'text-#BBBBBB' : 'text-#3A444C'">
|
|
|
{{ getNoticeContent(item) }}
|
|
|
</view>
|
|
|
- <view
|
|
|
- v-if="!item.readFlag"
|
|
|
- class="ml-8rpx h-12rpx w-12rpx flex-shrink-0 rounded-full bg-#FF0000"
|
|
|
- />
|
|
|
+ <view v-if="!item.readFlag" class="ml-8rpx h-12rpx w-12rpx flex-shrink-0 rounded-full bg-#FF0000" />
|
|
|
</view>
|
|
|
</view>
|
|
|
<template #right>
|
|
@@ -357,6 +349,7 @@ async function clearAllNotifications() {
|
|
|
<style lang="scss" scoped>
|
|
|
.action {
|
|
|
height: 100%;
|
|
|
+
|
|
|
.button {
|
|
|
display: flex;
|
|
|
align-items: center;
|