staff/pagesA/message/index.vue

<template>
	<view class="li-message-page">
		<!-- 自定义导航栏 -->
		<wd-navbar :bordered="false"
			custom-style="background: transparent !important; backdrop-filter: blur(10px) !important; -webkit-backdrop-filter: blur(10px) !important;"
			safeAreaInsetTop fixed placeholder>
			<template #left>
				<view class="li-flex li-items-center">
					<text v-if="hasMultiplePages" class="ri-arrow-left-s-line li-text-70"
						@click="toPages({type:'nav'})"></text>
					<text v-if="!hasMultiplePages" class="ri-home-5-line li-text-55 li-mr-6 li-mb-8"
						@click="toPages({type:'home'})"></text>
					<text class="li-text-42">消息</text>
				</view>
			</template>
			<!-- #ifdef MP-WEIXIN -->
			<template #title>
				<view class="li-flex-center li-ml-200">
					<text class="ri-brush-3-line li-text-47" @click="clearMsg"></text>
				</view>
			</template>
			<!-- #endif -->
			<!-- #ifndef MP-WEIXIN -->
			<template #right>
				<view class="li-flex-center li-mr-25">
					<text class="ri-brush-3-line li-text-52 li-pt-2" @click="clearMsg"></text>
				</view>
			</template>
			<!-- #endif -->
		</wd-navbar>
		<!-- 导航栏背景 -->
		<view class="nav-bg-layer"></view>

		<!-- 通知栏 -->
		<!-- <wd-notice-bar class="li-mt-20" :scrollable="false" color="#37A5FF"
			background-color="rgba(217, 237, 255, 0.35)">
			<template #prefix>
				<text class="ri-volume-up-fill li-text-35 li-mr-10 li-ml-20"></text>
			</template>
			向左滑动可删除消息，删除后无法恢复。
			<template #suffix>
				<text class="ri-close-line li-text-38 li-mr-10 li-text-#B1B0B0"></text>
			</template>
		</wd-notice-bar> -->

		<!-- list -->
		<view class="li-mt-30" v-if="messageList.length>0">
			<wd-swipe-action v-for="(item,index) in messageList" :key="index">
				<view class="li-bg-white li-px-30">
					<view class="li-flex li-items-center li-bottom-border1  li-py-20">
						<wd-badge modelValue="1" top='10' right="2" :max='99'>
							<image class="li-w-90 li-h-90 li-rd-20 " :src="item.image" mode=""></image>
						</wd-badge>
						<view class=" li-ml-30 li-w-80%">
							<view class="li-flex li-justify-between li-items-center">
								<text class="li-text-30 li-single-line">{{item.title}}</text>
								<text class="li-text-26 li-text-#B1B0B0">{{item.time}}</text>
							</view>
							<view class="li-single-line li-text-25 li-text-#B1B0B0 li-mt-10">
								1.15新版出炉，足迹"随笔功能"上线，记录线，记录线，记录1.15新版出炉，足迹"随笔功能"上线，记录线，记录线，记录
							</view>
						</view>
					</view>
				</view>

				<template #right>
					<view class="action">
						<view class="button" style="background: #E2231A;" @click="handleAction('操作3')">删除</view>
					</view>
				</template>
			</wd-swipe-action>
		</view>
		<view v-if="messageList.length==0" class="!li-mt-300">
			<wd-status-tip :image="uni.$globalData?.RESOURCE_URL+'tip/message.png'"  tip="暂无待处理会话" />
		</view>
		<!-- 顶部提示条（成功/失败消息提示） -->
		<wd-toast />
	</view>
</template>

<script setup lang="ts">
	import { ref } from 'vue'
	import { onLoad, onReachBottom, onPullDownRefresh } from '@dcloudio/uni-app'
	import { useNavigation } from '@/hooks/useNavigation'
	import { useToast } from '@/uni_modules/wot-design-uni'
	const Toast = useToast()
	// 使用导航 composable
	const {
		hasMultiplePages,   // 是否有多个页面在路由栈中
		isTabBarPage,       // 当前页面是否为 tabBar 页面
		checkRouteStack     // 检查当前路由栈状态的方法
	} = useNavigation()
	const messageList = ref([
		// {
		// 	image: '/static/message/icon.png',
		// 	title: '订单提醒',
		// 	time: '2025/12/12',
		// 	content: "1.15新版出炉，足迹'随笔功能'上线，记录线，记录线，记录1.15新版出炉，足迹"
		// }, {
		// 	image: '/static/message/icon1.png',
		// 	title: '订单提醒',
		// 	time: '2025/12/12',
		// 	content: "1.15新版出炉，足迹'随笔功能'上线，记录线，记录线，记录1.15新版出炉，足迹"
		// }
	])


	onLoad(() => {
		checkRouteStack()
	})
	onPullDownRefresh(() => {
		uni.stopPullDownRefresh()
	})

	onReachBottom(() => {

	})

	const handleAction = (action : string) => {
		console.log(action);
	}

	const clearMsg = () => {
		Toast.info('暂无消息')
	}

	const toPages = (item : any) => {
		console.log(item);
		switch (item.type) {
			case 'nav':
				uni.navigateBack({
					delta: 1
				});
				break;
			case 'home':
				uni.switchTab({
					url: '/pages/index/index'
				})
				break;
			case 'detail':
				uni.navigateTo({
					url: '/pagesA/my_order/detail'
				})
				break;
			default:
				break;
		}
	}
</script>

<style lang="scss">
	.li-message-page {
		width: 100%;
		min-height: 100vh;
		background: linear-gradient(to bottom,
				rgba(217, 237, 255, 0.9) 0%,
				rgba(255, 255, 255, 1) 20%,
				rgba(255, 255, 255, 1) 40%,
				rgba(255, 255, 255, 1) 60%,
				rgba(255, 255, 255, 1) 80%,
				rgba(255, 255, 255, 1) 100%);
		background-attachment: fixed;
	}


	// 导航栏背景层
	.nav-bg-layer {
		position: fixed;
		top: 0;
		left: 0;
		right: 0;
		height: var(--window-top);
		background: linear-gradient(to bottom,
				rgba(217, 237, 255, 0.95),
				rgba(217, 237, 255, 0.85));
		backdrop-filter: blur(10px);
		-webkit-backdrop-filter: blur(10px);
		z-index: 998;
	}

	::v-deep .wd-navbar {
		z-index: 999;
	}

	.action {
		height: 100%;
		border-radius: 4rpx 0 0 4rpx;
		overflow: hidden;
	}

	.button {
		display: inline-block;
		padding: 0 30rpx;
		height: 100%;
		color: white;
		display: flex;
		align-items: center;
		justify-content: center;
		font-size: 28rpx;
	}
</style>