聊天

common/config.js

@@ -6,6 +6,7 @@ const PROT = "http://"
 // const ROOTHOST = "47.75.182.93:8090";
 // const ROOTHOST = "1.92.152.160";
 const ROOTHOST = "1.92.152.160";
+const ROOTHOST1 = "sausers.blxinchuang.com";
 // const ROOTHOST = "192.168.2.15:8187";
 // const ROOTHOST = "120.46.52.165";
 // const ROOTHOST = "192.168.0.115:8187";
@@ -33,7 +34,7 @@ const checkdomain = (ROOTHOST) => {
 const ROOTPATH = (checkdomain(ROOTHOST) ? "https://" : "http://") + ROOTHOST + "/sqx_fast";
 const ROOTPATH1 = (checkdomain(ROOTHOST) ? "https://" : "http://") + ROOTHOST + "/sqx_fast";
 const ROOTPATH2 = "wss://" + ROOTHOST + "/wss/websocket/"; //联系客服
-const ROOTPATH3 = "wss://" + ROOTHOST + "/wss/chatSocket/"; //聊天
+const ROOTPATH3 = "wss://" + ROOTHOST1 + "/wss/chatSocket/"; //聊天
 const WEBSOCKETADDRESS = "ws://" + ROOTHOST + "/sqx_fast/ws/"; //退出软件后台后将用户状态置为离线
 const UPLOAD_PATH = ROOTPATH1 + '/alioss/upload';
 
@@ -60,6 +61,7 @@ const WS_UPLOAD_RECORDER_PATH = WS_BASE_PATH + 'monitorWebSocket/';
 module.exports = {
 	PROT,
 	ROOTHOST,
+	ROOTHOST1,
 	APIHOST: ROOTPATH,
 	APIHOST1: ROOTPATH1,
 	WSHOST: ROOTPATH2,

pages/msg/im.vue

@@ -1,14 +1,14 @@
 <template>
 	<view>
-		<view style="width: 100%;padding-bottom: 140rpx;">
+		<view style="width: 100%;padding-bottom: 140rpx;padding-top: 40rpx;" @click="guanbi">
 			<view style="display: flex;flex-direction: column;" v-for="(item,index) in ListItem" :key='index' >
 				<view style="margin-top: 15rpx;width: 100%;text-align: center;font-size: 26rpx;color: #999999;">
 					{{item.createTime}}</view>
-
+		
 				<view v-if="item.userId === 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>
+						<rich-text @longpress="copy(item.content)" v-if="item.content && item.messageType === 3" :nodes="item.content"></rich-text>
+						<view @longpress="copy(item.content)" v-if="item.content && item.messageType === 1" 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>
 						<view>
@@ -20,7 +20,7 @@
 				<view v-if="item.userId != userId" style="width: 83%;margin-right: 15%;">
 					<view class="chat-listitem" style="float: left;margin-left: 10rpx;">
 						<view>
-							<image :src="item.avatar" class="chat-listitem-image"></image>
+							<image :src="item.avatar?item.avatar:'../../static/logo.png'" class="chat-listitem-image"></image>
 						</view>
 						<view v-if="item.content && item.messageType === 1" class="chat-listitem-text1"
 							style="margin-left: 20rpx;">{{item.content}}</view>
@@ -30,24 +30,60 @@
 				</view>
 			</view>
 		</view>
-		<!-- 底部聊天输入框 -->
-		<view class="input-box ">
-			<view class="justify-between padding-lr align-center" style="display: flex;width: 100%;background: #FFFFFF;">
-				<image src="../../static/images/msg/add.png" @click="chooseImage(['album'])"
-					style="width: 70rpx;height: 70rpx;margin-right: 12rpx;"></image>
-				<input confirm-type="send" @confirm='setChatSave(1)' type="text" v-model="content"
-					style="width: 72%;height: 70rpx;background: #F5F5F5;margin: 0 10rpx;border-radius: 5rpx;padding-left: 10rpx;" />
-				<view class="save" @tap='setChatSave(1)'>发送</view>
+		<!-- 抽屉栏 -->
+		<view class="popup-layer" :class="popupLayerClass" @touchmove.stop.prevent="discard">
+			<!-- 表情 --> 
+			<swiper class="emoji-swiper" :class="{hidden:hideEmoji}" indicator-dots="true" duration="150">
+				<swiper-item v-for="(page,pid) in emojiList" :key="pid">
+					<view v-for="(em,eid) in page" :key="eid" @tap="addEmoji(em)">
+						<image mode="widthFix" :src="'/static/imgLt/emoji/'+em.url"></image>
+					</view>
+				</swiper-item>
+			</swiper>
+			<!-- 更多功能 相册-拍照-红包 -->
+			<view class="more-layer" :class="{hidden:hideMore}">
+				<view class="list">
+					<view class="box" @tap="chooseImage"><view class="icon tupian2"></view></view>
+					<!-- <view class="box" @tap="camera"><view class="icon paizhao"></view></view> -->
+				</view>
+			</view>
+		</view>
+		<!-- 底部输入栏 -->
+		<view class="input-box" :class="popupLayerClass" @touchmove.stop.prevent="discard">
+			
+			<!-- #ifdef H5 -->
+			<view class="more" @tap="showMore">
+				<view class="icon add"></view>
+			</view>
+			<!-- #endif -->
+			<view class="textbox">
+				<view class="text-mode"  :class="isVoice?'hidden':''">
+					<view class="box">
+						<textarea auto-height="true"  @confirm='setChatSave(1)' v-model="content"/>
+					</view>
+					<view class="em" @tap="chooseEmoji">
+						<view class="icon biaoqing"></view>
+					</view>
+				</view>
+			</view>
+			<!-- #ifndef H5 -->
+			<view class="more" @tap="showMore">
+				<view class="icon add"></view>
+			</view>
+			<!-- #endif -->
+			<view class="send" :class="isVoice?'hidden':''" @tap='setChatSave(1)'>
+				<view class="btn">发送</view>
 			</view>
 		</view>
 	</view>
 </template>
-
 <script>
 	import * as websocketUtils from 'utils/websocketUtils.js';
 	export default {
 		data() {
 			return {
+				videos: [],
+				charShow:0,
 				connected: false,
 				connecting: false,
 				msg: false,
@@ -81,9 +117,37 @@
 				size: 1000,
 				countDown: '',
 				chatConversationId: '',
-				byUserId: ''
+				byUserId: '',
+				//文字消息
+				textMsg:'',
+				//消息列表
+				msgList:[],
+				msgImgList:[],
+				myuid:0,
+				isVoice:false,
+				// 抽屉参数
+				popupLayerClass:'',
+				// more参数
+				hideMore:true,
+				//表情定义
+				hideEmoji:true,
+				emojiList:[
+					[{"url":"100.gif",alt:"[微笑]"},{"url":"101.gif",alt:"[伤心]"},{"url":"102.gif",alt:"[美女]"},{"url":"103.gif",alt:"[发呆]"},{"url":"104.gif",alt:"[墨镜]"},{"url":"105.gif",alt:"[哭]"},{"url":"106.gif",alt:"[羞]"},{"url":"107.gif",alt:"[哑]"},{"url":"108.gif",alt:"[睡]"},{"url":"109.gif",alt:"[哭]"},{"url":"110.gif",alt:"[囧]"},{"url":"111.gif",alt:"[怒]"},{"url":"112.gif",alt:"[调皮]"},{"url":"113.gif",alt:"[笑]"},{"url":"114.gif",alt:"[惊讶]"},{"url":"115.gif",alt:"[难过]"},{"url":"116.gif",alt:"[酷]"},{"url":"117.gif",alt:"[汗]"},{"url":"118.gif",alt:"[抓狂]"},{"url":"119.gif",alt:"[吐]"},{"url":"120.gif",alt:"[笑]"},{"url":"121.gif",alt:"[快乐]"},{"url":"122.gif",alt:"[奇]"},{"url":"123.gif",alt:"[傲]"}],
+					[{"url":"124.gif",alt:"[饿]"},{"url":"125.gif",alt:"[累]"},{"url":"126.gif",alt:"[吓]"},{"url":"127.gif",alt:"[汗]"},{"url":"128.gif",alt:"[高兴]"},{"url":"129.gif",alt:"[闲]"},{"url":"130.gif",alt:"[努力]"},{"url":"131.gif",alt:"[骂]"},{"url":"132.gif",alt:"[疑问]"},{"url":"133.gif",alt:"[秘密]"},{"url":"134.gif",alt:"[乱]"},{"url":"135.gif",alt:"[疯]"},{"url":"136.gif",alt:"[哀]"},{"url":"137.gif",alt:"[鬼]"},{"url":"138.gif",alt:"[打击]"},{"url":"139.gif",alt:"[bye]"},{"url":"140.gif",alt:"[汗]"},{"url":"141.gif",alt:"[抠]"},{"url":"142.gif",alt:"[鼓掌]"},{"url":"143.gif",alt:"[糟糕]"},{"url":"144.gif",alt:"[恶搞]"},{"url":"145.gif",alt:"[什么]"},{"url":"146.gif",alt:"[什么]"},{"url":"147.gif",alt:"[累]"}],
+					[{"url":"148.gif",alt:"[看]"},{"url":"149.gif",alt:"[难过]"},{"url":"150.gif",alt:"[难过]"},{"url":"151.gif",alt:"[坏]"},{"url":"152.gif",alt:"[亲]"},{"url":"153.gif",alt:"[吓]"},{"url":"154.gif",alt:"[可怜]"},{"url":"155.gif",alt:"[刀]"},{"url":"156.gif",alt:"[水果]"},{"url":"157.gif",alt:"[酒]"},{"url":"158.gif",alt:"[篮球]"},{"url":"159.gif",alt:"[乒乓]"},{"url":"160.gif",alt:"[咖啡]"},{"url":"161.gif",alt:"[美食]"},{"url":"162.gif",alt:"[动物]"},{"url":"163.gif",alt:"[鲜花]"},{"url":"164.gif",alt:"[枯]"},{"url":"165.gif",alt:"[唇]"},{"url":"166.gif",alt:"[爱]"},{"url":"167.gif",alt:"[分手]"},{"url":"168.gif",alt:"[生日]"},{"url":"169.gif",alt:"[电]"},{"url":"170.gif",alt:"[炸弹]"},{"url":"171.gif",alt:"[刀子]"}],
+					[{"url":"172.gif",alt:"[足球]"},{"url":"173.gif",alt:"[瓢虫]"},{"url":"174.gif",alt:"[翔]"},{"url":"175.gif",alt:"[月亮]"},{"url":"176.gif",alt:"[太阳]"},{"url":"177.gif",alt:"[礼物]"},{"url":"178.gif",alt:"[抱抱]"},{"url":"179.gif",alt:"[拇指]"},{"url":"180.gif",alt:"[贬低]"},{"url":"181.gif",alt:"[握手]"},{"url":"182.gif",alt:"[剪刀手]"},{"url":"183.gif",alt:"[抱拳]"},{"url":"184.gif",alt:"[勾引]"},{"url":"185.gif",alt:"[拳头]"},{"url":"186.gif",alt:"[小拇指]"},{"url":"187.gif",alt:"[拇指八]"},{"url":"188.gif",alt:"[食指]"},{"url":"189.gif",alt:"[ok]"},{"url":"190.gif",alt:"[情侣]"},{"url":"191.gif",alt:"[爱心]"},{"url":"192.gif",alt:"[蹦哒]"},{"url":"193.gif",alt:"[颤抖]"},{"url":"194.gif",alt:"[怄气]"},{"url":"195.gif",alt:"[跳舞]"}],
+					[{"url":"196.gif",alt:"[发呆]"},{"url":"197.gif",alt:"[背着]"},{"url":"198.gif",alt:"[伸手]"},{"url":"199.gif",alt:"[耍帅]"},{"url":"200.png",alt:"[微笑]"},{"url":"201.png",alt:"[生病]"},{"url":"202.png",alt:"[哭泣]"},{"url":"203.png",alt:"[吐舌]"},{"url":"204.png",alt:"[迷糊]"},{"url":"205.png",alt:"[瞪眼]"},{"url":"206.png",alt:"[恐怖]"},{"url":"207.png",alt:"[忧愁]"},{"url":"208.png",alt:"[眨眉]"},{"url":"209.png",alt:"[闭眼]"},{"url":"210.png",alt:"[鄙视]"},{"url":"211.png",alt:"[阴暗]"},{"url":"212.png",alt:"[小鬼]"},{"url":"213.png",alt:"[礼物]"},{"url":"214.png",alt:"[拜佛]"},{"url":"215.png",alt:"[力量]"},{"url":"216.png",alt:"[金钱]"},{"url":"217.png",alt:"[蛋糕]"},{"url":"218.png",alt:"[彩带]"},{"url":"219.png",alt:"[礼物]"},]				
+				],
+				//表情图片图床名称 ，由于我上传的第三方图床名称会有改变，所以有此数据来做对应，您实际应用中应该不需要
+				onlineEmoji:{"100.gif":"AbNQgA.gif","101.gif":"AbN3ut.gif","102.gif":"AbNM3d.gif","103.gif":"AbN8DP.gif","104.gif":"AbNljI.gif","105.gif":"AbNtUS.gif","106.gif":"AbNGHf.gif","107.gif":"AbNYE8.gif","108.gif":"AbNaCQ.gif","109.gif":"AbNN4g.gif","110.gif":"AbN0vn.gif","111.gif":"AbNd3j.gif","112.gif":"AbNsbV.gif","113.gif":"AbNwgs.gif","114.gif":"AbNrD0.gif","115.gif":"AbNDuq.gif","116.gif":"AbNg5F.gif","117.gif":"AbN6ET.gif","118.gif":"AbNcUU.gif","119.gif":"AbNRC4.gif","120.gif":"AbNhvR.gif","121.gif":"AbNf29.gif","122.gif":"AbNW8J.gif","123.gif":"AbNob6.gif","124.gif":"AbN5K1.gif","125.gif":"AbNHUO.gif","126.gif":"AbNIDx.gif","127.gif":"AbN7VK.gif","128.gif":"AbNb5D.gif","129.gif":"AbNX2d.gif","130.gif":"AbNLPe.gif","131.gif":"AbNjxA.gif","132.gif":"AbNO8H.gif","133.gif":"AbNxKI.gif","134.gif":"AbNzrt.gif","135.gif":"AbU9Vf.gif","136.gif":"AbUSqP.gif","137.gif":"AbUCa8.gif","138.gif":"AbUkGQ.gif","139.gif":"AbUFPg.gif","140.gif":"AbUPIS.gif","141.gif":"AbUZMn.gif","142.gif":"AbUExs.gif","143.gif":"AbUA2j.gif","144.gif":"AbUMIU.gif","145.gif":"AbUerq.gif","146.gif":"AbUKaT.gif","147.gif":"AbUmq0.gif","148.gif":"AbUuZV.gif","149.gif":"AbUliF.gif","150.gif":"AbU1G4.gif","151.gif":"AbU8z9.gif","152.gif":"AbU3RJ.gif","153.gif":"AbUYs1.gif","154.gif":"AbUJMR.gif","155.gif":"AbUadK.gif","156.gif":"AbUtqx.gif","157.gif":"AbUUZ6.gif","158.gif":"AbUBJe.gif","159.gif":"AbUdIO.gif","160.gif":"AbU0iD.gif","161.gif":"AbUrzd.gif","162.gif":"AbUDRH.gif","163.gif":"AbUyQA.gif","164.gif":"AbUWo8.gif","165.gif":"AbU6sI.gif","166.gif":"AbU2eP.gif","167.gif":"AbUcLt.gif","168.gif":"AbU4Jg.gif","169.gif":"AbURdf.gif","170.gif":"AbUhFS.gif","171.gif":"AbU5WQ.gif","172.gif":"AbULwV.gif","173.gif":"AbUIzj.gif","174.gif":"AbUTQs.gif","175.gif":"AbU7yn.gif","176.gif":"AbUqe0.gif","177.gif":"AbUHLq.gif","178.gif":"AbUOoT.gif","179.gif":"AbUvYF.gif","180.gif":"AbUjFU.gif","181.gif":"AbaSSJ.gif","182.gif":"AbUxW4.gif","183.gif":"AbaCO1.gif","184.gif":"Abapl9.gif","185.gif":"Aba9yR.gif","186.gif":"AbaFw6.gif","187.gif":"Abaiex.gif","188.gif":"AbakTK.gif","189.gif":"AbaZfe.png","190.gif":"AbaEFO.gif","191.gif":"AbaVYD.gif","192.gif":"AbamSH.gif","193.gif":"AbaKOI.gif","194.gif":"Abanld.gif","195.gif":"Abau6A.gif","196.gif":"AbaQmt.gif","197.gif":"Abal0P.gif","198.gif":"AbatpQ.gif","199.gif":"Aba1Tf.gif","200.png":"Aba8k8.png","201.png":"AbaGtS.png","202.png":"AbaJfg.png","203.png":"AbaNlj.png","204.png":"Abawmq.png","205.png":"AbaU6s.png","206.png":"AbaaXn.png","207.png":"Aba000.png","208.png":"AbarkT.png","209.png":"AbastU.png","210.png":"AbaB7V.png","211.png":"Abafn1.png","212.png":"Abacp4.png","213.png":"AbayhF.png","214.png":"Abag1J.png","215.png":"Aba2c9.png","216.png":"AbaRXR.png","217.png":"Aba476.png","218.png":"Abah0x.png","219.png":"Abdg58.png"},
 			};
 		},
+		onLoad(d) {
+			this.userId = this.$queue.getData('userId');
+			this.byUserId = d.byUserId
+			this.chatConversationId = d.chatConversationId;
+			this.connect();
+		},
 		computed: {
 			showMsg() {
 				if (this.connected) {
@@ -101,29 +165,13 @@
 			// uni.closeSocket()
 			uni.hideLoading()
 		},
-		onLoad(d) {
-			this.userId = this.$queue.getData('userId');
-			this.byUserId = d.byUserId
-			this.chatConversationId = d.chatConversationId;
-			this.connect();
-
-			// if (d.teamName) {
-			// 	uni.setNavigationBarTitle({
-			// 		title: d.teamName
-			// 	});
-			// }
-		},
-		onShow() {
-			if (this.connected || this.connecting) {
-
-			} else {
-				this.connect();
-			}
-		},
-		onHide() {
-			uni.closeSocket()
-		},
-		methods: {
+		methods:{
+			guanbi(){
+				this.hideDrawer();
+			},
+			showChar(index){
+				this.charShow!=this.charShow
+			},
 			copy(content) {
 				uni.showModal({
 					title: '温馨提示',
@@ -154,15 +202,15 @@
 				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() + "-";
@@ -182,7 +230,6 @@
 				}
 				return result;
 			},
-			
 			connect() {
 				let that = this;
 				let userId = that.$queue.getData('userId');
@@ -197,11 +244,7 @@
 				uni.showLoading({
 					title: '连接中...'
 				})
-				console.log(userId,'*******************')
 				uni.connectSocket({
-					// url: 'ws://192.168.1.17:8881/gameTeamChat/' + userId + '_' + this.teamId,
-					// url: 'wss://game.shengqianxiong.com.cn/wss/gameTeamChat/' + userId + '_' + this.teamId,
-					// url: 'ws://192.168.1.17:8180/sqx_fast/chatSocket/' + userId,
 					url: websocketUtils.getWsBaseUrl() + userId,
 					data() {
 						return {
@@ -260,6 +303,8 @@
 			close() {
 				uni.closeSocket()
 			},
+			
+			// 加载初始页面消息
 			getTimeOrListItem1() {
 				this.$Request.get('/app/chat/selectChatContent?page=1&limit=1000&chatConversationId=' + this.chatConversationId).then(
 					res => {
@@ -267,10 +312,11 @@
 						if (res.data) {
 							var time = '';
 							res.data.list.forEach(d => {
-								if (!d.avatar) {
-									// d.chat.userHead = '../../static/logo.png';
-									let avatar = this.$queue.getData('avatar');
-									d.avatar = avatar
+								var sf=this.checkBrackets(d.content)
+								if(sf==true){
+									var sss=this.replaceEmoji(d.content);
+									d.content=sss;
+									d.messageType=3;
 								}
 								this.ListItem.push(d);
 							});
@@ -285,31 +331,12 @@
 						uni.hideLoading();
 					});
 			},
-			getChatSave() {
-				let userId = this.$queue.getData('userId');
-				let phone = this.$queue.getData('phone');
-				let userName = this.$queue.getData('userName');
-				if (!phone) {
-					phone = this.$queue.getData('userName');
-				}
-				let avatar = this.$queue.getData('avatar');
-				let data = {
-					userId: userId,
-					userHead: avatar,
-					userName: userName,
-					storeId: '0',
-					storeHead: '盛安到家',
-					storeName: ''
-				}
-				this.$Request.postJson('/chat/save', data).then(res => {
-					if (res.status === 0) {
-						this.chatId = res.data.chatId;
-						uni.showLoading({
-							title: '加载中...'
-						});
-						this.getTimeOrListItem1();
-					}
-				});
+			checkBrackets(data) {
+			  // 正则表达式，用于匹配包含中括号的字符串
+			  const regex = /\[|\]/;
+			  
+			  // 使用正则表达式的test方法检查数据
+			  return regex.test(data);
 			},
 			setChatSave(type) {
 				//type:1文字 2图片
@@ -328,7 +355,18 @@
 				if (!phone) {
 					phone = this.$queue.getData('userName');
 				}
-				console.log(this.byUserId)
+				console.log("this.byUserId",this.byUserId)
+				// if(this.textMsg!=''){
+				// 	const isRich = this.isRichText(this.textMsg); // 返回 true
+				// 	if(isRich==true){
+				// 		this.textMsg = this.replaceEmoji(this.textMsg);
+				// 	}else{
+				// 		this.content=this.textMsg
+				// 	}
+				// }
+				
+				
+				// console.log('this.content=============>',isRich)
 				let data = {
 					content: this.content,
 					messageType: type,
@@ -336,7 +374,12 @@
 					chatConversationId: this.chatConversationId,
 					
 				}
+				if(data.messageType==2){
+					data.width="100"
+				}
+				console.log("data",data)
 				data = JSON.stringify(data);
+				
 				let that = this;
 				uni.sendSocketMessage({
 					data: data,
@@ -357,6 +400,7 @@
 						console.log(data,'data99999999999999999')
 						// that.ListItem.push(data);
 						setTimeout(() => {
+							that.hideDrawer();
 							that.getTimeOrListItem1();
 						}, 50);
 						console.log(that.content);
@@ -366,13 +410,89 @@
 					}
 				})
 				this.content = '';
+				this.textMsg = '';
 			},
-			//发送图片
-			chooseImage(sourceType) {
-				uni.chooseImage({
+			
+			//查看大图
+			viewImg(item) {
+				let imgsArray = [];
+				imgsArray[0] = item;
+				uni.previewImage({
+					current: 0,
+					urls: imgsArray
+				});
+			},
+			//处理图片尺寸，如果不处理宽高，新进入页面加载图片时候会闪
+			setPicSize(content){
+				// 让图片最长边等于设置的最大长度，短边等比例缩小，图片控件真实改变，区别于aspectFit方式。
+				let maxW = uni.upx2px(350);//350是定义消息图片最大宽度
+				let maxH = uni.upx2px(350);//350是定义消息图片最大高度
+				if(content.w>maxW||content.h>maxH){
+					let scale = content.w/content.h;
+					content.w = scale>1?maxW:maxH*scale;
+					content.h = scale>1?maxW/scale:maxH;
+				}
+				return content;
+			},
+			
+			//更多功能(点击+弹出) 
+			showMore(){
+				this.isVoice = false;
+				this.hideEmoji = true;
+				if(this.hideMore){
+					this.hideMore = false;
+					this.openDrawer();
+				}else{
+					this.hideDrawer();
+				}
+			},
+			// 打开抽屉
+			openDrawer(){
+				this.popupLayerClass = 'showLayer';
+			},
+			// 隐藏抽屉
+			hideDrawer(){
+				this.popupLayerClass = '';
+				setTimeout(()=>{
+					this.hideMore = true;
+					this.hideEmoji = true;
+				},150);
+			},
+			// 选择图片发送
+			chooseImage(){
+				this.getImage('album');
+			},
+			//拍照发送
+			camera(){
+				let that = this
+				uni.chooseVideo({
 					count: 1,
 					sourceType: ['album', 'camera'],
 					success: res => {
+						that.videos.push(res.tempFilePath);
+						for (let i = 0; i < that.videos.length; i++) {
+							that.$queue.showLoading("上传中...");
+							uni.uploadFile({ // 上传接口
+								url: websocketUtils.uploadFileUrl(), //真实的接口地址
+								filePath: that.videos[i],
+								name: 'file',
+								success: (uploadFileRes) => {
+									this.content = JSON.parse(uploadFileRes.data).data;
+									this.setChatSave(2);
+									uni.hideLoading();
+								}
+							});
+						}
+					}
+				})
+			},
+			//选照片 or 拍照
+			getImage(type){
+				this.hideDrawer();
+				uni.chooseImage({
+					sourceType:[type],
+					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
+					success: (res)=>{
 						for (let i = 0; i < res.tempFilePaths.length; i++) {
 							this.$queue.showLoading("上传中...");
 							uni.uploadFile({ // 上传接口
@@ -388,100 +508,135 @@
 							});
 						}
 					}
-				})
-			},
-			//查看大图
-			viewImg(item) {
-				let imgsArray = [];
-				imgsArray[0] = item;
-				uni.previewImage({
-					current: 0,
-					urls: imgsArray
 				});
 			},
-		},
-	};
+			// 选择表情
+			chooseEmoji(){
+				this.hideMore = true;
+				if(this.hideEmoji){
+					this.hideEmoji = false;
+					this.openDrawer();
+				}else{
+					this.hideDrawer();
+				}
+			},
+			//添加表情
+			addEmoji(em){
+				this.content+=em.alt;
+			},
+			//获取焦点，如果不是选表情ing,则关闭抽屉
+			textareaFocus(){
+				if(this.popupLayerClass=='showLayer' && this.hideMore == false){
+					this.hideDrawer();
+				}
+			},
+			
+			//替换表情符号为图片
+			replaceEmoji(str){
+				let replacedStr = str.replace(/\[([^(\]|\[)]*)\]/g,(item, index)=>{
+					console.log("item: " + item);
+					for(let i=0;i<this.emojiList.length;i++){
+						let row = this.emojiList[i];
+						for(let j=0;j<row.length;j++){
+							let EM = row[j];
+							if(EM.alt==item){
+								//在线表情路径，图文混排必须使用网络路径，请上传一份表情到你的服务器后再替换此路径 
+								//比如你上传服务器后，你的100.gif路径为https://www.xxx.com/emoji/100.gif 则替换onlinePath填写为https://www.xxx.com/emoji/
+								let onlinePath = 'https://s2.ax1x.com/2019/04/12/'
+								let imgstr = '<img src="'+onlinePath+this.onlineEmoji[EM.url]+'">';
+								return imgstr;
+							}
+						}
+					}
+				});
+				return '<div style="display: flex;align-items: center;word-wrap:break-word;">'+replacedStr+'</div>';
+			},
+			discard(){
+				return;
+			}
+		}
+	}
 </script>
-
-<style>
+<style lang="scss" scoped>
+	@import "@/static/HM-chat/css/style.scss"; 
 	page {
-		background-color: #F7F7F7;
-	}
+			background-color: #F7F7F7;
+		}
+		
+		.bg {
+			background-color: #FFFFFF;
+		}
 	
-	.bg {
-		background-color: #FFFFFF;
-	}
-
-	.input-box {
-		position: fixed;
-		bottom: 0;
-		left: 0;
-		height: 120rpx;
-		width: 100%;
-		display: flex;
-		box-sizing: content-box;
-		z-index: 999;
-		/* background-color: #ececec; */
-		/* padding: 0 5rpx; */
-	}
-
-	.chat-listitem {
-		display: flex;
-		margin-top: 20rpx;
-		padding: 10rpx;
-	}
-
-	.chat-listitem-text {
-		color: #FFFFFF;
-		background: #005DFF;
-		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-text1 {
-		/* color: #FFFFFF; */
-		background: #FFFFFF;
-		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: #FFFFFF; */
-		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: 70rpx;
-		height: 70rpx;
-		color: #FFF;
-		background:#005DFF;
-		margin: 5rpx 10rpx 0;
-		line-height: 70rpx;
-	}
-</style>
+		.input-box {
+			position: fixed;
+			bottom: 0;
+			left: 0;
+			height: 120rpx;
+			width: 100%;
+			display: flex;
+			box-sizing: content-box;
+			z-index: 999;
+			/* background-color: #ececec; */
+			/* padding: 0 5rpx; */
+		}
+	
+		.chat-listitem {
+			display: flex;
+			margin-top: 20rpx;
+			padding: 10rpx;
+		}
+	
+		.chat-listitem-text {
+			color: #FFFFFF;
+			background: #005DFF;
+			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-text1 {
+			/* color: #FFFFFF; */
+			background: #FFFFFF;
+			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: #FFFFFF; */
+			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: 70rpx;
+			height: 70rpx;
+			color: #FFF;
+			background:#005DFF;
+			margin: 5rpx 10rpx 0;
+			line-height: 70rpx;
+		}
+</style>

static/HM-chat/css/style.scss

@@ -0,0 +1,615 @@
+page{
+	background-color: #e5e5e5;
+}
+@font-face {font-family:"HMfont-home";src:url('data:application/x-font-woff2;charset=utf-8;base64,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') format('woff2');}
+	.icon {
+		font-family:"HMfont-home" !important;
+		font-size:56upx;
+		font-style:normal;
+		color: #333;
+		&.biaoqing:before {
+		  content: "\e797";
+		}
+		&.jianpan:before {
+		  content: "\e7b2";
+		}
+		&.yuyin:before {
+		  content: "\e805";
+		}
+		&.tupian:before {
+		  content: "\e639";
+		}
+		&.chehui:before {
+		  content: "\e904";
+		}
+		&.luyin:before {
+		  content: "\e905";
+		}
+		&.luyin2:before {
+		  content: "\e677";
+		}
+		&.other-voice:before {
+		  content: "\e667";
+		}
+		&.my-voice:before {
+		  content: "\e906";
+		}
+		&.hongbao:before {
+		  content: "\e626";
+		}
+		&.tupian2:before {
+		  content: "\e674";
+		}
+		&.paizhao:before {
+		  content: "\e63e";
+		}
+		&.add:before {
+		  content: "\e655";
+		}
+		&.close:before {
+		  content: "\e607";
+		}
+		&.to:before {
+		  content: "\e675";
+		}
+	}
+.hidden{
+	display: none !important;
+}
+.popup-layer{
+	&.showLayer{transform: translate3d(0,-42vw,0);}
+	transition: all .15s linear;
+	width: 96%;
+	height: 42vw;
+	padding: 20upx 2%;
+	background-color: #f3f3f3;
+	border-top: solid 1upx #ddd;
+	position: fixed;
+	z-index: 20;
+	top: 100%;
+	.emoji-swiper{
+		height: 40vw;
+		swiper-item{
+			display: flex;
+			align-content: flex-start;
+			flex-wrap: wrap;
+			view{
+				width: 12vw;
+				height: 12vw;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				image{
+					width: 8.4vw;
+					height: 8.4vw;
+				}
+			}
+		}
+	}
+	.more-layer{
+		width: 100%;
+		height: 42vw;
+		.list{
+			width: 100%;
+			display: flex;
+			flex-wrap: wrap;
+			.box{
+				width: 18vw;
+				height: 18vw;
+				border-radius: 20upx;
+				background-color: #fff;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+				margin: 0 3vw 2vw 3vw;
+				.icon{
+					font-size: 70upx;
+				}
+			}
+		}
+	}
+}
+.input-box{
+	width: 98%;
+	min-height: 100upx;
+	padding: 0 1%;
+	background-color: #f2f2f2;
+	display: flex;
+	position: fixed;
+	z-index: 20;
+	bottom:-2upx;
+	&.showLayer{transform: translate3d(0,-42vw,0);}
+	transition: all .15s linear;
+	border-bottom: solid 1upx #ddd;
+	.voice,.more{
+		flex-shrink: 0;
+		width: 90upx;
+		height: 100upx;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+	}
+	
+	.send{
+		//H5发送按钮左边距
+		/* #ifdef H5 */
+		margin-left: 20upx;
+		/* #endif */
+		flex-shrink: 0;
+		width: 100upx;
+		height: 100upx;
+		display: flex;
+		align-items: center;
+		.btn{
+			width: 90upx;
+			height: 56upx;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			background:linear-gradient(to right,#f09b37,#eb632c);
+			color: #fff;
+			border-radius: 6upx;
+			font-size: 24upx;
+		}
+	}
+	.textbox{
+		width: 100%;
+		min-height: 70upx;
+		margin-top: 15upx;
+		.voice-mode{
+			width: calc(100% - 2upx);
+			height: 68upx;
+			border-radius: 70upx;
+			border:solid 1upx #cdcdcd;
+			display: flex;
+			justify-content: center;
+			align-items: center;
+			font-size: 28upx;
+			background-color: #fff;
+			color: #555;
+			&.recording{
+				background-color: #e5e5e5;
+			}
+		}
+		.text-mode{
+			width: 100%;
+			min-height: 70upx;
+			display: flex;
+			background-color: #fff;
+			border-radius: 40upx;
+			.box{
+				width: 100%;
+				padding-left: 30upx;
+				min-height: 70upx;
+				display: flex;
+				align-items: center;
+				textarea{
+					width: 100%;
+				}
+			}
+			.em{
+				flex-shrink: 0;
+				width: 80upx;
+				padding-left: 10upx;
+				height: 70upx;
+				display: flex;
+				justify-content: center;
+				align-items: center;
+			}
+		}
+	}
+}
+.record{
+	width: 40vw;
+	height: 40vw;
+	position: fixed;
+	top: 55%;
+	left: 30%;
+	background-color: rgba(0,0,0,.6);
+	border-radius: 20upx;
+	.ing{
+		width: 100%;
+		height: 30vw;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		// 模拟录音音效动画
+		@keyframes volatility {
+			0% {background-position: 0% 130%;}
+			20% {background-position: 0% 150%;}
+			30% {background-position: 0% 155%;}
+			40% {background-position: 0% 150%;}
+			50% {background-position: 0% 145%;}
+			70% {background-position: 0% 150%;}
+			80% {background-position: 0% 155%;}
+			90% {background-position: 0% 140%;}
+			100% {background-position: 0% 135%;}
+		}
+		.icon{
+			background-image:linear-gradient(to bottom,#f09b37,#fff 50%); 
+			background-size:100% 200%;
+			animation: volatility 1.5s ease-in-out -1.5s infinite alternate;
+			-webkit-background-clip:text; 
+			-webkit-text-fill-color:transparent; 
+			font-size: 150upx;
+			color: #f09b37;
+		}
+	}
+	.cancel{
+		width: 100%;
+		height: 30vw;
+		display: flex;
+		justify-content: center;
+		align-items: center;
+		.icon{
+			color: #fff;
+			font-size: 150upx;
+		}
+	}
+	.tis{
+		width: 100%;
+		height: 10vw;
+		display: flex;
+		justify-content: center;
+		font-size: 28upx;
+		color: #fff;
+		&.change{
+			color: #f09b37;
+		}
+	}
+}
+.content{
+	width: 100%;
+	.msg-list{
+		width: 96%;
+		padding: 0 2%;
+		position: absolute;
+		top: 0;
+		bottom: 100upx;
+		.loading{
+			//loading动画
+			display: flex;
+			justify-content: center;
+			@keyframes stretchdelay {
+				0%, 40%, 100% {
+					transform: scaleY(0.6);
+				}
+				20% {
+					transform: scaleY(1.0);
+				}
+			}
+			.spinner {
+				margin: 20upx 0;
+				width: 60upx;
+				height: 100upx;
+				display: flex;
+				align-items: center;
+				justify-content: space-between;
+				view {
+					background-color: #f06c7a;
+					height: 50upx;
+					width: 6upx;
+					border-radius: 6upx;
+					animation: stretchdelay 1.2s infinite ease-in-out;
+				}
+				.rect2 {
+				  animation-delay: -1.1s;
+				}
+				.rect3 {
+				  animation-delay: -1.0s;
+				}
+				.rect4 {
+				  animation-delay: -0.9s;
+				}
+				.rect5 {
+				  animation-delay: -0.8s;
+				}
+			}
+		}
+		.row{
+			.system{
+				display: flex;
+				justify-content: center;
+				view{
+					padding: 0 30upx;
+					height: 50upx;
+					display: flex;
+					justify-content: center;
+					align-items: center;
+					background-color: #c9c9c9;
+					color: #fff;
+					font-size: 24upx;
+					border-radius: 40upx;
+				}
+				.red-envelope{
+					image{
+						margin-right: 5upx;
+						width: 30upx;
+						height: 30upx;
+					}
+				}
+			}
+			&:first-child{
+				margin-top: 20upx;
+			}
+			padding: 20upx 0;
+			.my .left,.other .right{
+				width: 100%;
+				display: flex;
+				.bubble{
+					max-width: 70%;
+					min-height: 50upx;
+					border-radius: 10upx;
+					padding: 15upx 20upx;
+					display: flex;
+					align-items: center;
+					font-size: 32upx;
+					word-break: break-word;
+					&.img{
+						background-color: transparent;
+						padding:0;
+						overflow: hidden;
+						image{
+							max-width: 350upx;
+							max-height: 350upx;
+						}
+					}
+					&.red-envelope{
+						background-color: transparent;
+						padding:0;
+						overflow: hidden;
+						position: relative;
+						justify-content: center;
+						align-items: flex-start;
+						image{
+							width: 250upx;
+							height: 313upx;
+						}
+						.tis{
+							position: absolute;
+							top: 6%;
+							font-size: 26upx;
+							color: #9c1712;
+						}
+						.blessing{
+							position: absolute;
+							bottom: 14%;
+							color: #e9b874;
+							width: 80%;
+							text-align: center;
+							overflow: hidden;
+							// 最多两行
+							display: -webkit-box;-webkit-box-orient: vertical;-webkit-line-clamp: 2;
+						}
+					}
+					&.voice{
+						.icon{
+							font-size: 40upx;
+							display: flex;
+							align-items: center;
+						}
+						.icon:after
+						{
+							content:" ";
+							width: 53upx;
+							height: 53upx;
+							border-radius: 100%;
+							position: absolute;
+							box-sizing: border-box;
+						}
+						.length{
+							font-size: 28upx;
+						}
+					}
+				}
+			}
+			.my .right,.other .left{
+				flex-shrink: 0;
+				width: 80upx;
+				height: 80upx;
+				image{
+					width: 80upx;
+					height: 80upx;
+					border-radius: 10upx;
+				}
+			}
+			.my{
+				width: 100%;
+				display: flex;
+				justify-content: flex-end;
+				.left{
+					min-height: 80upx;
+					
+					align-items: center;
+					justify-content: flex-end;
+					.bubble{
+						background-color: #f06c7a;
+						color: #fff;
+						
+						&.voice{
+							.icon{
+								color: #fff;
+							}
+							.length{
+								margin-right: 20upx;
+							}
+						}
+						&.play{
+							@keyframes my-play {
+								0% {
+									transform: translateX(80%);
+								}
+								100% {
+									transform: translateX(0%);
+								}
+							}
+							.icon:after
+							{
+								border-left: solid 10upx rgba(240,108,122,.5);
+								animation: my-play 1s linear infinite;
+							}
+						}
+					}
+				}
+				.right{
+					margin-left: 15upx;
+				}
+			}
+			.other{
+				width: 100%;
+				display: flex;
+				.left{
+					margin-right: 15upx;
+				}
+				.right{
+					flex-wrap: wrap;
+					.username{
+						width: 100%;
+						height: 45upx;
+						font-size: 24upx;
+						color: #999;
+						display: flex;
+						.name{
+							margin-right: 50upx;
+						}
+					}
+					.bubble{
+						background-color: #fff;
+						color: #333;
+						&.voice{
+							.icon{
+								color: #333;
+								
+							}
+							.length{
+								margin-left: 20upx;
+							}
+						}
+						&.play{
+							@keyframes other-play {
+								0% {
+									transform: translateX(-80%);
+								}
+								100% {
+									transform: translateX(0%);
+								}
+							}
+							.icon:after
+							{
+								border-right: solid 10upx rgba(255,255,255,.8);
+								
+								animation: other-play 1s linear infinite;
+							}
+						}
+					}
+				}
+			}
+		}
+	}
+}
+.windows{
+
+	.mask{
+		position: fixed;
+		top: 100%;
+		width: 100%;
+		height: 100%;
+		z-index: 1000;
+		background-color: rgba(0,0,0,.6);
+		opacity: 0;
+		transition: opacity .2s ease-out;
+	}
+	.layer{
+		position: fixed;
+		width: 80%;
+		height: 70%;
+		left: 10%;
+		z-index: 1001;
+		border-radius: 20upx;
+		overflow: hidden;
+		top:100%;
+		transform: scale3d(.5,.5,1);
+		transition: all .2s ease-out;
+	}
+	&.show{
+		display: block;
+		.mask{
+			top: 0;
+			opacity: 1;
+		}
+		.layer{
+			transform: translate3d(0,-85vh,0) scale3d(1,1,1);
+		}
+	}
+	&.hide{
+		display: block;
+		.mask{
+			top: 0;
+			opacity: 0;
+		}
+		.layer{
+			//transform: translate3d(0,-85vh,0) scale3d(.5,.5,1);
+		}
+	}
+}
+.open-redenvelope{
+	width: 100%;
+	height: 70vh;
+	background-color: #cf3c35; 
+	position: relative;
+	.top{
+		width: 100%;
+		background-color: #fe5454;
+		display: flex;
+		justify-content: center;
+		flex-wrap: wrap;
+		border-radius: 0 0 100% 100%;
+		box-shadow: inset 0 -20upx 0 #9c1712;
+		.close-btn{
+			width: 100%;
+			height: 80upx;
+			display: flex;
+			justify-content: flex-end;
+			margin-bottom: 30upx;
+			.icon{
+				color: #9c1712;
+				margin-top: 10upx;
+				margin-right: 10upx;
+			}
+		}
+		image{
+			width: 130upx;
+			height: 130upx;
+			border: solid 12upx #cf3c35;
+			border-radius: 100%;
+			
+			margin-bottom: -65upx;
+		}
+		margin-bottom: 65upx;
+	}
+	.from,.blessing,.money,.showDetails{
+		width: 90%;
+		padding: 5upx 5%;
+		display: flex;
+		justify-content: center;
+		font-size: 32upx;
+		color: #fff;
+	}
+	.money{
+		font-size: 100upx;
+		color: #f8d757;
+		display: flex;
+		padding-top: 20upx;
+	}
+	.showDetails{
+		position: absolute;
+		bottom: 20upx;
+		align-items: center;
+		font-size: 28upx;
+		color: #f8d757;
+		.icon{
+			font-size: 26upx;
+			color: #f8d757;
+		}
+	}
+}