uni-zhihuikuangshan/pages/my/message-reminder/message-reminder.vue

<template>
	<view class="content">
		<view class="search"></view>
		<view class="list">
			<view class="item" v-for="(item,index) in list" :key="index" @click="read(item)">
				<view class="top">
					<view class="left">
						<view class="name">{{item.title}}</view>
						<view class="time">{{item.created_at}} {{item.send_user}}</view>
					</view>
					<view class="right">
						<view class="tip" v-if="item.read == 0">未读</view>
						<view class="tip" v-if="item.read == 1" style="background-color: #4CD964;">已读</view>
					</view>
				</view>
				<view class="inner">
					<!-- {{item.content}} -->
					<view v-html="item.content"></view>
				</view>
			</view>
		</view>
		<view class="bottom">
			<view class="title" @click="get_all_list()">所有消息</view>
			<view class="title" @click="get_unread_list('unread')">未读消息</view>
			<view class="title" @click="read_all()">全部标已读</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				type:"",
				page:1,
				list: []
			};
		},
		onLoad() {
			this.get_message_list(this.page)
		},
		onShow() {
			this.page = 1,
			this.type = ""
			this.list = []
			this.get_message_list(this.page)
			this.$forceUpdate()
		},
		onReachBottom(){
			this.page++
			// console.log(this.page)
			this.get_message_list()
		},
		methods: {
			get_message_list() {
				uni.showLoading()
				this.$api.message_list({
					type: this.type,
					page:this.page,
					page_size:10
				}).then((res) => {
					console.log(res.data.data.data)
					// this.list = res.data.data.data
					this.list = this.list.concat(res.data.data.data)
					uni.hideLoading()
				})
			},
			read(item) {
				this.$api.message_read({
					id:item.id
				}).then((res)=>{
					console.log(res)
					this.get_message_list()
				})

				uni.navigateTo({
					url: "message-detail/message-detail",
					success: function(res) {
						// 通过eventChannel向被打开页面传送数据
						res.eventChannel.emit('acceptDataFromOpenerPage', {
							data: item
						})
					}
				})
			},
			read_all() {
				uni.showToast({
					icon: "none",
					title: "全部已读"
				})
				this.$api.message_read({

				}).then((res) => {
					console.log(res)
					this.page = 1,
					this.type = ""
					this.list = []
					this.get_message_list()
				})
			},
			get_all_list() {
				this.page = 1,
				this.type = ""
				this.list = []
				this.get_message_list()
			},
			get_unread_list() {
				this.page = 1,
				this.type = "unread"
				this.list = []
				this.get_message_list()
			}
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f1f1f1;
	}

	.content {
		width: 749rpx;
	}

	.list {
		width: 749rpx;
		box-sizing: border-box;
		padding: 24rpx;

		margin-bottom: 80px;

		.item {
			width: 700rpx;
			background-color: #FFFFFF;
			box-sizing: border-box;
			padding: 10px 20rpx;

			margin-bottom: 10px;

			.top {
				width: 660rpx;
				display: flex;
				justify-content: space-between;

				.left {
					width: 540rpx;

					.name {
						line-height: 25px;
						overflow: hidden;
						/*超出部分隐藏*/
						white-space: nowrap;
						/*不换行*/
						text-overflow: ellipsis;
						/*超出部分文字以...显示*/
					}

					.time {
						line-height: 30px;
						font-size: 14px;
						color: #999;
					}
				}

				.right {
					width: 88rpx;

					.tip {
						text-align: center;
						line-height: 25px;
						background-color: #DD524D;
						font-size: 12px;
						color: #FFFFFF;
					}
				}
			}

			.inner {
				width: 660rpx;
				text-indent: 2em;
				font-size: 14px;
				line-height: 1.5;

				overflow: hidden;
				word-break: break-all;
				text-overflow: ellipsis;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 4;
			}
		}
	}

	.bottom {
		background-color: #FFFFFF;
		position: fixed;
		left: 0;
		bottom: 0;

		border-top: 1px solid #eee;
		height: 50px;
		display: flex;
		justify-content: space-between;
		align-items: center;

		.title {
			width: 249rpx;
			padding: 5px 0;
			text-align: center;
			border-right: 1px solid #eee;
		}

		.title:last-child {
			border-right: none;
		}
	}
</style>