消息一键已读

pages/gallery/message/message.vue

 <template>
 <template>
 	<view class="content">
 	<view class="content">
 		<titleBar title="消息中心"></titleBar>
 		<titleBar title="消息中心"></titleBar>
+		<view class="tab-content">
 			<v-tabs :tabs="tabs" :scroll="true" :value="current" @change="tabChange"></v-tabs>
 			<v-tabs :tabs="tabs" :scroll="true" :value="current" @change="tabChange"></v-tabs>
+			<view class="t-allRead" @click="clickAllRead">
+				<image src="../../../static/brush-ic.png" class="image"></image>
+				<text class="text">一键已读</text>
+			</view>
+		</view>
+
 		<view class="list-content" v-if="list.length>0">
 		<view class="list-content" v-if="list.length>0">
 			<view v-for="(item,index) in list" :key="index" class="list-item" @click="itemClick(index,item)">
 			<view v-for="(item,index) in list" :key="index" class="list-item" @click="itemClick(index,item)">
 				<view class="red-dot" v-if="!item.readStatus"></view>
 				<view class="red-dot" v-if="!item.readStatus"></view>
@@ -56,14 +63,25 @@
 				// })
 				// })
 			},
 			},
 			setRead(item) {
 			setRead(item) {
+				var list = []
+				list.push(item)
 				Api.setMessageRead({
 				Api.setMessageRead({
-					data: item
+					data: list
 				}).then((result) => {
 				}).then((result) => {
 					uni.navigateTo({
 					uni.navigateTo({
 						url: "/pages/gallery/messageDetail/messageDetail?message=" + JSON.stringify(item)
 						url: "/pages/gallery/messageDetail/messageDetail?message=" + JSON.stringify(item)
 					})
 					})
 				})
 				})
 			},
 			},
+			clickAllRead() {
+				var array = this.list.filter(item => !item.readStatus).map(item => item.readStatus = true)
+				console.log("处理完数组", array);
+				Api.setMessageRead({
+					data: array
+				}).then((result) => {
+					this.getMessages()
+				})
+			},
 			tabChange(e) {
 			tabChange(e) {
 				console.log("tab切换", e);
 				console.log("tab切换", e);
 				this.current = e
 				this.current = e
@@ -100,6 +118,37 @@
 		display: flex;
 		display: flex;
 		flex-direction: column;
 		flex-direction: column;
 
 
+		.tab-content {
+			display: flex;
+			flex-direction: row;
+			align-items: center;
+			justify-content: space-between;
+
+			.t-allRead {
+				display: flex;
+				background-color: #FFFFFF;
+				flex-direction: row;
+				padding: 10rpx 20rpx;
+				margin-right: 30rpx;
+				border-radius: 24rpx;
+				align-items: center;
+
+				image {
+					width: 26rpx;
+					height: 26rpx;
+				}
+
+				text {
+					font-family: "PingFang SC";
+					font-weight: 400;
+					font-size: 12px;
+					margin-left: 10rpx;
+					text-align: center;
+					color: #666;
+				}
+			}
+		}
+
 		.list-content {
 		.list-content {
 			display: flex;
 			display: flex;
 			flex-direction: column;
 			flex-direction: column;