new-88live/pages/notice/sys-notice/index.vue

<!-- 系统通知 -->
<template>
	<view class="sys-notice-page">
		<view class="sys-notice-nav" :style="{ paddingTop: statusBar + 'px' }">
			<view class="sys-notice-nav-row">
				<view class="sys-notice-back" @tap="goBack">
					<text class="sys-notice-back-icon">←</text>
				</view>
				<text class="sys-notice-nav-title">{{ copy.title }}</text>
				<view class="sys-notice-nav-placeholder" />
			</view>
		</view>

		<scroll-view
			scroll-y
			class="sys-notice-scroll"
			:style="{ height: scrollHeight + 'px' }"
			:lower-threshold="120"
			@scrolltolower="onScrollToLower"
		>
			<view class="sys-notice-body" :style="{ paddingBottom: safeBottom + 'px' }">
				<view v-if="loading && !rows.length" class="sys-notice-state">
					<text class="sys-notice-state-txt">{{ copy.loading }}</text>
				</view>

				<empty
					v-else-if="loaded && !rows.length"
					src="notice_default3x"
					:text="copy.empty"
				/>

				<view v-else class="sys-notice-list">
					<view
						v-for="(item, index) in rows"
						:key="item.id || index"
						class="sys-notice-group"
					>
						<view v-if="item.createtime_text" class="sys-notice-time">
							<text class="sys-notice-time-txt">{{ item.createtime_text }}</text>
						</view>

						<view class="sys-notice-card" @tap="openDetail(item)">
							<view v-if="coverUrl(item)" class="sys-notice-cover-wrap">
								<image
									class="sys-notice-cover"
									:src="coverUrl(item)"
									mode="aspectFill"
								/>
								<view class="sys-notice-cover-fade" />
							</view>

							<view class="sys-notice-card-body">
								<view class="sys-notice-badge-row">
									<text class="sys-notice-badge">{{ copy.badge }}</text>
								</view>
								<text class="sys-notice-title">{{ item.title || copy.untitled }}</text>
								<text
									v-if="item.description"
									class="sys-notice-desc"
								>{{ item.description }}</text>
								<view class="sys-notice-foot">
									<text class="sys-notice-more">{{ copy.readMore }}</text>
									<text class="sys-notice-arrow">›</text>
								</view>
							</view>
						</view>
					</view>
				</view>

				<uni-load-more
					v-if="rows.length"
					:status="loadStatus"
					:content-text="loadMoreContent"
				/>
			</view>
		</scroll-view>
	</view>
</template>

<script>
import { fetchSystemNoticePage } from '@/features/notice/notice-gateway'

export default {
	name: 'SysNoticePage',
	data() {
		return {
			statusBar: 0,
			scrollHeight: 600,
			safeBottom: 0,
			rows: [],
			page: 1,
			lastPage: 1,
			loading: false,
			loaded: false,
			loadStatus: 'more'
		}
	},
	computed: {
		copy() {
			const t = this.$t.bind(this)
			return {
				title: t('notice.system'),
				loading: t('notice.loading'),
				empty: t('notice.no-system-messages'),
				badge: t('notice.badge'),
				untitled: t('notice.untitled'),
				readMore: t('notice.readMore'),
				loadFailed: t('notice.loadFailed')
			}
		},
		loadMoreContent() {
			const t = this.$t.bind(this)
			return {
				contentdown: t('notice.loadMore'),
				contentrefresh: t('notice.loading'),
				contentnomore: t('notice.noMore')
			}
		}
	},
	onLoad() {
		this.initLayout()
		this.reload()
	},
	onPullDownRefresh() {
		this.reload().finally(() => uni.stopPullDownRefresh())
	},
	methods: {
		initLayout() {
			try {
				const info = uni.getSystemInfoSync()
				this.statusBar = info.statusBarHeight || 0
				this.safeBottom = (info.safeAreaInsets && info.safeAreaInsets.bottom) || 0
				const navH = this.statusBar + uni.upx2px(88)
				this.scrollHeight = (info.windowHeight || info.screenHeight || 600) - navH
			} catch (_) {}
		},
		coverUrl(item) {
			if (!item || !item.image || !this.$appKit) return ''
			return this.$appKit.oss(item.image, 686, 386)
		},
		goBack() {
			uni.navigateBack({
				fail: () => uni.switchTab({ url: '/pages/mine/index' })
			})
		},
		openDetail(item) {
			if (!item || item.id == null) return
			if (typeof this.onDetails === 'function') {
				this.onDetails(item.id, item.title || '')
				return
			}
			uni.navigateTo({
				url: `/pages/article/details?id=${item.id}&title=${encodeURIComponent(item.title || '')}`
			})
		},
		async reload() {
			this.page = 1
			this.lastPage = 1
			this.loadStatus = 'more'
			this.loaded = false
			this.rows = []
			await this.loadPage(true)
		},
		onScrollToLower() {
			if (this.loadStatus === 'loading' || this.loadStatus === 'noMore') return
			this.loadPage(false)
		},
		async loadPage(reset) {
			if (this.loading) return
			if (!reset && this.page >= this.lastPage) {
				this.loadStatus = 'noMore'
				return
			}
			const page = reset ? 1 : this.page + 1
			this.loading = true
			this.loadStatus = 'loading'
			try {
				const pack = await fetchSystemNoticePage(page)
				this.page = pack.currentPage
				this.lastPage = pack.lastPage
				if (reset) {
					this.rows = pack.rows
				} else {
					this.rows = this.rows.concat(pack.rows)
				}
				this.loadStatus =
					pack.currentPage >= pack.lastPage || !pack.rows.length ? 'noMore' : 'more'
				this.loaded = true
			} catch (err) {
				this.loadStatus = 'more'
				if (reset) this.rows = []
				this.$appKit && this.$appKit.msg(err.message || this.copy.loadFailed)
				this.loaded = true
			} finally {
				this.loading = false
			}
		}
	}
}
</script>

<style scoped>
.sys-notice-page {
	min-height: 100vh;
	background-color: #eef3fb;
}

.sys-notice-nav {
	background-color: #ffffff;
	border-bottom: 1rpx solid #eef1f6;
}

.sys-notice-nav-row {
	display: flex;
	flex-direction: row;
	align-items: center;
	height: 88rpx;
	padding: 0 24rpx;
	box-sizing: border-box;
}

.sys-notice-back {
	width: 64rpx;
	height: 64rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.sys-notice-back-icon {
	font-size: 40rpx;
	color: #1a1d26;
	line-height: 1;
}

.sys-notice-nav-title {
	flex: 1;
	text-align: center;
	font-size: 32rpx;
	font-weight: 600;
	color: #1a1d26;
}

.sys-notice-nav-placeholder {
	width: 64rpx;
}

.sys-notice-body {
	padding: 24rpx 28rpx 0;
	box-sizing: border-box;
}

.sys-notice-state {
	padding: 120rpx 0;
	text-align: center;
}

.sys-notice-state-txt {
	font-size: 28rpx;
	color: #8a8d9e;
}

.sys-notice-list {
	display: flex;
	flex-direction: column;
}

.sys-notice-group {
	margin-bottom: 8rpx;
}

.sys-notice-time {
	display: flex;
	flex-direction: row;
	justify-content: center;
	margin: 12rpx 0 20rpx;
}

.sys-notice-time-txt {
	padding: 8rpx 24rpx;
	border-radius: 999rpx;
	background-color: rgba(255, 255, 255, 0.72);
	font-size: 22rpx;
	color: #8a8d9e;
	line-height: 1.4;
}

.sys-notice-card {
	overflow: hidden;
	margin-bottom: 24rpx;
	background-color: #ffffff;
	border-radius: 24rpx;
	box-shadow: 0 8rpx 28rpx rgba(74, 140, 255, 0.08);
}

.sys-notice-cover-wrap {
	position: relative;
	width: 100%;
	height: 320rpx;
	overflow: hidden;
	background-color: #e8edf5;
}

.sys-notice-cover {
	width: 100%;
	height: 100%;
}

.sys-notice-cover-fade {
	position: absolute;
	left: 0;
	right: 0;
	bottom: 0;
	height: 80rpx;
	background: linear-gradient(180deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.92) 100%);
}

.sys-notice-card-body {
	padding: 24rpx 28rpx 28rpx;
	box-sizing: border-box;
}

.sys-notice-badge-row {
	margin-bottom: 12rpx;
}

.sys-notice-badge {
	display: inline-block;
	padding: 4rpx 16rpx;
	border-radius: 999rpx;
	font-size: 20rpx;
	color: #ffffff;
	background: linear-gradient(135deg, #4a8cff 0%, #6ec8ff 100%);
}

.sys-notice-title {
	font-size: 32rpx;
	font-weight: 600;
	color: #1a1d26;
	line-height: 1.45;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	display: -webkit-box;
}

.sys-notice-desc {
	margin-top: 12rpx;
	font-size: 26rpx;
	color: #8a8d9e;
	line-height: 1.5;
	overflow: hidden;
	text-overflow: ellipsis;
	-webkit-line-clamp: 2;
	-webkit-box-orient: vertical;
	display: -webkit-box;
}

.sys-notice-foot {
	display: flex;
	flex-direction: row;
	align-items: center;
	justify-content: flex-end;
	margin-top: 20rpx;
	padding-top: 16rpx;
	border-top: 1rpx solid #eef1f6;
}

.sys-notice-more {
	font-size: 24rpx;
	color: #4a8cff;
}

.sys-notice-arrow {
	margin-left: 4rpx;
	font-size: 32rpx;
	color: #4a8cff;
	line-height: 1;
}
</style>