car-system-app/pages/driver/message/message_Chat/message_Chat.nvue

<template>
	<z-paging ref="paging" 
	v-model="mainList" 
	@query="queryList" 
	:hide-empty-view="true" 
	created-reload
	safe-area-inset-bottom 
	use-chat-record-mode
	:auto-to-bottom-when-chat="true"
	:auto-show-back-to-top="false"
	auto-adjust-position-when-chat
	
		:pagingStyle="{'background-color':'#F1F1F1'}" 
		@cellStyleChange="cellStyleChange">
		<template slot="top">
			<view style="position: absolute;left: -99999px;z-index: 999;">
				<video id="myVideo" :src="videoUrl" @fullscreenchange="fullscreenchange" />
			</view>
		</template>
		<!-- 聊天item -->
		<template >
			<cell @click="clickItemFn" :id="`z-paging-${index}`" v-for="(item,index) in mainList" :style="cellStyle" :key="index">
				<chatItem ref="chatItem" :item="item" :index="index" @videoPlay="videoPlay" @getMsgListFns="getMsgListFns"/>
			</cell>
		</template>
		<!-- 底部聊天输入框 -->
		<template #bottom>
			<chatInputBar @sendSMS="sendSMS" @keyboardheightchange="keyboardheightchange" @gridItemTap="gridItemTap"
				ref="chatInputBar" />
		</template>
	</z-paging>
</template>

<script>
	import {
		parseTime
	} from "@/utils/index.js";
	import chatItem from "./components/chat-item/chat-item.vue";
	import chatInputBar from "./components/chat-input-bar/chat-input-bar.vue";
	import {
		getMsgList,
		SendMmsg
	} from '@/api/message/index.js';
	import {
		concernedAuthor,
	} from "@/api/discover/discover.js"
	export default {
		components: {
			chatItem,
			chatInputBar
		},
		data() {
			return {
				mainList: [],
				cellStyle: {},
				height: 0,
				charSn: '',
				chatType: 0,
				toUid: 0,
				time: null,
				videoUrl: '',
				videoContext: null,
				postFlag: true,
				//是否关注
				isConcerned: 'false'
			}
		},
		onNavigationBarButtonTap(e) {
			console.log(this.isConcerned);
			uni.showActionSheet({
				itemList: [this.isConcerned == 'true' ? '取消关注' : '关注', '举报'],
				success: (res) => {
					if (res.tapIndex + 1 == 2) {
						uni.navigateTo({
							url: `/pages/carShop/community/report?id=${this.toUid}&reportType=2`
						})
					} else {
						concernedAuthor(this.toUid).then(res => {
							if (this.isConcerned == 'true') {
								this.isConcerned = 'false'
							} else {
								this.isConcerned = 'true'
							}
						})
					}
				},
				fail: function(err) {}
			});
		},
		onUnload() {
			clearInterval(this.time);
			this.time = null;
		},
		onLoad(opt) {
			if (opt.charSn) this.charSn = JSON.parse(decodeURIComponent(opt.charSn));
			this.chatType = opt.chatType || 0;
			this.toUid = opt.toUid || 0;
			this.isConcerned = opt.isConcerned
			uni.setNavigationBarTitle({
				title: `${decodeURIComponent(opt.toUidNickname)||'加载中...'}`
			});
			this.$nextTick(() => {
				this.videoContext = uni.createVideoContext('myVideo', this);
			});
			this.time = setInterval(() => {
				if (!this.$store.getters.token) {
					clearInterval(this.time);
					this.time = null;
					return
				}
				if (this.charSn) {
					this.getMsgListFn()
				}
			}, 3000);
			uni.$emit('Chat', {
				type: 'remove',
				index: opt.index
			});
		},
		methods: {
			//子组件刷新
			getMsgListFns(index){
				this.mainList.splice(index,1)
				// this.mainList.forEach((item,index)=>{
				// 	if(e.id==item.id){
						
				// 	}
				// })
			},
			//刷新数据
			getMsgListFn(){
				getMsgList({
					charSn: this.charSn,
					limit: 10,
					page: 1
				}).then(res => {
					let Stutas = this.mainList.some(item => item.chatTime == res.data.list[0]
						.chatTime);
					if (!Stutas && !res.data.list[0].selfStatus) {
						this.$refs.paging.addChatRecordData(res.data.list[0]);
					}
				});
			},
			//监听全屏
			fullscreenchange(e) {
				if (!e.detail.fullScreen) {
					this.videoContext.pause();
				} else {
					this.videoContext.play();
				}
			},
			//点击
			clickItemFn(){
				// console.log(this.$refs.chatItem.length);
				this.$refs.chatItem.forEach(item=>{
					// console.log(item.copyFlag);
					item.copyFlag=false
				})
			},
			//播放视频自动进入全屏
			videoPlay(url) {
				this.videoUrl = url;
				this.videoContext.requestFullScreen(0);
			},
			//监听cellStyle改变，这个方法必须写！！
			cellStyleChange(cellStyle) {
				this.cellStyle = cellStyle;
			},
			//初始化
			queryList(pageNo, pageSize) {
				// #ifdef MP
				this.$u.debounce(() => {
					if (!this.charSn) {
						this.$nextTick(() => {
							this.$refs.paging.complete(null);
						});
						return
					}
					getMsgList({
						charSn: this.charSn,
						limit: pageSize,
						page: pageNo
					}).then(res => {
						console.log('111', res.data.list);
						this.$refs.paging.complete(res.data.list);
					});
				}, 0);
				// #endif
				// #ifndef MP
				if (!this.charSn) {
					this.$nextTick(() => {
						this.$refs.paging.complete(null);
					});
					return
				}
				getMsgList({
					charSn: this.charSn,
					limit: pageSize,
					page: pageNo
				}).then(res => {
					this.$refs.paging.complete(res.data.list);
				});
				// #endif
			},
			//发送信息
			sendSMS(e) {
				let userInfo = uni.getStorageSync('userInfo')
				SendMmsg({
					chatType: this.chatType,
					toUid: this.toUid,
					msgType: e.msgType,
					content: e.msg
				}).then(res => {
					this.charSn = res.data.chatSn;
					console.log(res.data);
					try {
						this.$refs.paging.addChatRecordData({
							//this.$u.timeFormat(new Date(), 'yyyy-mm-dd hh:MM:ss'
							chatTime: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'),
							avatar: userInfo.avatar,
							nickname: userInfo.nickname,
							msgType: e.msgType,
							content: e.msg,
							selfStatus: true,
							id:res.data.id
						});
					} catch (e) {
						// 	console.log(e);
					}
				}).catch(err => {
					this.$u.toast(err.message);
				})
			}
		}
	}
</script>

<style>
	page {
		background-color: #fff;
	}
</style>