talk_appAmin/pages/Friend/messagenotification.vue

<!-- 消息通知 -->
<template>

	<view style="position: fixed; top: 0;bottom: 0; left: 0; right: 0;background:#ffffff; z-index: -2;"></view>

	<view class="box">
		<view class="boxview" @click="handerTo('./Interactivemessage')">
			<view class="boxmessge"></view>
			<image class="boximage" src="../../static/images/sign/message2.png"></image>
			<text class="boxtext">互动消息</text>
		</view>
		<view class="boxview" @click="handerTo('./systemnotification?id=1')">
			<view class="boxmessge"></view>
			<image class="boximage" src="../../static/images/sign/message.png"></image>
			<text class="boxtext">系统通知</text>
		</view>
		<view class="boxview" @click="handerTo('./systemnotification?id=2')">
			<view class="boxmessge"></view>
			<image class="boximage" src="../../static/images/sign/message1.png"></image>
			<text class="boxtext">审核通知</text>
		</view>
	</view>


	<!-- 内容 -->
	<!-- 	<view class="contentbox, swipe-action__content__text" style="display: flex;">
		<view>
			<view class="contentboxtop"></view>
			<image class="contentboximage" src="../../static/images/icon/tu4-1.jpg"></image>
		</view>
		<view style="margin-top: 24rpx;">
			<text>恋爱60秒</text>
			<text>12:00</text>
			<text>你有空把上次布置得任务交一下</text>
		</view>
	</view> -->


	<view>
		<up-swipe-action v-for="item in arrlist" :key="index"
			style="margin-left: 32rpx; margin-right: 32rpx;margin-top: 48rpx;">
			<up-swipe-action-item :options="options1">
				<view class="contentbox, swipe-action__content__text" style="display: flex;" @click="gotoAddr(item.id)">
					<view>
						<view class="contentboxtop"></view>
						<image class="contentboximage" src="../../static/images/icon/tu4-1.jpg"></image>
					</view>
					<view style="margin-left: 26rpx;width: 612rpx;">
						<text class="contentboxtexttop">{{item.name}}</text>
						<text class="contentboxtextmiddle">{{item.time}}</text>
						<text class="contentboxtextbottom">{{item.content}}</text>
					</view>
				</view>
			</up-swipe-action-item>
		</up-swipe-action>
	</view>



</template>

<script setup>
	import {
		reactive,
		getCurrentInstance
	} from 'vue';

	const {
		proxy
	} = getCurrentInstance();

	const arrlist = reactive([{
			id: 1,
			name: "恋爱60秒",
			time: "12:00",
			content: "你有空把上次布置得任务交一下"
		},
		{
			id: 2,
			name: "恋爱60秒1",
			time: "12:00",
			content: "你有空把上次布置得任务交一下"
		},
		{
			id: 3,
			name: "恋爱60秒2",
			time: "12:00",
			content: "你有空把上次布置得任务交一下"
		},
	])

	// 使用 reactive 创建响应式对象  
	const options1 = reactive([{
			text: '删除',
			style: {
				backgroundColor: '#3c9cff'
			}
		},

		{
			text: '删除',
			style: {
				backgroundColor: '#f56c6c'
			}
		}

	]);
	// 前面的跳转
	function handerTo(url) {
		uni.navigateTo({
			url: url
		});
	}
	//聊天的跳转
	function gotoAddr(id) {
		proxy.$tab.navigateTo("/pages/Friend/messagechat?id=" + id)
	}
</script>

<style scoped>
	.swipe-action__content__text {
		padding: 0rpx !important;
		margin: 0rpx !important;
		height: 82rpx !important;
	}

	.box {
		height: 208rpx;
		border-radius: 24rpx 24rpx 0rpx 0rpx;
		background-color: #ffffff;
		display: flex;
		margin-left: 32rpx;
		margin-right: 32rpx;
	}

	.boxmessge {
		width: 24rpx;
		height: 24rpx;
		background: #fa3939;
		border-radius: 24rpx;
		position: relative;
		left: 96rpx;
		top: 24rpx;
	}

	.boximage {
		width: 120rpx;
		height: 120rpx;
	}

	.boxview {
		margin: 0 auto;
	}

	.boxtext {
		font-weight: 600;
		/* width: 112rpx; */
		height: 28rpx;
		font-size: 28rpx;
		text-align: left;
		color: #000000;
		display: block;
	}

	.contentbox {
		/* width: 750rpx; */
		height: 82rpx;
		/* margin-top: -24rpx; */
		display: flex;
	}

	.contentboximage {
		width: 82rpx;
		height: 82rpx;
		border-radius: 82rpx;
	}

	.contentboxtop {
		width: 24rpx;
		height: 24rpx;
		background: #fa3939;
		border-radius: 24rpx;
		position: fixed;
		left: 56rpx;
		/* top: 24rpx; */
		z-index: 3;
	}


	.u-page {
		padding: 0;
	}

	.u-demo-block__title {
		padding: 10px 0 2px 15px;
	}

	.swipe-action {
		&__content {
			padding: 25rpx 0;

			&__text {
				font-size: 15px;
				color: $u-main-color;
				padding-left: 30rpx;
			}
		}
	}

	.contentboxtexttop {
		font-weight: 600;
		/* width: 125rpx; */
		height: 30rpx;
		font-size: 30rpx;
		text-align: left;
		color: #000000;
		vertical-align: middle;
	}

	.contentboxtextmiddle {
		font-weight: Regular;
		/* width: 50rpx; */
		height: 17rpx;
		font-size: 20rpx;
		text-align: right;
		color: #999999;
		vertical-align: middle;
		float: right;
		display: block;
		/* margin-left: 381rpx; */
		margin-right: 24rpx;
	}

	.contentboxtextbottom {
		font-weight: Regular;
		/* width: 364rpx; */
		height: 26rpx;
		font-size: 26rpx;
		text-align: left;
		color: #999999;
		vertical-align: middle;
		display: block;
		line-height: 26rpx;
		margin-top: 12rpx;
	}
</style>