mdapp/pages/user/mine/msg.vue

<template>
	<view class="page" style="background-color: #fff;">
		<view v-if="dataList.length == 0" class="empty-wrap"><u-empty text="暂无消息"></u-empty></view>
		<!-- 记录 -->
		<u-cell-group v-if="dataList.length > 0">
			<u-cell-item
				v-for="(item, index) in dataList"
				:key="index"
				:title="!item.body.content ? '点击查看内容' : item.body.content.length > 15 ? item.body.content.slice(0, 15) + '...' : item.body.content"
				:title-style="{ fontWeight: item.is_read ? '' : 'bold' }"
				:label="vk.pubfn.timeFormat(item._add_time, 'yyyy-MM-dd')"
				:value="item.is_read ? '已读' : '未读'"
				arrow
				@click="showDetailPopup(index)"
			></u-cell-item>
		</u-cell-group>

		<!-- 消息详情 -->
		<u-popup v-model="detailPopupShow" mode="center" width="80%" height="480rpx" border-radius="20" closeable close-icon-color="#fff">
			<view class="bwin-popup">
				<view class="popup-header">消息详情</view>
				<view v-if="detailPopupShow" class="popup-body">
					<text class="content" v-if="dataList[currentItemIndex].type == 'text'">{{ dataList[currentItemIndex].body.content }}</text>
					<u-image v-if="dataList[currentItemIndex].type == 'image'" :src="dataList[currentItemIndex].body.files" mode="widthFix" width="100%"></u-image>
					<view class="from-info">
						<view class="nickname">{{ dataList[currentItemIndex].fromUserInfo.nickname }}</view>
						<view class="date">{{ dataList[currentItemIndex].fromUserInfo._add_time | date('yyyy-mm-dd hh:MM:ss') }}</view>
					</view>
				</view>
			</view>
		</u-popup>

		<u-loadmore
			v-if="dataList.length > 0"
			marginTop="20"
			:line="true"
			:status="loadmore.status"
			:loading-text="loadmore.loadingText"
			:loadmore-text="loadmore.defaultText"
			:nomore-text="loadmore.nomoreText"
		/>
	</view>
</template>
<script>
var that;
export default {
	data() {
		return {
			dataList: [],
			detailPopupShow: false,
			currentItemIndex: 0,
			loadmore: {
				status: 'loadmore',
				loadingText: '努力加载中',
				defaultText: '轻轻上拉 查看更多',
				nomoreText: '实在没有了',
				currentPage: 1
			}
		};
	},
	onLoad() {
		that = this;

		vk.callFunction({
			url: 'client/agent/kh/getMsgList',
			title: '请求中...',
			needAlert: false
		}).then(res => {
			if (res.list.length < 10) {
				that.loadmore.status = 'nomore';
			}
			that.dataList = res.list;
		});
	},
	onReachBottom() {
		if (that.loadmore.status == 'nomore') {
			return;
		}
		that.loadmore.currentPage++;
		vk.callFunction({
			url: 'client/agent/kh/getMsgList',
			title: '请求中...',
			needAlert: false,
			data: {
				pageIndex: that.loadmore.currentPage
			}
		}).then(res => {
			if (res.list.length < 10) {
				that.loadmore.status = 'nomore';
			}
			that.dataList = that.dataList.concat(res.list);
		});
	},
	methods: {
		showDetailPopup(index) {
			that.currentItemIndex = index;
			that.detailPopupShow = true;
			if (!that.dataList[index].is_read) {
				vk.callFunction({
					url: 'client/agent/kh/updateMsgStatus',
					needAlert: false,
					data: {
						_id: that.dataList[index]._id
					}
				}).then(res => {
					that.dataList[index].is_read = true; // 标记已读
				});
			}
		}
	}
};
</script>
<style lang="scss">
.popup-body {
	.content {
		font-size: $u-p;
		display: flex;
		padding: 20rpx;
		background-color: $u-bg-color;
		border-radius: 10rpx;
		width: 100%;
	}

	.from-info {
		padding-top: 20rpx;
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		font-size: $u-p1;

		.nickname {
			color: $u-main-color;
		}

		.date {
			color: $u-content-color;
		}
	}
}
</style>