CBB3/pages/chat/chat.vue

<template>
	<view class="app">
		<view id="app-top">
			<uni-nav-bar statusBar backgroundColor="#f8f8f8" left-icon="left" @clickLeft="utils.navigateBack()" >
				<view  slot="right" @tap="tapMore">
					<image style="width: 30px;" src="/static/chat/chat-more.png" mode="widthFix"></image>
				</view>	
				<view class="fx-r fx-bc fx-ac" style="width: 100%;">
					<view class="fx-r fx-bc fx-ac" v-if="isNetwork">
						<uv-loading-icon size="18"></uv-loading-icon>
						<text style="font-size: 14px;margin-left: 4px;">链接中..</text>
					</view>
					<text v-else style="text-overflow: ellipsis;white-space: nowrap;overflow: hidden;font-size: 14px;">
						{{chatUser == null ? '加载中..'  : (chatUser.friend.remark == '' ? chatUser.nickname : chatUser.friend.remark)}}
					</text>
				</view>
			</uni-nav-bar>  
		</view> 
		<scroll-view class="wechat-body" :style="'height:calc(100vh  - ' + barheight + 'px - ' + fotInputheight + 'px - ' + inputBottom + 'px)' " scroll-y="true" @scrolltoupper="tapTupper" :scroll-with-animation="scrollAnimation" :scroll-into-view="'view_' + scrollMsgId">
			<view class="loading fx-r fx-ac fx-bc"  v-if="loaData.isLoad">
				<image src="/static/img/xloading.png"></image>
			</view>
			<view style="height: 10px;"></view>
			<view class="chat-item" :id="'view_' + item.msgId" v-for="(item,index) in data">
				<view class='fx-h fx-bc fx-ac' v-if="item.isShowTime">
					<view class="msg-time">{{utils.timeLastdate(item.time,true)}}</view>
				</view>
				<!-- 文字内容 -->
				<chatMsg v-if="item.type =='text'" @userItem="tapUserItem" @longItem="tapLongItem"  @rsend="tapRsend(item)" :item="item"></chatMsg>
				<!--发送图片-->
				<chatImg v-if="item.type =='img'" @userItem="tapUserItem" @longItem="tapLongItem"  @openImg="tapOpenImg"   @rsend="tapRsend(item)" :item="item"></chatImg>
				<!--视频列表-->
				<chatVideo v-if="item.type =='video'" @userItem="tapUserItem" @longItem="tapLongItem"  @openImg="tapOpenImg"   @rsend="tapRsend(item)" :item="item"></chatVideo>
				<!--语音消息-->
				<chatVoice v-if="item.type =='voice'" @userItem="tapUserItem"  @longItem="tapLongItem"  @rsend="tapRsend(item)" :item="item"></chatVoice>
				<!--发送红包-->
				<chatRed :key="theKey" v-if="item.type =='red_envelope'" @userItem="tapUserItem" @redItem="tapRedItem" :item="item"></chatRed>
				<!--红包情况-->
				<chatTip v-if="['red_envelope_tip','withdraw'].indexOf(item.type) >= 0" :item="item"></chatTip>
				
			</view>
		</scroll-view>
		
		<view class="foot-view-info" id="foot-view-info">
			<view class="foot-view fx-r fx-bc">
				<image @tap="tapRecord" class="icon" src="/static/chat/voice.svg"></image>
				<textarea  auto-height maxlength="-1" class="fx-g1"  v-model="msg"  :focus="focus" @focus="tapFoucus" :confirm-hold="true" :hold-keyboard="true" :adjust-position="false" @blur="tapBlur" ></textarea>
				<image @tap="tapCkFace(true)" class="icon" src="/static/chat/face.svg" v-if="!isFace"></image>
				<image @tap="tapCkFace(false)" class="icon" src="/static/chat/cmore.svg" v-else></image>
				<image @tap="tapOpenGroup" class="icon" style="width: 28px;height: 28px;" v-if="msg == ''" src="/static/chat/cadd.svg"></image>
				<view class="send-btn" @tap="tapSend" v-else>发送</view>
			</view>
			<!--表情-->
			<view class="face-view"  :hidden="!isFace">			
				<swiper class="swiper" circular :indicator-dots="true">
					<swiper-item v-for="item in faceAr">
						<view class="face-items fx-r fx-bc">
							<view class="item fx-h fx-bc fx-ac" v-for="(item2,index) in item">
								<image @tap="tapFaceSet(item2)" :src="'../../static/face/face_' + item2.key + '.png'" mode="widthFix"></image>
							</view>
						</view>
					</swiper-item>
				</swiper>
			</view>
			<!--收藏-->
			<view class="group-view"  :style="'height:' +inputBottom + 'px' " :hidden="!isGroup">
				<scroll-view scroll-y>
					<view class="group-items fx-r fx-bc" >
						<view class="item fx-h fx-bc fx-ac" @tap="tapPhoto">
							<view class="item-bg  fx-h fx-bc fx-ac"><image src="/static/chat/chat-phone.svg"></image></view>
							<view class="text">相册</view>
						</view>   
						
						<view class="item fx-h fx-bc fx-ac" @tap="tapCamera">
							<view class="item-bg  fx-h fx-bc fx-ac"><image src="/static/chat/chat-camera.svg"></image></view>
							<view class="text">拍摄</view>
						</view>
						
						<view class="item fx-h fx-bc fx-ac" @tap="tapVideo">
							<view class="item-bg  fx-h fx-bc fx-ac"><image src="/static/chat/chat-video.svg"></image></view>
							<view class="text">视频</view>
						</view>
						
						
						
						
						<view class="item fx-h fx-bc fx-ac" @tap="utils.Tip('暂不支持发送红包功能！')" :data-url="'./redpack/red?groupId=' + groupId  + 	'&type=chat&fuid=' + (chatUser == null ? '' : chatUser.uid)">
							<view class="item-bg  fx-h fx-bc fx-ac"><image src="/static/chat/chat-reg.svg"></image></view>
							<view class="text">红包</view>
						</view>
						
						<view class="item fx-h fx-bc fx-ac" @tap="tapCollectList">
							<view class="item-bg  fx-h fx-bc fx-ac"><image src="/static/chat/chat-collect.svg"></image></view>
							<view class="text">收藏</view>
						</view>
						
					</view>   
				</scroll-view>
			</view>
			
			<recording ref="recording" @end="tapRecordH5"></recording>
		</view>  
		
		
		<view class="red-lq fx-h fx-bc fx-ac" v-if="isOpenRed">
			<view class="bg fx-h fx-bc">
				<image class="bg-img" src="/static/chat/hold_talk.png" ></image>
				<view class="red-close" @tap="isOpenRed = false">
					<uv-icon name="close" color="#ffffff" size="18"></uv-icon>
				</view>
				<view class="red-tip fx-h fx-bc">
					<image  :src="lqRed.user.avatar" mode="aspectFill"></image>	
					<text>{{lqRed.user.nickname}}的红包</text>		
				</view>
				
				<view class="red-lv" v-if="lqRed.state == 1" :class="redAnim" @tap="tapOpenLv">
					<image src="/static/chat/open_group_award_icon.png" mode="widthFix"></image>
				</view>
				
				<view class="red-lm" v-if="lqRed.state == 2" >
					<view class="red-sm">手慢了，红包派完了</view>
					<view class="red-look" @tap="tapOpen" :data-url="'redpack/look?id=' + lqRed.data.id" >查看红包详情></view>
				</view>
				
			</view>
			
			
		</view>
	
	<view class="mb2-tip"  v-if="showOpen">
		<view class="bg" @tap="showOpen = false"></view>
		<view class="pop-view" :style="'left:' + showLeft+ 'px;top:' + showTop + 'px'">
			<view class="pop-lv"></view>
			<view v-if="showData.type == 'text'">
				<view class="item fx-r fx-bc" @tap="tapCopy">复制</view>
				<view class="item fx-r fx-bc" @tap="tapAddCollection">收藏</view>
				<view class="item fx-r fx-bc" @tap="tapZf">转发</view>
				<view class="item fx-r fx-bc" v-if="showData.sendUser.uid == user.uid && (utils.strtotime() -  showData.time ) < 60 * 2" @tap="tapWithdraw">撤回</view>
			</view>
			
			<view v-if="showData.type == 'img'">
				<view class="item fx-r fx-bc"  @tap="tapAddCollection">收藏</view>
				<view class="item fx-r fx-bc" @tap="tapDown">下载图片</view>
				<view class="item fx-r fx-bc" @tap="tapZf">转发</view>
				<view class="item fx-r fx-bc" v-if="showData.sendUser.uid == user.uid && (utils.strtotime() -  showData.time ) < 60 * 5" @tap="tapWithdraw">撤回</view>
			</view>
			
			<view v-if="showData.type == 'voice'">
				<view class="item fx-r fx-bc" @tap="tapAddCollection">收藏</view>
				<view class="item fx-r fx-bc" @tap="tapZf">转发</view>
				<view class="item fx-r fx-bc" v-if="showData.sendUser.uid == user.uid && (utils.strtotime() -  showData.time ) < 60 * 2" @tap="tapWithdraw">撤回</view>
			</view>
			
		</view>
	</view>
	
	</view>
	
</template>   
<style lang="scss">
	.red-lq{position: fixed;height: 100%;width: 100%;background: rgba(0, 0, 0, 0.5);left: 0;top: 0;z-index: 10;}
	.red-lq .bg{position: relative;width: 100%;}
	.red-lq .bg image.bg-img{width: 80%;height: 70vh;}
	.red-tip{position: absolute;color: #ffdfb0;margin-top: 30px;font-weight: 14px;}
	.red-tip image{width: 50px;height: 50px;border-radius: 50px;}
	.red-tip text{margin-top: 10px;}
	.red-lq .red-close{position: absolute;left: 55px;top: 14px;}
	
	
	.red-lv{position: absolute;bottom: 25%;}
	.red-lv image{width: 100px;}
	.anim-rotate {
		transform-style: preserve-3d;
		animation: rotate 1s linear infinite;
	}
	@keyframes rotate{
		0%{
			transform: rotateY(0deg);
		}
		100%{
			transform: rotateY(360deg);
		}
	}
	.red-lm{position: absolute;bottom: 15%;font-size: 14px;color: #ffdfb0;}
	.red-look{padding: 6px 0; }

	
	
	
	.wechat-body{background: #F1F1F1;position: relative;}
	.foot-view{padding:10px;background: #fff;width: calc(100% - 20px);bottom: 0;min-height: 40px;}
	
	.foot-view .icon{width: 30px;height: 30px;margin: 0px 4px;}
	.foot-view textarea{width: auto;background: #f1f1f1;border-radius: 6px;height: 20px;margin: 0px 4px;padding: 10px 10px;font-size: 14px;}
	.foot-view-info{background: #fff;}
	
	.msg-time{font-size: 14px;color: #ccc;}
	.send-btn{background: $ic-appcolor;color: #fff;font-size: 12px;padding:6px 10px;border-radius: 6px;margin-left: 2px	;}
	.send-btn:active{background: #dddddd;}
	.face-view{width: 100%;z-index: 9;background: #fff;}
	.face-view swiper{height: 250px;}
	.face-view .face-items{padding: 10px;}
	.face-view .face-items .item{width: 12.5%;height: calc((100vw - 20px) / 8 );}
	.face-view .face-items .item image{width: 25px;height: 25px;}
	
	
	
	
	.group-view{width: 100%;z-index: 9;background: #F1F1F1;}
	.group-view scroll-view{height: 100%;}
	.group-view .group-items{padding: 10px;}
	.group-view .group-items .item{width: 25%;padding: 10px 0;}
	.group-view .group-items .item .item-bg{width: 50px;height:50px;background: #fff;border-radius: 10px;}
	.group-view .group-items .item .item-bg image{width: 20px;height: 20px;}
	.group-view .group-items .item .text{font-size: 12px;margin-top: 4px;color: $ic-default-text;}
	
	.mb2-tip{position: fixed;width: 100%;height: 100%;top: 0;left: 0;z-index: 999;}
	.mb2-tip .bg{width: 100%;height: 100%;top: 0;left: 0;position: absolute;}
	.mb2-tip .pop-view{position: absolute;background: #fff;border-radius: 6px;border: 1px solid #f1f1f1;padding: 10px 20px;top: 56px;z-index: 9;left: 20px;}
	.mb2-tip .pop-view .item{padding:10px 0;}
	 .mb2-tip .pop-view .item:active{background: #f1f1f1;}
</style>  
 
<script>
	import {mapState,mapMutations } from 'vuex';
	import chatMsg from "@/components/tm-public/chat/msg.vue";
	import chatImg from "@/components/tm-public/chat/cimg.vue";
	import chatVideo from "@/components/tm-public/chat/video.vue";
	import chatRed from "@/components/tm-public/chat/red.vue";
	import chatTip from "@/components/tm-public/chat/tip.vue";
	import helangCompress from '@/components/helang-compress/helang-compress';
	// #ifdef H5
		import recording from '@/components/tm-public/recording/recordingH5.vue';//H5
	// #endif
		
	// #ifdef APP
		import recording from '@/components/tm-public/recording/recordingApp.vue';//APP
	// #endif	
	import chatRedTranfer from "@/components/tm-public/chat/redTransfer.vue";
	import chatRedEnvelopeTransfer from "@/components/tm-public/chat/redEnvelopeTransfer.vue";
	import chatRedEnvelopeTransferRefund from "@/components/tm-public/chat/redEnvelopeTransferRefund.vue";
	import chatVoice from "@/components/tm-public/chat/voice.vue";
	import Message from "@/library/socket/Message.js";
	import face    from "@/library/utils/Face.js";
	const inputHeight = 260;
	export default {  
		computed:{
			...mapState(['user','sysData']),
			getWebSocket(){
				// #ifdef APP-PLUS
				const webSocket = getApp().globalData.webSocket
				// #endif
				// #ifndef APP-PLUS
				const webSocket = this.webSocket
				// #endif
				return webSocket
			}
		},
		components:{
			chatMsg,
			chatVoice,
			chatImg,
			chatRed,
			chatTip,
			chatRedTranfer,
			chatRedEnvelopeTransfer,
			chatRedEnvelopeTransferRefund,
			recording,
			chatVideo,
			helangCompress
		},
	    data() {
	        return {
				isNetwork	: false,
				data 		: [],
				chatUser	: null,
				msg			: "",
				barheight   : 0,
				fotInputheight:0,
				groupId 	: 0,
				usercode	: "",
				inputBottom : 0,
				keyHeight	: 0,
				scrollMsgId : "",
				showInput   : false,
				scrollAnimation : false,
				focus		: false,
				isFace		: false,
				faceAr		: [],
				isGroup		: false,
				isRecord	: false,
				theKey		: 0,
				loaData:{
					isFrite : true,
					isFoot	: false,
					isLoad	: false,
					page 	: 1,
				},
				tempFilePaths : [],
				redAnim		: "",
				isOpenRed	: false,
				lqRed		: {},
				redLqBack	: [],
				msgId		: "",
				showOpen    : false,
				showData    : {},
				showLeft	: "",
				showTop		: ""
	        }  
	    },
		
		onLoad(option){
			this.groupId = option.groupId || 0;
			this.usercode = option.usercode || "";
			this.msgId = option.msgId || "";
			this.nid = option.nid || 0;
			var strRed = uni.getStorageSync("chat_red_" + this.groupId);
			if(strRed != null && strRed != '') {
				this.redLqBack = JSON.parse(strRed);
			}
			this.$nextTick(() => {
				uni.createSelectorQuery().select("#app-top").boundingClientRect(res=>{
					this.barheight =  res == null ? 40 : (res.height + 10);
					if(this.$device.platform == 'ios') {
						this.barheight = res.height + 60;
					} 
					
					
				}).exec();
				uni.createSelectorQuery().select("#foot-view-info").boundingClientRect(res=>{
					this.fotInputheight = res.height;
				}).exec();
			});
			uni.$on('socketMessage',this.socketMessage);
			uni.$on('redTransferCheck',this.redTransferCheck);
			uni.$on('chatClear',this.chatClear);
			uni.$on('socketOpen',this.socketOpen);
			uni.$on('socketClose',this.socketClose);
			let faceAr = [];
			let nI = 0;
			let index = 0; 
			faceAr[0] = [];
			for(let i in face.face) {
				if(nI <= faceAr.length && index == 0) {
					faceAr[nI] = [];
				}
				faceAr[nI].push({
					key : i,
					value : face.face[i].value
				});
				index ++;
				if(index >= 40) {
					index = 0;
					nI++;
				}
			}
			this.faceAr = faceAr;
			this.getInit();
			
		},
		onUnload() {
			uni.$off('socketMessage',this.socketMessage);
			uni.$off('redTransferCheck',this.redTransferCheck);
			uni.$off('chatClear',this.chatClear);
			uni.$off('socketOpen',this.socketOpen);
			uni.$off('socketClose',this.socketClose);
			if(this.$refs['recording'] != null) {
				this.$refs['recording'].recClose();
			}
		},
		
		onShow() {
			this.onKeyboardHeight();
			this.isNetwork = !this.getWebSocket.socketOpen;
		},
		
	    methods: {
			/**
			 * 基本数据
			 */
			getInit:function(){
				this
				.request
				.post("findChat",{usercode:this.usercode})
				.then(res=>{
					if(res.code == 200) {
						this.chatUser = res.data;
						this.groupId = this.chatUser.chat.group_id;
						this.chatRead();
						this.getData(true);
						
					} else {
						uni.navigateBack({ delta:1});
						uni.showModal({title: '系统提示',content:res.msg,showCancel: false});
					}
				})
				.catch(err=>{
					uni.navigateBack({ delta:1});
					uni.showModal({title: '系统提示',content:"加载失败",showCancel: false});
				});
			},
			
			/**
			 * 
			 */
			getData:function(isPull = false){
				if(this.user == null){
					return;
				}		
				this    
					.request  
					.post("chatMsg",{group_id:this.groupId,nid:this.nid,page:this.loaData.page})
					.then(res=>{
						if(res.code == 200) {
							this.loaData.isLoad = false;
							this.isDisabled = false;
							if (isPull) {
								this.data = res.data.list;
								if(res.data.list.length > 0){
									if(this.msgId != '') {
										this.setScrollInto(this.msgId);
									} else {
										this.setScrollInto(res.data.list[res.data.list.length - 1].msgId);
									}
								}
							} else {
								this.getDescData(res.data.list,'down');
							}
							if (res.data.list.length != res.data.pageSize) {
								this.loaData.isFoot = true;
							}
							this.loaData.isFrite = false;
							this.getwcTime();
						} else {
							uni.showModal({title: '系统提示',content: res.msg,showCancel: false});
						}
					});
			},
			
			/**
			 * 上拉加载
			 */
			tapTupper:function(){
				if(this.loaData.isFoot || this.loaData.isLoad || this.loaData.isFrite) {
					return;
				}
				this.loaData.isLoad = true;
				this.loaData.page ++;
				this.getData();
			},
			
			/**
			 * 得到焦点
			 * @param {Object} e  
			 */  
			tapFoucus:function(e){
				this.showInput = true;
				var bfn = ()=>{
					this.isFace = false;
					this.isGroup = false;
					this.isRecord = false;
					this.$refs['recording'].hide();
					//this.inputBottom = 0;
					this.lastScrollInto();
				};
				setTimeout(()=>{
					bfn()
				},100);   
			},
			/**
			 * 失去焦点
			 * @param {Object} e
			 */
			tapBlur:function(e){
				setTimeout(()=>{
					this.showInput = false;
				},100);
			},
			
			  
			onKeyboardHeight: function() {
				uni.onKeyboardHeightChange(res => {
					this.$set(this,'inputBottom',res.height);
					if(res.height > this.keyHeight) this.keyHeight = res.height;
					
				});
			},
			/**
			 * 计算时间
			 */			
			getwcTime:function(){
				var time = 0;
				for(var i in this.data){
					var d = this.data[i];
					if((d.time - time) > 10  * 60) {
						this.data[i].isShowTime = 1;
						time = d.time;
			        } else {
						this.data[i].isShowTime = 0;
					}
					if(['red_envelope_transfer','red_envelope'].indexOf(this.data[i].type) >= 0) {
						if(this.redLqBack.indexOf(this.data[i].msgId) >= 0 || this.data[i].sendUid == this.user.uid) {
							this.data[i].isReceiveRed = true;
						} else {
							this.data[i].isReceiveRed = false;
						}
					} else {
						this.data[i].isReceiveRed = false;
					}
			    }
				this.theKey++;
			},
			/**
			 * 是否判断重复msgId
			 */
			getRepeat:function(data,msgId){
				for(var i in data) {
					if(data[i].msgId == msgId) return true;
				}
				return false;
			},
			/**
			 * 
			 * @param {Object} data
			 */
			getDescData:function(data,desc = 'down'){
				var msgId = "";
				if(desc == 'down') {
					if(this.data.length > 0) {
						msgId = this.data[0].msgId;
					}
					var newData = [];
					for(var i in data) {
						var d = data[i];
						if(!this.findData(d.msgId)) {
							newData.push(d);
						}
					}
					this.$forceUpdate();
					this.data = newData.concat(this.data);
					this.scrollAnimation = false;
					this.setScrollInto(msgId);
				}
				//
				if(desc == 'up') {
					var newData = [];
					for(var i in data) {
						var d = data[i];
						if(!this.findData(d.msgId)) {
							newData.push(d);
							msgId = d.msgId;
						}
					}
					this.$forceUpdate();
					this.data = this.data.concat(newData);
					this.scrollAnimation = true;
					this.setScrollInto(msgId);
				}
			},
			
			/**
			 * 设置滚动位置
			 * @param {Object} msgId
			 */
			setScrollInto:function(msgId){
				if(msgId == "") return ;
				setTimeout(()=>{ this.scrollMsgId = msgId; },200);
			},
			/**
			 * 弹出上去到底
			 */
			lastScrollInto:function(){
				this.scrollMsgId = "1";
				if(this.data.length <= 2) return;
				setTimeout(()=>{ 
					this.scrollMsgId = this.data[this.data.length - 1].msgId;
				},200);
			},
			
			/**
			 * 打开图片
			 * @param {Object} img
			 */
			tapOpenImg:function(img) {
				var imgs = [];
				for(var i in this.data) {
					if(this.data[i].type == 'img') imgs.push(this.data[i].data);
				}
				uni.previewImage({current:img,urls:imgs});
			},
			/**
			 * 查询重复数据
			 * @param {Object} msgId
			 */
			findData:function(msgId) {
				for(var i in this.data) {
					if(this.data[i].msgId == msgId) return true;
				}
				return false;
			},
			/**
			 * 发送消息
			 */  
			tapSend:function(){
				if(this.msg == '') {
					return;
				}
				//消息发送
				var msgId = this.getWebSocket.createMsgId();
				var sendPack = {};
				sendPack.data = this.msg;
				sendPack.type = "text";
				sendPack.chat_id = "";
				sendPack.f_uid = this.chatUser.uid;
				sendPack.msg_id = msgId;
				var mess = new Message(JSON.stringify(sendPack),"chat",true,1,true);
				mess.id = msgId;		
				//消息添加
				var data  = {};
				data.chat = this.chatUser.chat;
				data.sendUser = {
					nickname : this.user.nickname,
					avatar   : this.user.avatar,
					uid		 : this.user.uid
				};
				data.group_type = 'chat';
				data.type = 'text';
				data.data = this.msg;
				data.is_remind = 0;
				data.isSend = 0;
				data.time = this.utils.strtotime();
				data.nid = 0;
				data.msgId = msgId;
				var bool  = this.getWebSocket.send(mess,(res)=>{
					let isSend = false;
					if(this.utils.isJSON(res)) {
						let rAr = JSON.parse(res);
						if(rAr.code == 1) {
							isSend = true;
						} else {
							this.utils.Tip(rAr.msg);
						}
					}
					for(var i in this.data) {
						if(this.data[i].msgId == msgId) {
							this.$set(this.data[i],'isSend',isSend ? 1 : -1);
							if(isSend) this.chatRead();
							break;
						}
					}
				},err=>{
					for(var i in this.data) {
						if(this.data[i].msgId == msgId) {
							this.$set(this.data[i],'isSend',-1);
							break;
						}
					}
				});
				this.data.push(data);
				this.getwcTime();
				this.setScrollInto(msgId);
				this.isGroup = false;
				this.inputBottom = 0;
				this.msg = '';
			},
			
			tapRsend:function(msgId){
				var item = null;
				for(var i in this.data) {
					if(this.data[i].msgId == msgId) {
						this.$set(this.data[i],'isSend',0);
						item =this.data[i];
						break;
					}
				}
				if(item == null) return;
				var sendPack = {};
				sendPack.data = item.data;
				sendPack.type = item.type;
				sendPack.chat_id = "";
				sendPack.f_uid = "";
				sendPack.msg_id = item.msgId;
				sendPack.group_id = this.groupId;
				sendPack.remind_id = "";
				var mess = new Message(JSON.stringify(sendPack),"chat",true,1,true);
				mess.id = msgId;	
				
				var bool  = this.getWebSocket.send(mess,(res)=>{
					let isSend = false;
					if(this.utils.isJSON(res)) {
						let rAr = JSON.parse(res);
						if(rAr.code == 1) {
							isSend = true;
						} else {
							this.utils.Tip(rAr.msg);
						}
					}
					
					for(var i in this.data) {
						if(this.data[i].msgId == msgId) {
							this.$set(this.data[i],'isSend',isSend ? 1 : -1);
							if(isSend) this.chatRead();
							break;
						}
					}
				},err=>{
					for(var i in this.data) {
						if(this.data[i].msgId == msgId) {
							this.$set(this.data[i],'isSend',-1);
							break;
						}
					}
				});
			},
			
			/**
			 * 选择相机
			 */
			tapPhoto:function(){
				
				// #ifdef APP-PLUS
					this.$store.dispatch('permission/requestPermissions', 'WRITE_EXTERNAL_STORAGE').then(res => {
						if(res !== 1) return;
						uni.chooseImage({
						  count: 10,
						  sizeType: ['compressed'], // 原图还是压缩图
						  sourceType: ['album'], // 相册还是相机
						  success:  (res)=> {
						    var tempFilePaths = res.tempFilePaths;//图片列表
						    this.upFileImg(tempFilePaths);
						  }
						});
					});   
					return;
				// #endif
				
				uni.chooseImage({
				  count: 10,
				  sizeType: ['compressed'], // 原图还是压缩图
				  sourceType: ['album'], // 相册还是相机
				  success:  (res)=> {
				    var tempFilePaths = res.tempFilePaths;//图片列表
				    this.upFileImg(tempFilePaths);
				  }
				});
			},
			/**
			 * 选择拍摄
			 */
			tapCamera:function(){
				
				// #ifdef APP-PLUS
					this.$store.dispatch('permission/requestPermissions', 'WRITE_EXTERNAL_STORAGE').then(res => {
						console.log(res);
						if(res !== 1) return;
						uni.chooseImage({
							count: 1,
							sizeType: ['compressed'],
							sourceType: ['camera'],
							success:(res) => {
								var tempFilePaths = res.tempFilePaths;
								this.upFileImg(tempFilePaths);
							}
						});
					});   
					return;
				// #endif
				uni.chooseImage({
					count: 1,
					sizeType: ['compressed'],
					sourceType: ['camera'],
					success:(res) => {
						var tempFilePaths = res.tempFilePaths;
						this.upFileImg(tempFilePaths);
					}
				});
					
			},
			
			tapVideo:function(){
				
				// #ifdef APP-PLUS
					this.$store.dispatch('permission/requestPermissions', 'WRITE_EXTERNAL_STORAGE').then(res => {
						console.log(res);
						if(res !== 1) return;
						uni.chooseVideo({
							sourceType: ['camera', 'album'],
							success:  (res)=> {
								if(res.size > 1024 * 1024 * 15) {
									this.utils.Tip("视频不能超过15MB");
									return;
								}
								this.upFileShip(res.tempFilePath);
							}
						});
					});   
					return;
				// #endif
				
				uni.chooseVideo({
					sourceType: ['camera', 'album'],
					success:  (res)=> {
						if(res.size > 1024 * 1024 * 15) {
							this.utils.Tip("视频不能超过15MB");
							return;
						}
						this.upFileShip(res.tempFilePath);
					}
				});
			},
			/**
			 * 视频
			 */
			upFileShip:function(filePath){
				var data  = {};
				var msgId 	  =  this.getWebSocket.createMsgId();
				data.chat = this.chatUser.chat;
				data.sendUser = {
					nickname : this.user.nickname,
					avatar   : this.user.avatar,
					uid		 : this.user.uid
				};
				data.group_type = 'chat';
				data.type = 'video';
				data.data = filePath;
				data.is_remind = 0;
				data.isSend = 0;
				data.time = this.utils.strtotime();
				data.nid = 0;
				data.msgId = msgId;
				this.data.push(data);
				this
					.request
					.post(this.request.getApi("qiniu"),{type:"mp4"})
					.then(res=>{
						uni.uploadFile({
							url: 'https://up-z0.qiniup.com', 
							filePath: filePath,
							name: 'file',
							formData: {
								'key': res.data.mk_str,
								'token': res.data.token
							},
							success: (uploadFileRes) => {
								var sendPack = {};
								sendPack.data = res.data.url;
								sendPack.type = "video";
								sendPack.chat_id = "";
								sendPack.f_uid = this.chatUser.uid;
								sendPack.msg_id = msgId;						
								this.getWebSocket.send((new Message(JSON.stringify(sendPack),"chat",true,1,true)),
									(res) => {
										var data = JSON.parse(res);
										if(data.code == 1) {
											this.inUpAction(msgId,1);
											this.chatRead();
										} else {
											this.inUpAction(msgId,-1);
										}
									},
									error=>{
										this.inUpAction(msgId,-1);
									});
							},
							fail:()=>{
								this.inUpAction(msgId,-1);
							}
						});
					})
					.catch(err=>{
						this.inUpAction(msgId,-1);
					});
			},
			
			
			/**
			 * 切换表情
			 */
			tapCkFace:function(bool){
				var bfn = ()=>{
					this.isFace = bool;
					if(bool){
						this.isGroup = false;
						this.isRecord = false;
						this.$refs['recording'].hide();
						this.inputBottom = this.keyHeight > 0 ? this.keyHeight : inputHeight;
						this.lastScrollInto();
					} else {
						this.inputBottom = 0;	
					}  
					uni.hideKeyboard();
				};
				if(this.showInput) {
					setTimeout(()=>{
						bfn()
					},100);
				} else {
					bfn();
				}	
			},
			/**
			 * 切换更多
			 */
			tapOpenGroup:function(){
				this.isFace = false;
				this.isRecord = false;
				this.$refs['recording'].hide();
				var bfn = ()=>{
					this.isGroup = ! this.isGroup;
					if(this.isGroup){
						this.inputBottom = this.keyHeight > 0 ? this.keyHeight : inputHeight;
						this.lastScrollInto();
					} else {
						this.inputBottom = 0;	
					}  
					uni.hideKeyboard();
				};
				if(this.showInput) {
					setTimeout(()=>{
						bfn()
					},100);
				} else {
					bfn();
				}	
			},
			/**
			 * 设置face
			 * @param {Object} index
			 */
			tapFaceSet:function(item) {
				this.msg += item.value;
			},
			
			/**
			 * 通讯数据
			 * @param {Object} res
			 */
			socketMessage:function(res){
				if(res.code == null) return;
				var uData = JSON.parse(res.data);
				console.log(uData);
				if(this.groupId == uData.group_id) {
					if(uData.type == "withdraw") {
						for(var i in this.data) {
							if(uData.data == this.data[i].msgId) {
								this.$delete(this.data,i);
							}
						}
					} 
					uData.isReceiveRed = false;
					if(!this.getRepeat(this.data,uData.msgId)) {
						this.data.push(uData);
						setTimeout(()=>{ this.scrollMsgId = uData.msgId; },200);
						this.chatRead();
					}
				}
			},
			
			socketOpen:function(){
				this.isNetwork = false;
			},
			/**
			 * 网络关闭 | 需重新链接
			 */
			socketClose:function(){
				//console.log('xxx');
				this.isNetwork = true;
			},
			
			/**
			 * 上传图片
			 * @param {Object} tempFilePaths
			 */
			upFileImg:function(tempFilePaths) {
				var msgId = "";
				for (var i in tempFilePaths) {
					var data  = {};
					msgId 	  =  this.getWebSocket.createMsgId();
					data.chat = this.chatUser.chat;
					data.sendUser = {
						nickname : this.user.nickname,
						avatar   : this.user.avatar,
						uid		 : this.user.uid
					};
					data.group_type = 'chat';
					data.type = 'img';
					data.data = tempFilePaths[i];
					data.is_remind = 0;
					data.isSend = 0;
					data.time = this.utils.strtotime();
					data.nid = 0;
					data.msgId = msgId;
					this.data.push(data);
					this.tempFilePaths.push(data);
				}
				this.upActionImg();
				setTimeout(()=>{
					this.scrollMsgId = msgId;
				},200);
				this.getwcTime()
			},
			/**
			 * 上传图片
			 * @param {Object} data
			 */
			upActionImg:function() {
				if(this.tempFilePaths.length <= 0) {
					this.isUpImg = false;
					return;
				}
				this.isUpImg = true;
				var tmpData = this.tempFilePaths[0];
				this
					.request
					.post(this.request.getApi("qiniu"),{type:"jpg"})
					.then(res=>{
						uni.uploadFile({
							url: 'https://up-z0.qiniup.com', 
							filePath: tmpData.data,
							name: 'file',
							formData: {
								'key': res.data.mk_str,
								'token': res.data.token
							},
							success: (uploadFileRes) => {
								console.log(uploadFileRes);
								var sendPack = {};
								sendPack.data = res.data.url;
								sendPack.type = "img";
								sendPack.chat_id = "";
								sendPack.f_uid = this.chatUser.uid;
								sendPack.msg_id = tmpData.msgId;						
								this.getWebSocket.send((new Message(JSON.stringify(sendPack),"chat",true,1,true)),
									(res) => {
										var data = JSON.parse(res);
										if(data.code == 1) {
											this.inUpAction(tmpData.msgId,1);
											this.chatRead();
										} else {
											this.inUpAction(tmpData.msgId,-1);
										}
									},
									error=>{
										this.inUpAction(tmpData.msgId,-1);
									});
							},
							fail:()=>{
								this.inUpAction(msgId,-1);
							}
						});
					})
					.catch(err=>{
						this.inUpAction(msgId,-1);
					});
			},
			/**
			 * 执行状态
			 */
			inUpAction:function(msgId,type) {
				for(var i in this.data) {
					if(this.data[i].msgId == msgId) this.$set(this.data[i],"isSend",type);
				}
				this.tempFilePaths.splice(0,1);
				this.upActionImg();
			},
			/**
			 * 打开
			 * @param {Object} ev
			 */
			tapOpen: function(ev) {
				let url = ev.currentTarget.dataset.url;
				this.utils.navigateTo(url);
			},
			/**
			 * 领取红包页面
			 * @param {Object} ev
			 */
			tapRedItem:function(ev){
				uni.showLoading({	title:"加载中.." });
				this.lqRed.data = JSON.parse(ev.data);	
				this.lqRed.user = ev.user;
				this.lqRed.msgId = ev.msgId;
				this.lqRed.state = 1;
				console.log(ev);
				this
					.request
					.post("chatRedEvelope",{id:this.lqRed.data.id})
					.then(res=>{
						uni.hideLoading();
						if(res.code == 200) {
							
							if(res.data.is_receive) {
								uni.navigateTo({ url:"redpack/look?id=" + this.lqRed.data.id});
								return;
							}							
							if(this.user.uid == ev.sendUid) {
								uni.navigateTo({ url:"redpack/look?id=" + this.lqRed.data.id});
							} else {
								this.isOpenRed = true;
							}
						} else {
							uni.hideLoading();
							uni.showModal({title: '系统提示',content: res.msg,showCancel: false});
						}
					})
					.catch(err=>{
						uni.hideLoading();
						uni.showModal({title: '系统提示',content: "加载失败",showCancel: false});
					});
			},
			/**
			 * 确认领取红包
			 */
			tapOpenLv:function(){
				this.redAnim = "anim-rotate";
				this
					.request
					.post("drwReceive",{
						id : this.lqRed.data.id
					})
					.then(res=>{
						this.redAnim = "";
						if(res.code == 200) {	
							this.isOpenRed = false;
							if(res.data.status == 200) {
								this.redMsg(this.lqRed.msgId);
								this.getwcTime();
								let music = uni.createInnerAudioContext();
								music.src = "/static/img/red_receive.mp3";
								music.play();
								uni.navigateTo({ url:"redpack/look?id=" + this.lqRed.data.id});
							}
							
							if(res.data.status == 100) {
								this.redMsg(this.lqRed.msgId);
								this.getwcTime();
							}
							
						} else {
							uni.showModal({title: '系统提示',content:res.msg,showCancel: false});
						}
					})
					.catch(err=>{
						this.redAnim = "";
						uni.showModal({title: '系统提示',content:"领取失败，请重新尝试！",showCancel: false});
					});
				
			},
			/**
			 * 验证码
			 * 
			 */
			tapZc:function(){
				uni.navigateTo({
					url:"redpack/redTransfer?name=" + encodeURIComponent(this.chatUser.nickname) + "&avatar=" 
					 + encodeURIComponent(this.chatUser.avatar) + "&usercode=" + this.usercode + "&groupId=" + this.groupId
				});
			},
			/**
			 * 打开转账数据
			 * @param {Object} ev
			 */
			tapRedTransferItem:function(ev){
				var data = JSON.parse(ev.data);
				uni.navigateTo({
					url:"redpack/transferLook?id=" + data.id + "&msgId=" + ev.msgId
				});
			},
			/**
			 * 查看收藏
			 */
			tapCollectList:function(){
				uni.navigateTo({
					url:"collection/collect?groupId=" + this.groupId + "&nickname=" + encodeURIComponent(this.chatUser.nickname) + "&avatar=" 
					 + encodeURIComponent(this.chatUser.avatar)
				});
			},
			/**
			 * 长安效果
			 */
			tapLongItem:function(ev){
				var index = ev.dom.currentTarget.dataset.id;
				var left = ev.dom.touches[0].pageX;
				var top = ev.dom.touches[0].clientY;
				var leftW = this.$device.screenWidth - left;
				var topW = this.$device.screenHeight - top;
				this.showLeft = leftW < 190 ? (left - (190 - leftW)): left;
				this.showTop = topW < 250 ? (top - (250 - topW)) : top;
				this.showOpen = true;
				this.showData = ev.data;
				console.log(this.showData);
			},
			
			/**
			 * 更多
			 */
			tapMore:function(){
				uni.navigateTo({
					url:"friend/info?usercode=" + this.usercode
				})
			},
			/**
			 * 转账阅读
			 * @param {Object} msgId
			 */
			redTransferCheck:function(msgId){
				this.redMsg(msgId);
				this.getwcTime();
			},
			/**
			 * 清理数据
			 * @param {Object} group_id
			 */
			chatClear:function(group_id){
				if(group_id == this.groupId) {
					this.data = [];
					this.$forceUpdate();
				}
			},
			/**
			 * 红包阅读/存
			 * @param {Object} msgId
			 */
			redMsg:function(msgId){
				for(var i in this.redLqBack) {
					if(this.redLqBack[i] == msgId) return;
				}
				this.redLqBack.push(msgId);
				if(this.redLqBack.length > 500) {
					this.redLqBack.splice(0,10);
				}
				uni.setStorage({
					key  : "chat_red_" + this.groupId,
					data :  JSON.stringify(this.redLqBack)
				})
			},
			chatRead:function(){
				this
					.request
					.post("chatRead",{groupId:this.groupId})
					.then(res=>{
						if(res.code == 200) {
							uni.$emit('chatRead',{groupId:this.groupId});
						} else {
							uni.showModal({title: '系统提示',content: res.msg,showCancel: false});
						}
					});
			},
			/**
			 * 复制内容
			 */
			tapCopy:function(){
				this.showOpen = false;
				uni.setClipboardData({
					data: this.showData.data,
					success: data => {
						this.utils.showAlert({
							title: "复制成功！",
							icon: "none",
							mask: true
						})
					},
					fail: err => {
						this.utils.showAlert({
							title: "复制失败，请重新复制",
							icon: "none",
							mask: true
						})
					},
				});
			},
			
			tapAddCollection:function(){
				this.showOpen = false;
				uni.showLoading({ 	title:"操作中.."	});
				this
					.request
					.post("collectAdd",{
						msg_id   : this.showData.msgId,
						data     : this.showData.data,
						nickname : this.showData.sendUser.nickname 
					})
					.then(res=>{
						uni.hideLoading();
						if( res.code== 200){
							this.utils.Tip("操作成功");
						} else {
							uni.showModal({title: '系统提示',content: res.msg,showCancel: false});
						}
					})
					.catch(err=>{
						uni.hideLoading();
						uni.showModal({title: '系统提示',content:"操作失败！",showCancel: false});
					})
				
			},
			
			tapDown:function(){
				this.showOpen = false;
				uni.downloadFile({
					url : this.showData.data, 
					success:(resFile)=>{
						if (resFile.statusCode === 200) {			
							uni.saveImageToPhotosAlbum({  
								filePath: resFile.tempFilePath,
								success: (res)=> {
									this.utils.Tip("保存图片成功");
								},
								fail:(res)=> {
									this.utils.showAlert("保存失败，请重新操作");
								},
								complete: function(res) {},
							})
						} else {
							this.isDown = false;
							this.utils.showAlert("保存失败，请重新操作");
						}
					},
					fail:()=>{
						this.isDown = false;
						this.utils.showAlert("保存失败，请重新操作");
					}
				});
			},
			
			tapRecord:function(){
				this.isRecord = !this.isRecord;
				if(this.isRecord) {
					this.isGroup = false;
					this.isFace = false;
					this.inputBottom = 150;
					this.$refs['recording'].open();
				} else {
					this.inputBottom = 0;	
					this.$refs['recording'].hide();
				}
			},
			
			tapRecordH5:function(recAr){
				uni.showLoading({ title:"发送中.."});
				this
				.request
				.post("chatUpVoice",recAr)
				.then( res => {
					uni.hideLoading();
					if(res.code == 200) {
						var msgId = this.getWebSocket.createMsgId();
						//消息添加
						var data  = {};
						data.chat = this.chatUser.chat;
						data.sendUser = {
							nickname : this.user.nickname,
							avatar   : this.user.avatar,
							uid		 : this.user.uid
						};
						data.group_type = 'chat';
						data.type = 'voice';
						data.data =  JSON.stringify({time:recAr.duration,filePath:res.data.msgFile});
						data.is_remind = 0;
						data.isSend = 0;
						data.time = this.utils.strtotime();
						data.nid = 0;
						data.msgId = msgId;
						this.data.push(data);
						this.getwcTime();
						this.setScrollInto(msgId);	
						
						var sendPack = {};
						sendPack.data = JSON.stringify({time:recAr.duration,filePath:res.data.msgFile});
						sendPack.type = "voice";
						sendPack.chat_id = "";
						sendPack.f_uid    = this.chatUser.uid;
						sendPack.group_id = this.groupId;
						sendPack.msg_id = msgId;				
						this.getWebSocket.send((new Message(JSON.stringify(sendPack),"chat",true,1,true)),
							(res) => {
								var data = JSON.parse(res);
								if(data.code == 1) {
									this.inUpAction(msgId,1);
									this.chatRead();
								} else {
									this.inUpAction(msgId,-1);
								}
							},
							error=>{
								this.inUpAction(msgId,-1);
							});
					} else {
						uni.showModal({title: '系统提示',content:res.msg,showCancel: false});
					}
				})
				.catch(err=>{
					console.log(err);
					uni.hideLoading();
					uni.showModal({title: '系统提示',content:"发送失败，请重新尝试！",showCancel: false});
				});
			},
			/**
			 * 撤回
			 */
			tapWithdraw:function(){
				this.showOpen = false;
				uni.showLoading({ title:"撤回中..."});
				this
					.request
					.post("withdraw",{groupId : this.groupId,msg_id:this.showData.msgId})
					.then(res=>{
						uni.hideLoading();
						if(res.code == 200) {
							for(var i in this.data) {
								if(this.data[i].msgId == this.showData.msgId) {
									var data = this.data[i];
									data.type = "tip";
									data.data = "你撤回了一条消息";
									this.$set(this.data,i,data);
								}
							}
						} else {
							this.utils.Tip(res.msg);
						}
					})
					.catch(err=>{
						uni.hideLoading();
						this.utils.Tip("加载失败");
					});
				
			},
			/**
			 * 我要转发
			 */
			tapZf:function(){
				this.showOpen = false;
				uni.navigateTo({
					url:"collection/transmit?msgId=" + this.showData.msgId + "&data=" + this.showData.data + "&type=" + this.showData.type
				})
			},
			/**
			 * 查看用户信息
			 */
			tapUserItem:function(uid){
				uni.navigateTo({
					url:"/pages/chat/friend/info?usercode=" + uid
				})
			}
			
			
	    }  
	}
</script>


<style>
</style>