ad7d1a78
 杨鑫
'最新'
|
1
|
<template>
|
|
9d9c6f7d
杨鑫
最新
|
2
3
4
5
6
|
<div style="background-color:#f7f7f7;padding:10px 10px;">
<div class="zhuti">
<div style="display:flex;border: 1px solid #d7d7d7;width: 100%;">
<div class="left_list">
<div :class="index == msgListIndex ?'cardClick' :'card'" style="position: relative;"
|
|
57b010a3
杨鑫
最新1
|
7
|
v-for="(item,index) in tableData" @click="getMsg(item.businessUserId,index)" v-if="totle!=0" >
|
|
9d9c6f7d
杨鑫
最新
|
8
9
10
11
12
13
14
15
16
17
|
<el-badge :value="item.num" :hidden="item.num ==0?true:false"
style="position: absolute;top: 65%;right:20px;"></el-badge>
<div style="display:flex;justify-content: space-between; margin-bottom: 10px;width: 100%;">
<div class="name">{{item.userName}}</div>
<div>{{item.chatTime}}</div>
</div>
<div class="const">{{item.chatContent}}</div>
</div>
|
|
57b010a3
杨鑫
最新1
|
18
|
<div v-if="totle==0" style="display: flex;justify-content: space-around;margin: 20px;font-size: 16px;">暂无消息对话</div>
|
|
9d9c6f7d
杨鑫
最新
|
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
|
</div>
<div class="right_list" ref="commentsContainer" v-if="msgListIndex!=null">
<div class="title_name">{{kehuName}}</div>
<div class="right_list" style="width: 100%;height: 68vh;" id="words">
<div :class="item.messageType==1?'neiBox':'zijiBox'" v-for="(item,index) in msgList">
<div style="padding: 10px;">{{item.messageType==1?item.userName:item.shopName }}</div>
<div :class="item.messageType==1?'kehu':'ziji'">{{item.chatContent}}</div>
<div :class="item.messageType==1?'time':'time'">{{item.chatTime}}</div>
</div>
</div>
<!-- <div class="" v-for="(item,index) in msgList" v-if="item.messageType==2">
<div style="padding: 10px;">{{item.shopName}}</div>
<div class="">{{item.chatContent}}</div>
<div class="" style="text-align: right;">{{item.chatTime}}</div>
</div> -->
<div class="footput">
<el-input v-model="sumkehu.chatContent" placeholder="请输入"
style="width:90%;margin-right: 15px;" />
<el-button @click="onSubmit" style="background-color: #3F9B6A;color: #fff">发送
</el-button>
</div>
</div>
</div>
</div>
</div>
|
|
ad7d1a78
杨鑫
'最新'
|
46
47
48
|
</template>
<script>
|
|
9d9c6f7d
杨鑫
最新
|
49
50
51
52
53
54
55
56
57
58
|
import {
shopGetDetails,
shopGetList,
shopPushMsg,
updateReadStatus
} from '@/api/server';
export default {
data() {
return {
msg: '',
|
|
57b010a3
杨鑫
最新1
|
59
|
totle:0,
|
|
9d9c6f7d
杨鑫
最新
|
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
|
msgListIndex: null,
tableData: [],
msgList: [],
sumkehu: {
businessUserId: '',
chatContent: ''
},
kehuName: '',
timer: null, // 定义定时器
}
},
created() {
},
mounted() {
this.getAll()
this.$nextTick(() => {
this.timer = setInterval(() => {
this.getAll()
if (this.msgListIndex !== null) {
this.getmsgList(this.sumkehu.businessUserId)
}
|
|
57b010a3
杨鑫
最新1
|
85
|
}, 30000)
|
|
9d9c6f7d
杨鑫
最新
|
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
|
})
},
beforeDestroy() {
// 组件销毁时清除定时器，避免内存泄漏
if (this.timer) {
clearInterval(this.timer)
}
},
methods: {
async getAll(formInline) {
const res = await shopGetList();
this.tableData = res.data
|
|
57b010a3
杨鑫
最新1
|
102
|
this.totle = this.tableData.length
|
|
9d9c6f7d
杨鑫
最新
|
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
|
},
async getmsgList(ids,val) {
const res = await shopGetDetails(ids)
this.msgList = res.data
this.kehuName = res.data[0].userName
if(val == 1){
this.scollBottom()
}
},
async update(ids) {
let obj = {
businessUserId: ids
}
const res = await updateReadStatus(obj)
},
getMsg(ids, index) {
this.getmsgList(ids,1)
this.update(ids)
this.sumkehu.businessUserId = ids
this.msgListIndex = index
},
async onSubmit() {
if (this.sumkehu.chatContent == '') {
return
}
await shopPushMsg(this.sumkehu)
this.sumkehu.chatContent = ''
this.getmsgList(this.sumkehu.businessUserId)
this.scollBottom()
},
scollBottom() {
var oWords = document.getElementById('words')
setTimeout(() => {
this.$nextTick(() => {
oWords.scrollTop = oWords.scrollHeight + 55
})
}, 100)
}
}
}
|
|
ad7d1a78
杨鑫
'最新'
|
151
152
153
|
</script>
<style scoped>
|
|
9d9c6f7d
杨鑫
最新
|
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
|
/deep/ .first-column-bg {
background-color: #f4f4f5 !important;
}
.zhuti {
padding: 20px;
background-color: #fff;
}
/deep/ .el-form-item__content {
width: 80%;
}
.left_list {
border-right: 1px solid #d7d7d7;
width: 25%;
height: 80vh;
overflow-y: auto;
/* 允许垂直滚动 */
}
.right_list {
width: 75%;
height: 80vh;
/* position: relative; */
overflow-y: auto;
/* 允许垂直滚动 */
}
.card {
padding: 20px;
border-bottom: 1px solid #d7d7d7;
}
.card:hover {
background-color: #DEEBE2;
color: #3F9B6A;
}
.cardClick {
padding: 20px;
border-bottom: 1px solid #d7d7d7;
background-color: #3F9B6A;
color: #fff;
}
.cardClick:hover {
background-color: #3F9B6A;
color: #fff;
}
/* 针对WebKit内核的浏览器（如Chrome和Safari）隐藏滚动条 */
.left_list::-webkit-scrollbar {
display: none;
}
/* 对于Firefox，使用以下CSS属性隐藏滚动条 */
.left_list {
scrollbar-width: none;
/* Firefox 64 */
}
/* 针对WebKit内核的浏览器（如Chrome和Safari）隐藏滚动条 */
.right_list::-webkit-scrollbar {
display: none;
}
/* 对于Firefox，使用以下CSS属性隐藏滚动条 */
.right_list {
scrollbar-width: none;
/* Firefox 64 */
}
.const {
width: 80%;
white-space: nowrap;
/* 防止文字换行 */
overflow: hidden;
/* 隐藏溢出的文字 */
text-overflow: ellipsis;
/* 显示省略号 */
}
.title_name {
border-bottom: 1px solid #d7d7d7;
padding: 20px;
}
.neiBox {
padding: 20px;
}
.zijiBox {
padding: 20px;
align-content: flex-end;
flex-wrap: wrap;
flex-direction: column;
display: flex;
}
.footput {
display: flex;
/* position: absolute;
|
|
ad7d1a78
杨鑫
'最新'
|
257
|
bottom:0;
|
|
9d9c6f7d
杨鑫
最新
|
258
259
260
261
262
263
264
|
left:0; */
padding: 10px;
width: 100%;
align-items: center;
}
.kehu {
|
|
6c268f28
杨鑫
最新1
|
265
266
267
268
269
270
|
height: auto;
/* 使用 inline-block 或 flex 让盒子根据内容自动调整大小 */
max-width: 70%; /* 大致限制宽度为父元素的 70% */
word-wrap: break-word; /* 允许长单词换行 */
overflow-wrap: break-word; /* 同 word-wrap，更标准的写法 */
display: inline-block; /* 让盒子根据内容自适应宽度 */
|
|
9d9c6f7d
杨鑫
最新
|
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
|
/* 假设消息框占据了屏幕宽度的80% */
padding: 16px;
/* 消息框内的内边距 */
background-color: #F7F5F6;
/* 蓝色背景 */
color: #000;
/* 白色文字 */
position: relative;
/* 为了定位右上角的表情符号 */
font-size: 16px;
/* 字体大小 */
text-align: left;
/* 文字左对齐 */
/* 移除圆角 */
border-radius: 0;
/* 只给右上角添加圆角（如果需要的话，这里设置为0表示不添加） */
|
|
a6a3878d
杨鑫
最新绿道
|
287
|
border-top-right-radius: 12px;
|
|
9d9c6f7d
杨鑫
最新
|
288
|
/* 可以根据需要调整或删除此行 */
|
|
a6a3878d
杨鑫
最新绿道
|
289
|
border-bottom-right-radius: 12px;
|
|
9d9c6f7d
杨鑫
最新
|
290
291
292
|
/* 同上 */
/* 只保留左下角的直角（实际上不需要特别设置，因为默认就是直角） */
/* 但为了明确，我们可以设置其他三个角为0（如果之前设置了圆角的话） */
|
|
a6a3878d
杨鑫
最新绿道
|
293
294
|
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
|
|
9d9c6f7d
杨鑫
最新
|
295
296
297
298
|
/* 左下角保持直角，这其实是默认值 */
}
.ziji {
|
|
6c268f28
杨鑫
最新1
|
299
300
301
302
303
304
|
height: auto;
/* 使用 inline-block 或 flex 让盒子根据内容自动调整大小 */
max-width: 70%; /* 大致限制宽度为父元素的 70% */
word-wrap: break-word; /* 允许长单词换行 */
overflow-wrap: break-word; /* 同 word-wrap，更标准的写法 */
display: inline-block; /* 让盒子根据内容自适应宽度 */
|
|
9d9c6f7d
杨鑫
最新
|
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
|
/* 假设消息框占据了屏幕宽度的80% */
padding: 16px;
/* 消息框内的内边距 */
background-color: #3F9B6A;
/* 蓝色背景 */
color: white;
/* 白色文字 */
position: relative;
/* 为了定位右上角的表情符号 */
font-size: 16px;
/* 字体大小 */
text-align: left;
/* 文字左对齐 */
/* 移除圆角 */
border-radius: 0;
/* 只给右上角添加圆角（如果需要的话，这里设置为0表示不添加） */
|
|
a6a3878d
杨鑫
最新绿道
|
321
|
border-top-right-radius: 12px;
|
|
9d9c6f7d
杨鑫
最新
|
322
|
/* 可以根据需要调整或删除此行 */
|
|
a6a3878d
杨鑫
最新绿道
|
323
|
border-bottom-right-radius: 12px;
|
|
9d9c6f7d
杨鑫
最新
|
324
325
326
|
/* 同上 */
/* 只保留左下角的直角（实际上不需要特别设置，因为默认就是直角） */
/* 但为了明确，我们可以设置其他三个角为0（如果之前设置了圆角的话） */
|
|
a6a3878d
杨鑫
最新绿道
|
327
328
|
border-top-left-radius: 12px;
border-bottom-left-radius: 12px;
|
|
9d9c6f7d
杨鑫
最新
|
329
330
331
332
333
334
335
|
/* 左下角保持直角，这其实是默认值 */
}
.time {
padding: 5px;
}
</style>
|
