subject_gxj/xj_project_app/pages/message/index.vue

<script setup>
	import {
		ref
	} from "vue";

	import {
		onLoad,
		onShow,
		onUnload,
	} from "@dcloudio/uni-app";

	import {
		getMessageList,
		getMessageCreateList,
		getMessageNum
	} from "@/api/work/message.js";

	// 切换
	let switchActiveArr = ['未读', '已读', '消息'];
	let switchActive = ref('未读');
	const switchSetActive = function(val) {
		defaultCurrent.value = val;
		switchActive.value = switchActiveArr[val];
		if (switchActive.value === "未读" || switchActive.value === "已读") getList();
		if (switchActive.value === "消息") getCreateList();
	};

	// swiper
	let defaultCurrent = ref(0);
	const chgangeSwiperItem = function(e) {
		switchActive.value = switchActiveArr[e.detail.current];
	}

	// 数据
	let unReadList = ref([]);
	let readList = ref([]);
	let createList = ref([]);

	// 获取数据
	let searchInfo = ref({
		// pageNo: 1,
		// pageSize: 10,
	});

	function getList() {
		const params = Object.assign(searchInfo.value, {
			read: switchActive.value === "已读"
		});
		getMessageList(params).then(res => {
			if (searchInfo.value.read) {
				readList.value = res.data.list;
			} else {
				unReadList.value = res.data.list;
			}
		});
	};

	let searchObj = {};

	function getCreateList(params = searchObj) {
		getMessageCreateList(params).then(res => {
			createList.value = res.data.list;
		})
	}

	// 跳转页面
	function goToPage(url) {
		uni.navigateTo({
			url
		})
	}

	// 去详情
	function goToDetail(type, id, userName, content) {
		if (type === "unread") {
			console.log(unReadList.value);
			let index = unReadList.value.findIndex(item => item.id === id);
			unReadList.value.splice(index, 1)
		}
		uni.navigateTo({
			url: `/pages/message/detail/index?type=${type}&id=${id}&userName=${userName}&content=${content}`
		})
	}

	// 改数量
	function getMessageCount() {
		getMessageNum().then(res => {
			if (res.data.count) {
				uni.setTabBarBadge({ //显示数字
					index: 1, //tabbar下标
					text: res.data.count //数字
				})
			} else {
				uni.removeTabBarBadge({ //显示数字
					index: 1, //tabbar下标
				})
			}
		})
	}

	onLoad(() => {
		uni.$on('messageSearch', resolve => {
			searchObj = resolve;
			getCreateList(searchObj);
		})
		getList();
	})

	onShow(() => {
		getMessageCount();
	})

	onUnload(() => {
		uni.$off('messageSearch');
	})
</script>

<template>
	<view class="main">
		<view class="title">

			<view class="send-box">
				<view class="title-search" @click="goToPage('/pages/message/search/index')"></view>
				<view class="text">
					查询消息
				</view>
			</view>
			<view class="title-text">消息</view>
			<view class="send-box">
				<view class="title-send" @click="goToPage('/pages/message/send/index')"></view>
				<view class="text">
					发送消息
				</view>
			</view>
		</view>

		<view class="switch">
			<view class="switch-item" :class="switchActive === '未读'?'active':''" @click="switchSetActive(0)">未读</view>
			<view class="switch-item" :class="switchActive === '已读'?'active':''" @click="switchSetActive(1)">已读</view>
			<view class="switch-item" :class="switchActive === '消息'?'active':''" @click="switchSetActive(2)">发消息</view>
		</view>

		<view class="content">
			<swiper class="swiper" :current="defaultCurrent" @change="chgangeSwiperItem">
				<swiper-item>
					<scroll-view class="swiper-item-content" scroll-y>
						<view class="card-page" v-for="(item,index) in unReadList" :key="index"
							@click="goToDetail('unread',item.id,item.userName,item.content)">
							<view class="card-item-page">
								<view class="card-item-key">发送人：</view>
								<view class="card-item-value">
									<text>{{item.userName}}</text>
									<text class="card-item-look">前往查看</text>
								</view>
							</view>

							<view class="card-item-page">
								<view class="card-item-key">消息时间：</view>
								<view class="card-item-value">
									<text>{{item.createTime}}</text>
									<view class="card-item-read unread">未读</view>
								</view>
							</view>

							<view class="card-item-page">
								<view class="card-item-key">内容：</view>
								<view class="card-item-value">{{item.content}}</view>
							</view>
						</view>
						<view class="item-empty" v-if="unReadList.length === 0">
							<empty-show onlyText showText='暂无消息'></empty-show>
						</view>
					</scroll-view>
				</swiper-item>

				<swiper-item>
					<scroll-view class="swiper-item-content" scroll-y>
						<view class="card-page" v-for="(item,index) in readList" :key="index"
							@click="goToDetail('read',item.id,item.userName,item.content)">
							<view class="card-item-page">
								<view class="card-item-key">发送人：</view>
								<view class="card-item-value">
									<text>{{item.userName}}</text>
									<text class="card-item-look">前往查看</text>
								</view>
							</view>

							<view class="card-item-page">
								<view class="card-item-key">消息时间：</view>
								<view class="card-item-value">
									<text>{{item.createTime}}</text>
									<view class="card-item-read">已读</view>
								</view>
							</view>

							<view class="card-item-page">
								<view class="card-item-key">内容：</view>
								<view class="card-item-value">{{item.content}}</view>
							</view>
						</view>
						<view class="item-empty" v-if="readList.length === 0">
							<empty-show onlyText showText='暂无消息'></empty-show>
						</view>
					</scroll-view>
				</swiper-item>

				<swiper-item>
					<scroll-view class="swiper-item-content" scroll-y>
						<view class="card-page" v-for="(item,index) in createList" :key="index">
							<view class="card-item-page">
								<!-- <view class="card-item-key">发送人：</view> -->
                <view class="card-item-key">接收人：</view>
								<view class="card-item-value">
									<text>{{item.userName}}</text>
									<view class="card-item-read unread" v-if="item.status == '0'">未读</view>
									<view class="card-item-read" v-if="item.status == '1'">已读</view>
								</view>
							</view>

							<view class="card-item-page">
								<view class="card-item-key">消息时间：</view>
								<view class="card-item-value">
									<text>{{item.createTime}}</text>
								</view>
							</view>

							<view class="card-item-page">
								<view class="card-item-key">内容：</view>
								<view class="card-item-value">{{item.content}}</view>
							</view>
						</view>
						<view class="item-empty" v-if="createList.length === 0">
							<empty-show onlyText showText='暂无消息'></empty-show>
						</view>
					</scroll-view>
				</swiper-item>
			</swiper>
		</view>
	</view>
</template>

<style lang="scss" scoped>
	.main {
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #1869F6;
	}

	.item-empty {
		width: 100%;
		height: 500rpx;
	}

	.title {
		position: absolute;
		top: 98rpx;
		left: 4%;
		display: flex;
		justify-content: space-between;
		width: 92%;
		text-align: center;
		font-weight: 700;
		color: #FFFFFF;
		font-size: 36rpx;

		.title-search {
			width: 46rpx;
			height: 46rpx;
			background-image: url("@/static/search.png");
			background-size: 100% 100%;
		}

		.send-box {
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #fff;

			.title-send {
				width: 48rpx;
				height: 42rpx;
				background-image: url("@/static/message-send.png");
				background-size: 100% 100%;


			}

			.text {
				padding-top: 10rpx;

				font-size: 24rpx;
				font-weight: 400;
			}

			.title-search {
				width: 46rpx;
				height: 46rpx;
				background-image: url("@/static/search.png");
				background-size: 100% 100%;
			}
		}


		.no-bg {
			background: none;
		}
	}

	.switch {
		position: absolute;
		top: 196rpx;
		left: 66rpx;
		display: flex;
		align-items: center;
		width: calc(100% - 132rpx);
		height: 72rpx;

		.switch-item {
			flex: 1;
			text-align: center;
			color: #FFF;
			line-height: 46rpx;
			font-size: 32rpx;
		}

		.active {
			height: 72rpx;
			line-height: 72rpx;
			background-size: 100% 100%;
			background-image: url('@/static/message-switch.png');
			color: #1763E7;
		}
	}

	.content {
		position: absolute;
		top: 268rpx;
		left: 0;
		width: 100%;
		min-height: calc(100% - 268rpx);
		background-color: #fff;
		border-radius: 40rpx 40rpx 0 0;

		.swiper {
			width: 100%;
			height: calc(100vh - 268rpx);

			.swiper-item-content {
				height: 100%;
				padding: 42rpx 0 30rpx;
			}
		}
	}

	.card-page {
		width: 670rpx;
		min-height: 282rpx;
		margin: 0 auto 32rpx;
		border-radius: 26rpx;
		border: 2rpx solid #D0D9E7;

		.card-item-page {
			display: flex;
			width: 100%;
			padding: 20rpx 26rpx;
			box-sizing: border-box;
			font-size: 28rpx;
			font-weight: 400;

			.card-item-key {
				color: #939AA5;
				min-width: 140rpx;
			}

			.card-item-value {
				display: flex;
				justify-content: space-between;
				align-items: center;
				width: 100%;
				color: #343437;
				line-height: 46rpx;
				line-break: anywhere;
			}

			.card-item-look {
				color: #1763E7;
			}

			.card-item-read {
				width: 62rpx;
				height: 32rpx;
				line-height: 32rpx;
				text-align: center;
				background-color: #C7FDD9;
				border-radius: 12rpx;
				font-size: 24rpx;
				color: #03872F;
			}

			.unread {
				background-color: #FFCBC1;
				color: #B00909;
			}
		}
	}
</style>