boka-human-cliend-v2 0.0.34 → 0.0.35

package/package.json

@@ -1,6 +1,6 @@
 {
 	"name": "boka-human-cliend-v2",
-	"version": "0.0.34",
+	"version": "0.0.35",
 	"main": "dist/boka-human-v2.umd.js",
 	"scripts": {
 		"serve": "vue-cli-service serve src/demo/main.js",
@@ -19,6 +19,7 @@
 	},
 	"dependencies": {
 		"interactjs": "^1.10.27",
+		"vconsole": "^2.5.2",
 		"viewerjs": "^1.11.7"
 	}
 }

package/src/BokaHumanV2.vue

@@ -2,7 +2,8 @@
 	<div class="boka-human-v2">
 		<div class="humanEnterIcon" id="humanEnterIcon" :class="[unreadCount>0?'unreadCount':'']" @click="changeChatViewVisible">
 			<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>
+				<!--<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 @touchstart="changeChatViewVisible" src="data:image/png;base64,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" alt="" style="width: 100%;">
 			</template>
 			<template v-else>
 				{{unreadCount>99?'99+' : unreadCount}}
@@ -169,9 +170,9 @@ export default {
 			tmpIcon.setAttribute('data-y', defy);
 			
 			interact('.humanEnterIcon')
-			.on('tap', function (event) {
-				event.preventDefault()
-			}).draggable({
+					.on('tap', function (event) {
+						event.preventDefault()
+					}).draggable({
 				inertia: true,
 				modifiers: [
 					interact.modifiers.restrictRect({
@@ -259,7 +260,7 @@ export default {
 <style lang="less">
 /* 可根据需要添加样式 */
 .boka-human-v2 {
-	overflow: hidden;
+	//overflow: hidden;
 	position: fixed;
 	top: 0;
 	left: 0;

package/src/demo/App.vue

@@ -1,17 +1,21 @@
 <template>
 	<div id="app">
-		<BokaHumanV2 :token="'Bearer 39d60d3259fe37dca78ee08451532d'" :product="'manageCenterPlus'" :sub-cust-type="'standard'"/>
+		===
+		<BokaHumanV2 :token="'Bearer 8937d9ccf21264a83c3cb29aaf16dc7'" :product="'manageCenterPlus'" :sub-cust-type="'standard'"/>
+		<!--<Hello :token="'Bearer 8937d9ccf21264a83c3cb29aaf16dc7'" :product="'manageCenterPlus'" :sub-cust-type="'standard'"/>-->
+		---
 	</div>
 </template>
 
 <script>
-import BokaHumanV2Raw from '../BokaHumanV2.vue'
-const BokaHumanV2 = BokaHumanV2Raw
+import BokaHumanV2 from '../BokaHumanV2.vue'
+import Hello from './Hello.vue'
 
 export default {
 	name: 'App',
 	components: {
-		BokaHumanV2
+		BokaHumanV2:BokaHumanV2,
+		Hello
 	},
 	mounted() {
 	

package/src/demo/Hello.vue

@@ -0,0 +1,257 @@
+<template>
+	<div class="boka-human-v2">
+		<div class="humanEnterIcon" id="humanEnterIcon" :class="[unreadCount>0?'unreadCount':'']" @touchstart="changeChatViewVisible">
+			<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 src="data:image/png;base64,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" alt="">
+			</template>
+			<template v-else>
+				{{unreadCount>99?'99+' : unreadCount}}
+			</template>
+			<!--{{ visible ? '隐藏' : '显示' }}-->
+		</div>
+		<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="humanMainHeaderRight">
+					<span @click="visible=!visible">
+						<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>
+						<!--关闭-->
+					</span>
+				</div>
+			</div>
+			<iframe id="iframe" :src="src" frameborder="0" allowfullscreen></iframe>
+		</div>
+	</div>
+</template>
+<script>
+
+import interact from "interactjs";
+
+export default {
+	name: "Hello",
+	title: "这里是组件名",
+	props: {
+		/*fullScreen: {
+			type: Boolean,
+			default(){
+				return false;
+			}
+		}*/
+	},
+	data() {
+		return {
+			fullScreen:false,
+			visible: false,
+			unreadCount: 0,
+			src:"https://human.shboka.com?token=Bearer 8937d9ccf21264a83c3cb29aaf16dc7&product=manageCenterPlus&custType=manageCenterPlus&subCustType=standard&source=g8&human=1&isIFrame=true&terminal=&domain=https%3A%2F%2Fgl.boka.vc%3A8082%3A8082&time=1760680460361"
+		}
+	},
+	mounted(){
+		console.log(`%c 客服组件宿主 %c ${location.href}`, 'background: #f00; color: #fff; padding: 2px 2px; border-radius: 3px 0 0 3px;', 'background: #dedede; color: #000; padding: 2px 8px 2px 2px; border-radius: 0 3px 3px 0;')
+		console.log(`%c 客服组件属性 `, 'background: #f00; color: #fff; padding: 2px 2px; border-radius: 3px;')
+		console.log(this.$props)
+		setTimeout(()=>{
+			this.icon();
+			this.chatMainInitDrag();
+		})
+	},
+	methods: {
+		sendMsgToFrame(info){
+			let frame = document.querySelector("#iframe");
+			frame.contentWindow.postMessage({from:"human",info:info},"*")
+		},
+		showChat(flag=true){
+			this.visible = flag;
+		},
+		changeChatViewVisible(){
+			this.visible=!this.visible;
+			if(this.visible){
+				this.unreadCount=0;
+				
+				this.sendMsgToFrame({type:"toBottom"});
+			}
+		},
+		icon(){
+			const container = document.body;
+			let defx = container.clientWidth-40;
+			let defy = Math.min(screen.availHeight,container.clientHeight)-300;
+			let tmpIcon = document.querySelector('#humanEnterIcon');
+			tmpIcon.style.transform = `translate(${defx}px, ${defy}px)`;
+			tmpIcon.setAttribute('data-x', defx);
+			tmpIcon.setAttribute('data-y', defy);
+			
+			interact('.humanEnterIcon')
+					.on('tap', function (event) {
+						event.preventDefault()
+					}).draggable({
+				inertia: true,
+				modifiers: [
+					interact.modifiers.restrictRect({
+						restriction: 'body',
+						endOnly: true
+					})
+				],
+				autoScroll: true,
+				listeners: {
+					move: (event)=>{
+						var target = event.target
+						var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
+						var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
+						
+						// 限制纵向位置在容器内
+						if (y < 0) {
+							y = 0;
+						}
+						if (y > container.clientHeight - target.offsetHeight) {
+							y = container.clientHeight - target.offsetHeight;
+						}
+						
+						// 横向限制：不允许停留在中间，拖动时允许在左侧区和右侧区之间滑动
+						// 这里允许水平拖动到左右边界之间，但不允许停留中间，拖动结束时自动吸附
+						// 但为了拖动顺畅，这里不限制x，吸附逻辑放在 dragend 事件
+						
+						target.style.transform = `translate(${x}px, ${y}px)`;
+						
+						// update the posiion attributes
+						target.setAttribute('data-x', x)
+						target.setAttribute('data-y', y)
+					},
+					end(event) {
+						var target = event.target;
+						var x = (parseFloat(target.getAttribute('data-x')) || 0)
+						var y = (parseFloat(target.getAttribute('data-y')) || 0)
+						const middleX = container.clientWidth / 2;
+						const leftX = 0;
+						const rightX = container.clientWidth - target.offsetWidth;
+						if (x + target.offsetWidth / 2 < middleX) {
+							// 靠左吸附
+							x = leftX;
+						} else {
+							// 靠右吸附
+							x = rightX;
+						}
+						target.setAttribute('data-x', x)
+						target.setAttribute('data-y', y)
+						target.style.transform = `translate(${x}px, ${y}px)`;
+					}
+				}
+			})
+		},
+		chatMainInitDrag(){
+			interact('.humanMainView').draggable({
+				inertia: true,
+				modifiers: [
+					interact.modifiers.restrictRect({
+						restriction: 'body',
+						endOnly: true
+					})
+				],
+				autoScroll: true,
+				listeners: {
+					move: (event)=>{
+						var target = event.target
+						var x = (parseFloat(target.getAttribute('data-x')) || 0) + event.dx
+						var y = (parseFloat(target.getAttribute('data-y')) || 0) + event.dy
+						
+						target.style.transform = 'translate(' + x + 'px, ' + y + 'px)'
+						
+						// update the posiion attributes
+						target.setAttribute('data-x', x)
+						target.setAttribute('data-y', y)
+					},
+					end(event) {
+					}
+				}
+			})
+		}
+	}
+}
+</script>
+<style lang="less">
+
+.boka-human-v2 {
+	//overflow: hidden;
+	position: fixed;
+	top: 0;
+	left: 0;
+	z-index: 999;
+}
+.humanEnterIcon{
+	position: fixed;
+	z-index: 999;
+	background-color: #0074ff;
+	border-radius: 50%;
+	width: 40px;
+	height: 40px;
+	text-align: center;
+	padding: 8px;
+	box-sizing: border-box;
+	/*transform: translate(100vw, 100vh);*/
+	transform: translate(50vw, 50vh);
+	>svg{
+		width: 100%;
+		height:100%;
+		fill:#fff;
+	}
+	&.unreadCount{
+		background-color: red;
+		color: #fff;
+		line-height: 24px;
+		font-size: 14px;
+		font-weight: bold;
+	}
+}
+.humanMainView {
+	position: fixed;
+	min-width: 360px;
+	max-width: 600px;
+	min-height: 360px;
+	height: 80vh;
+	border: 1px solid #ccc;
+	&.full{
+		padding-top: env(safe-area-inset-top);   /* 0 ～ 50px 不等，由系统决定 */
+		width: 100vw!important;
+		max-width: 100vw!important;
+		height: 100vh!important;
+		max-height: 100vh!important;
+	}
+	.humanMainHeader {
+		width: 100%;
+		height: 40px;
+		text-align: center;
+		cursor: move;
+		font-size: 0;
+		box-sizing: border-box;
+		border-bottom: 1px solid #f5f5f5;
+		position: relative;
+		z-index: 999;
+		background: #fff;
+		white-space: nowrap;
+		.humanMainHeaderRight{
+			text-align: right;
+		}
+		.humanMainHeaderLeft,.humanMainHeaderRight{
+			width:20%;
+			display: inline-block;
+			vertical-align: middle;
+			padding: 0 10px;
+			line-height: 40px;
+			font-size: 14px;
+			box-sizing: border-box;
+		}
+		.humanMainHeaderCenter{
+			width:60%;
+			display: inline-block;
+			vertical-align: middle;
+			font-size: 16px;
+			box-sizing: border-box;
+		}
+	}
+	>iframe{
+		width: 100%;
+		height: calc(100% - 40px);
+	}
+}
+</style>