uniappshell/pages/message/message.vue

<template>
	<view class="message-page custom_status_bar">
		<view class="nav">
			<view class="back" @click="back">
				<uni-icons type="back" size="20"></uni-icons>				
			</view>
			<view class="title">消息</view>
			<template>
				<view @click="clickRight" class="nav-right" v-if="status===0">
					<image class="icon" src="/static/message/nav1.png" mode="widthFix"></image>
					<text>清除未读</text>
				</view> 
				<view class="nav-right read" v-else>
					<image class="icon" src="/static/message/nav2.png" mode="widthFix"></image>
					<text>全部已读</text>
				</view> 
			</template>
		</view>	
		<view class="container">
			<view class="message-box" v-for="(item,index) in items" :key="index">
				<uni-swipe-action>
					<uni-swipe-action-item :right-options="options" 
						:left-options="options"
						 @click="onClick($event,item)" 
						 @change="swipeChange">
							<uni-list-chat 
							:avatar-circle="true" 
							:title="item.msgFrName||'发件人'"
							:avatar="item.msgFrAvatar||defaultAvatar" 
							badge-positon="left" :badge-text="item.isRead===0?'dot':''"
							:note="item.msgContent"
							:clickable="true"
							@click="handleMessage(item)"
							>
								<view class="chat-custom-right">
									<text class="chat-custom-text">{{formateDate(item.msgTime)}}</text>
				<!-- 					<view class="badge-box">
										<uni-badge class="uni-badge-left-margin" :text="1" />
									</view> -->
								</view>			
							</uni-list-chat>					
					</uni-swipe-action-item>
				</uni-swipe-action>
			</view>
		</view>
	</view>
</template>

<script>
	
	import{
		parseTime,
		MessageTimeFormat
	} from '@/libs/index.js'
	import { putAllReadStatus, getMsgReceivedByPage, deleteMsgById, putReadStatus, getMsgById } from '@/api/system/msgApi'
	export default {
		data() {
			return {
				status:0,
				conditions: {
					page: 1,
					limit: 10
				},
				total:0,
				defaultAvatar:"/static/components/avatar.png",
				items:[],
				options:[
					{
						id:"1",	
						text: '取消',
						style: {
							backgroundColor: '#007aff'
						}
					}, {
						id:"2",
						text: '删除',
						style: {
							backgroundColor: '#dd524d'
						}
					}
				]
			}
		},
		onShow() {
			this.getData()
		},
		methods: {
			back(){
				uni.navigateBack()
			},
			clickRight(){
				putAllReadStatus().then(() => {
				  this.status=1	
				  this.conditions.page=1
				  this.conditions.limit=10
				  this.total=0
				  this.items=[]
				  this.getData()
				})
			},
			getData(){
				let items=JSON.parse(JSON.stringify(this.items))
				getMsgReceivedByPage(this.conditions).then((res)=>{
					this.items=items.concat(res.data)
					this.total=res.total
				})
			},
			handleMessage(item){
			  if (item.isRead === 0) {
				putReadStatus(item.msgId).then(() => {
					item.isRead=1
					uni.showToast({
						icon:"none",
						title:"已读"
					})
				})
			  }
			},
			onClick(e,data){
			  deleteMsgById(data.msgId).then(() => {
				  this.conditions.page=1
				  this.conditions.limit=10
				  this.total=0
				  this.items=[]
				  this.getData()
			  })
			},
			// swipeChange(e,index){
			//   console.log('当前状态：'+ e +'，下标：' + index)
			// },
			formateDate(val){
				return MessageTimeFormat(parseTime(val))
			}
		},
		onReachBottom() {
			if(this.total>=this.conditions.page*this.conditions.limit){
				this.conditions.page++
				this.getData()
			}
		}
	}
</script>

<style lang="scss" scoped>
.message-page{
	/* #ifdef MP-WEIXIN */
	padding-top: 30px;
	/* #endif */
	background-color: rgba(243, 244, 247, 1);
	box-sizing: border-box;
	min-height: 100vh;
	padding-bottom: 50rpx;
	box-sizing: border-box;
	.nav{
		height: 44px;		
	    display: flex;	
		align-items: center;
	    padding: 0 10px;
	    height: 44px;
	    font-size: 12px;	
		color: rgb(51, 51, 51);
		background-color: rgb(255, 255, 255);
		.back{
			width: 140rpx;
		}
		.title{
			flex: 1;
			text-align: center;
			font-size: 14px;
			overflow: hidden;
			white-space: nowrap;
			text-overflow: ellipsis;
		}
		.nav-right{
			display: flex;
			justify-items: center;
			align-items: center;
			color: rgba(151, 151, 151, 1);
			&.read{
				color: rgba(42, 91, 238, 1);
			}
			.icon{
				width: 44rpx;
			}
		}
	}	
	.container{
		margin-top: 16rpx;
		.chat-custom-text{
			font-size: 26rpx;
			color: rgba(151, 151, 151, 1);
		}
		.badge-box{
			text-align: right;
		}
	}
}

</style>