hongze_yb_xcx/pages-user/messageList.vue

<template>
	<view class="message-page">
		<van-sticky>
			<view class="flex headar">
				<view class="flex tab">
					<view 
						:class="['tab-item',{act: default_tab === tab.type}]"
						v-for="tab in tabs"
						:key="tab.type"
						@click="switchTabHandle(tab.type)"
					>
						{{ tab.label }}
					</view>
				</view>
				<text class="right-txt" v-if="messageList.length" @click="allReadHandle">一键已读</text>
			</view>
		</van-sticky>
		<view class="messlist-cont" v-if="messageList.length">
			<view 
				class="message-item"
				@touchstart="drawStart(item,$event)" 
				@touchmove="drawMove" 
				@touchend="drawEnd" 
				v-for="(item,index) in messageList"
				:key="item.msg_id"
				:data-index="index" 
				:style="'right:'+item.right+'rpx'"
			>
				<view class="info">
					<view class="left flex">
						<image :src="item.img" mode="" class="avatar"/>
						<view class="content">
							<view class="text_oneLine" style="width: 500rpx">{{item.content_first}}</view>
							<view class="msg text_oneLine">{{item.content_second}}</view>
							<view class="time">
								{{item.create_time | formatTime}}
							</view>
						</view>
					</view>
					<text class="read-ico" v-if="!item.is_read"/>
					<view class="detail-ico" @click="toReportDetail(item)">
						查看详情<van-icon name="arrow"/>
					</view>
				</view>
				<view class="action" @click.stop="delMessageHandle(item,index)">删除</view>
			</view>
		</view>
		<view class="nodata" v-else>
			<image src="@/static/nodata.png" mode="" class="nodata-img"/>
			<view>暂时没有新的消息哦</view>
			<view>快去留言试试吧～</view>
		</view>
	</view>
</template>

<script>
	import * as $message from '@/api/message.js'
	const dayjs = require('../utils/dayjs.min.js');
	dayjs.locale('zh-cn') 
	export default {
		filters: {
			formatTime(val) {
				const time = new Date(val);
				const now = new Date();
				const infer_time = parseInt((now.getTime() - time.getTime())/1000/60/60/24);//时间差
				const infer_year = parseInt(now.getFullYear() - time.getFullYear());// 年限差
	
				//当天
				if(infer_time === 0) {
					return dayjs(time).format('HH:mm:ss')
				} else if(infer_time === 1) {
					return `昨天 ${dayjs(time).format('HH:mm:ss')}`
				} else if(infer_time === 2) {
					return `前天 ${dayjs(time).format('HH:mm:ss')}`
				} else if( infer_time >=3 && infer_time <=7 ) { //周内
					return dayjs(time).format('ddd HH:mm:ss')
				} else if(infer_year === 0) {
					return dayjs(time).format('MM-DD HH:mm:ss')
				} else {
					return dayjs(time).format('YYYY-MM-DD HH:mm:ss')
				}
			}
		},
		data() {
			return {
				default_tab: 0,
				tabs: [
					{
						label: '全部消息',
						type: 0
					},{
						label: '回复',
						type: 1
					},{
						label: '精选',
						type: 2
					},
				],
				page_no: 1,
				messageList: [],
				isHaveMore: true,
				delBtnWidth: 176,
				startX: 0
			};
		},
		methods: {
			/* 切换tab */
			switchTabHandle(type) {
				this.default_tab = type;
				this.page_no = 1;
				this.getMessageList();
			},
			
			/* 获取列表 */
			async getMessageList() {
				const { code,data } = await $message.apiMessageList({ 
					type: this.default_tab,
					current_index: this.page_no,
					page_size: 20
				})
				if( code!==200 ) return
				
				const { list,paging } = data;
				
				this.isHaveMore = this.page_no >= paging.pages ? false : true;
				this.messageList = this.page_no === 1 ? (list || []) : [...this.messageList,...list];
			},
			
			/* 一键已读 */
			async allReadHandle() {
				const { code } = await $message.apiReadAll({ type: this.default_tab })
				if( code!==200 ) return
				
				this.page_no = 1;
				this.getMessageList();
				
			},
			
			/* 删除消息 */
			delMessageHandle({msg_id},index) {
				const _this = this;
				uni.showModal({
					title: "",
					content: "确定要删除该留言吗？",
					confirmColor: "#6784A7",
					success: async function(res) {
						if(res.confirm) {
							const { code } = await $message.apiDelMessage({ msg_id })
							if( code!==200 ) return
							
							uni.showToast({
							  title: '删除成功',
							  icon: 'none'
							})
							_this.messageList.splice(index,1)
						}
					}
				})
			},
			
			onPullDownRefresh() {
			    this.page_no = 1;
					this.getMessageList()
			    setTimeout(() => {
			        uni.stopPullDownRefresh()
			    }, 1500)
			},
			
			onReachBottom() {
			    if (!this.isHaveMore) return
			    this.page_no++
			    this.getMessageList()
			},
			
			/* 到报告详情 */
			async toReportDetail( item ) {
				const { report_chapter_id,report_id,is_read,msg_id  } = item;
				if(!is_read) {
					const { code } = await $message.apiReadOneMessage({ msg_id })
					item.is_read = 1;					
				}
				
				report_chapter_id 
				? uni.navigateTo({url: `/pages-report/chapterDetail?chapterId=${report_chapter_id}&fromPage=message`})
				: uni.navigateTo({url:`/pages-report/reportDetail?reportId=${report_id}&fromPage=message`})
			},
			
			async drawStart(item,e) {
				let touch = e.touches[0];
				this.startX = touch.clientX;
			},
			//触摸滑动
			drawMove(e) {
				// console.log("滑动");
				for (let index in this.messageList) {
					this.$set(this.messageList[index],'right',0);
				}
				let touch = e.touches[0];
				let item = this.messageList[e.currentTarget.dataset.index];
				let disX = this.startX - touch.clientX;
				if (disX >= 20) {
						if (disX > this.delBtnWidth) {
							disX = this.delBtnWidth;
						}
						this.$set(this.messageList[e.currentTarget.dataset.index],'right',disX);
				} else {
					this.$set(this.messageList[e.currentTarget.dataset.index],'right',0);
				}
			},
			//触摸滑动结束
			drawEnd(e) {
				let item = this.messageList[e.currentTarget.dataset.index];
				if (item.right >= this.delBtnWidth / 2) {
					this.$set(this.messageList[e.currentTarget.dataset.index],'right',this.delBtnWidth);
				} else {
					this.$set(this.messageList[e.currentTarget.dataset.index],'right',0);
				}
			},
		},
		onShow() {
			this.getMessageList()
		}
	}
</script>

<style lang="scss" scoped>
.message-page {
	padding: 40rpx 0;
	width: 750rpx;
	overflow-x: hidden;
	.headar {
		padding:  0 34rpx 20rpx;
		justify-content: space-between;
		font-size: 32rpx;
		color: #E3B377;
		background-color: #fff;
		
		.right-txt {
			font-size: 26rpx;
		}
		.tab-item {
			color: #333;
			margin-right: 50rpx;
			&.act {
				color: #E3B377;
				position: relative;
				&::after {
					content: '';
					position: absolute;
					bottom: -20rpx;
					left: 20%;
					width: 50%;
					height: 4rpx;
					background-color: #E3B377;
				}
			}
		}
	}

	.messlist-cont {
		.message-item {
			position: relative;
			margin: 30rpx 0;
			padding: 0 30rpx;
			.info {
				position: relative;
			}
			.left {
				.avatar {
					width: 65rpx;
					height: 65rpx;
					margin-right: 20rpx;
				}
				.content {
					color: #666;
					font-size: 28rpx;
					flex: 1;
					.msg {
						width: 500rpx;
						color: #333;
						font-size: 30rpx;
						margin: 10rpx 0;
					}
					.time {
						color: #999;
						font-size: 24rpx;
					}
				}
			}
			.read-ico {
				width: 26rpx;
				height: 26rpx;
				border-radius: 50%;
				position: absolute;
				right: 0;
				top: 50%;
				transform: translateY(-50%);
				background-color: #D62020;
			}
			
			.detail-ico {
				position: absolute;
				right: 0;
				bottom: 0;
				color: #666;
			}
		
			.action {
				width: 176rpx;
				height: 100%;
				display: flex;
				align-items: center;
				justify-content: center;
				background-color: #E86F6F;
				color: #fff;
				position: absolute;
				right: -176rpx;
				top: 0;
				
			}
		}
	}

	.nodata {
		color: #999;
		font-size: 34rpx;
		text-align: center;
		.nodata-img {
			margin: 100rpx auto 60rpx;
		}
	}
}
</style>