3f535f30
 杨鑫
'初始'
|
1
2
3
4
5
|
<template>
<view class="uni-padding-wrap">
<view class="" style="position:fixed;bottom: 0rpx;left: 0;width: 100%;">
<form @submit="commitComments">
|
|
ad7d1a78
杨鑫
'最新'
|
6
|
<view style="display: flex;justify-content: space-between;;padding: 10px;">
|
|
9d9c6f7d
杨鑫
最新
|
7
|
<input class="contentTextArea" name="commentContent" v-model="sumshop.chatContent" placeholder="请输入"></input>
|
|
3f535f30
杨鑫
'初始'
|
8
9
10
11
12
|
<button class="commitButton" formType="submit">发送</button>
</view>
</form>
</view>
|
|
9d9c6f7d
杨鑫
最新
|
13
14
15
16
17
|
<view class="uni-comment" v-show="commentsList.length!=0" id="words" >
<view :class="item.messageType==2?'uni-comment-list':'uni-comment-listTWO'" v-for="(item,index) in commentsList" :key="index" >
<view style="text-align: right;margin-top: 10rpx;" v-if="item.messageType==1">
<view class="uni-comment-top" style="margin-right: 10px;">
<view>{{item.userName==''||item.userName==null?'匿名':item.userName}}</view>
|
|
cff964f8
杨鑫
最新1
|
18
|
|
|
9d9c6f7d
杨鑫
最新
|
19
20
21
|
</view>
<view class="uni-comment-content ziji" style="margin-right: 10px;text-align: right;padding-right: 15px;">{{item.chatContent}}</view>
|
|
cff964f8
杨鑫
最新1
|
22
|
<view class="uni-comment-date">{{item.chatTime}}</view>
|
|
9d9c6f7d
杨鑫
最新
|
23
24
25
26
27
28
29
30
31
32
33
|
</view>
<view class="uni-comment-face" v-if="item.messageType==1">
<image :src="$baseURL+user.headImage" mode="widthFix"></image>
</view>
<view class="uni-comment-face" v-if="item.messageType==2">
<image src="../../components/canvasShow/static/images/product/kefu.png" mode="widthFix"></image>
</view>
<view class="uni-comment-body" v-if="item.messageType==2">
<view class="uni-comment-top">
<view>{{item.shopName==''||item.shopName==null?'匿名':item.shopName}}</view>
|
|
cff964f8
杨鑫
最新1
|
34
|
|
|
9d9c6f7d
杨鑫
最新
|
35
36
|
</view>
<view class="uni-comment-content kehu" style="text-align: left;padding-left: 15px;">{{item.chatContent}}</view>
|
|
cff964f8
杨鑫
最新1
|
37
|
<view class="uni-comment-date">{{item.chatTime}}</view>
|
|
9d9c6f7d
杨鑫
最新
|
38
39
40
41
42
43
|
</view>
</view>
</view>
<view class="uni-comment" v-if="commentsList.length==0">
<view class="uni-comment-list">
|
|
3f535f30
杨鑫
'初始'
|
44
45
46
47
48
|
<view class="uni-comment-face">
<image src="../../components/canvasShow/static/images/product/kefu.png" mode="widthFix"></image>
</view>
<view class="uni-comment-body">
<view class="uni-comment-top">
|
|
9d9c6f7d
杨鑫
最新
|
49
|
<view>商家</view>
|
|
cff964f8
杨鑫
最新1
|
50
|
|
|
3f535f30
杨鑫
'初始'
|
51
|
</view>
|
|
9d9c6f7d
杨鑫
最新
|
52
|
<view class="uni-comment-content kehu" style="text-align: left;padding-left: 15px;">您好！请问有什么问题呢？</view>
|
|
cff964f8
杨鑫
最新1
|
53
|
<view class="uni-comment-date"></view>
|
|
3f535f30
杨鑫
'初始'
|
54
55
56
57
58
59
|
</view>
</view>
</view>
</view>
</template>
<script>
|
|
9d9c6f7d
杨鑫
最新
|
60
61
|
const NET = require('../../utils/request')
const API = require('../../config/api')
|
|
3f535f30
杨鑫
'初始'
|
62
63
64
|
export default {
data(){
return{
|
|
9d9c6f7d
杨鑫
最新
|
65
66
67
68
69
70
71
72
|
commentsList:[],
user:{},
index:'',
sumshop:{
chatContent:'',
shopId:''
},
timer: null // 定义定时器
|
|
3f535f30
杨鑫
'初始'
|
73
74
75
|
}
},
mounted() {
|
|
9d9c6f7d
杨鑫
最新
|
76
77
78
|
this.timer = setInterval(() => {
this.getMsg()
|
|
57b010a3
杨鑫
最新1
|
79
|
}, 30000)
|
|
9d9c6f7d
杨鑫
最新
|
80
|
|
|
3f535f30
杨鑫
'初始'
|
81
|
},
|
|
ad7d1a78
杨鑫
'最新'
|
82
|
onLoad(option) {
|
|
9d9c6f7d
杨鑫
最新
|
83
84
85
86
87
88
89
90
91
|
console.log(option.shopId)
this.sumshop.shopId = option.shopId
NET.requestGet(API.keSeverList, option.shopId, 'GET').then(res => {
this.commentsList = res.data
NET.request(API.GetUser, {}, 'GET').then(iotem => {
this.user = iotem.data
})
})
|
|
ad7d1a78
杨鑫
'最新'
|
92
|
},
|
|
9d9c6f7d
杨鑫
最新
|
93
94
95
96
97
98
99
100
101
102
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
|
beforeDestroy() {
// 组件销毁时清除定时器，避免内存泄漏
if (this.timer) {
clearInterval(this.timer)
}
},
methods:{
commitComments(){
if(this.sumshop.chatContent == ''){
return
}
NET.request(API.keSever, this.sumshop, 'POST').then(res => {
if(res.code=='200'){
this.sumshop.chatContent = ''
this.getMsg(1)
}
})
},
getMsg(val){
NET.requestGet(API.keSeverList, this.sumshop.shopId, 'GET').then(res => {
this.commentsList = res.data
if(val == 1){
this.scollBottom()
}
})
},
scollBottom(){
var oWords = document.getElementById('words')
setTimeout(() => {
this.$nextTick(() => {
oWords.scrollTop = oWords.scrollHeight+87.5
})
}, 100)
}
|
|
3f535f30
杨鑫
'初始'
|
130
131
132
133
134
135
136
137
138
|
}
}
</script>
<style lang="scss" scoped>
.uni-padding-wrap{
height: calc(100vh - 100px);
position: relative;
}
|
|
9d9c6f7d
杨鑫
最新
|
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
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
|
.ziji {
width: 100%;
/* 假设消息框占据了屏幕宽度的80% */
padding: 16px;
/* 消息框内的内边距 */
background-color: #3F9B6A;
/* 蓝色背景 */
color: white;
/* 白色文字 */
position: relative;
/* 为了定位右上角的表情符号 */
font-size: 16px;
/* 字体大小 */
text-align: left;
/* 文字左对齐 */
/* 移除圆角 */
border-radius: 0;
/* 只给右上角添加圆角（如果需要的话，这里设置为0表示不添加） */
border-top-right-radius: 40px;
/* 可以根据需要调整或删除此行 */
border-bottom-right-radius: 0px;
/* 同上 */
/* 只保留左下角的直角（实际上不需要特别设置，因为默认就是直角） */
/* 但为了明确，我们可以设置其他三个角为0（如果之前设置了圆角的话） */
border-top-left-radius: 22px;
border-bottom-left-radius: 22px;
/* 左下角保持直角，这其实是默认值 */
}
.kehu {
width: 100%;
/* 假设消息框占据了屏幕宽度的80% */
padding: 16px;
/* 消息框内的内边距 */
background-color: #F7F5F6;
/* 蓝色背景 */
color: #000;
/* 白色文字 */
position: relative;
/* 为了定位右上角的表情符号 */
font-size: 16px;
/* 字体大小 */
text-align: left;
/* 文字左对齐 */
/* 移除圆角 */
border-radius: 0;
/* 只给右上角添加圆角（如果需要的话，这里设置为0表示不添加） */
border-top-right-radius: 22px;
/* 可以根据需要调整或删除此行 */
border-bottom-right-radius: 22px;
/* 同上 */
/* 只保留左下角的直角（实际上不需要特别设置，因为默认就是直角） */
/* 但为了明确，我们可以设置其他三个角为0（如果之前设置了圆角的话） */
border-top-left-radius: 40px;
border-bottom-left-radius: 0;
/* 左下角保持直角，这其实是默认值 */
}
|
|
3f535f30
杨鑫
'初始'
|
196
197
198
199
200
201
202
203
204
|
view {
font-size: 28upx;
}
.uni-comment {
padding: 30upx;
display: flex;
flex-grow: 1;
flex-direction: column;
|
|
9d9c6f7d
杨鑫
最新
|
205
206
207
208
|
scrollbar-width: none;
overflow: hidden;
height: 95vh;
overflow-y: auto;
|
|
3f535f30
杨鑫
'初始'
|
209
210
211
212
213
214
215
216
217
218
|
}
.uni-comment-list {
flex-wrap: nowrap;
padding: 10rpx 0;
margin: 10rpx 0;
width: 100%;
display: flex;
}
|
|
9d9c6f7d
杨鑫
最新
|
219
220
221
222
223
224
225
226
|
.uni-comment-listTWO{
flex-wrap: nowrap;
padding: 10rpx 0;
margin: 10rpx 0;
width: 100%;
display: flex;
justify-content: flex-end;
}
|
|
3f535f30
杨鑫
'初始'
|
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
|
.uni-comment-face {
width: 70upx;
height: 70upx;
border-radius: 100%;
margin-right: 20upx;
flex-shrink: 0;
overflow: hidden;
}
.uni-comment-face image {
width: 100%;
border-radius: 100%;
}
.uni-comment-body {
margin-top: 10rpx;
|
|
cff964f8
杨鑫
最新1
|
243
|
width: 100%;
|
|
3f535f30
杨鑫
'初始'
|
244
245
246
|
}
.uni-comment-top {
|
|
9d9c6f7d
杨鑫
最新
|
247
248
|
// display: flex;
// justify-content: flex-start;
|
|
3f535f30
杨鑫
'初始'
|
249
250
251
252
253
|
line-height: 1.5em;
}
.uni-comment-top text {
|
|
ad7d1a78
杨鑫
'最新'
|
254
|
color: #3F9B6A;
|
|
3f535f30
杨鑫
'初始'
|
255
256
257
258
259
|
margin-right: 20rpx;
font-size: 24upx;
}
.uni-comment-top{
|
|
cff964f8
杨鑫
最新1
|
260
|
|
|
3f535f30
杨鑫
'初始'
|
261
|
}
|
|
cff964f8
杨鑫
最新1
|
262
263
264
265
|
.uni-comment-date {
color: #666666;
font-size: 24upx;
}
|
|
3f535f30
杨鑫
'初始'
|
266
267
268
|
.uni-comment-content {
line-height: 1.6em;
font-size: 28upx;
|
|
cff964f8
杨鑫
最新1
|
269
270
271
272
273
274
275
276
277
278
279
|
padding: 8rpx 10px;
margin:8rpx 0;
/* 移除固定高度和宽度 */
height: auto;
width: auto;
/* 使用 inline-block 或 flex 让盒子根据内容自动调整大小 */
display: inline-block;
max-width: 70%; /* 大致限制宽度为父元素的 70% */
word-wrap: break-word; /* 允许长单词换行 */
overflow-wrap: break-word; /* 同 word-wrap，更标准的写法 */
display: inline-block; /* 让盒子根据内容自适应宽度 */
|
|
3f535f30
杨鑫
'初始'
|
280
281
282
283
284
285
286
287
288
289
290
291
292
|
}
.uni-comment-replay-btn {
background: #FFF;
font-size: 24upx;
line-height: 28upx;
padding: 5rpx 20upx;
border-radius: 30upx;
color: #333 !important;
margin: 0 10upx;
}
.commitButton{
height: 64rpx;
|
|
ad7d1a78
杨鑫
'最新'
|
293
|
color: #fff;
|
|
3f535f30
杨鑫
'初始'
|
294
295
296
|
width: 20%;
margin: 0rpx auto;
font-size: 27rpx;
|
|
ad7d1a78
杨鑫
'最新'
|
297
298
299
|
border-radius: 10px;
line-height: 64rpx;
background-color: #3F9B6A;
|
|
3f535f30
杨鑫
'初始'
|
300
301
|
}
.contentTextArea{
|
|
ad7d1a78
杨鑫
'最新'
|
302
|
|
|
3f535f30
杨鑫
'初始'
|
303
304
305
306
|
font-size: 30rpx;
background-color: #fff;
border:1rpx solid #e9e7ef;
border-right: 0px solid transparent;
|
|
ad7d1a78
杨鑫
'最新'
|
307
|
width: 72%;
|
|
3f535f30
杨鑫
'初始'
|
308
309
310
|
height: 40rpx;
margin: 0rpx auto;
padding: 10rpx 0 10rpx 20rpx;
|
|
ad7d1a78
杨鑫
'最新'
|
311
|
border-radius: 10px;
|
|
3f535f30
杨鑫
'初始'
|
312
313
|
}
</style>
|
