boka-human-cliend-v2 0.0.38 → 0.0.39

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "boka-human-cliend-v2",
-	"version": "0.0.38",
+	"version": "0.0.39",
 	"main": "dist/boka-human-v2.umd.js",
 	"scripts": {
 		"serve": "vue-cli-service serve src/demo/main.js",

package/src/BokaHumanV2.vue

@@ -1,6 +1,7 @@
 <template>
 	<div class="boka-human-v2">
-		<div class="humanEnterIcon" id="humanEnterIcon" :class="[unreadCount>0?'unreadCount':'']" >
+		<div id="humanViewOuter" style="position: fixed;width:100vw;height: 100vh;top:0;left: 0;display: none;"></div>
+		<div class="humanEnterIcon" id="humanEnterIcon" v-if="!hideEnter" :class="[unreadCount>0?'unreadCount':'']" >
 			<template v-if="unreadCount<1">
 				<!--<svg t="1755741820144" viewBox="0 0 1051 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="1470" width="32" height="32"><path d="M135.73310782 546.11486502v91.39864856a68.41216214 68.41216214 0 0 0 136.82432428 0v-91.39864856a68.41216214 68.41216214 0 0 0-136.82432428 0z m628.77618292 174.3141893A113.58699363 113.58699363 0 0 1 728.63851358 637.51351358v-91.39864856A114.02026996 114.02026996 0 0 1 841.86064218 432.18581069C830.16216214 266.51435782 692.03800637 135.73310782 523.40202716 135.73310782 354.74324363 135.73310782 216.64189218 266.51435782 204.94341214 432.18581069A114.0886821 114.0886821 0 0 1 318.16554074 546.11486502v91.39864856a114.02026996 114.02026996 0 0 1-228.04054074 0v-91.39864856a114.02026996 114.02026996 0 0 1 68.64020288-104.53378353C165.83445926 246.28716214 326.375 90.125 523.40202716 90.125s357.5675679 156.16216214 364.63682428 351.45608149A114.0886821 114.0886821 0 0 1 956.67905432 546.11486502v91.39864856a114.02026996 114.02026996 0 0 1-152.26266934 107.3386821 387.89695926 387.89695926 0 0 1-155.61486503 99.8817572A79.76858148 79.76858148 0 0 1 568.78209424 922.47297284h-68.00168848c-44.23986502 0-80.01942573-35.57432428-80.01942572-79.8141893 0-44.17145288 35.66554074-79.81418931 80.04222922-79.8141893h67.95608148c28.80151995 0 54 15.05067573 68.09290494 37.74071008a342.17483148 342.17483148 0 0 0 127.63429074-80.15625zM774.2466214 546.11486502v91.39864856a68.41216214 68.41216214 0 0 0 136.82432428 0v-91.39864856a68.41216214 68.41216214 0 0 0-136.82432427 0zM500.82601358 876.86486502h67.95608066c19.20101358 0 34.43412141-15.23310782 34.43412222-34.20608148 0-18.99577716-15.30151996-34.20608149-34.43412222-34.20608066h-67.95608066c-19.20101358 0-34.43412141 15.23310782-34.4341214 34.20608066 0 18.99577716 15.30151996 34.20608149 34.4341214 34.20608148z" p-id="1471"></path></svg>-->
 				<img @click="changeChatViewVisible" src="data:image/png;base64,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" alt="" style="width: 100%;">
@@ -13,9 +14,9 @@
 		<div class="humanMainView" :class="fullScreen?'full':''" v-show="visible">
 			<div class="humanMainHeader my-dialog__header">
 				<div class="humanMainHeaderLeft"></div>
-				<div class="humanMainHeaderCenter">客服</div>
+				<div class="humanMainHeaderCenter">{{viewTitle||"客服"}}</div>
 				<div class="humanMainHeaderRight">
-					<span @click="visible=false" @touchstart.stop="visible=false">
+					<span v-if="!hideClose" @click="visible=false" @touchstart.stop="visible=false">
 						<!--<svg style="display: inline-block;vertical-align: middle;" t="1759046770151" class="icon" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="9352" width="14" height="14"><path d="M585.412525 512.594747L973.601616 124.418586c19.600808-19.600808 19.600808-51.898182 0-71.49899l-2.120404-2.120404c-19.600808-19.600808-51.898182-19.600808-71.49899 0L511.793131 439.518384 123.61697 50.799192c-19.600808-19.600808-51.898182-19.600808-71.49899 0l-2.120404 2.120404c-20.11798 19.600808-20.11798 51.898182 0 71.49899l388.189091 388.189091L49.997576 900.783838c-19.587879 19.600808-19.587879 51.898182 0 71.49899l2.120404 2.120404c19.600808 19.600808 51.898182 19.600808 71.49899 0L511.793131 586.214141l388.189091 388.176162c19.600808 19.600808 51.898182 19.600808 71.49899 0l2.120404-2.120404c19.600808-19.600808 19.600808-51.898182 0-71.49899L585.412525 512.594747z m0 0" p-id="9353"></path></svg>-->
 						<!--关闭-->
 						<img src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABwAAAAcCAYAAAByDd+UAAABzUlEQVR4AbzV207DQAwE0MKPA18Oe6ydKCnZdJNWRXFsj+ei9IXP25v/Evjdcn9b6a299OG5eCfwq0foCH19uvHiyah6An8gvRwQ+3q58eAVg8pIoGMB/YoI6+vpRssjQt6wWwIdAA5mRQAznyka2mh4wmpfBwIcEMyKEGaeKVyacHnBsm++MCACYnYGsOyjjoObOw9Y9ur3X1hgeyEStLEeRrBadl5uODnRwrIvfRSIQEBoVgxh5nXB3ILRwLJv+lEgIiEDs2IMMyszzKxwYebdehRIxICRWQmAKTNM4cDMw5oJJGbE0KwEKbNywzEf1mwgE4aMzeuCua2x4XwmcGhy5nAm0Fesf8bkwNyyH/bZQIaMY+ZnVNndcLIP+0wgI4YxEQRT5uA4sOy7/VEgA0YRC4BlN8Oy48Ky/+tHgYQMImIMy54Oc8tOA8u+6aNAAsKQGcKy33c3nOC0sOxL3wtEJAiJESz7qOPg5s4Dlr36fSACYh3biwGsjVMPLk3IvGDZN/8PHRByJIRln+00tOHzhNWeLwQ4FNheBLA2XnpoeUTMG7Z8ISBHxDoGuNh58Iq8MvKFOeiIIT3befHkUz2BDh8N1Vt76cNz8f4DAAD//8lliLUAAAAGSURBVAMAfghcOXqadykAAAAASUVORK5CYII=" alt="" style="width: 14px;">
@@ -62,6 +63,18 @@ export default {
 		fullScreen: {
 			type: [Boolean,Number],
 			default: 0
+		},
+		hideEnter: {
+			type: Boolean,
+			default: false
+		},
+		hideClose: {
+			type: Boolean,
+			default: false
+		},
+		viewTitle: {
+			type: String,
+			default: '客服'
 		}
 	},
 	computed: {
@@ -75,7 +88,7 @@ export default {
 			// return "http://192.168.3.12:5173"
 		},
 		src(){
-			let {token,product,custType,subCustType,source,terminal=""} = this;
+			let {token,product,custType="",subCustType,source,terminal=""} = this;
 			// return `https://human.shboka.com/?token=${token}&product=${product}&subCustType=${subCustType}&human=1&isIFrame=true&time=${new Date().getTime()}`;
 			let {protocol,host} = location;
 			let domain = `${protocol}//${host}`
@@ -93,8 +106,15 @@ export default {
 		console.log(`%c 客服组件属性 `, 'background: #f00; color: #fff; padding: 2px 2px; border-radius: 3px;')
 		console.log(this.$props)
 		setTimeout(()=>{
-			this.icon();
-			this.chatMainInitDrag();
+			if(!this.hideEnter){
+				this.icon();
+			}else{
+				this.visible=true;
+			}
+			
+			if(!this.fullScreen){
+				this.chatMainInitDrag();
+			}
 		})
 		
 		window.humanFunction = {
@@ -232,8 +252,21 @@ export default {
 				inertia: true,
 				modifiers: [
 					interact.modifiers.restrictRect({
-						restriction: 'body',
+						restriction: '#humanViewOuter',
 						endOnly: true
+						/*restriction: () => {
+							const scrollTop = window.pageYOffset || document.documentElement.scrollTop;
+							const scrollLeft = window.pageXOffset || document.documentElement.scrollLeft;
+							
+							return {
+								left: scrollLeft,
+								top: scrollTop,
+								right: scrollLeft + window.innerWidth,
+								bottom: scrollTop + window.innerHeight
+							};
+						},
+						elementRect: { left: 0, right: 1, top: 0, bottom: 1 },
+						endOnly: false*/
 					})
 				],
 				autoScroll: true,
@@ -248,6 +281,15 @@ export default {
 						// update the posiion attributes
 						target.setAttribute('data-x', x)
 						target.setAttribute('data-y', y)
+						
+						
+						/*const target = event.target;
+						const x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx;
+						const y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy;
+						
+						target.style.transform = `translate(${x}px, ${y}px)`;
+						target.setAttribute('data-x', x);
+						target.setAttribute('data-y', y);*/
 					},
 					end(event) {
 					}
@@ -298,13 +340,20 @@ export default {
 	max-width: 600px;
 	min-height: 360px;
 	height: 80vh;
-	border: 1px solid #ccc;
+	//border: 1px solid #ccc;
+	//transform: translate(10vw, 10vh);
 	&.full{
 		padding-top: env(safe-area-inset-top);   /* 0 ～ 50px 不等，由系统决定 */
 		width: 100vw!important;
 		max-width: 100vw!important;
 		height: 100vh!important;
 		max-height: 100vh!important;
+		position: fixed;
+		top:0;
+		left:0;
+		z-index: 999;
+		overflow: hidden;
+		//transform: none;
 	}
 	.humanMainHeader {
 		width: 100%;
@@ -313,11 +362,17 @@ export default {
 		cursor: move;
 		font-size: 0;
 		box-sizing: border-box;
-		border-bottom: 1px solid #f5f5f5;
+		//border-bottom: 1px solid #f5f5f5;
 		position: relative;
 		z-index: 999;
-		background: #fff;
+		//background: #fff;
+		background: url(https://rs.bokao2o.com/bkWeb/Def_BKWeb_AI_Header.png) center top / 100% no-repeat rgb(255, 255, 255);
 		white-space: nowrap;
+		user-select: none;
+		
+		max-width: 1000px;
+		left: 50%;
+		transform: translateX(-50%);
 		.humanMainHeaderRight{
 			text-align: right;
 		}
@@ -336,6 +391,7 @@ export default {
 			vertical-align: middle;
 			font-size: 16px;
 			box-sizing: border-box;
+			padding: 6px 0;
 		}
 	}
 	>iframe{