ajy/code/ajyApp/pages/my/msg/msg.nvue

<template>
	<view class="page">
		<!-- 状态栏占位 -->
		<view class="status-bar" :style="{height: statusBarHeight + 'px'}"></view>
		<!-- 自定义导航栏 -->
		<view class="nav-bar">
			<image src="/static/public/backBlack.png" mode="aspectFill" class="back-img" @click="goBack"></image>
			<text class="nav-title">消息中心</text>
			<view class="nav-right"></view>
		</view>

		<!-- 消息列表 -->
		<list class="msg-list" v-if="list.length > 0">
			<cell v-for="(itm, index) in list" :key="index">
				<view class="msg-item" @click="toDetail(itm)">
					<image class="msg-avatar" :src="itm.avatar || '/static/144x144.png'" mode="aspectFill"></image>
					<view class="msg-info">
						<view class="msg-top-line">
							<view class="msg-name-wrap">
								<text class="msg-name">{{itm.name || itm.phone || '系统'}}</text>
								<view class="msg-unread" v-if="itm.readFlag == '0'"></view>
							</view>
							<text class="msg-time">{{itm.createTime || ''}}</text>
						</view>
						<text class="msg-content">{{itm.content || '向您推荐了方案'}}</text>
					</view>
				</view>
			</cell>
		</list>

		<!-- 空状态 -->
		<view class="empty-wrap" v-else>
			<text class="empty-text">暂无消息</text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			statusBarHeight: 44,
			list: []
		}
	},
	onShow() {
		const sysInfo = uni.getSystemInfoSync()
		this.statusBarHeight = sysInfo.statusBarHeight || 44
		this.init()
	},
	onPullDownRefresh() {
		this.list = []
		this.init()
	},
	methods: {
		goBack() {
			uni.navigateBack()
		},
		toDetail(row) {
			// TODO: 后续对接后台接口
			// uni.navigateTo({ url: '/pages/detail/detail?id=' + row.dataId })
		},
		init() {
			// TODO: 后续对接后台接口获取消息列表
			uni.stopPullDownRefresh()
		}
	}
}
</script>

<style>
.page {
	flex: 1;
	background-color: #FFFFFF;
}
.status-bar {
	background-color: #FFFFFF;
}
.nav-bar {
	flex-direction: row;
	align-items: center;
	justify-content: space-between;
	height: 88rpx;
	padding-left: 54rpx;
	padding-right: 54rpx;
	background-color: #FFFFFF;
}
.back-img {
	width: 50rpx;
	height: 50rpx;
}
.nav-title {
	font-weight: bold;
	font-size: 32rpx;
	color: #545F71;
}
.nav-right {
	width: 50rpx;
	height: 50rpx;
}
/* 消息列表 */
.msg-list {
	flex: 1;
}
.msg-item {
	flex-direction: row;
	align-items: center;
	margin-left: 38rpx;
	margin-right: 38rpx;
	padding-top: 20rpx;
	padding-bottom: 20rpx;
	border-bottom-width: 1px;
	border-bottom-color: #EEF1F4;
	border-bottom-style: solid;
}
.msg-avatar {
	width: 100rpx;
	height: 100rpx;
	border-radius: 100rpx;
	margin-right: 16rpx;
}
.msg-info {
	flex: 1;
}
.msg-top-line {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
	margin-bottom: 6rpx;
}
.msg-name-wrap {
	flex-direction: row;
	align-items: center;
}
.msg-name {
	font-size: 32rpx;
	color: #545F71;
	line-height: 44rpx;
	margin-right: 10rpx;
}
.msg-unread {
	width: 10rpx;
	height: 10rpx;
	background-color: #F65252;
	border-radius: 10rpx;
}
.msg-time {
	font-size: 26rpx;
	color: #9BA5B7;
	line-height: 44rpx;
}
.msg-content {
	font-size: 26rpx;
	color: #9BA5B7;
	line-height: 44rpx;
}
/* 空状态 */
.empty-wrap {
	flex: 1;
	align-items: center;
	padding-top: 200rpx;
}
.empty-text {
	font-size: 28rpx;
	color: #9BA5B7;
}
</style>