yizhizan-h5/pages/msg/chathistory.vue

<template>
	<view class="task">
		<!-- 搜索板块 -->
		<view class="index-header">
			<view class="">
				<!-- 搜索板块 -->
				<view class="tui-header">
					<view class="tui-search" style="height: 60upx; width: 600upx;">
						<input type="text" class="text-search" v-model="search" placeholder="请输入搜索内容" />
					</view>
					<view @tap='rtBubble' style="color: #000000;font-size: 15px;">搜索</view>
					<view></view>
				</view>
			</view>
		</view>
		<view style="width: 100%;padding-bottom: 140rpx;background: #F5F5F5;color: #FFFFFF;margin-top: 80rpx;">
			<view style="display: flex;flex-direction: column;" v-for="(item,index) in ListItem">
				<view style="margin-top: 15rpx;width: 100%;text-align: center;font-size: 26rpx;color: #999999;">
					{{item.createTime}}
				</view>
				<view v-if="item.userId && userId != item.userId" style="width: 83%;margin-right: 15%;">
					<view class="chat-listitem" style="float: left;margin-left: 10rpx;">
						<view>
							<image @tap="goGuanZhu(item)" :src="item.imageUrl ? item.imageUrl : '/static/logo.png'"
								class="chat-listitem-image"></image>
						</view>
						<view v-if="item.content && item.messageType === 1" class="chat-listitem-text"
							style="margin-left: 20rpx;">{{item.content}}</view>
						<view v-if="item.messageType === 20" class="chat-listitem-text flex align-center"
							style="margin-left: 20rpx;color: #000000;background-color: #ffffff;">
							视频通话
							<image src="../../static/im/historyVideo_black.png"
								style="width: 50rpx;height: 50rpx;margin-left: 20rpx;" mode=""></image>
						</view>
						<view v-if="item.messageType === 21" class="chat-listitem-text flex align-center"
							style="margin-left: 20rpx;color: #000000;background-color: #ffffff;">
							语音通话
							<image src="../../static/im/historyAudio_black.png"
								style="width: 50rpx;height: 50rpx;margin-left: 20rpx;" mode=""></image>
						</view>
						<image @tap="viewImg(item.content)" v-if="item.content && item.messageType === 2"
							:src="item.content" style="height: 200rpx;width: 200rpx;margin-left: 20rpx;"></image>
						<image class="chat-listitem-text" @tap="viewImg(item.content)"
							v-if="item.content && item.messageType === 4"
							:src="'https://xxpw.xianmxkj.com/emoji/' +item.content"
							style="height: 80rpx;width: 80rpx;margin-left: 20rpx;"></image>


						<view v-if="item.content && item.messageType === 3" class="chat-listitem-text bubble voice"
							:class="playMsgid == index?'play':''"
							style="margin-left: 20rpx;display: flex;align-items: center;"
							@tap="playVoice(item.content,index)">
							<image v-if="playMsgid != index" src="../../static/im/laba.png"
								style="width: 35upx;height: 40upx;margin-right: 10rpx;"></image>
							<image v-if="playMsgid == index" src="../../static/im/labagif.gif"
								style="width: 35upx;height: 40upx;margin-right: 10rpx;"></image>
							<!-- <view class="icon other-voice"></view> -->
							<view class="length">{{item.width ? item.width : 0}}</view>
						</view>
						<!-- 互换手机号 -->
						<view v-if="item.content && item.messageType === 5 && item.content=='手机号请求'"
							@longpress="copy(item.content)" class="chat-listitem-text"
							style="padding-bottom: 20rpx;;padding-top: 20rpx;margin-left: 20rpx;color: #000000;background-color: #ffffff;border: 1rpx solid #c6fee7;background: linear-gradient(to bottom, #D9FEED, #ffffff);">
							<view class="flex align-center">
								<image src="../../static/im/mobilePhone.png"
									style="width: 60rpx;height: 60rpx;margin-right: 10rpx;" mode=""></image>
								我想跟你交换手机号，是否同意？
							</view>
							<view class="flex justify-between" style="margin-top: 30rpx;font-size: 24rpx;">
								<view @click.stop="refuseFun(item.chatContentId)"
									class="flex justify-center align-center"
									style="width: 40%;height: 50rpx;background-color: #F5F5F5;border-radius: 12rpx;">
									拒绝
								</view>
								<view @click.stop="tongyi(item.messageType,item.chatContentId)"
									class="flex justify-center align-center"
									style="width: 40%;height: 50rpx;background-color: #D9FEED;border-radius: 12rpx;">
									同意
								</view>
							</view>
						</view>
						<view v-if="item.content && item.messageType === 5 && item.content!='手机号请求'"
							class="chat-listitem-text"
							style="margin-left: 20rpx;color: #000000;background-color: #ffffff;">
							已同意交换手机号
						</view>
						<view v-if="item.content && item.messageType === 7"
							@longpress="copyss(item.content,item.userType,'phone')" class="chat-listitem-text"
							style="margin-left: 20rpx;color: #000000;background-color: #ffffff;">
							<view class="" v-if="item.userType==1">
								我的手机号为：{{JSON.parse(item.content).companyPhone}}
							</view>
							<view class="" v-else>
								我的手机号为：{{JSON.parse(item.content).userPhone}}
							</view>

						</view>
						<!-- 互换微信号 -->
						<view v-if="item.content && item.messageType === 6 && item.content=='微信号请求'"
							@longpress="copy(item.content)" class="chat-listitem-text"
							style="padding-bottom: 20rpx;;padding-top: 20rpx;margin-left: 20rpx;color: #000000;background-color: #ffffff;border: 1rpx solid #c6fee7;background: linear-gradient(to bottom, #D9FEED, #ffffff);">
							<view class="flex align-center">
								<image src="../../static/im/weiChat.png"
									style="width: 60rpx;height: 60rpx;margin-right: 10rpx;" mode=""></image>
								我想跟你交换微信号，是否同意？
							</view>
							<view class="flex justify-between" style="margin-top: 30rpx;font-size: 24rpx;">
								<view @click.stop="refuseFun(item.chatContentId)"
									class="flex justify-center align-center"
									style="width: 40%;height: 50rpx;background-color: #F5F5F5;border-radius: 12rpx;">
									拒绝
								</view>
								<view @click.stop="tongyi(item.messageType,item.chatContentId)"
									class="flex justify-center align-center"
									style="width: 40%;height: 50rpx;background-color: #D9FEED;border-radius: 12rpx;">
									同意
								</view>
							</view>
						</view>
						<view v-if="item.content && item.messageType === 6 && item.content!='微信号请求'"
							class="chat-listitem-text"
							style="margin-left: 20rpx;color: #000000;background-color: #ffffff;">
							已同意交换微信号
						</view>
						<view v-if="item.content && item.messageType === 8"
							@longpress="copyss(item.content,item.userType,'wx')" class="chat-listitem-text"
							style="margin-left: 20rpx;color: #000000;background-color: #ffffff;">
							<view class="" v-if="item.userType==1">
								我的微信号为：{{JSON.parse(item.content).companyWx}}
							</view>
							<view class="" v-else>
								我的微信号为：{{JSON.parse(item.content).userWx}}
							</view>

						</view>
						<view
							v-if="item.content && item.messageType === 9 && item.content=='简历请求' && isSendResumes==false"
							@longpress="copy(item.content)" class="chat-listitem-text"
							style="padding-bottom: 20rpx;;padding-top: 20rpx;margin-left: 20rpx;color: #000000;background-color: #ffffff;border: 1rpx solid #c6fee7;background: linear-gradient(to bottom, #D9FEED, #ffffff);">
							<view class="flex align-center">
								<image src="../../static/im/orderInfo.png"
									style="width: 60rpx;height: 60rpx;margin-right: 10rpx;" mode=""></image>
								我想要你的一份简历，是否同意？
							</view>
							<view class="flex justify-between" style="margin-top: 30rpx;font-size: 24rpx;">
								<view @click.stop="refuseFun(item.chatContentId)"
									class="flex justify-center align-center"
									style="width: 40%;height: 50rpx;background-color: #F5F5F5;border-radius: 12rpx;">
									拒绝
								</view>
								<view @click.stop="resumesTy()" class="flex justify-center align-center"
									style="width: 40%;height: 50rpx;background-color: #D9FEED;border-radius: 12rpx;">
									同意
								</view>
							</view>
						</view>
						<view
							v-if="item.content && item.messageType === 9 && item.content=='简历请求' && isSendResumes==true"
							@longpress="copy(item.content)" class="chat-listitem-text"
							style="padding-bottom: 20rpx;;padding-top: 20rpx;margin-left: 20rpx;color: #000000;background-color: #ffffff;border: 1rpx solid #c6fee7;background: linear-gradient(to bottom, #D9FEED, #ffffff);">
							<view class="flex align-center">
								<image src="../../static/im/orderInfo.png"
									style="width: 60rpx;height: 60rpx;margin-right: 10rpx;" mode=""></image>
								简历请求已同意
							</view>
						</view>
						<view v-if="item.content && item.messageType === 10" class="chat-listitem-text"
							style="margin-left: 20rpx;color: #000000;background-color: #ffffff;">
							{{item.content}}
						</view>
						<view v-if="item.content && item.messageType === 12" class="chat-listitem-text"
							style="margin-left: 20rpx;color: #000000;background-color: #ffffff;">
							{{item.content}}已拒绝
						</view>
						<view class="chat-listitem-text "
							style="margin-left: 20rpx;color: #000000;background-color: #ffffff;"
							v-if="item.content && item.messageType === 18"
							@click="openMapss(item.content.latitude,item.content.longitude,item.content.address)">
							<view class="padding-sm flex">
								<!-- #ifdef APP -->
								<u-icon name="map-fill" color="#ffffff" size="28" style="margin-right: 10rpx;"></u-icon>
								<!-- #endif -->
								{{item.content.address}}
							</view>
							<!-- #ifndef APP -->
							<map style="width: 100%; height: 120px;" scale="14" :latitude="item.content.latitude"
								:longitude="item.content.longitude"
								@tap="openMapss(item.content.latitude,item.content.longitude,item.content.address)"
								:markers="item.markers">
							</map>
							<!-- #endif -->
						</view>
					</view>
				</view>

				<view v-if="item.userId && userId == item.userId" style="width: 83%;margin-left: 15%;">
					<view class="chat-listitem" style="float: right;">
						<!-- <view v-if="item.content && item.messageType === 1" @longpress="copy(item.content)"
							class="chat-listitem-text" style="margin-right: 20rpx;">{{item.content}}</view> -->
						<image @tap="viewImg(item.content)" v-if="item.content && item.messageType === 2"
							:src="item.content" style="height: 200rpx;width: 200rpx;margin-right: 20rpx;"></image>
						<image class="chat-listitem-text" @tap="viewImg(item.content)"
							v-if="item.content && item.messageType === 4"
							:src="'https://xxpw.xianmxkj.com/emoji/' +item.content"
							style="height: 80rpx;width: 80rpx;margin-right: 20rpx;">
						</image>
						<view v-if="item.messageType === 20" class="chat-listitem-text textColor flex align-center"
							style="margin-right: 20rpx;">
							视频通话
							<image src="../../static/im/historyVideo_white.png"
								style="width: 50rpx;height: 50rpx;margin-left: 20rpx;" mode=""></image>
						</view>
						<view v-if="item.messageType === 21" class="chat-listitem-text textColor flex align-center"
							style="margin-right: 20rpx;">
							语音通话
							<image src="../../static/im/historyAudio_white.png"
								style="width: 50rpx;height: 50rpx;margin-left: 20rpx;" mode=""></image>
						</view>
						<view v-if="item.content && item.messageType === 3" class="chat-listitem-text bubble voice"
							:class="playMsgid == index?'play':''"
							style="margin-right: 20rpx;display: flex;align-items: center;"
							@tap="playVoice(item.content,index)">
							<view class="length">{{item.width ? item.width : 0}}</view>
							<image v-if="playMsgid != index" src="../../static/im/labaleft.png"
								style="width: 35upx;height: 40upx;margin-left: 10rpx;"></image>
							<image v-if="playMsgid == index" src="../../static/im/labaleft.png"
								style="width: 35upx;height: 40upx;margin-left: 10rpx;"></image>
							<!-- <view class="icon other-voice"></view> -->
						</view>
						<view v-if="item.content && item.messageType === 1" @longpress="caozuoActive(item,1)"
							class="chat-listitem-text textColor" style="margin-right: 20rpx;">{{item.content}}</view>
						<view v-if="item.content && item.messageType === 5" class="chat-listitem-text textColor"
							style="margin-right: 20rpx;">
							交换手机号请求已发送，等待对方同意
						</view>
						<view v-if="item.content && item.messageType === 7"
							@longpress="copyss(item.content,item.userType,'phone')" class="chat-listitem-text textColor"
							style="margin-right: 20rpx;">
							<view class="" v-if="item.userType==1">
								我的手机号为：{{JSON.parse(item.content).companyPhone}}
							</view>
							<view class="" v-else>
								我的手机号为：{{JSON.parse(item.content).userPhone}}
							</view>
						</view>

						<view v-if="item.content && item.messageType === 6" class="chat-listitem-text textColor"
							style="margin-right: 20rpx;">
							交换微信号请求已发送，等待对方同意
						</view>
						<view v-if="item.content && item.messageType === 8"
							@longpress="copyss(item.content,item.userType,'wx')" class="chat-listitem-text textColor"
							style="margin-right: 20rpx;">
							<view class="" v-if="item.userType==1">
								我的微信号为：{{JSON.parse(item.content).companyWx}}
							</view>
							<view class="" v-else>
								我的微信号为：{{JSON.parse(item.content).userWx}}
							</view>
						</view>
						<view v-if="item.content && item.messageType === 9" class="chat-listitem-text textColor"
							style="margin-right: 20rpx;">
							简历请求已发送，等待对方同意
						</view>
						<view v-if="item.content && item.messageType === 10" class="chat-listitem-text textColor"
							style="margin-right: 20rpx;">
							{{item.content}}
						</view>
						<view v-if="item.content && item.messageType === 12" class="chat-listitem-text textColor"
							style="margin-right: 20rpx;">
							{{item.content}}已拒绝
						</view>
						<view class="chat-listitem-text textColor" style="margin-right: 20rpx;"
							v-if="item.content && item.messageType === 18"
							@click="openMapss(item.content.latitude,item.content.longitude,item.content.address)">
							<view class="padding-sm flex">
								<!-- #ifdef APP -->
								<u-icon name="map-fill" color="#ffffff" size="28" style="margin-right: 10rpx;"></u-icon>
								<!-- #endif -->
								{{item.content.address}}
							</view>
							<!-- #ifndef APP -->
							<map style="width:520upx; height: 120px;" scale="14" :latitude="item.content.latitude"
								:longitude="item.content.longitude"
								@tap="openMapss(item.content.latitude,item.content.longitude,item.content.address)"
								:markers='item.markers'>
							</map>
							<!-- #endif -->
						</view>

						<view>
							<image :src="imageUrl" class="chat-listitem-image"></image>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		components: {},
		data() {
			return {

				recordLength: 0,
				initPoint: {
					identifier: 0,
					Y: 0
				},
				//播放语音相关参数
				AUDIO: uni.createInnerAudioContext(),
				playMsgid: null,
				VoiceTimer: null,


				//文字消息
				textMsg: '',
				//消息列表
				isHistoryLoading: false,
				scrollAnimation: false,
				scrollTop: 0,
				scrollToView: '',
				msgList: [],
				msgImgList: [],
				myuid: 0,

				//录音相关参数
				// #ifndef H5
				//H5不能录音
				RECORDER: uni.getRecorderManager(),
				// #endif
				isVoice: false,
				voiceTis: '按住 说话',
				recordTis: "手指上滑 取消发送",
				recording: false,
				willStop: false,
				initPoint: {
					identifier: 0,
					Y: 0
				},
				recordTimer: null,
				recordLength: 0,

				//播放语音相关参数
				AUDIO: uni.createInnerAudioContext(),
				playMsgid: null,
				VoiceTimer: null,
				// 抽屉参数
				popupLayerClass: '',
				// more参数
				hideMore: true,

				page: 1,
				size: 100,
				byUserId: 0,
				playMsgid: 0,
				imageUrl: '/static/logo.png',
				chatConversationId: 0,
				userId: 0,
				ListItem: [],
				search: ''
			};
		},
		onLoad(d) {
			this.userId = this.$queue.getData('userId');
			this.chatConversationId = d.chatConversationId;
			this.getTimeOrListItem1();

			let image_url = this.$queue.getData('avatar');
			if (image_url && image_url !== 'undefined') {
				this.imageUrl = image_url;
			} else {
				this.imageUrl = '/static/logo.png';
			}

			//语音自然播放结束
			this.AUDIO.onEnded((res) => {
				this.playMsgid = null;
			});
			// #ifndef H5
			//录音开始事件
			this.RECORDER.onStart((e) => {
				this.recordBegin(e);
			})
			//录音结束事件
			this.RECORDER.onStop((e) => {
				this.recordEnd(e);
			})
			// #endif
		},
		onBackPress() {
			this.AUDIO.stop();
			this.playMsgid = null;
		},
		onHide() {
			this.AUDIO.stop();
			this.playMsgid = null;
		},
		methods: {
			openMapss(latitude, longitude, name) {
				uni.openLocation({
					latitude: latitude - 0, //要去的纬度-地址       
					longitude: longitude - 0, //要去的经度-地址
					name: name, //地址名称
					address: name, //详细地址名称
					success: function() {
						console.log('导航成功');
					},
					fail: function(error) {
						console.log(error)
					}
				});
			},
			/**
			 * @param {Object} info 内容
			 * @param {Object} userType 用户类型
			 * @param {Object} type 参数类型
			 */
			copyss(info, userType, type) {
				let content = ''
				switch (type) {
					//复制手机号
					case 'phone':
						if (userType == 1) {
							content = JSON.parse(info).companyPhone
						} else {
							content = JSON.parse(info).userPhone
						}
						break;
						//复制微信号
					case 'wx':
						if (userType == 1) {
							content = JSON.parse(info).companyWx
						} else {
							content = JSON.parse(info).userWx
						}
						break;
					default:
						break;
				}
				this.copy(content)
			},
			goGuanZhu(item) {
				//去关注页面
				uni.navigateTo({
					url: '/my/gird/guanzhuDetail?userId=' + item.userId
				});
				// uni.navigateTo({
				// 	url: '/package/pages/task/followUser?userId=' + item.userId
				// });
			},
			// 播放语音
			playVoice(msg, index) {
				this.playMsgid = index;
				this.AUDIO.src = msg;
				this.$nextTick(function() {
					this.AUDIO.play();
				});
			},
			//查看大图
			viewImg(item) {
				let imgsArray = [];
				imgsArray[0] = item;
				uni.previewImage({
					current: 0,
					urls: imgsArray
				});
			},
			getTimeOrListItem1() {
				this.$queue.showLoading('加载中...');
				let userId = this.$queue.getData('userId')
				this.$Request.getT('/app/chat/selectChatContent?page=' + this.page + '&limit=' + this.size +
						'&chatConversationId=' + this.chatConversationId + '&userId=' + userId + '&content=' + this.search)
					.then(
						res => {
							this.ListItem = [];
							if (res.data) {
								var time = '';
								res.data.list.forEach(d => {
									d.createTime = this.getDateDiff(d.createTime);
									if (d.createTime === time) {
										d.createTime = '';
									} else {
										time = d.createTime;
									}
									if (d.type === 4) {
										let data = d.content.split(',');
										d.content = data;
									}
									if (d.type === 3) {
										let data = d.content.split(',');
										d.content = data;
									}
									if (d.messageType === 18) {
										d.content = JSON.parse(d.content);
										d.markers = [{
											id: 1,
											latitude: d.content.latitude,
											longitude: d.content.longitude,
											width: 20,
											height: 20,
											iconPath: '../../static/images/mapMarker.png',
											callout: {
												content: d.content.name,
												color: '#000', //文字颜色
												fontSize: 10, //文本大小
												padding: 10, //附近留白
												borderRadius: 24, //边框圆角
												bgColor: '#FFFFFF', //背景颜色
												display: 'ALWAYS', //常显
											}
										}]
									}
									this.ListItem.push(d);
								});
								this.ListItem.reverse();
							}
							uni.hideLoading();
						});
			},
			copy(content) {
				uni.showModal({
					title: '温馨提示',
					content: '确认要复制此文字吗？',
					showCancel: true,
					cancelText: '取消',
					confirmText: '确认',
					success: res => {
						if (res.confirm) {
							uni.setClipboardData({
								data: content,
								success: r => {
									this.$queue.showToast('复制成功');
								}
							});
						}
					}
				});
			},
			h5Copy(content) {
				if (!document.queryCommandSupported('copy')) {
					// 不支持
					return false
				}
				let textarea = document.createElement("textarea")
				textarea.value = content
				textarea.readOnly = "readOnly"
				document.body.appendChild(textarea)
				textarea.select() // 选择对象
				textarea.setSelectionRange(0, content.length) //核心
				let result = document.execCommand("copy") // 执行浏览器复制命令
				textarea.remove()
				return result
			},
			getDateDiff(data) {
				// 传进来的data必须是日期格式，不能是时间戳
				//var str = data;
				//将字符串转换成时间格式
				var timePublish = new Date(data);
				var timeNow = new Date();
				var minute = 1000 * 60;
				var hour = minute * 60;
				var day = hour * 24;
				var month = day * 30;
				var result = "2";

				var diffValue = timeNow - timePublish;
				var diffMonth = diffValue / month;
				var diffWeek = diffValue / (7 * day);
				var diffDay = diffValue / day;
				var diffHour = diffValue / hour;
				var diffMinute = diffValue / minute;


				if (diffMonth > 3) {
					result = timePublish.getFullYear() + "-";
					result += timePublish.getMonth() + "-";
					result += timePublish.getDate();
				} else if (diffMonth > 1) { //月
					result = data.substring(0, 10);
				} else if (diffWeek > 1) { //周
					result = data.substring(0, 10);
				} else if (diffDay > 1) { //天
					result = data.substring(0, 10);
				} else if (diffHour > 1) { //小时
					result = parseInt(diffHour) + "小时前";
				} else if (diffMinute > 1) { //分钟
					result = parseInt(diffMinute) + "分钟前";
				} else {
					result = "刚刚";
				}
				return result;
			},
			navBack() {
				uni.navigateBack();
			},
			rtBubble() {
				this.getTimeOrListItem1();
			}
		}
	};
</script>

<style lang="scss">
	@import '../../static/less/index.less';
	@import '../../static/css/index.css';
	@import "../msg/css/style.scss";

	page {
		background: #F5F5F5;
		color: #FFFFFF;
	}

	.chat-listitem {
		display: flex;
		margin-top: 20rpx;
		padding: 10rpx;
	}

	.chat-listitem-text {
		color: #ffffff;
		background: #00B88F;
		margin-top: 10rpx;
		width: fit-content;
		padding: 15rpx;
		font-size: 30rpx;
		height: max-content;
		word-wrap: break-word;
		word-break: break-all;
		border-radius: 10rpx;
	}

	.chat-listitem-image-type4 {
		color: #000000;
		background: #FFFFFF;
		width: fit-content;
		font-size: 30rpx;
		height: max-content;
		word-wrap: break-word;
		word-break: break-all;
		border-top-left-radius: 20rpx;
		border-top-right-radius: 20rpx;
	}

	.chat-listitem-image {
		margin-top: 5rpx;
		width: 75rpx;
		height: 75rpx;
		border-radius: 5rpx;
	}

	.save {
		width: 130rpx;
		text-align: center;
		border-radius: 10rpx;
		height: 70rpx;
		background: #FFFFFF;
		margin: 5rpx 10rpx 0;
		line-height: 70rpx;
	}

	.text-search {
		margin-left: 20upx;
		font-size: 14px;
		height: 60upx;
		line-height: 60upx;
		width: 95%;
		color: #000000;
	}

	.item-text-title {
		color: #000000;
		font-size: 15px;
		font-weight: bold;
	}

	.item {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
	}

	.item-text {
		margin-left: 20upx;
		border-radius: 50upx;
		margin: 10upx;
		border: 1px solid #dee0de;
		padding: 5upx;
		padding-left: 20upx;
		padding-right: 20upx;
		font-size: 13px;
		color: #555555;
	}
</style>