crm-app-vue3/pages/message/index.vue

<template>
	<view class="message_wrap">
		<view class="message_list" v-if="isShow">
			<view class="message_item" v-for="(item,index) in list" :key="index" @click="handleToList(item)">
				<view class="item_left">
					<image :src="item.icon" mode=""></image>
				</view>
				<view class="item_center">
					<view class="item_center_top">
						{{item.title}}
					</view>
					<view class="item_center_bottom">
						{{item.message}}
					</view>
				</view>
				<view class="item_bottom">
					<text class="informNum" v-if="item.informNum">{{item.informNum}}</text>
					<u-icon name="arrow-right" color="#aaa"></u-icon>
				</view>
			</view>
		</view>
		<u-loading-page :loading="true" v-else></u-loading-page>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isShow: false,
				list: []
			}
		},
		onPullDownRefresh() {
			uni.stopPullDownRefresh();
			this.getList();
		},
		methods: {
			handleToList(item) {
				uni.navigateTo({
					url: "/pages/messageList/index?type=" + item.type,
				})
			},
			async getList() {
				const {
					data
				} = await uni.$u.api.getAppMessageList();
				this.list = [{
					icon: "/static/message/icon-systemxx.png",
					title: "系统消息",
					message: data && data.lastSystem ? data.lastSystem.replace(/<\/?.+?>/g, "").replace(/ /g,
						"") : "",
					type: 4,
					informNum: data && data.unReadSysMessage ? data.unReadSysMessage : 0,
				}, {
					icon: "/static/message/icon-systemgg.png",
					title: "系统公告",
					message: data && data.lastAnnouncement ? data.lastAnnouncement.replace(/<\/?.+?>/g, "")
						.replace(/ /g, "") : "",
					type: 1,
					informNum: data && data.unReadAnnouncement ? data.unReadAnnouncement : 0,
				}, {
					icon: "/static/message/icon-systemxx.png",
					title: "系统通知",
					message: data && data.lastNotice ? data.lastNotice.replace(/<\/?.+?>/g, "").replace(/ /g,
						"") : "",
					type: 2,
					informNum: data && data.unReadNotice ? data.unReadNotice : 0,
				}];
				this.isShow = true;
			}
		},
		mounted() {
			this.getList();
		},
	}
</script>

<style lang="scss" scoped>
	.message_wrap {
		padding: 20rpx 0;

		.message_list {
			background: #ffffff;

			.message_item {
				display: flex;
				justify-content: space-between;
				align-items: center;
				padding: 36rpx 30rpx;
				border-bottom: 2rpx solid #ddd;

				.item_left {
					margin-right: 20rpx;

					image {
						width: 60rpx;
						height: 60rpx;
					}
				}

				.item_center {
					width: calc(100% - 100rpx);

					.item_center_top {
						font-size: 30rpx;
					}

					.item_center_bottom {
						font-size: 24rpx;
						color: #999999;
						margin-top: 14rpx;
						overflow: hidden;
						text-overflow: ellipsis;
						white-space: nowrap;
					}
				}

				.item_bottom {
					display: flex;
					align-items: center;

					.informNum {
						display: inline-block;
						line-height: 36rpx;
						width: 36rpx;
						background: #ff5e5e;
						color: #ffffff;
						border-radius: 50%;
						text-align: center;
						font-size: 22rpx;
						margin-right: 10rpx;
					}

					::v-deep .u-icon__icon {
						font-size: 30rpx !important;
					}
				}
			}
		}
	}
</style>