Skip to content

Commit 8e5a4d0

Browse files
YunaiVgitee-org
YunaiV
authored and
gitee-org
committed
!598 商城客服优化
Merge pull request !598 from puhui999/dev
2 parents 7895d18 + 101c704 commit 8e5a4d0

File tree

8 files changed

+130
-40
lines changed

8 files changed

+130
-40
lines changed

‎src/views/mall/promotion/kefu/components/KeFuConversationList.vue

Lines changed: 12 additions & 14 deletions
Original file line numberDiff line numberDiff line change
@@ -1,13 +1,13 @@
11
<template>
2-
<el-aside class="kefu p-5px h-100%" width="260px">
2+
<el-aside class="kefu pt-5px h-100%" width="260px">
33
<div class="color-[#999] font-bold my-10px">
44
会话记录({{ kefuStore.getConversationList.length }})
55
</div>
66
<div
77
v-for="item in kefuStore.getConversationList"
88
:key="item.id"
99
:class="{ active: item.id === activeConversationId, pinned: item.adminPinned }"
10-
class="kefu-conversation flex items-center"
10+
class="kefu-conversation px-10px flex items-center"
1111
@click="openRightMessage(item)"
1212
@contextmenu.prevent="rightClick($event as PointerEvent, item)"
1313
>
@@ -200,7 +200,7 @@ onBeforeUnmount(() => {
200200

201201
<style lang="scss" scoped>
202202
.kefu {
203-
background-color: #fff;
203+
background-color: #e5e4e4;
204204
205205
&-conversation {
206206
height: 60px;
@@ -210,26 +210,24 @@ onBeforeUnmount(() => {
210210
.username {
211211
min-width: 0;
212212
max-width: 60%;
213+
}
214+
215+
.last-message {
216+
font-size: 13px;
217+
}
218+
219+
.last-message,
220+
.username {
213221
overflow: hidden;
214222
text-overflow: ellipsis;
215223
display: -webkit-box;
216224
-webkit-box-orient: vertical;
217225
-webkit-line-clamp: 1;
218226
}
219-
220-
.last-message {
221-
font-size: 13px;
222-
width: 200px;
223-
overflow: hidden; // 隐藏超出的文本
224-
white-space: nowrap; // 禁止换行
225-
text-overflow: ellipsis; // 添加省略号
226-
}
227227
}
228228
229-
.active,
230-
.pinned {
229+
.active {
231230
background-color: rgba(128, 128, 128, 0.5); // 透明色，暗黑模式下也能体现
232-
border-radius: 8px;
233231
}
234232
235233
.right-menu-ul {

‎src/views/mall/promotion/kefu/components/KeFuMessageList.vue

Lines changed: 48 additions & 15 deletions
Original file line numberDiff line numberDiff line change
@@ -46,14 +46,13 @@
4646
:class="{
4747
'kefu-message': KeFuMessageContentTypeEnum.TEXT === item.contentType
4848
}"
49-
class="p-10px"
5049
>
5150
<!-- 文本消息 -->
5251
<MessageItem :message="item">
5352
<template v-if="KeFuMessageContentTypeEnum.TEXT === item.contentType">
5453
<div
5554
v-dompurify-html="replaceEmoji(getMessageContent(item).text || item.content)"
56-
class="flex items-center"
55+
class="flex items-center h-1/1"
5756
></div>
5857
</template>
5958
</MessageItem>
@@ -64,7 +63,7 @@
6463
:initial-index="0"
6564
:preview-src-list="[getMessageContent(item).picUrl || item.content]"
6665
:src="getMessageContent(item).picUrl || item.content"
67-
class="w-200px"
66+
class="w-200px mx-10px"
6867
fit="contain"
6968
preview-teleported
7069
/>
@@ -79,15 +78,15 @@
7978
:spuId="getMessageContent(item).spuId"
8079
:stock="getMessageContent(item).stock"
8180
:title="getMessageContent(item).spuName"
82-
class="max-w-300px"
81+
class="max-w-300px mx-10px"
8382
/>
8483
</MessageItem>
8584
<!-- 订单消息 -->
8685
<MessageItem :message="item">
8786
<OrderItem
8887
v-if="KeFuMessageContentTypeEnum.ORDER === item.contentType"
8988
:message="item"
90-
class="max-w-100%"
89+
class="max-w-100% mx-10px"
9190
/>
9291
</MessageItem>
9392
</div>
@@ -373,17 +372,39 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
373372

374373
<style lang="scss" scoped>
375374
.kefu {
376-
background-color: #fff;
375+
background-color: #f5f5f5;
376+
position: relative;
377377
width: calc(100% - 300px - 260px);
378-
border-left: var(--el-border-color) solid 1px;
378+
379+
&::after {
380+
content: '';
381+
position: absolute;
382+
top: 0;
383+
left: 0;
384+
width: 1px; /* 实际宽度 */
385+
height: 100%;
386+
background-color: var(--el-border-color);
387+
transform: scaleX(0.3); /* 缩小宽度 */
388+
}
379389
380390
.kefu-header {
381-
background: #fbfbfb;
382-
box-shadow: 0 0 0 0 #dcdfe6;
391+
background-color: #f5f5f5;
392+
position: relative;
383393
display: flex;
384394
align-items: center;
385395
justify-content: space-between;
386396
397+
&::before {
398+
content: '';
399+
position: absolute;
400+
bottom: 0;
401+
left: 0;
402+
width: 100%;
403+
height: 1px; /* 初始宽度 */
404+
background-color: var(--el-border-color);
405+
transform: scaleY(0.3); /* 缩小视觉高度 */
406+
}
407+
387408
&-title {
388409
font-size: 18px;
389410
font-weight: bold;
@@ -412,7 +433,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
412433
justify-content: flex-start;
413434
414435
.kefu-message {
415-
background-color: rgb(245, 245, 245);
436+
background-color: #fff;
416437
margin-left: 10px;
417438
margin-top: 3px;
418439
border-top-right-radius: 10px;
@@ -441,9 +462,9 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
441462
padding: 5px 10px;
442463
width: auto;
443464
max-width: 50%;
444-
text-align: left;
445-
display: inline-block !important;
446-
word-break: break-all;
465+
//text-align: left;
466+
//display: inline-block !important;
467+
//word-break: break-all;
447468
transition: all 0.2s;
448469
449470
&:hover {
@@ -457,18 +478,29 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
457478
background-color: rgba(0, 0, 0, 0.1);
458479
border-radius: 8px;
459480
padding: 0 5px;
460-
color: #999;
481+
color: #fff;
461482
font-size: 10px;
462483
}
463484
}
464485
465486
.kefu-footer {
487+
position: relative;
466488
display: flex;
467489
flex-direction: column;
468490
height: auto;
469491
margin: 0;
470492
padding: 0;
471-
border-top: var(--el-border-color) solid 1px;
493+
494+
&::before {
495+
content: '';
496+
position: absolute;
497+
top: 0;
498+
left: 0;
499+
width: 100%;
500+
height: 1px; /* 初始宽度 */
501+
background-color: var(--el-border-color);
502+
transform: scaleY(0.3); /* 缩小视觉高度 */
503+
}
472504
473505
.chat-tools {
474506
width: 100%;
@@ -478,6 +510,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
478510
479511
::v-deep(textarea) {
480512
resize: none;
513+
background-color: #f5f5f5;
481514
}
482515
483516
:deep(.el-input__wrapper) {

‎src/views/mall/promotion/kefu/components/member/MemberInfo.vue

Lines changed: 26 additions & 4 deletions
Original file line numberDiff line numberDiff line change
@@ -165,17 +165,39 @@ const getUserData = async () => {
165165

166166
<style lang="scss" scoped>
167167
.kefu {
168+
position: relative;
168169
width: 300px !important;
169-
background-color: #fff;
170-
border-left: var(--el-border-color) solid 1px;
170+
background-color: #f5f5f5;
171+
172+
&::after {
173+
content: '';
174+
position: absolute;
175+
top: 0;
176+
left: 0;
177+
width: 1px; /* 实际宽度 */
178+
height: 100%;
179+
background-color: var(--el-border-color);
180+
transform: scaleX(0.3); /* 缩小宽度 */
181+
}
171182
172183
&-header {
173-
background: #fbfbfb;
174-
box-shadow: 0 0 0 0 #dcdfe6;
184+
background-color: #f5f5f5;
185+
position: relative;
175186
display: flex;
176187
align-items: center;
177188
justify-content: space-around;
178189
190+
&::before {
191+
content: '';
192+
position: absolute;
193+
bottom: 0;
194+
left: 0;
195+
width: 100%;
196+
height: 1px; /* 初始宽度 */
197+
background-color: var(--el-border-color);
198+
transform: scaleY(0.3); /* 缩小视觉高度 */
199+
}
200+
179201
&-title {
180202
font-size: 18px;
181203
font-weight: bold;

‎src/views/mall/promotion/kefu/components/message/OrderItem.vue

Lines changed: 1 addition & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -112,7 +112,7 @@ function formatOrderStatus(order: any) {
112112
border-radius: 10px;
113113
padding: 10px;
114114
border: 1px var(--el-border-color) solid;
115-
background-color: rgba(128, 128, 128, 0.5); // 透明色，暗黑模式下也能体现
115+
background-color: #fff; // 透明色，暗黑模式下也能体现
116116
117117
.order-card-header {
118118
height: 28px;
@@ -136,7 +136,6 @@ function formatOrderStatus(order: any) {
136136
137137
.pay-box {
138138
padding-top: 10px;
139-
color: #fff;
140139
font-weight: bold;
141140
142141
.discounts-title {

‎src/views/mall/promotion/kefu/components/message/ProductItem.vue

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -77,7 +77,7 @@ const openDetail = (spuId: number) => {
7777
7878
.product-warp {
7979
width: 100%;
80-
background-color: rgba(128, 128, 128, 0.5); // 透明色，暗黑模式下也能体现
80+
background-color: #fff;
8181
border-radius: 8px;
8282
display: flex;
8383
align-items: center;

‎src/views/mall/promotion/kefu/components/tools/emoji.ts

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -93,7 +93,7 @@ export const useEmoji = () => {
9393
const emojiFile = getEmojiFileByName(item)
9494
newData = newData.replace(
9595
item,
96-
`<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;" src="${emojiFile}" alt=""/>`
96+
`<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;vertical-align: middle;" src="${emojiFile}" alt=""/>`
9797
)
9898
})
9999
}

‎src/views/member/user/detail/UserAccountInfo.vue

Lines changed: 20 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,5 +1,5 @@
11
<template>
2-
<el-descriptions :column="column">
2+
<el-descriptions :class="{ 'kefu-descriptions': column === 1 }" :column="column">
33
<el-descriptions-item>
44
<template #label>
55
<descriptions-item-label icon="svg-icon:member_level" label=" 等级 " />
@@ -62,4 +62,23 @@ withDefaults(defineProps<{ user: UserApi.UserVO; wallet: WalletApi.WalletVO; col
6262
.cell-item::after {
6363
content: ':';
6464
}
65+
66+
.kefu-descriptions {
67+
::v-deep(.el-descriptions__cell) {
68+
display: flex;
69+
align-items: center;
70+
justify-content: space-between;
71+
72+
.el-descriptions__label {
73+
width: 120px;
74+
display: block;
75+
text-align: left;
76+
}
77+
78+
.el-descriptions__content {
79+
flex: 1;
80+
text-align: end;
81+
}
82+
}
83+
}
6584
</style>

‎src/views/member/user/detail/UserBasicInfo.vue

Lines changed: 21 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -68,7 +68,7 @@
6868
</el-row>
6969
<template v-if="mode === 'kefu'">
7070
<ElAvatar :size="140" :src="user.avatar || undefined" shape="square" />
71-
<el-descriptions :column="1">
71+
<el-descriptions :column="1" class="kefu-descriptions">
7272
<el-descriptions-item>
7373
<template #label>
7474
<descriptions-item-label icon="ep:user" label="用户名" />
@@ -81,7 +81,7 @@
8181
</template>
8282
{{ user.nickname }}
8383
</el-descriptions-item>
84-
<el-descriptions-item label="手机号">
84+
<el-descriptions-item>
8585
<template #label>
8686
<descriptions-item-label icon="ep:phone" label="手机号" />
8787
</template>
@@ -143,4 +143,23 @@ withDefaults(defineProps<{ user: UserApi.UserVO; mode?: string }>(), {
143143
justify-content: space-between;
144144
align-items: center;
145145
}
146+
147+
::v-deep(.kefu-descriptions) {
148+
.el-descriptions__cell {
149+
display: flex;
150+
align-items: center;
151+
justify-content: space-between;
152+
153+
.el-descriptions__label {
154+
width: 120px;
155+
display: block;
156+
text-align: left;
157+
}
158+
159+
.el-descriptions__content {
160+
flex: 1;
161+
text-align: end;
162+
}
163+
}
164+
}
146165
</style>

0 commit comments

Comments
 (0)