jp-xqjy/pages/user/message.vue

<template>
  <view>
	<u-navbar title="留言"></u-navbar>	
	<view class="message">
		<u-notice-bar style="position: sticky;top:40px" mode="horizontal" :list="noticebar"></u-notice-bar>
		
		 <scroll-view id="scrollview" class="chat-window" scroll-y="true" :style="{height: style.contentViewHeight + 'px'}" :scroll-with-animation="true" :scroll-top="scrollTop">
			<view class="cu-chat">
				<view class="messageRecord">
				<u-divider  style="background-color: #ffffff;"  v-if="list.length ==40" >最多显示40条信息</u-divider>
				
					
					<template v-for="(item ,index) in list"  > 
						
						<view   :key="item.id"   class="messageRecord-time">{{item.createTimeN}}</view>
						 
					
						<view class="messageRecord-item "
						 :class="
							beMemberId==item.meMemberId? 'messageRecord-left':'messageRecord-right'
						 "
						 :key="item.id">
							<view class="messageRecord-img" v-if="beMemberId==item.meMemberId">
								<u-avatar :src="item.meMemberFaceImage" mode="square" size="80"></u-avatar>
							</view>
							<view class="messageRecord-news">
								<h4>{{item.meMemberRealName}}</h4>
								<view class="messageRecord-text">
									{{item.content}}
								</view>
							</view>
							<view class="messageRecord-img" v-if="beMemberId!=item.meMemberId" >
								<u-avatar :src="item.meMemberFaceImage" mode="square" size="80"></u-avatar>
							</view>
						</view>
					</template>
					
				</view>
			</view>		
		</scroll-view>
		<view class="messageInput">
			<view class="messageInput-box">
				<u-input maxlength="100"   v-model="keyword" />
			</view>
			<view class="messageInput-btn"  @click="submit">
				<u-icon custom-prefix="custom-icon" name="send-plane-fill" color="#fff"></u-icon>
			</view>
		</view>
	</view>
  </view>
</template>


<script>
	import * as API from '@/apis/leaving.js'
	
	export default {
		data() {
			return {
				noticebar:["请勿随意泄露个人信息谨防诈骗，如合适请添加对方微信。"],
				beMemberId:"",
			
				form:{
					
				},
				keyword:"",
				newstype:'',
				typelist: [],
				pageIndex: 1,
				recordsTotal: 0,
			 
				list: [],
				tabList: [{
					name: '通知公告'
				}, {
					name: '活动报道'
				},{
					name: '婚恋课堂'
				},{
					name: '问题解答'
				}],
				scrollTopH:'',
				scrollTop:'',
				current: 0,
				wrapList: [
				],
				style: {
					pageHeight: 0,
					contentViewHeight: 0,
					footViewHeight: 90,
					mitemHeight: 0,
				},
				pageSize:40,
				submitbl:false,
				isReady:true,
			
			}
		},
		onPullDownRefresh() {
			if (this.list.length < this.recordsTotal) {
				
				this.myLoadmore();
			}
		},
		onLoad(op) {
			this.beMemberId=op.id;
			
			const res = uni.getSystemInfoSync(); //获取手机可使用窗口高度     api为获取系统信息同步接口
				this.style.pageHeight = res.windowHeight;
				this.style.contentViewHeight = res.windowHeight - uni.getSystemInfoSync().screenWidth / 750 * (300); //像素   因为给出的是像素高度 然后我们用的是upx  所以换算一下 
			
		},
		methods: {
			 
			scrollToBottom() {
				let that = this;
				let query = uni.createSelectorQuery();
				query.selectAll('.cu-chat').boundingClientRect();
				query.select('#scrollview').boundingClientRect();
				query.exec((res) => {
					that.style.mitemHeight = 0;
					// that.style.mitemHeight = that.style.mitemHeight + res[0].height + 40 
					res[0].forEach((rect) => that.style.mitemHeight = that.style.mitemHeight + rect.height + 40) //获取所有内部子元素的高度
					// 因为vue的虚拟DOM 每次生成的新消息都是之前的，所以采用异步setTimeout    主要就是添加了这定时器
					setTimeout(() => {
					
						if (that.style.mitemHeight > (that.style.contentViewHeight - 100)) { //判断子元素高度是否大于显示高度
						    that.scrollTop = that.style.mitemHeight - that.style.contentViewHeight //用子元素的高度减去显示的高度就获益获得序言滚动的高度
					    }
					}, 100)
				})
				},
			submit(){
				if(!this.keyword){
					return
				}
				uni.showLoading({
					title: "加载中",
					mask: true,
				})
				var data = {
					beMemberId:this.beMemberId,
					content:this.keyword,
				
				};
				API.submit(data).then((res) => {
					this.keyword=""
					uni.hideLoading()
					this.submitbl=true
					this.getList(true)
					
 					
					
				}).catch(error => {
					uni.showToast({
					
						title: error,icon: "none"
					})
				})
			},
			getList(bl) {
				 if(!bl){
					 if(this.submitbl){
						this.submitbl=false
						return
					 }
				 }
				
				var data = {
					beMemberId:this.beMemberId,
					pageSize:this.pageSize,
					pageIndex:1
				};
			
				API.chatList(data).then((res) => {
					var showTimeData=new Map()
					this.list = res.data.data;
					
					for(var i in this.list ){
						var item=this.list[i]
						var key=item.createTime
										
						if(!showTimeData.get(key)){
									showTimeData.set(key,item)
									item.createTimeN=	key;
										
						 }else{
									item.createTimeN="";	
						 }
					}
					
					this.$nextTick(()=>{
						this.scrollToBottom(); //创建后调用回到底部方法
						
					})
					
					
					setTimeout(()=>{
						if(this.isReady){
							this.getList()
						}
					},1000*10)
					this.recordsTotal = res.data.recordsTotal
 					
				}).catch(error => {
					uni.showToast({
					
						title: error,icon: "none"
					})
				})
			},
			onUnload(){
				this.isReady=false;
			},
			
			myLoadmore() {
					
				this.pageIndex += 1;
				this.getList()
			
			},
			
			onReady() {
			
				this.getList()
		
			}
		},
		
	}
</script>

 

<style lang="scss" scoped>
	page{
		background-color: #f5f5f5;
	}
	.messageRecord-news h4{
		margin-bottom: 5px;
		font-weight: normal;
		font-size: 12px;
	}
	.message-head{
		background-color: #fff;
		display: flex;
		justify-content: space-around;
		height: 120rpx;
		.message-head-item{
			display: flex;
			flex-direction: column;
			justify-content: center;
			align-items: center;
			span{
				margin-top:6rpx;
				font-size: 20rpx;
				color:#666;
			}
		}
	}
	.message{
		// height: calc(100vh - 288rpx);
		overflow-y: auto;
		background-color: #f5f5f5;
		position: relative;
		padding: 30rpx;
		padding-bottom: 80px;
		.messageRecord{
			.messageRecord-item{
				margin-bottom: 40rpx;
			}
			.messageRecord-pic{
				width:auto;
				border-radius: 5px;
				overflow: hidden;
				max-height: 120px;
			}
			.messageRecord-img{
				overflow: hidden;
				height: 80rpx;
				min-width:100rpx;
			}
			.messageRecord-text{		
				background-color: #fff;
				padding:18rpx 30rpx;
				border-radius: 10rpx;
				font-size: 26rpx;
				min-height:40px ;
				position: relative;
				margin-left: 5px;
			}
			.messageRecord-left{
				display: flex;
				.messageRecord-text::after{
					content: '';
					position: absolute;
					width: 0;
					height: 0;
					left: -8px;
					top: 10px;
					border-top: 10px solid transparent;
					border-right: 8px solid #fff;
					border-bottom: 10px solid transparent;
				}
			}
			.messageRecord-right{
				display: flex;
				justify-content: flex-end;
				position: relative;
				.messageRecord-img{
					text-align: right;
				}
				.messageRecord-news h4{
					text-align: right;
				}
				.messageRecord-text{
					background: #ff5e5e;
					color:#fff;
					position: relative;
					margin-right: 5px;
					&:after{
						content: '';
						position: absolute;
						width: 0;
						height: 0;
						right: -8px;
						top: 10px;
						border-top: 10px solid transparent;
						border-left: 8px solid #ff5e5e;
						border-bottom: 10px solid transparent;
					}
				}
			}
		}
		.messageInput{
			display: flex;
			align-items: center;
			position: fixed;
			padding: 20rpx;
			left: 0;
			right: 0;
			bottom:0;
			background-color: #fff;
			min-height: 50rpx;
			border-top: 1px solid #eee;
		}
		.u-size-mini{
			height:56rpx!important;
			padding: 0 24rpx!important;
		}
		.messageInput-box{
			flex: 1;
			background-color: #f5f5f5;
			border-radius:32rpx;
			margin: 0 20rpx;
			padding-left: 20px;
		}
		.messageRecord-time{
			text-align: center;
			font-size: 24rpx;
			color:#999;
			margin: 30rpx 0;
		}
	}
	.u-input--border{
		border:none;
	}
	.messageInput-btn{
		background-color: #ff5e5e;
		height: 28px;
		width: 28px;
		border-radius: 50%;
		text-align: center;
		line-height: 28px;
	}
</style>