update pc_chat

pc_chat/src/components/chat.vue

@@ -22,11 +22,11 @@
 							<i v-if="(selNum + tokNum) >= 4" @click="ejectEvl(10)" class="sc pointer" :class="selType?'scActy':''">
 							</i>
 							<div v-if="showleaveIcon" style="float: right" class="pointer" @click="leaveMsg()">
-								<span style="font-size: 25px; color: #b3c1e7; margin-top: 13px" @click="back()"
+								<span style="font-size: 25px; color: #b3c1e7; vertical-align: middle;" @click="back()"
 									  class="el-icon-chat-line-round"></span>
 							</div>
 							<div v-if="!showleaveIcon" style="float: right; cursor: not-allowed">
-								<span style="font-size: 25px; color: #d6d1c4; margin-top: 13px"
+								<span style="font-size: 25px; color: #d6d1c4; vertical-align: middle;"
 									  class="el-icon-chat-line-round"></span>
 							</div>
 						</div>
@@ -133,7 +133,7 @@
 
 								<!-- 机器人回答 -->
 								<div class="conversationBox" v-else-if='item.type == "service"'>
-									<div class=" row">
+									<div class="row">
 										<div class="conversation row">
 											<div class="headImg">
 												<img src="./../assets/st-img/headAdvent.png" alt="">
@@ -354,8 +354,7 @@
 						<el-col>
 							<!-- 发送图和表情按钮 -->
 							<div style="height:18px; display:flex;">
-								<el-popover placement="top-start" width="200" trigger="hover"
-											style="margin-top: -2px;">
+								<el-popover id="pop" placement="top-start" width="200" trigger="hover">
 									<ul>
 										<li class="emoticon" v-for="(item,index) in frceArr" :key="item.id">
 											<img class="pointer" :src="require(`@/assets/st-img/${index}.gif`)"
@@ -376,7 +375,7 @@
 
 							<div class="row center allAlignment chattingBox">
 								<div style="height:44px;width:300px;">
-									<textarea name=""
+									<textarea  name=""
 											  id="information"
 											  v-model.trim="information"
 											  cols="30"
@@ -424,7 +423,7 @@
 									</div>
 								</div>
 								<div class="headPortrait">
-									<img :src="require('@/assets/st-img/kf.png')" alt="">
+									<img :src="require('@/assets/st-img/headPortrait.png')" alt="">
 								</div>
 							</el-col>
 							<el-col class="autograph pd20">
@@ -478,7 +477,7 @@
 
 			</div>
 			<!-- 评价框 -->
-			<el-card class="box-card" v-if="evlShow">
+			<el-card id="box_card" class="box-card" v-if="evlShow">
 				<div class="close"><i @click="closeEvl()"></i></div>
 				<div class="tit">
 					<span>感谢您的咨询，请对我们的服务做出评价</span>
@@ -503,6 +502,20 @@
 			</el-card>
 
 			<div class="zzBox" v-if="zzShow"></div>
+
+
+			<el-dialog
+					:close-on-click-modal="true"
+					:close-on-press-escape ="true"
+					title="是否发送图片"
+					:visible.sync="dialogPaste"
+					width="35%">
+				<el-image :src="pasteUrl" :fit="fit"></el-image>
+				<span slot="footer" class="dialog-footer">
+					<el-button @click="dialogPaste = false">取 消</el-button>
+					<el-button type="primary" style="color: #333" @click="handleClose()">确 定</el-button>
+				</span>
+			</el-dialog>
 		</div>
 	</div>
 </template>
@@ -533,7 +546,7 @@
 				error: false,
 				emlError: false,
 				artAndLeave: 0, // 默认为100，转人工为10，人工不在转留言为100
-				chatCont: [], // 客户会话数据
+				chatCont: [], // 机器人会话数据
 				imageUrl: [],//上传图片
 				img: '', //上传的单个图片路径
 				dialogVisible: false, //图片放大
@@ -607,7 +620,11 @@
 				waitingText: "", // 等待内容
 
 				service_on:true, // 现在状态
-				avatarImg: fk
+				avatarImg: fk,
+
+				dialogPaste: false,
+				pasteUrl:'',//截屏图片
+				fit:'contain', // 图片样式
 			}
 		},
 		filters: {
@@ -630,6 +647,137 @@
 			}
 		},
 		methods: {
+
+			/***qq截图粘贴************/
+			paste(){
+				let _this = this;
+				var imgReader = function(item){
+					var blob = item.getAsFile(),reader = new FileReader();
+					// 读取文件后将其显示在网页中
+					reader.onload = function( e ){
+						var img = new Image();
+
+						img.src = e.target.result;
+						_this.dialogPaste =true;
+						_this.pasteUrl = e.target.result;
+						// console.log(img.src)
+						//document.body.appendChild( img );
+					};
+					// 读取文件
+					reader.readAsDataURL( blob );
+				};
+				document.getElementById('information').addEventListener('paste',function( e ){
+					// 添加到事件对象中的访问系统剪贴板的接口
+					let clipboardData = e.clipboardData,
+						i = 0,
+						items, item, types;
+
+					if( clipboardData ){
+						items = clipboardData.items;
+						if( !items ){
+							return;
+						}
+						item = items[0];
+						// 保存在剪贴板中的数据类型
+						types = clipboardData.types || [];
+						for( ; i < types.length; i++ ){
+							if( types[i] === 'Files' ){
+								item = items[i];
+								break;
+							}
+						}
+						// 判断是否为图片数据
+						if( item && item.kind === 'file' && item.type.match(/^image\//i) ){
+							imgReader( item );
+						}
+					}
+				});
+			},
+
+			/*****发送截图******/
+			handleClose(done) {
+				this.dialogPaste = false;
+				let blob = this.$public.dataURItoBlob(this.pasteUrl)
+				let self = this;
+				var formData = new FormData();
+				formData.append("file", blob);
+				self.upImg(formData);
+			},
+
+			upImg(formData){
+				let self = this;
+				// 数据结构请求
+				this.$axios.post('/api/index/upload/uploadImg', formData).then(res => {
+					console.log(res.data.data)
+					console.log(res.data.data.src);
+					let str = this.information;
+					let formatStr = str.replace(/\n/g, '<br/>');
+					if (res.data.code == 1) {
+						let isFirst = true;
+						let str = this.information;
+						let formatStr = str.replace(/\n/g, '<br/>');
+						// 给机器人发送文本消息
+						if (this.machineAndAtl == 10) {
+							//给机器人发送文本消息-本地储存
+							let datas = {
+								time: '',
+								chat: this.turnFace(this.shieldingKeyword(formatStr)),
+								imgUrl: res.data.data.src,
+								type: 'user'
+							}
+							this.chatCont.push(datas)
+							//消息发送-机器人
+							this.websocketsend(JSON.stringify({
+								type: 'toRobot',
+								data: {
+									groups_id: '1',
+									robot_name: this.shieldingKeyword(formatStr),
+									webTime: this.webTime,
+									robotgroups_id: '1',
+								}
+							}))
+						} else if (this.machineAndAtl == 100) { //人工聊天
+							// 人工聊天超时隐藏
+							this.willOverTime = false;
+							//发送给客服消息-本地储存
+							this.customerSviceChat.push({
+								time: '',
+								content: this.turnFace(this.shieldingKeyword(formatStr)),
+								imgUrl: res.data.data.src,
+								type: 'user',
+							});
+
+							//消息发送-客服
+							this.websocketsend(JSON.stringify({
+								type: 'chatMessage',
+								data: {
+									from_name: this.user_info.name,
+									from_avatar: this.user_info.avatar,
+									from_id: this.user_info.id,
+									content: JSON.stringify({
+										text: formatStr,
+										img: res.data.data.src,
+										type: 'user'
+									}),
+									webTime: this.webTime,
+									to_id: this.service.kf_id,
+									to_name: this.service.kf_name,
+									sensitiveNumber: this.sensitiveNumber,
+									conversationId: this.service.conversationId
+								}
+							}))
+							this.tokNum++;
+						}
+						// 发送之后清空发送数据
+						this.img = '';
+						this.information = '';
+						//高度自动向上滑动
+						this.automaticRolling();
+					}
+				})
+			},
+
+
 			// 退出聊天
 			exit(){
 				this.websocketsend(JSON.stringify({
@@ -1487,9 +1635,13 @@
 					this.getSensitive();
 				}
 			})
+
+			this.paste();
 		},
 		// 组件挂载阶段
-
+		beforeDestroy(){
+			document.getElementById('information').removeEventListener('paste')
+		},
 		destroyed() {
 			this.websock.close() //离开路由之后断开websocket连接
 			this.lockReconnect = true;

pc_chat/src/css/index.css

@@ -1,202 +1,210 @@
 /* 禁止文本内容被鼠标选中变蓝 */
 * {
-  -o-user-select: none;
-  -moz-user-select: none;
-  /*火狐 firefox*/
-  -webkit-user-select: none;
-  /*webkit浏览器*/
-  -ms-user-select: none;
-  /*IE10+*/
-  -khtml-user-select: none;
-  /*早期的浏览器*/
-  user-select: none;
-  
+    -o-user-select: none;
+    -moz-user-select: none;
+    /*火狐 firefox*/
+    -webkit-user-select: none;
+    /*webkit浏览器*/
+    -ms-user-select: none;
+    /*IE10+*/
+    -khtml-user-select: none;
+    /*早期的浏览器*/
+    user-select: none;
+
 }
 p,img,h1,h2,h3,h4,h5,ul,li,ol,li,dl,dt,dd,body{
-  margin: 0;
-  padding: 0;
-  list-style: none;
+    margin: 0;
+    padding: 0;
+    list-style: none;
 }
 /* Flex 布局 */
 /* 平行 */
 .row,
 .column {
-  display: flex;
-  flex-direction: row;
+    display: flex;
+    flex-direction: row;
 }
 
 /* 垂直 */
 .column {
-  flex-direction: column;
+    flex-direction: column;
 }
 
 /* 自动填充 */
 .col-w,
 .col-h {
-  flex: 1;
+    flex: 1;
 }
 
 /* 横向 */
 .col-w {
-  width: 0;
+    width: 0;
 }
 
 /* 纵向 */
 .col-h {
-  height: 0;
+    height: 0;
 }
 
 /* 水平垂直居中 */
 .center {
-  justify-content: center;
-  align-items: center;
+    justify-content: center;
+    align-items: center;
 }
 
 /* 垂直居中 */
 .item-center {
-  align-items: center;
+    align-items: center;
 }
 
 /* 水平居中 */
 .vertical-center {
-  justify-content: center;
+    justify-content: center;
 }
 
 /* 上对齐 */
 .topAlignment {
-  align-items: flex-strat;
+    align-items: flex-strat;
 }
 
 /* 右对齐 */
 .rightAlignment {
-  justify-content: flex-end;
+    justify-content: flex-end;
 }
 
 /* 下对齐 */
 .bottomAlignment {
-  align-items: flex-end;
+    align-items: flex-end;
 }
 
 /* 左右对齐，项目之间的间隔都相等 */
 .allAlignment {
-  justify-content: space-between;
+    justify-content: space-between;
 }
 
 /* 每个项目两侧的间隔相等。所以，项目之间的间隔比项目与边框的间隔大一倍 */
 .average {
-  justify-content: space-around;
+    justify-content: space-around;
 }
 
 /* 项目的第一行文字的基线对齐 */
 .items-baseline {
-  align-items: baseline;
+    align-items: baseline;
 }
 
 /*自动换行*/
 .wrap {
-  flex-wrap: wrap;
+    flex-wrap: wrap;
 }
 
 /* 省略号 */
 .ellipsis {
-  overflow: hidden;
-  text-overflow: ellipsis;
-  white-space: nowrap;
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
 }
 
 /* 版心 */
 .middle {
-  width: 16rem;
-  height: 100%;
-  margin: 0 auto;
+    width: 16rem;
+    height: 100%;
+    margin: 0 auto;
 }
 
 /* 三角 */
 .triangle {
-  position: relative;
+    position: relative;
 }
 
 .triangle::after {
-  position: absolute;
-  content: '';
-  display: inline-block;
-  width: 0;
-  height: 0;
-  border-style: solid;
-  border-right-color: transparent;
-  border-bottom-color: transparent;
+    position: absolute;
+    content: '';
+    display: inline-block;
+    width: 0;
+    height: 0;
+    border-style: solid;
+    border-right-color: transparent;
+    border-bottom-color: transparent;
 }
 
 /* 兼容版滚动条 */
 .scroll::-webkit-scrollbar {
-  border: .02rem solid #FFF;
+    border: .02rem solid #FFF;
 }
 
 .scroll::-webkit-scrollbar {
-  width: .1rem;
-  height: .04rem;
+    width: .1rem;
+    height: .04rem;
 }
 
 .scroll::-webkit-scrollbar-button {
-  width: 0px;
-  height: 0px;
+    width: 0px;
+    height: 0px;
 }
 
 .scroll::-webkit-scrollbar-thumb {
-  border-radius: .1rem;
-  box-shadow: inset 0 0 0 .04rem #aaa;
-  border: .02rem solid transparent;
+    border-radius: .1rem;
+    box-shadow: inset 0 0 0 .04rem #aaa;
+    border: .02rem solid transparent;
 }
 
 .scroll::-webkit-scrollbar-track {
-  display: block;
-  background: rgba(0, 0, 0, 0.1);
+    display: block;
+    background: rgba(0, 0, 0, 0.1);
 }
 
 body {
-  margin: 0;
-  padding: 0;
+    margin: 0;
+    padding: 0;
 }
 
 /* 取消苹果的safari浏览器下点击出现高亮效果 */
 * {
-  -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
+    -webkit-tap-highlight-color: rgba(0, 0, 0, 0)
 }
 
 
 /* 里面用load  外面用loading*/
 .loading {
-  position: fixed;
-  z-index: 999;
-  width: 100%;
+    position: fixed;
+    z-index: 999;
+    width: 100%;
 }
 
 .load,
 .load .loading {
-  position: relative;
-  width: 100%;
-  height: 100%;
+    position: relative;
+    width: 100%;
+    height: 100%;
 }
 
 /* 赔率增高 */
 .rising {
-  background: Lightgreen !important;
-  color: #fff !important;
-  border-color: Lightgreen !important;
+    background: Lightgreen !important;
+    color: #fff !important;
+    border-color: Lightgreen !important;
 }
 
 /* 赔率变低 */
 .falling {
-  background: #F76649 !important;
-  color: #fff !important;
-  border-color: #F76649 !important;
+    background: #F76649 !important;
+    color: #fff !important;
+    border-color: #F76649 !important;
 }
 
 /*投注选择样式*/
 .chooseStyle{
-  /* border-radius: 2px; */
-  background: #f76649;
-  color: #fff;
+    /* border-radius: 2px; */
+    background: #f76649;
+    color: #fff;
 }
 
+#box_card .el-card__body {
+    padding:  0!important;
+}
 
+#pop {
+    position: relative;
+    top: 0;
+    line-height: 0;
+}