boka-human-cliend-v2 0.0.5 → 0.0.7

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.
Files changed (7) hide show
  1. package/dist/boka-human-v2.common.js +61 -34
  2. package/dist/boka-human-v2.css +1 -1
  3. package/dist/boka-human-v2.umd.js +61 -34
  4. package/dist/boka-human-v2.umd.min.js +2 -2
  5. package/package.json +1 -1
  6. package/src/BokaHumanV2.vue +61 -17
  7. package/src/demo/App.vue +4 -1
package/package.json CHANGED
@@ -1,6 +1,6 @@
1
1
  {
2
2
  "name": "boka-human-cliend-v2",
3
- "version": "0.0.5",
3
+ "version": "0.0.7",
4
4
  "main": "dist/boka-human-v2.umd.js",
5
5
  "scripts": {
6
6
  "serve": "vue-cli-service serve src/demo/main.js",
package/src/BokaHumanV2.vue CHANGED
@@ -1,15 +1,18 @@
1
1
  <template>
2
2
  <div class="boka-human-v2">
3
- <div class="icon" id="icon" @click="visible=!visible">{{ visible ? '隐藏' : '显示' }}</div>
3
+ <div class="humanEnterIcon" id="humanEnterIcon" @click="visible=!visible">
4
+ <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>
5
+ <!--{{ visible ? '隐藏' : '显示' }}-->
6
+ </div>
4
7
  <div class="humanMainView" v-show="visible">
5
8
  <div class="humanMainHeader my-dialog__header">
6
9
  <div class="humanMainHeaderLeft"></div>
7
10
  <div class="humanMainHeaderCenter">客服</div>
8
11
  <div class="humanMainHeaderRight">
9
- <span @click="visible=!visible">隐藏</span>
12
+ <span @click="visible=!visible">关闭</span>
10
13
  </div>
11
14
  </div>
12
- <iframe :src="src" frameborder="0" allowfullscreen></iframe>
15
+ <iframe id="iframe" :src="src" frameborder="0" allowfullscreen></iframe>
13
16
  </div>
14
17
  </div>
15
18
  </template>
@@ -40,9 +43,14 @@ export default {
40
43
  }
41
44
  },
42
45
  computed: {
46
+ host(){
47
+ return "https://human.shboka.com/"
48
+ // return "http://192.168.3.12:5173"
49
+ },
43
50
  src(){
44
51
  let {token,product,subCustType} = this;
45
- return `https://human.shboka.com/?token=${token}&product=${product}&subCustType=${subCustType}&human=1&isIFrame=true`;
52
+ // return `https://human.shboka.com/?token=${token}&product=${product}&subCustType=${subCustType}&human=1&isIFrame=true&time=${new Date().getTime()}`;
53
+ return `${this.host}/?token=${token}&product=${product}&subCustType=${subCustType}&human=1&isIFrame=true&time=${new Date().getTime()}`;
46
54
  }
47
55
  },
48
56
  data() {
@@ -53,14 +61,29 @@ export default {
53
61
  mounted() {
54
62
  this.icon();
55
63
  this.chatMainInitDrag();
56
- /*//告诉内嵌页面是 frame 方式存在
57
- window.postMessage({human:1,isIFrame:true}, 'https://human.shboka.com');
58
- window.addEventListener('humanInnerMessage', (event) => {
59
- // 检查消息来源
60
- if (event.origin !== 'https://human.shboka.com') return;
61
-
62
- console.log('收到来自 iframe 的消息:', event.data);
63
- });*/
64
+
65
+ window.humanFunction = {
66
+ showImg: this.showImg,
67
+ showVideo: this.showVideo
68
+ };
69
+
70
+ let frame = document.querySelector("#iframe");
71
+ frame.onload = function () {
72
+ frame.contentWindow.postMessage({from:"human",info:{isFrame:true}},"*")
73
+ }
74
+ window.addEventListener('message', (e) => {
75
+ let{origin,data} = e;
76
+ if(origin==this.host && data.from=="humanFrame"){
77
+ console.log("外部[收到]了===>>>>",data.info);
78
+ let{info} = data;
79
+ let{type,data:url} = info;
80
+ if(type=="img"){
81
+ this.showImg(url);
82
+ }
83
+ // console.log("外部[收到]了===>>>>",info);
84
+ }
85
+ });
86
+
64
87
  },
65
88
  methods:{
66
89
  showImg(url,messageItem){
@@ -86,7 +109,14 @@ export default {
86
109
  },
87
110
  icon(){
88
111
  const container = document.body;
89
- interact('.icon')
112
+ let defx = container.clientWidth-40;
113
+ let defy = container.clientHeight-150;
114
+ let tmpIcon = document.querySelector('#humanEnterIcon');
115
+ tmpIcon.style.transform = `translate(${defx}px, ${defy}px)`;
116
+ tmpIcon.setAttribute('data-x', defx);
117
+ tmpIcon.setAttribute('data-y', defy);
118
+
119
+ interact('.humanEnterIcon')
90
120
  .on('tap', function (event) {
91
121
  event.preventDefault()
92
122
  }).draggable({
@@ -181,11 +211,24 @@ export default {
181
211
  position: fixed;
182
212
  top: 0;
183
213
  left: 0;
184
- z-index: 9999;
214
+ z-index: 999;
185
215
  }
186
- .icon{
216
+ .humanEnterIcon{
187
217
  position: fixed;
188
- z-index: 9999;
218
+ z-index: 999;
219
+ background-color: #0074ff;
220
+ border-radius: 50%;
221
+ width: 40px;
222
+ height: 40px;
223
+ text-align: center;
224
+ padding: 8px;
225
+ box-sizing: border-box;
226
+ transform: translate(100vw, 100vh);
227
+ >svg{
228
+ width: 100%;
229
+ height:100%;
230
+ fill:#fff;
231
+ }
189
232
  }
190
233
  .humanMainView {
191
234
  position: fixed;
@@ -201,7 +244,8 @@ export default {
201
244
  box-sizing: border-box;
202
245
  border-bottom: 1px solid #f5f5f5;
203
246
  position: relative;
204
- z-index: 9999;
247
+ z-index: 999;
248
+ background: #fff;
205
249
  .humanMainHeaderRight{
206
250
  text-align: right;
207
251
  }
package/src/demo/App.vue CHANGED
@@ -1,6 +1,6 @@
1
1
  <template>
2
2
  <div id="app">
3
- <BokaHumanV2 />
3
+ <BokaHumanV2 :token="'Bearer 57689d23c3d5b75db1984e7f1f66036'" :product="'manageCenterPlus'" :sub-cust-type="''"/>
4
4
  </div>
5
5
  </template>
6
6
 
@@ -12,6 +12,9 @@ export default {
12
12
  name: 'App',
13
13
  components: {
14
14
  BokaHumanV2
15
+ },
16
+ mounted() {
17
+
15
18
  }
16
19
  }
17
20
  </script>