136 lines
3.2 KiB
Vue
136 lines
3.2 KiB
Vue
<template>
|
||
<view class="mailbox-list">
|
||
<!-- 背景图片 -->
|
||
<image class="bg-image" src="/static/square/squearbj.png" mode="aspectFill"></image>
|
||
<!-- <Header title="收件箱" :showBack="true" /> -->
|
||
<view class="toolbar">
|
||
<view class="nav-back" @tap="goBack">
|
||
<text class="nav-back-icon">←</text>
|
||
</view>
|
||
<button class="btn-mark-all" @click="onMarkAllRead">[+全部已读]</button>
|
||
<button class="btn-delete-all" @click="onClearAll">[+全部删除]</button>
|
||
</view>
|
||
|
||
<scroll-view scroll-y="true" class="list-scroll" @scrolltolower="onScrollLower">
|
||
<MailboxGroup v-for="grp in GROUPS" :key="grp.type" :groupKey="grp.type" :label="grp.label"
|
||
:collapsed="isCollapsed(grp.type)" :items="itemsByType[grp.type]" :unreadCount="unreadByType[grp.type] || 0"
|
||
@toggle="toggleCollapse(grp.type)" @select="onSelectItem" @long-press="onLongPress" />
|
||
<!-- <view v-if="!hasAny && !loading" class="empty">暂无通知</view> -->
|
||
<view v-if="loading" class="loading">加载中...</view>
|
||
<view v-if="hasAny && !hasMore" class="no-more">没有更多了</view>
|
||
</scroll-view>
|
||
</view>
|
||
</template>
|
||
|
||
<script setup>
|
||
import { onShow } from '@dcloudio/uni-app'
|
||
// import Header from '../components/Header.vue'
|
||
import MailboxGroup from './components/MailboxGroup.vue'
|
||
import { useMailboxCenter } from './composables/useMailboxCenter.js'
|
||
|
||
const {
|
||
GROUPS, itemsByType, unreadByType,
|
||
loading, hasAny, hasMore,
|
||
loadAll, onScrollLower,
|
||
onMarkAllRead, onClearAll,
|
||
onSelectItem, onLongPress,
|
||
isCollapsed, toggleCollapse,
|
||
} = useMailboxCenter()
|
||
|
||
const goBack = () => {
|
||
// 获取页面栈
|
||
const pages = getCurrentPages();
|
||
if (pages.length > 1) {
|
||
// 有上一页，执行返回
|
||
uni.navigateBack();
|
||
} else {
|
||
// 没有上一页，跳转到square页面
|
||
uni.reLaunch({
|
||
url: '/pages/square/square'
|
||
});
|
||
}
|
||
};
|
||
|
||
onShow(() => { loadAll() })
|
||
</script>
|
||
|
||
<style lang="scss" scoped>
|
||
.mailbox-list {
|
||
display: flex;
|
||
flex-direction: column;
|
||
height: 100vh;
|
||
background: #f8f8f8;
|
||
|
||
/* 背景图片 */
|
||
.bg-image {
|
||
position: fixed;
|
||
top: 0;
|
||
left: 0;
|
||
width: 100%;
|
||
height: 120%;
|
||
z-index: 0;
|
||
pointer-events: none;
|
||
}
|
||
|
||
.toolbar {
|
||
display: flex;
|
||
gap: 16rpx;
|
||
padding: 96rpx 24rpx 16rpx;
|
||
// background: #fff;
|
||
// border-bottom: 1rpx solid #f0f0f0;
|
||
position: relative;
|
||
|
||
.nav-back {
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
display: flex;
|
||
align-items: center;
|
||
justify-content: center;
|
||
/* background: rgba(255,255,255,0.5);
|
||
border-radius: 50%; */
|
||
}
|
||
|
||
.nav-back-icon {
|
||
font-size: 48rpx;
|
||
font-weight: bold;
|
||
color: #fff;
|
||
}
|
||
|
||
button {
|
||
flex: 1;
|
||
font-size: 26rpx;
|
||
padding: 12rpx 0;
|
||
border-radius: 8rpx;
|
||
|
||
&::after {
|
||
border: 0;
|
||
}
|
||
}
|
||
|
||
.btn-mark-all {
|
||
background: #e8f4ff;
|
||
color: #5C40FF;
|
||
}
|
||
|
||
.btn-delete-all {
|
||
background: #fff1f0;
|
||
color: #f5222d;
|
||
}
|
||
}
|
||
|
||
.list-scroll {
|
||
flex: 1;
|
||
overflow: hidden;
|
||
padding: 16rpx 24rpx;
|
||
}
|
||
|
||
.empty,
|
||
.loading,
|
||
.no-more {
|
||
text-align: center;
|
||
color: #999;
|
||
font-size: 26rpx;
|
||
padding: 48rpx 0;
|
||
}
|
||
}
|
||
</style> |