realty/virgo.wzfrontend/yui_wx/pages/messageList/messageList.vue

<template>
	<view class="message-list">
		<mescroll-empty :option="{tip:'暂无消息'}" v-if="list.length === 0">
		</mescroll-empty>
		<view class="message-item" :class="item.viewed ? 'viewed':''" v-for="item in list" :key="item.id"
			@click="clickMessage(item)">
			<view class="message-title">{{item.sendUserName}}{{item.message}}</view>
			<view class="message-content">
				<view class="content-item">
					<uni-icons class="sub-label-icon inherit-icons" type="calendar" size="16"></uni-icons>
					<text class="name">{{item.date}}</text>
				</view>
				<view class="content-item">
					<uni-icons class="sub-label-icon inherit-icons" type="person" size="16"></uni-icons>
					<text class="name">{{item.sendUserName}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		getMessageList,
		setMessageViewed
	} from '@/request/api/message.js'
	export default {
		data() {
			return {
				list: [],
				type: ''
			}
		},
		onLoad(body) {
			this.type = body.type;
			this.init()
		},
		methods: {
			init() {
				getMessageList(3, this.type).then(res => {
					if (res.code === 200) {
						this.list = res.data.map(node => {
							node = Object.assign(node, JSON.parse(node.json))
							return node;
						});
					}
				})
			},
			clickMessage(item) {
				setMessageViewed(item.id).then(res => {
					if (res.code === 200) {
						this.init();
					}
				})
				this.$navigateTo('/pages/messageDetail/messageDetail?id=' + item.id);
			}
		}
	}
</script>

<style lang="scss">
	.message-list {
		padding: 30rpx;

		.message-item {
			background: $uni-white;
			padding: 20rpx 30rpx;
			border-radius: 20rpx;
			margin-bottom: 30rpx;
		}

		.message-title {
			font-size: 32rpx;
			font-weight: 500;
			margin-bottom: 10rpx;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}

		.viewed {
			.message-title {
				color: $uni-secondary-color;
			}
		}

		.message-content {
			font-size: 12px;
			display: flex;
			justify-content: space-between;
		}

		.content-item {
			display: flex;
			align-items: center;
			height: 40rpx;

			.name {
				font-size: 24rpx;
				color: $uni-extra-color;
				margin-left: 8rpx;
			}

			.sub-label-icon {
				/* #ifdef H5 */
				color: $uni-extra-color !important;

				/* #endif */
				/* #ifdef MP-WEIXIN */
				text {
					color: $uni-extra-color !important;
				}

				/* #endif */
			}
		}
	}
</style>