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>
		<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" v-if="item.sysUserInfo.userId != myuserid">
				<view class="contentbox, swipe-action__content__text" style="display: flex;"
					@click="gotoAddr(item.sysUserInfo.userId,item.sysUserInfo.infoName)">
					<view>
						<view class="contentboxtop" v-if="myuserid.value == item.notificationHistorical.senderId.value && item.notificationHistorical.sattic == 0 " ></view>
						<image class="contentboximage" src="../../static/images/icon/tu4-1.jpg"></image>
					</view>
					<view style="margin-left: 26rpx;width: 612rpx;">
						<text class="contentboxtexttop">{{item.sysUserInfo.infoName}}</text>

						<text
							v-if="myuserid.value == item.notificationHistorical.senderId.value && item.notificationHistorical.sendTime != null "
							class="contentboxtextmiddle">{{item.notificationHistorical.sendTime}}</text>
						<text v-else class="contentboxtextmiddle">{{new Date().getMonth()+1  +"-"+ new Date().getDate()}}</text>

						<text
							v-if="myuserid.value == item.notificationHistorical.senderId.value && item.notificationHistorical.messageType  == 1"
							class="contentboxtextbottom">{{item.notificationHistorical.messageText}}</text>
						<text
							v-else-if="myuserid.value == item.notificationHistorical.senderId.value && item.notificationHistorical.messageType  == 0"
							class="contentboxtextbottom">[图片]</text>

					</view>
				</view>
			</up-swipe-action-item>
		</up-swipe-action>
	</view>



</template>

<script setup>
	import {
		onMounted,
		ref,
		reactive,
		getCurrentInstance
	} from 'vue';
	import {
		listFriendShip,
		getFriendShip,
		delFriendShip,
		addFriendShip,
		updateFriendShip,
		listFriendShipId,
	} from "@/api/signln/FriendShip/FriendShip";

	import {
		GetListid
	} from "@/api/signln/SignTa/SignTa";

	import {
		listLatestarticle
	} from "@/api/signln/NotificationHistorical/NotificationHistorical";
	const {
		proxy
	} = getCurrentInstance();

	const arrlist = ref([
		// {
		// 	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,name) {
		proxy.$tab.navigateTo("/pages/Friend/messagechat?id=" + id +"&name="+name)
	}

	const form = {
		// pageNum: 1,
		// pageSize: 10,
		userId: null,
		friendId: null,
		actionUserId: null,
		actionTime: null,
		status: null
	}
	const myuserid = ref(0);
	onMounted(() => {
		//获取$("#")
		const getuser = GetListid().then(res => {
			myuserid.value = res;
			console.log("党情登录用户" + myuserid.value)
		})
	})
	//获取所有的好友
	function GetList() {
		listFriendShipId(form.value).then(response => {
			arrlist.value = response.rows;
			// console.log(arrlist.value)
		});
	}
	GetList();
</script>

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

	:deep(.u-index-list__letter[data-v-5e193795]) {
		top: 90.5px !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>