siyu_app/pages/message/index.vue

<template>
	<view class="content">
		<u-navbar title="消息" titleStyle="font-weight:620;font-family: PingFang SC" safeAreaInsetTop fixed placeholder leftIcon=" " :autoBack="false">
			<view class="u-nav-slot" slot="right">
				<text class="rightBtn" @click="setAllRead()">清除未读</text>
			</view>
		</u-navbar>
		
		<view class="u-demo">
		<!-- <msg-pop :isShowMsgPop="isShowMsgPop" @clickMask='clickMask' @clickChat='clickChat' @clickScan='clickScan'></msg-pop> -->
		    <mescroll-body ref="mescrollRef" @init="mescrollInit" top="0" bottom="20" :down="downOption" :up="upOption" @down="downCallback" @up="upCallback" @emptyclick="emptyClick">
				 <!-- 列表 -->
			     <uni-swipe-action>
				 	<uni-swipe-action-item  v-for="(item,index) in dataList" :key="index" :class="index == 0?'action-item active':'action-item'" :disabled="true">		
					  <view class="msg-list" @tap='clickListItem(index)' v-if="item.content != '暂无消息'">
				 		  <view class="msg-icon">
							  
							    <image v-if="item.msgType==1" src="@/static/images/message/regular_client_icon_80.png" mode="widthFix"></image>
							    <image v-else-if="item.msgType==2" src="@/static/images/message/Timingvideo.png" mode="widthFix"></image>
								<image v-else-if="item.msgType==3" src="@/static/images/message/budget_icon_80.png" mode="widthFix"></image>
							    <image v-else src="@/static/images/message/announcement_icon_100.png" mode="widthFix"></image>
							  
								<!-- <image v-if="item.msgType==1" src="@/static/images/message/regular_client_icon_80.png" mode="widthFix"></image>
								<image v-else-if="item.msgType==3" src="@/static/images/message/budget_icon_80.png" mode="widthFix"></image>
								<image v-else src="@/static/images/message/announcement_icon_100.png" mode="widthFix"></image> -->
				 		 </view>
				 		
						  <view class="msg-info">
								<view class="top u-f-ac u-f-jsb">
									<text class="title">{{item.msgTypeName}}</text>
									<text class="timer">{{ $isEmpty(item.createTime)?"":$formatDate(item.createTime)}}</text>
								</view>
								<view class="bottom">
									<view class="frist-msg">
										{{$isEmpty(item.title)?"暂无内容":item.title}}
									</view>
									<view class="msg-tag u-f-ajc" v-show="item.total>0">{{item.total}}</view>
								</view>
								<view class="line"></view>
								<!-- <u-line color="#EDEEEF" style="margin-top: 30rpx;"></u-line> -->
						  </view>
					  </view>
					  
					  <template v-slot:right>
					  		<view class="item-right-btn-box">
					  			<view class="btn dele" @click="doRead(index)">
					  				<text class="text">已读</text>
					  			</view>
					  		</view>
					  </template>
					  
				   </uni-swipe-action-item>
				</uni-swipe-action>
				
		    </mescroll-body>
		</view>
		
	</view>
</template>

<script>
	import MescrollMixin from "@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js";
	import mescrollBody from "@/uni_modules/mescroll-uni/components/mescroll-body/mescroll-body.vue";
	import { getMsg,getMyCrmMsgList,doRead,setAllRead } from "@/api/message.js";
	export default {
		mixins: [MescrollMixin], // 使用mixin
		components: { 
		    mescrollBody,
		 },
		data() {
			return {
				downOption: {   //下拉刷新
				 	auto: true // 不自动加载 (mixin已处理第一个tab触发downCallback)
				},
				upOption: {   //上拉加载
				 	auto: false, // 不自动加载
				 	page: {
				 		num: 0, // 当前页码,默认0,回调之前会加1,即callback(page)会从1开始
				 		size: 10 // 每页数据的数量
				 	},
				 	noMoreSize: 5, //如果列表已无数据,可设置列表的总数量要大于半页才显示无更多数据;避免列表数据过少(比如只有一条数据),显示无更多数据会不好看; 默认5
				 	empty: {
				 		tip: '~ 空空如也 ~' // 提示
				 		// btnText: '去看看'
				 	}
				},
				dataList: [
					 // {"content":"明天上午8点电话预约","un_read_count":0,"scene_name":"用户消息","create_time":"2023-01-05 09:48","imgSrc":"regular_client_icon_80.png"},
					 // {"content":"张三已认领用户弹棉花","un_read_count":0,"scene_name":"系统消息","create_time":"2022-12-28 12:13","imgSrc":"announcement_icon_100.png"},
				     // {"content":"这周三有一个随访预约","un_read_count":0,"scene_name":"随访消息","create_time":"2022-12-15 15:39","imgSrc":"followUp.png"},
				]
			}
		},
		computed: {
			slotRightCurrent() {
				return this.slotRight ? 0 : 1;
			}
		},
		onShow() {
			
		},
		onLoad() {
			let that=this;
			uni.$on('refreshMessage', function(index) {
				 let item=that.dataList[index];
				 item.isRead=1;
				 that.dataList.splice(index,1,item);//删除
			});
		},
		onUnload(){
			uni.$off('refreshMessage');
		},
		methods: {
			/*下拉刷新的回调 */
			downCallback() {
				let that=this;
				setTimeout(function() {
					that.mescroll.resetUpScroll();
				}, 500);
			},
			/*上拉加载的回调*/
			upCallback(page) { 
				getMsg().then(res => {
						if(res.code==200){
							setTimeout(()=>{
								this.mescroll.endByPage(res.counts.length, 1);
								if(page.num == 1) this.dataList = []; //如果是第一页需手动制空列表
								this.dataList=this.dataList.concat(res.counts); //追加新数据
							},100);
						}else{
							uni.showToast({title: res.msg,icon:"none"});
							this.mescroll.endErr();
						}
					},
					rej => {}
				).catch(()=>{
					//联网失败, 结束加载
					this.mescroll.endErr();
				});
		    },
			//点击空布局按钮的回调
			emptyClick(){
				this.mescroll.resetUpScroll();
			},
		    //消息item点击
			clickListItem(index) {
				//this.doRead(index);
				if (this.dataList[index].msgType == 1) {
					this.$Router.push({
						name: 'message-detail',
						query: {
							itemData: this.dataList[index],
							index:index,
						}
					});
				}
			},
			doRead(index){
					let item=this.dataList[index];
					//uni.showLoading({title:""});
					let that=this;
					doRead(item.msgType).then(res => {
								if(res.code==200){
								   uni.showToast({ title: "操作成功" });
								   item.isRead=1;
								   that.dataList.splice(index,1,item);//删除
								}else{
									uni.showToast({title: res.msg,icon:"none"});
								}
							},
							rej => {}
					).catch(()=>{
										
					});
			},
			setAllRead(){
			   let that=this;
			   uni.showModal({
				   title: '系统提示',
				   content: '确定清除未读吗',
				   cancelText:'确定',
				   confirmText:'取消',
				   success: function (res) {
					   if (res.cancel) {
						   that.setAllReadPost();
					   } else if (res.confirm) {
						   console.log('用户点击取消');
					   }
				   }
			   });
			},
			setAllReadPost(){
				uni.showLoading({title:""});
				let that=this;
				setAllRead().then(res => {
							if(res.code==200){
							   uni.showToast({ title: "操作成功" });
							   this.mescroll.resetUpScroll();
							}else{
								uni.showToast({title: res.msg,icon:"none"});
							}
						},
						rej => {}
				).catch(()=>{
						 uni.showToast({title:"服务器请求超时",icon:"error"});			
				});
			}
			
		}
	}
</script>

<style lang="scss" scoped>
	.u-demo{
		background-color: #fff;
	}
	.msg-list {
		// padding-left: 30rpx;
		display: flex;
		align-items: center;
		margin-top: 26rpx;
		justify-content: flex-start;
		flex: 1;
		margin-left: 30rpx;
		margin-right: 30rpx;
		padding-right: 0;
		height: 57px;
		
		.msg-icon {
			position: relative;
			margin-bottom: 44rpx;
	        image {
				width: 80rpx;
				height: 80rpx;
				margin-right: 30rpx;
			}
		}
		
		.msg-tag {
			width: 36rpx;
			height: 36rpx;
			text-align: center;
			font-size: 24rpx;
			font-family: PingFang SC;
			font-weight: bold;
			color: #FFFFFF;
			background: #FF1D1D;
			border-radius: 50%;
			margin-top: 10rpx;
			// position: absolute;
			// right: 18rpx;
			// top: 0;
		}
		
		.msg-info {
			display: flex;
			flex-direction: column;
			justify-content: space-between;
			flex: 1;
			
			//border-bottom: 2rpx solid #EDEEEF;
			margin: 0rpx 0rpx 26rpx 0;
			.bottom{
				display: flex;
				flex-direction: row;
				margin-bottom: 26rpx;
			}
			.title {
				font-size: 30rpx;
				font-family: PingFang SC;
				//font-weight: 620;
				color: #232323;
			}
			.timer {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
			}
			.frist-msg {
				font-size: 24rpx;
				font-family: PingFang SC;
				font-weight: 500;
				color: #999999;
				overflow: hidden;
				text-overflow: ellipsis;
				white-space: nowrap;
				margin-top: 16rpx;
				width: calc(100% - 50rpx);
			}
		    
			.line{
				background: #EDEEEF;
				// margin-top: 20rpx;
				width: 100%;
				height: 0.5px;
			}
		}
	}
	
	.action-item{
		box-sizing: border-box;
		&:last-child .uni-swipe::after{
			display: none;
		}
		&.active .uni-swipe::before{
			background: #FF5C03;
			border: 4upx solid #FF5C03;
		}
		.uni-swipe{
			overflow: inherit !important;
			position: relative;
			&::after{
				content: "";
				width: 4upx;
				height: calc(100% + 20upx);
				background: #7B7B7B;
				opacity: 0.1;
				position: absolute;
				top: 56upx;
				left: 124upx;
				z-index: 9;
			}
			&::before{
				content: "";
				width: 20upx;
				height: 20upx;
				background: #FFFFFF;
				border: 4upx solid #DDDDDD;
				border-radius: 50%;
				position: absolute;
				top: 46upx;
				left: 112upx;
				z-index: 99;
			}
		}
		
		
	   .item-right-btn-box{
			display: flex;
			align-items: center;
			margin-bottom: 20upx;
			.btn{
				width: 120upx;
				text-align: center;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				.text{
					font-size: 30upx;
					font-family: PingFang SC;
					font-weight: 500;
					color: #FFFFFF;
				}
				&.edit{
					background: #FF5C03;
				}
				&.dele{
					background: #EF910C;
					border-radius: 0 10upx 10upx 0;
				}
			}
		}
	}
	
	.u-nav-slot {
		@include flex;
		align-items: center;
		justify-content: space-between;
		border-width: 0.5px;
		border-radius: 100px;
		border-color: $u-border-color;
		padding: 3px 7px;
		opacity: 0.8;
		.rightBtn{
			color: #999;
			font-size: 26rpx;
			background: #fff;
			border-width: 0;
		}
	}
	.header-view {
		padding: 0 40rpx;
		font-size: 36rpx;
		font-weight: bold;
		color: #0A0204;
		view {
			width: calc(670rpx/3);
			height: 100rpx;
			text-align: center;
			line-height: 88rpx;
		}
	
		image {
			width: 40rpx;
			height: 40rpx;
		}
	
		view:last-child {
			text-align: right;
		}
	}
	
</style>