askbot-dragon 0.6.17 → 0.6.21

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 (45) hide show
  1. package/README.md +27 -27
  2. package/babel.config.js +5 -5
  3. package/dragon.iml +7 -7
  4. package/package.json +54 -52
  5. package/public/index.html +27 -26
  6. package/src/App.vue +31 -31
  7. package/src/api/index.js +1 -1
  8. package/src/api/mock.http +2 -2
  9. package/src/api/requestUrl.js +185 -185
  10. package/src/assets/less/common.css +6760 -6760
  11. package/src/assets/less/converSationContainer/common.less +4751 -4751
  12. package/src/assets/less/converSationContainer/converSatonContainer.less +492 -492
  13. package/src/assets/less/ticketMessage.less +319 -319
  14. package/src/components/ActionAlertIframe.vue +117 -117
  15. package/src/components/AskIFrame.vue +15 -15
  16. package/src/components/ConversationContainer.vue +1388 -1388
  17. package/src/components/FileType.vue +88 -88
  18. package/src/components/Message.vue +27 -27
  19. package/src/components/ask-components/DissatisfactionOptions.vue +57 -57
  20. package/src/components/ask-components/Msgloading.vue +37 -37
  21. package/src/components/ask-components/SatisfactionV2.vue +15 -15
  22. package/src/components/chatContent.vue +512 -512
  23. package/src/components/feedBack.vue +133 -133
  24. package/src/components/file/AliyunOssComponents.vue +109 -109
  25. package/src/components/formTemplate.vue +1898 -2039
  26. package/src/components/message/ActionAlertIframe.vue +116 -116
  27. package/src/components/message/ShopMessage.vue +168 -168
  28. package/src/components/message/TextMessage.vue +895 -895
  29. package/src/components/message/TicketMessage.vue +173 -173
  30. package/src/components/message/swiper/index.js +4 -4
  31. package/src/components/message/swiper/ticketSwiper.vue +530 -530
  32. package/src/components/message/swiper/ticketSwiperItem.vue +61 -61
  33. package/src/components/selector/hOption.vue +20 -20
  34. package/src/components/selector/hSelector.vue +199 -199
  35. package/src/components/selector/hWrapper.vue +216 -216
  36. package/src/components/source/BotMessage.vue +24 -24
  37. package/src/components/source/CustomMessage.vue +24 -24
  38. package/src/components/test.vue +260 -260
  39. package/src/components/utils/AliyunIssUtil.js +72 -72
  40. package/src/components/utils/ckeditor.js +124 -0
  41. package/src/components/utils/format_date.js +18 -18
  42. package/src/components/utils/index.js +6 -6
  43. package/src/components/utils/math_utils.js +15 -15
  44. package/src/main.js +44 -43
  45. package/vue.config.js +34 -28
package/src/components/chatContent.vue CHANGED
@@ -1,513 +1,513 @@
1
- <template>
2
- <view class="chat-message-content" id="messageContent" @touchstart="touchEvent">
3
- <view class="message-notice" v-show="connectSucess"><view class="notice-content">已为您对接专属智能助理</view></view>
4
- <view v-for="(msg, index) in messageList" :key="index">
5
- <!-- <view class="message-notice">
6
- <view class="notice-content" v-if="showTime(msg, index, messageList) && msg.time != null">{{new Date(msg.time).toISOString().slice(0, 10),}}</view>
7
- </view> -->
8
- <view class="message" v-bind:class="msg.speaker == 'user' ? 'message-kf' : 'message'">
9
- <view class="user-detail">
10
- <Msgloading v-if="msg.speaker != 'user' && msg.type == 'msg_loading'"></Msgloading>
11
- <!-- 小程序富文本组件 -->
12
- <view v-if="msg.type == 'answer_rich_text'" class="media-body">
13
- <!--<mp-html
14
- lazy-load
15
- scroll-table
16
- selectable
17
- use-anchor
18
- show-with-animation
19
- loading-img
20
- :tag-style="tagStyle"
21
- :content="msg.content.html" />-->
22
- <rich-text :nodes="msg.content.html"></rich-text>
23
- </view>
24
- <!-- <view v-if="msg.type == 'answer_rich_text'" class="media-body">
25
- <view id="msg_text"><rich-text :nodes="strings"></rich-text></view>
26
- </view> -->
27
- <!-- 欢迎语、文本组件 -->
28
- <view v-if="msg.type == 'answer_welcofmetext' || msg.type == 'answer_text'" class="media-body">
29
- <view v-if="msg.speaker == 'user'" v-html="msg.content" @click="tapName" :selectable="true" ref="msg_text" id="msg_text"></view>
30
- <view v-if="msg.speaker != 'user'">
31
- <view
32
- v-for="(span, index) in msg.mini_text"
33
- :key="index"
34
- @click="tapName"
35
- :data-content="span"
36
- :style="span.type == 'url' ? 'color: #007AFF;' : ''"
37
- >
38
- <rich-text :nodes="span.content"></rich-text>
39
- </view>
40
- </view>
41
- </view>
42
-
43
- <!-- web-view组件 -->
44
- <view v-if="msg.type == 'web_view'" class="media-body">
45
- <view class="" v-for="(webCell, webcInd) in msg.arr" :key="webcInd">
46
- <view v-show="webCell.type == 'text'"><rich-text :nodes="webCell.text"></rich-text></view>
47
- <text v-show="webCell.type == 'url'" style="color: #007AFF" class="url" @click="gotoWebview(webCell.url)">点击了解详情</text>
48
- </view>
49
- </view>
50
- <!-- 点选组件 -->
51
- <view v-if="msg.type == 'answer_radio'" class="media-body-ps">
52
- <view v-if="msg.content.description != ''" class="other" v-html="msg.content.description"></view>
53
- <view
54
- v-for="(option, ind) in msg.content.options"
55
- v-bind:class="[ind == msg.content.options.length - 1 && ind != 1 ? 'end' : '', 'ps']"
56
- :key="ind"
57
- @click="sendRadioMessage(msg.id + '_' + ind + '_' + option.value + '_' + option.name, option.name)"
58
- >
59
- {{ option.name }}
60
- <i class="arsenal_icon arsenalangle-right-solid"></i>
61
- </view>
62
- </view>
63
- <!-- 图片组件 -->
64
- <view
65
- :style="msg.type == 'answer_image' ? 'background-color: #ffffff !important;' : ''"
66
- v-if="msg.type == 'answer_image' ||msg.type == 'IMAGE'"
67
- class="media-body-image"
68
- >
69
- <img v-if="msg.content.urls!=null" :src="msg.content.urls[0]" mode="widthFix" @click="onImageClick(msg.content.urls[0])" />
70
- <img v-else :src="msg.content.url" mode="widthFix" @click="onImageClick(msg.content.url)" />
71
- </view>
72
- <!-- 等待语音组件 -->
73
- <view v-if="msg.type == 'answer_loading'" class="media-body">
74
- <view class="loading">
75
- <span></span>
76
- <span></span>
77
- <span></span>
78
- <span></span>
79
- </view>
80
- </view>
81
- <!-- 视频组件 -->
82
- <view v-if="msg.type == 'answer_video'" class="media-body-image"><video id="myVideo" :src="msg.content.url"></video></view>
83
- <view v-if="msg.type == 'VIDEO'" class="media-body-image"><video id="myVideo" :src="msg.content.url"></video></view>
84
- <!-- 反问组件 -->
85
- <view v-if="msg.type == 'action_question'" class="media-body"><view v-html="msg.content"></view></view>
86
- <!-- 满意度组件 -->
87
- <view v-if="msg.type == 'action_satisfaction'" class="media-body-ps">
88
- <view class="other" v-html="msg.content.satisfactionDes"></view>
89
- <view class="ps" @click="sendSatisfaction('user_action_to_satisfaction', '满意', msg.content.satisfactoryAnswer)">满意</view>
90
- <view class="ps end" @click="sendSatisfaction('user_action_to_satisfaction', '不满意', msg.content.unsatisfiedAnswer, msg.content.answerRadio)">
91
- 不满意
92
- </view>
93
- </view>
94
- <view v-if="msg.type == 'USER_ACTION_TO_SATISFACTION_V2' ||msg.type == 'USER_ACTION_TO_DISSATISFACTION_V2'" class="media-body">
95
- <SatisfactionV2 :message='msg'></SatisfactionV2>
96
- </view>
97
- <!-- 不满意选项 -->
98
- <view v-if="msg.type == 'answer_dissatisfaction'"
99
- class="message" v-bind:class="msg.speaker == 'user' ? 'message-kf' : 'message'">
100
- <DissatisfactionOptions :message='msg' @onOption="sendDissatisfaction"></DissatisfactionOptions>
101
-
102
- </view>
103
- <view v-if="msg.type == 'user_action_to_satisfaction' || msg.type == 'user_action_to_unsatisfactory'">
104
- <view class="media-body" v-if="msg.speaker == 'user'"><view v-html="msg.content.input"></view></view>
105
- </view>
106
- </view>
107
- </view>
108
- <view
109
- v-if="(msg.type == 'user_action_to_satisfaction' || msg.type == 'user_action_to_unsatisfactory') && msg.speaker != 'user' && msg.content != null"
110
- class="message"
111
- v-bind:class="msg.speaker == 'user' ? 'message-kf' : 'message'"
112
- >
113
- <view class="user-detail">
114
- <view class="media-body-ps">
115
- <view class="other" v-html="msg.content.reply_text"></view>
116
- <view v-if="msg.content.reply_options != null && msg.content.reply_options.length > 0">
117
- <view
118
- v-for="(reply_option, index) in msg.content.reply_options"
119
- v-bind:class="[index == msg.content.reply_options.length - 1 ? 'end' : '', 'ps']"
120
- :key="index"
121
- >
122
- <view @click="sendSatisfaction4Uni" :data-name="reply_option.name" :data-answer="reply_option.answer">{{ reply_option.name }}</view>
123
- </view>
124
- </view>
125
- </view>
126
- </view>
127
- </view>
128
- </view>
129
- </view>
130
- </template>
131
-
132
- <script>
133
- import Msgloading from "./ask-components/Msgloading";
134
- import SatisfactionV2 from "./ask-components/SatisfactionV2";
135
- import DissatisfactionOptions from "./ask-components/DissatisfactionOptions";
136
- export default {
137
- name: "chatContent",
138
- data(){
139
- return{
140
- connectSucess: false,
141
- }
142
- },
143
- components:{Msgloading,SatisfactionV2,DissatisfactionOptions},
144
- props:['messageList'],
145
- methods:{
146
- touchEvent(){
147
- this.$emit('touchEvent')
148
- },
149
- tapName(){
150
- this.$emit('tapName')
151
- },
152
- gotoWebview(url){
153
- this.$emit('gotoWebview',url)
154
- },
155
- sendRadioMessage(value, showValue){
156
- this.$emit('sendRadioMessage',value,showValue)
157
- },
158
- onImageClick(url){
159
- this.$emit('onImageClick',url)
160
- },
161
- sendDissatisfaction(options){
162
- this.$emit('sendDissatisfaction',options)
163
- },
164
- sendSatisfaction4Uni(e){
165
- this.$emit('sendSatisfaction4Uni',e)
166
- },
167
- sendSatisfaction(type, choose, answer, answerRadio){
168
- this.$emit('sendSatisfaction',type,choose,answer,answerRadio)
169
- }
170
- }
171
- }
172
- </script>
173
-
174
- <style scoped lang="less">
175
- .chat-message-content {
176
- display: flex;
177
- flex-direction: column;
178
- .message-notice {
179
- display: inline-block;
180
- text-align: center;
181
- margin-top: 10px;
182
- margin-bottom: 10px;
183
- width: 100%;
184
- background-color: transparent !important;
185
- }
186
- .notice-content {
187
- display: inline-block;
188
- padding: 5px 10px;
189
- border-radius: 5px;
190
- background-color: #F4F8FC;
191
- color: #666666;
192
- font-size: 12px;
193
- max-width: 80%;
194
- word-wrap: break-word;
195
- word-break: break-all;
196
- overflow: hidden;
197
- }
198
- .notice-content-day {
199
- display: inline-block;
200
- padding: 5px 10px;
201
- .line-left {
202
- display: inline-block;
203
- width: 100px;
204
- height: 1px;
205
- margin-bottom: 5px;
206
- margin-right: 5px;
207
- //background:#dcdcdc;
208
- background: -webkit-linear-gradient(left, #fff -4%, #666666 50%);
209
- }
210
- .line-text {
211
- color: #666666;
212
- font-size: 24px;
213
- }
214
- .line-right {
215
- display: inline-block;
216
- width: 100px;
217
- height: 1px;
218
- margin-bottom: 5px;
219
- margin-left: 5px;
220
- //background:#dcdcdc;
221
- background: -webkit-linear-gradient(left, #666666 50%, #fff 100%);
222
- }
223
- }
224
- .voiceinputting {
225
- position: absolute;
226
- top: 50%;
227
- left: 50%;
228
- }
229
- .message {
230
- display: flex;
231
- margin-bottom: 20px;
232
- justify-content: flex-start;
233
- .user-detail {
234
- display: flex;
235
- -ms-flex-align: start;
236
- align-items: flex-start;
237
- max-width: 80%;
238
- .media-body-image{
239
- background-color: #F4F8FC;
240
- border: 1px solid #F4F8FC;
241
- word-break: break-word;
242
- box-shadow: 0px 0px 5px 0px rgba(76,97,255,0.38);
243
- flex: 1;
244
- border-radius: 32px;
245
- border-top-left-radius: 0px;
246
- padding: 5px 5px;
247
- image{
248
- border-radius: 32px !important;
249
- border-top-left-radius: 0px !important;
250
- }
251
- video{
252
- border-radius: 32px !important;
253
- border-top-left-radius: 0px !important;
254
- }
255
- }
256
- .media-body {
257
- //max-width: calc(100vw - 800px);
258
- //background-color: #ecebeb;
259
- background-color: #F4F8FC;
260
- border: 1px solid #F4F8FC;
261
- word-break: break-word;
262
- box-shadow: 0px 0px 5px 0px rgba(76,97,255,0.38);
263
- flex: 1;
264
- min-height: 30px;
265
- line-height: 30px;
266
- border-radius: 32px;
267
- border-top-left-radius: 0px;
268
- padding: 8px 15px;
269
- text-align: left;
270
- margin-left: 5px;
271
- h2 {
272
- font-size: 18px;
273
- }
274
- p {
275
- font-size: 14px;
276
- word-wrap: break-word;
277
- word-break: break-all;
278
- overflow: hidden;
279
- height: auto;
280
- }
281
- img{
282
- max-width: 74vw;
283
- }
284
- .voicemessage {
285
- width: 400px;
286
- height: 70px;
287
- line-height: 70px;
288
- background-color: #e8eaec;
289
- border-radius: 10px;
290
- .icon-vioce {
291
- font-size: 24px;
292
- float: left;
293
- margin-left: 40px;
294
- margin-right: 40px;
295
- }
296
- .time {
297
- font-size: 24px;
298
- margin-left: 40px;
299
- }
300
- }
301
- span {
302
- margin-bottom: 10px;
303
- font-size: 12px;
304
- color: #a3a4a5;
305
- float: left;
306
- }
307
- .botname {
308
- margin-left: 20px;
309
- float: right;
310
- }
311
- .mb-0 {
312
- margin-bottom: 0 !important;
313
- text-align: left;
314
- line-height: 1.3;
315
- margin-top: 0;
316
- font-size: 24px;
317
- }
318
- }
319
- .media-body-ps {
320
- //max-width: calc(100vw - 800px);
321
- background-color: #F4F8FC;
322
- border: 1px solid #F4F8FC;
323
- word-break: break-word;
324
- box-shadow: 0px 0px 5px 0px rgba(76,97,255,0.38);
325
- flex: 1;
326
- min-height: 30px;
327
- line-height: 30px;
328
- border-radius: 32px;
329
- border-top-left-radius: 0px;
330
- overflow: hidden;
331
- text-align: left;
332
- margin-left: 5px;
333
- h2 {
334
- font-size: 18px;
335
- }
336
- .other {
337
- font-size: 14px;
338
- word-wrap: break-word;
339
- word-break: break-all;
340
- overflow: hidden;
341
- padding: 8px 20px 8px 15px;
342
- height: auto;
343
- }
344
- .ps {
345
- padding: 8px 20px 8px 15px;
346
- height: auto;
347
- border-top: 1px solid #F4F8FC;
348
- background-color: #ffffff;
349
- color: #4C61E1;
350
- cursor: pointer;
351
- font-size: 14px;
352
- display: flex;
353
- flex-direction: row;
354
- justify-content: space-between;
355
- i{
356
- margin-left: 20px;
357
- }
358
- }
359
- .end {
360
- border: 1px solid #F4F8FC;
361
- border-bottom-left-radius: 32px !important;
362
- border-bottom-right-radius: 32px !important;
363
- }
364
- .voicemessage {
365
- width: 200px;
366
- height: 35px;
367
- line-height: 35px;
368
- background-color: #e8eaec;
369
- border-radius: 10px;
370
- .icon-vioce {
371
- font-size: 24px;
372
- float: left;
373
- margin-left: 20px;
374
- margin-right: 20px;
375
- }
376
- .time {
377
- font-size: 28px;
378
- margin-left: 20px;
379
- }
380
- }
381
- span {
382
- margin-bottom: 10px;
383
- font-size: 24px;
384
- color: #a3a4a5;
385
- float: left;
386
- }
387
- .botname {
388
- margin-left: 20px;
389
- float: right;
390
- }
391
- .mb-0 {
392
- margin-bottom: 0 !important;
393
- text-align: left;
394
- line-height: 1.3;
395
- margin-top: 0;
396
- font-size: 24px;
397
- }
398
- }
399
- }
400
- .video-player .video-js .vjs-icon-placeholder {
401
- width: 300px;
402
- height: 172px;
403
- display: block;
404
- }
405
- .el-image {
406
- float: right;
407
- width: 300px !important;
408
- height: auto !important;
409
- }
410
- }
411
- .message-kf {
412
- display: flex;
413
- margin-bottom: 20px;
414
- justify-content: flex-end;
415
- margin-right: 20px;
416
- .user-detail {
417
- display: flex;
418
- -ms-flex-align: start;
419
- align-items: flex-start;
420
- max-width: 80%;
421
- .media-body-image{
422
- border: 1px solid #4C61E1 !important;
423
- border: 1px solid #4C61E1 !important;
424
- word-break: break-word;
425
- box-shadow: 0px 0px 5px 0px rgba(76,97,255,0.38);
426
- border-radius: 32px !important;
427
- border-top-right-radius: 0px !important;
428
- padding: 5px 5px;
429
- display: flex;
430
- text-align: center;
431
- overflow: hidden;
432
- image{
433
- border-radius: 32px !important;
434
- border-top-right-radius: 0px !important;
435
- }
436
- video{
437
- border-radius: 32px !important;
438
- border-top-right-radius: 0px !important;
439
- }
440
- }
441
- .media-body {
442
- //max-width: calc(100vw - 800px);
443
- border: 1px solid #4C61E1 !important;
444
- background-color: #4C61E1 !important;
445
- color: #ffffff !important;
446
- word-break: break-word;
447
- border-radius: 32px;
448
- border-top-right-radius: 0px;
449
- padding: 8px 15px;
450
- text-align: left;
451
- h2 {
452
- font-size: 36px;
453
- }
454
- p {
455
- font-size: 28px;
456
- word-wrap: break-word;
457
- word-break: break-all;
458
- overflow: hidden;
459
- font-size: 28px;
460
- height: auto;
461
- }
462
- img{
463
- max-width: 66vw;
464
- }
465
- .voicemessage {
466
- width: 200px;
467
- height: 35px;
468
- line-height: 35px;
469
- background-color: #e8eaec;
470
- border-radius: 10px;
471
- .icon-vioce {
472
- font-size: 24px;
473
- float: left;
474
- margin-left: 20px;
475
- margin-right: 20px;
476
- }
477
- .time {
478
- font-size: 28px;
479
- margin-left: 20px;
480
- }
481
- }
482
- span {
483
- margin-bottom: 10px;
484
- font-size: 24px;
485
- color: #a3a4a5;
486
- float: left;
487
- }
488
- .botname {
489
- margin-left: 20px;
490
- float: right;
491
- }
492
- .mb-0 {
493
- margin-bottom: 0 !important;
494
- text-align: left;
495
- line-height: 1.3;
496
- margin-top: 0;
497
- font-size: 24px;
498
- }
499
- }
500
- }
501
- .video-player .video-js .vjs-icon-placeholder {
502
- width: 300px;
503
- height: 172px;
504
- display: block;
505
- }
506
- .el-image {
507
- float: right;
508
- width: 300px !important;
509
- height: auto !important;
510
- }
511
- }
512
- }
1
+ <template>
2
+ <view class="chat-message-content" id="messageContent" @touchstart="touchEvent">
3
+ <view class="message-notice" v-show="connectSucess"><view class="notice-content">已为您对接专属智能助理</view></view>
4
+ <view v-for="(msg, index) in messageList" :key="index">
5
+ <!-- <view class="message-notice">
6
+ <view class="notice-content" v-if="showTime(msg, index, messageList) && msg.time != null">{{new Date(msg.time).toISOString().slice(0, 10),}}</view>
7
+ </view> -->
8
+ <view class="message" v-bind:class="msg.speaker == 'user' ? 'message-kf' : 'message'">
9
+ <view class="user-detail">
10
+ <Msgloading v-if="msg.speaker != 'user' && msg.type == 'msg_loading'"></Msgloading>
11
+ <!-- 小程序富文本组件 -->
12
+ <view v-if="msg.type == 'answer_rich_text'" class="media-body">
13
+ <!--<mp-html
14
+ lazy-load
15
+ scroll-table
16
+ selectable
17
+ use-anchor
18
+ show-with-animation
19
+ loading-img
20
+ :tag-style="tagStyle"
21
+ :content="msg.content.html" />-->
22
+ <rich-text :nodes="msg.content.html"></rich-text>
23
+ </view>
24
+ <!-- <view v-if="msg.type == 'answer_rich_text'" class="media-body">
25
+ <view id="msg_text"><rich-text :nodes="strings"></rich-text></view>
26
+ </view> -->
27
+ <!-- 欢迎语、文本组件 -->
28
+ <view v-if="msg.type == 'answer_welcofmetext' || msg.type == 'answer_text'" class="media-body">
29
+ <view v-if="msg.speaker == 'user'" v-html="msg.content" @click="tapName" :selectable="true" ref="msg_text" id="msg_text"></view>
30
+ <view v-if="msg.speaker != 'user'">
31
+ <view
32
+ v-for="(span, index) in msg.mini_text"
33
+ :key="index"
34
+ @click="tapName"
35
+ :data-content="span"
36
+ :style="span.type == 'url' ? 'color: #007AFF;' : ''"
37
+ >
38
+ <rich-text :nodes="span.content"></rich-text>
39
+ </view>
40
+ </view>
41
+ </view>
42
+
43
+ <!-- web-view组件 -->
44
+ <view v-if="msg.type == 'web_view'" class="media-body">
45
+ <view class="" v-for="(webCell, webcInd) in msg.arr" :key="webcInd">
46
+ <view v-show="webCell.type == 'text'"><rich-text :nodes="webCell.text"></rich-text></view>
47
+ <text v-show="webCell.type == 'url'" style="color: #007AFF" class="url" @click="gotoWebview(webCell.url)">点击了解详情</text>
48
+ </view>
49
+ </view>
50
+ <!-- 点选组件 -->
51
+ <view v-if="msg.type == 'answer_radio'" class="media-body-ps">
52
+ <view v-if="msg.content.description != ''" class="other" v-html="msg.content.description"></view>
53
+ <view
54
+ v-for="(option, ind) in msg.content.options"
55
+ v-bind:class="[ind == msg.content.options.length - 1 && ind != 1 ? 'end' : '', 'ps']"
56
+ :key="ind"
57
+ @click="sendRadioMessage(msg.id + '_' + ind + '_' + option.value + '_' + option.name, option.name)"
58
+ >
59
+ {{ option.name }}
60
+ <i class="arsenal_icon arsenalangle-right-solid"></i>
61
+ </view>
62
+ </view>
63
+ <!-- 图片组件 -->
64
+ <view
65
+ :style="msg.type == 'answer_image' ? 'background-color: #ffffff !important;' : ''"
66
+ v-if="msg.type == 'answer_image' ||msg.type == 'IMAGE'"
67
+ class="media-body-image"
68
+ >
69
+ <img v-if="msg.content.urls!=null" :src="msg.content.urls[0]" mode="widthFix" @click="onImageClick(msg.content.urls[0])" />
70
+ <img v-else :src="msg.content.url" mode="widthFix" @click="onImageClick(msg.content.url)" />
71
+ </view>
72
+ <!-- 等待语音组件 -->
73
+ <view v-if="msg.type == 'answer_loading'" class="media-body">
74
+ <view class="loading">
75
+ <span></span>
76
+ <span></span>
77
+ <span></span>
78
+ <span></span>
79
+ </view>
80
+ </view>
81
+ <!-- 视频组件 -->
82
+ <view v-if="msg.type == 'answer_video'" class="media-body-image"><video id="myVideo" :src="msg.content.url"></video></view>
83
+ <view v-if="msg.type == 'VIDEO'" class="media-body-image"><video id="myVideo" :src="msg.content.url"></video></view>
84
+ <!-- 反问组件 -->
85
+ <view v-if="msg.type == 'action_question'" class="media-body"><view v-html="msg.content"></view></view>
86
+ <!-- 满意度组件 -->
87
+ <view v-if="msg.type == 'action_satisfaction'" class="media-body-ps">
88
+ <view class="other" v-html="msg.content.satisfactionDes"></view>
89
+ <view class="ps" @click="sendSatisfaction('user_action_to_satisfaction', '满意', msg.content.satisfactoryAnswer)">满意</view>
90
+ <view class="ps end" @click="sendSatisfaction('user_action_to_satisfaction', '不满意', msg.content.unsatisfiedAnswer, msg.content.answerRadio)">
91
+ 不满意
92
+ </view>
93
+ </view>
94
+ <view v-if="msg.type == 'USER_ACTION_TO_SATISFACTION_V2' ||msg.type == 'USER_ACTION_TO_DISSATISFACTION_V2'" class="media-body">
95
+ <SatisfactionV2 :message='msg'></SatisfactionV2>
96
+ </view>
97
+ <!-- 不满意选项 -->
98
+ <view v-if="msg.type == 'answer_dissatisfaction'"
99
+ class="message" v-bind:class="msg.speaker == 'user' ? 'message-kf' : 'message'">
100
+ <DissatisfactionOptions :message='msg' @onOption="sendDissatisfaction"></DissatisfactionOptions>
101
+
102
+ </view>
103
+ <view v-if="msg.type == 'user_action_to_satisfaction' || msg.type == 'user_action_to_unsatisfactory'">
104
+ <view class="media-body" v-if="msg.speaker == 'user'"><view v-html="msg.content.input"></view></view>
105
+ </view>
106
+ </view>
107
+ </view>
108
+ <view
109
+ v-if="(msg.type == 'user_action_to_satisfaction' || msg.type == 'user_action_to_unsatisfactory') && msg.speaker != 'user' && msg.content != null"
110
+ class="message"
111
+ v-bind:class="msg.speaker == 'user' ? 'message-kf' : 'message'"
112
+ >
113
+ <view class="user-detail">
114
+ <view class="media-body-ps">
115
+ <view class="other" v-html="msg.content.reply_text"></view>
116
+ <view v-if="msg.content.reply_options != null && msg.content.reply_options.length > 0">
117
+ <view
118
+ v-for="(reply_option, index) in msg.content.reply_options"
119
+ v-bind:class="[index == msg.content.reply_options.length - 1 ? 'end' : '', 'ps']"
120
+ :key="index"
121
+ >
122
+ <view @click="sendSatisfaction4Uni" :data-name="reply_option.name" :data-answer="reply_option.answer">{{ reply_option.name }}</view>
123
+ </view>
124
+ </view>
125
+ </view>
126
+ </view>
127
+ </view>
128
+ </view>
129
+ </view>
130
+ </template>
131
+
132
+ <script>
133
+ import Msgloading from "./ask-components/Msgloading";
134
+ import SatisfactionV2 from "./ask-components/SatisfactionV2";
135
+ import DissatisfactionOptions from "./ask-components/DissatisfactionOptions";
136
+ export default {
137
+ name: "chatContent",
138
+ data(){
139
+ return{
140
+ connectSucess: false,
141
+ }
142
+ },
143
+ components:{Msgloading,SatisfactionV2,DissatisfactionOptions},
144
+ props:['messageList'],
145
+ methods:{
146
+ touchEvent(){
147
+ this.$emit('touchEvent')
148
+ },
149
+ tapName(){
150
+ this.$emit('tapName')
151
+ },
152
+ gotoWebview(url){
153
+ this.$emit('gotoWebview',url)
154
+ },
155
+ sendRadioMessage(value, showValue){
156
+ this.$emit('sendRadioMessage',value,showValue)
157
+ },
158
+ onImageClick(url){
159
+ this.$emit('onImageClick',url)
160
+ },
161
+ sendDissatisfaction(options){
162
+ this.$emit('sendDissatisfaction',options)
163
+ },
164
+ sendSatisfaction4Uni(e){
165
+ this.$emit('sendSatisfaction4Uni',e)
166
+ },
167
+ sendSatisfaction(type, choose, answer, answerRadio){
168
+ this.$emit('sendSatisfaction',type,choose,answer,answerRadio)
169
+ }
170
+ }
171
+ }
172
+ </script>
173
+
174
+ <style scoped lang="less">
175
+ .chat-message-content {
176
+ display: flex;
177
+ flex-direction: column;
178
+ .message-notice {
179
+ display: inline-block;
180
+ text-align: center;
181
+ margin-top: 10px;
182
+ margin-bottom: 10px;
183
+ width: 100%;
184
+ background-color: transparent !important;
185
+ }
186
+ .notice-content {
187
+ display: inline-block;
188
+ padding: 5px 10px;
189
+ border-radius: 5px;
190
+ background-color: #F4F8FC;
191
+ color: #666666;
192
+ font-size: 12px;
193
+ max-width: 80%;
194
+ word-wrap: break-word;
195
+ word-break: break-all;
196
+ overflow: hidden;
197
+ }
198
+ .notice-content-day {
199
+ display: inline-block;
200
+ padding: 5px 10px;
201
+ .line-left {
202
+ display: inline-block;
203
+ width: 100px;
204
+ height: 1px;
205
+ margin-bottom: 5px;
206
+ margin-right: 5px;
207
+ //background:#dcdcdc;
208
+ background: -webkit-linear-gradient(left, #fff -4%, #666666 50%);
209
+ }
210
+ .line-text {
211
+ color: #666666;
212
+ font-size: 24px;
213
+ }
214
+ .line-right {
215
+ display: inline-block;
216
+ width: 100px;
217
+ height: 1px;
218
+ margin-bottom: 5px;
219
+ margin-left: 5px;
220
+ //background:#dcdcdc;
221
+ background: -webkit-linear-gradient(left, #666666 50%, #fff 100%);
222
+ }
223
+ }
224
+ .voiceinputting {
225
+ position: absolute;
226
+ top: 50%;
227
+ left: 50%;
228
+ }
229
+ .message {
230
+ display: flex;
231
+ margin-bottom: 20px;
232
+ justify-content: flex-start;
233
+ .user-detail {
234
+ display: flex;
235
+ -ms-flex-align: start;
236
+ align-items: flex-start;
237
+ max-width: 80%;
238
+ .media-body-image{
239
+ background-color: #F4F8FC;
240
+ border: 1px solid #F4F8FC;
241
+ word-break: break-word;
242
+ box-shadow: 0px 0px 5px 0px rgba(76,97,255,0.38);
243
+ flex: 1;
244
+ border-radius: 32px;
245
+ border-top-left-radius: 0px;
246
+ padding: 5px 5px;
247
+ image{
248
+ border-radius: 32px !important;
249
+ border-top-left-radius: 0px !important;
250
+ }
251
+ video{
252
+ border-radius: 32px !important;
253
+ border-top-left-radius: 0px !important;
254
+ }
255
+ }
256
+ .media-body {
257
+ //max-width: calc(100vw - 800px);
258
+ //background-color: #ecebeb;
259
+ background-color: #F4F8FC;
260
+ border: 1px solid #F4F8FC;
261
+ word-break: break-word;
262
+ box-shadow: 0px 0px 5px 0px rgba(76,97,255,0.38);
263
+ flex: 1;
264
+ min-height: 30px;
265
+ line-height: 30px;
266
+ border-radius: 32px;
267
+ border-top-left-radius: 0px;
268
+ padding: 8px 15px;
269
+ text-align: left;
270
+ margin-left: 5px;
271
+ h2 {
272
+ font-size: 18px;
273
+ }
274
+ p {
275
+ font-size: 14px;
276
+ word-wrap: break-word;
277
+ word-break: break-all;
278
+ overflow: hidden;
279
+ height: auto;
280
+ }
281
+ img{
282
+ max-width: 74vw;
283
+ }
284
+ .voicemessage {
285
+ width: 400px;
286
+ height: 70px;
287
+ line-height: 70px;
288
+ background-color: #e8eaec;
289
+ border-radius: 10px;
290
+ .icon-vioce {
291
+ font-size: 24px;
292
+ float: left;
293
+ margin-left: 40px;
294
+ margin-right: 40px;
295
+ }
296
+ .time {
297
+ font-size: 24px;
298
+ margin-left: 40px;
299
+ }
300
+ }
301
+ span {
302
+ margin-bottom: 10px;
303
+ font-size: 12px;
304
+ color: #a3a4a5;
305
+ float: left;
306
+ }
307
+ .botname {
308
+ margin-left: 20px;
309
+ float: right;
310
+ }
311
+ .mb-0 {
312
+ margin-bottom: 0 !important;
313
+ text-align: left;
314
+ line-height: 1.3;
315
+ margin-top: 0;
316
+ font-size: 24px;
317
+ }
318
+ }
319
+ .media-body-ps {
320
+ //max-width: calc(100vw - 800px);
321
+ background-color: #F4F8FC;
322
+ border: 1px solid #F4F8FC;
323
+ word-break: break-word;
324
+ box-shadow: 0px 0px 5px 0px rgba(76,97,255,0.38);
325
+ flex: 1;
326
+ min-height: 30px;
327
+ line-height: 30px;
328
+ border-radius: 32px;
329
+ border-top-left-radius: 0px;
330
+ overflow: hidden;
331
+ text-align: left;
332
+ margin-left: 5px;
333
+ h2 {
334
+ font-size: 18px;
335
+ }
336
+ .other {
337
+ font-size: 14px;
338
+ word-wrap: break-word;
339
+ word-break: break-all;
340
+ overflow: hidden;
341
+ padding: 8px 20px 8px 15px;
342
+ height: auto;
343
+ }
344
+ .ps {
345
+ padding: 8px 20px 8px 15px;
346
+ height: auto;
347
+ border-top: 1px solid #F4F8FC;
348
+ background-color: #ffffff;
349
+ color: #4C61E1;
350
+ cursor: pointer;
351
+ font-size: 14px;
352
+ display: flex;
353
+ flex-direction: row;
354
+ justify-content: space-between;
355
+ i{
356
+ margin-left: 20px;
357
+ }
358
+ }
359
+ .end {
360
+ border: 1px solid #F4F8FC;
361
+ border-bottom-left-radius: 32px !important;
362
+ border-bottom-right-radius: 32px !important;
363
+ }
364
+ .voicemessage {
365
+ width: 200px;
366
+ height: 35px;
367
+ line-height: 35px;
368
+ background-color: #e8eaec;
369
+ border-radius: 10px;
370
+ .icon-vioce {
371
+ font-size: 24px;
372
+ float: left;
373
+ margin-left: 20px;
374
+ margin-right: 20px;
375
+ }
376
+ .time {
377
+ font-size: 28px;
378
+ margin-left: 20px;
379
+ }
380
+ }
381
+ span {
382
+ margin-bottom: 10px;
383
+ font-size: 24px;
384
+ color: #a3a4a5;
385
+ float: left;
386
+ }
387
+ .botname {
388
+ margin-left: 20px;
389
+ float: right;
390
+ }
391
+ .mb-0 {
392
+ margin-bottom: 0 !important;
393
+ text-align: left;
394
+ line-height: 1.3;
395
+ margin-top: 0;
396
+ font-size: 24px;
397
+ }
398
+ }
399
+ }
400
+ .video-player .video-js .vjs-icon-placeholder {
401
+ width: 300px;
402
+ height: 172px;
403
+ display: block;
404
+ }
405
+ .el-image {
406
+ float: right;
407
+ width: 300px !important;
408
+ height: auto !important;
409
+ }
410
+ }
411
+ .message-kf {
412
+ display: flex;
413
+ margin-bottom: 20px;
414
+ justify-content: flex-end;
415
+ margin-right: 20px;
416
+ .user-detail {
417
+ display: flex;
418
+ -ms-flex-align: start;
419
+ align-items: flex-start;
420
+ max-width: 80%;
421
+ .media-body-image{
422
+ border: 1px solid #4C61E1 !important;
423
+ border: 1px solid #4C61E1 !important;
424
+ word-break: break-word;
425
+ box-shadow: 0px 0px 5px 0px rgba(76,97,255,0.38);
426
+ border-radius: 32px !important;
427
+ border-top-right-radius: 0px !important;
428
+ padding: 5px 5px;
429
+ display: flex;
430
+ text-align: center;
431
+ overflow: hidden;
432
+ image{
433
+ border-radius: 32px !important;
434
+ border-top-right-radius: 0px !important;
435
+ }
436
+ video{
437
+ border-radius: 32px !important;
438
+ border-top-right-radius: 0px !important;
439
+ }
440
+ }
441
+ .media-body {
442
+ //max-width: calc(100vw - 800px);
443
+ border: 1px solid #4C61E1 !important;
444
+ background-color: #4C61E1 !important;
445
+ color: #ffffff !important;
446
+ word-break: break-word;
447
+ border-radius: 32px;
448
+ border-top-right-radius: 0px;
449
+ padding: 8px 15px;
450
+ text-align: left;
451
+ h2 {
452
+ font-size: 36px;
453
+ }
454
+ p {
455
+ font-size: 28px;
456
+ word-wrap: break-word;
457
+ word-break: break-all;
458
+ overflow: hidden;
459
+ font-size: 28px;
460
+ height: auto;
461
+ }
462
+ img{
463
+ max-width: 66vw;
464
+ }
465
+ .voicemessage {
466
+ width: 200px;
467
+ height: 35px;
468
+ line-height: 35px;
469
+ background-color: #e8eaec;
470
+ border-radius: 10px;
471
+ .icon-vioce {
472
+ font-size: 24px;
473
+ float: left;
474
+ margin-left: 20px;
475
+ margin-right: 20px;
476
+ }
477
+ .time {
478
+ font-size: 28px;
479
+ margin-left: 20px;
480
+ }
481
+ }
482
+ span {
483
+ margin-bottom: 10px;
484
+ font-size: 24px;
485
+ color: #a3a4a5;
486
+ float: left;
487
+ }
488
+ .botname {
489
+ margin-left: 20px;
490
+ float: right;
491
+ }
492
+ .mb-0 {
493
+ margin-bottom: 0 !important;
494
+ text-align: left;
495
+ line-height: 1.3;
496
+ margin-top: 0;
497
+ font-size: 24px;
498
+ }
499
+ }
500
+ }
501
+ .video-player .video-js .vjs-icon-placeholder {
502
+ width: 300px;
503
+ height: 172px;
504
+ display: block;
505
+ }
506
+ .el-image {
507
+ float: right;
508
+ width: 300px !important;
509
+ height: auto !important;
510
+ }
511
+ }
512
+ }
513
513
  </style>