Skip to content

phsl / admin

Go to a project
Commit 8e5a4d09 by 芋道源码 Committed by Gitee
Options

!598 商城客服优化 

Merge pull request !598 from puhui999/dev
parents 7895d184 101c704a
Showing with 130 additions and 40 deletions
src/views/mall/promotion/kefu/components/KeFuConversationList.vue
<template> <template>
<el-aside class="kefu p-5px h-100%" width="260px"> <el-aside class="kefu pt-5px h-100%" width="260px">
<div class="color-[#999] font-bold my-10px"> <div class="color-[#999] font-bold my-10px">
会话记录({{ kefuStore.getConversationList.length }}) 会话记录({{ kefuStore.getConversationList.length }})
</div> </div>
...@@ -7,7 +7,7 @@ ...@@ -7,7 +7,7 @@
v-for="item in kefuStore.getConversationList" v-for="item in kefuStore.getConversationList"
:key="item.id" :key="item.id"
:class="{ active: item.id === activeConversationId, pinned: item.adminPinned }" :class="{ active: item.id === activeConversationId, pinned: item.adminPinned }"
class="kefu-conversation flex items-center" class="kefu-conversation px-10px flex items-center"
@click="openRightMessage(item)" @click="openRightMessage(item)"
@contextmenu.prevent="rightClick($event as PointerEvent, item)" @contextmenu.prevent="rightClick($event as PointerEvent, item)"
> >
...@@ -200,7 +200,7 @@ onBeforeUnmount(() => { ...@@ -200,7 +200,7 @@ onBeforeUnmount(() => {
<style lang="scss" scoped> <style lang="scss" scoped>
.kefu { .kefu {
background-color: #fff; background-color: #e5e4e4;
&-conversation { &-conversation {
height: 60px; height: 60px;
...@@ -210,26 +210,24 @@ onBeforeUnmount(() => { ...@@ -210,26 +210,24 @@ onBeforeUnmount(() => {
.username { .username {
min-width: 0; min-width: 0;
max-width: 60%; max-width: 60%;
}
.last-message {
font-size: 13px;
}
.last-message,
.username {
overflow: hidden; overflow: hidden;
text-overflow: ellipsis; text-overflow: ellipsis;
display: -webkit-box; display: -webkit-box;
-webkit-box-orient: vertical; -webkit-box-orient: vertical;
-webkit-line-clamp: 1; -webkit-line-clamp: 1;
} }
.last-message {
font-size: 13px;
width: 200px;
overflow: hidden; // 隐藏超出的文本
white-space: nowrap; // 禁止换行
text-overflow: ellipsis; // 添加省略号
}
} }
.active, .active {
.pinned {
background-color: rgba(128, 128, 128, 0.5); // 透明色，暗黑模式下也能体现 background-color: rgba(128, 128, 128, 0.5); // 透明色，暗黑模式下也能体现
border-radius: 8px;
} }
.right-menu-ul { .right-menu-ul {
......
src/views/mall/promotion/kefu/components/KeFuMessageList.vue
...@@ -46,14 +46,13 @@ ...@@ -46,14 +46,13 @@
:class="{ :class="{
'kefu-message': KeFuMessageContentTypeEnum.TEXT === item.contentType 'kefu-message': KeFuMessageContentTypeEnum.TEXT === item.contentType
}" }"
class="p-10px"
> >
<!-- 文本消息 --> <!-- 文本消息 -->
<MessageItem :message="item"> <MessageItem :message="item">
<template v-if="KeFuMessageContentTypeEnum.TEXT === item.contentType"> <template v-if="KeFuMessageContentTypeEnum.TEXT === item.contentType">
<div <div
v-dompurify-html="replaceEmoji(getMessageContent(item).text || item.content)" v-dompurify-html="replaceEmoji(getMessageContent(item).text || item.content)"
class="flex items-center" class="flex items-center h-1/1"
></div> ></div>
</template> </template>
</MessageItem> </MessageItem>
...@@ -64,7 +63,7 @@ ...@@ -64,7 +63,7 @@
:initial-index="0" :initial-index="0"
:preview-src-list="[getMessageContent(item).picUrl || item.content]" :preview-src-list="[getMessageContent(item).picUrl || item.content]"
:src="getMessageContent(item).picUrl || item.content" :src="getMessageContent(item).picUrl || item.content"
class="w-200px" class="w-200px mx-10px"
fit="contain" fit="contain"
preview-teleported preview-teleported
/> />
...@@ -79,7 +78,7 @@ ...@@ -79,7 +78,7 @@
:spuId="getMessageContent(item).spuId" :spuId="getMessageContent(item).spuId"
:stock="getMessageContent(item).stock" :stock="getMessageContent(item).stock"
:title="getMessageContent(item).spuName" :title="getMessageContent(item).spuName"
class="max-w-300px" class="max-w-300px mx-10px"
/> />
</MessageItem> </MessageItem>
<!-- 订单消息 --> <!-- 订单消息 -->
...@@ -87,7 +86,7 @@ ...@@ -87,7 +86,7 @@
<OrderItem <OrderItem
v-if="KeFuMessageContentTypeEnum.ORDER === item.contentType" v-if="KeFuMessageContentTypeEnum.ORDER === item.contentType"
:message="item" :message="item"
class="max-w-100%" class="max-w-100% mx-10px"
/> />
</MessageItem> </MessageItem>
</div> </div>
...@@ -373,17 +372,39 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => { ...@@ -373,17 +372,39 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
<style lang="scss" scoped> <style lang="scss" scoped>
.kefu { .kefu {
background-color: #fff; background-color: #f5f5f5;
position: relative;
width: calc(100% - 300px - 260px); width: calc(100% - 300px - 260px);
border-left: var(--el-border-color) solid 1px;
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 1px; /* 实际宽度 */
height: 100%;
background-color: var(--el-border-color);
transform: scaleX(0.3); /* 缩小宽度 */
}
.kefu-header { .kefu-header {
background: #fbfbfb; background-color: #f5f5f5;
box-shadow: 0 0 0 0 #dcdfe6; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
&::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px; /* 初始宽度 */
background-color: var(--el-border-color);
transform: scaleY(0.3); /* 缩小视觉高度 */
}
&-title { &-title {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
...@@ -412,7 +433,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => { ...@@ -412,7 +433,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
justify-content: flex-start; justify-content: flex-start;
.kefu-message { .kefu-message {
background-color: rgb(245, 245, 245); background-color: #fff;
margin-left: 10px; margin-left: 10px;
margin-top: 3px; margin-top: 3px;
border-top-right-radius: 10px; border-top-right-radius: 10px;
...@@ -441,9 +462,9 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => { ...@@ -441,9 +462,9 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
padding: 5px 10px; padding: 5px 10px;
width: auto; width: auto;
max-width: 50%; max-width: 50%;
text-align: left; //text-align: left;
display: inline-block !important; //display: inline-block !important;
word-break: break-all; //word-break: break-all;
transition: all 0.2s; transition: all 0.2s;
&:hover { &:hover {
...@@ -457,18 +478,29 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => { ...@@ -457,18 +478,29 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
background-color: rgba(0, 0, 0, 0.1); background-color: rgba(0, 0, 0, 0.1);
border-radius: 8px; border-radius: 8px;
padding: 0 5px; padding: 0 5px;
color: #999; color: #fff;
font-size: 10px; font-size: 10px;
} }
} }
.kefu-footer { .kefu-footer {
position: relative;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
height: auto; height: auto;
margin: 0; margin: 0;
padding: 0; padding: 0;
border-top: var(--el-border-color) solid 1px;
&::before {
content: '';
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 1px; /* 初始宽度 */
background-color: var(--el-border-color);
transform: scaleY(0.3); /* 缩小视觉高度 */
}
.chat-tools { .chat-tools {
width: 100%; width: 100%;
...@@ -478,6 +510,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => { ...@@ -478,6 +510,7 @@ const showTime = computed(() => (item: KeFuMessageRespVO, index: number) => {
::v-deep(textarea) { ::v-deep(textarea) {
resize: none; resize: none;
background-color: #f5f5f5;
} }
:deep(.el-input__wrapper) { :deep(.el-input__wrapper) {
......
src/views/mall/promotion/kefu/components/member/MemberInfo.vue
...@@ -165,17 +165,39 @@ const getUserData = async () => { ...@@ -165,17 +165,39 @@ const getUserData = async () => {
<style lang="scss" scoped> <style lang="scss" scoped>
.kefu { .kefu {
position: relative;
width: 300px !important; width: 300px !important;
background-color: #fff; background-color: #f5f5f5;
border-left: var(--el-border-color) solid 1px;
&::after {
content: '';
position: absolute;
top: 0;
left: 0;
width: 1px; /* 实际宽度 */
height: 100%;
background-color: var(--el-border-color);
transform: scaleX(0.3); /* 缩小宽度 */
}
&-header { &-header {
background: #fbfbfb; background-color: #f5f5f5;
box-shadow: 0 0 0 0 #dcdfe6; position: relative;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: space-around; justify-content: space-around;
&::before {
content: '';
position: absolute;
bottom: 0;
left: 0;
width: 100%;
height: 1px; /* 初始宽度 */
background-color: var(--el-border-color);
transform: scaleY(0.3); /* 缩小视觉高度 */
}
&-title { &-title {
font-size: 18px; font-size: 18px;
font-weight: bold; font-weight: bold;
......
src/views/mall/promotion/kefu/components/message/OrderItem.vue
...@@ -112,7 +112,7 @@ function formatOrderStatus(order: any) { ...@@ -112,7 +112,7 @@ function formatOrderStatus(order: any) {
border-radius: 10px; border-radius: 10px;
padding: 10px; padding: 10px;
border: 1px var(--el-border-color) solid; border: 1px var(--el-border-color) solid;
background-color: rgba(128, 128, 128, 0.5); // 透明色，暗黑模式下也能体现 background-color: #fff; // 透明色，暗黑模式下也能体现
.order-card-header { .order-card-header {
height: 28px; height: 28px;
...@@ -136,7 +136,6 @@ function formatOrderStatus(order: any) { ...@@ -136,7 +136,6 @@ function formatOrderStatus(order: any) {
.pay-box { .pay-box {
padding-top: 10px; padding-top: 10px;
color: #fff;
font-weight: bold; font-weight: bold;
.discounts-title { .discounts-title {
......
src/views/mall/promotion/kefu/components/message/ProductItem.vue
...@@ -77,7 +77,7 @@ const openDetail = (spuId: number) => { ...@@ -77,7 +77,7 @@ const openDetail = (spuId: number) => {
.product-warp { .product-warp {
width: 100%; width: 100%;
background-color: rgba(128, 128, 128, 0.5); // 透明色，暗黑模式下也能体现 background-color: #fff;
border-radius: 8px; border-radius: 8px;
display: flex; display: flex;
align-items: center; align-items: center;
......
src/views/mall/promotion/kefu/components/tools/emoji.ts
...@@ -93,7 +93,7 @@ export const useEmoji = () => { ...@@ -93,7 +93,7 @@ export const useEmoji = () => {
const emojiFile = getEmojiFileByName(item) const emojiFile = getEmojiFileByName(item)
newData = newData.replace( newData = newData.replace(
item, item,
`<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;" src="${emojiFile}" alt=""/>` `<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;vertical-align: middle;" src="${emojiFile}" alt=""/>`
) )
}) })
} }
......
src/views/member/user/detail/UserAccountInfo.vue
<template> <template>
<el-descriptions :column="column"> <el-descriptions :class="{ 'kefu-descriptions': column === 1 }" :column="column">
<el-descriptions-item> <el-descriptions-item>
<template #label> <template #label>
<descriptions-item-label icon="svg-icon:member_level" label=" 等级 " /> <descriptions-item-label icon="svg-icon:member_level" label=" 等级 " />
...@@ -62,4 +62,23 @@ withDefaults(defineProps<{ user: UserApi.UserVO; wallet: WalletApi.WalletVO; col ...@@ -62,4 +62,23 @@ withDefaults(defineProps<{ user: UserApi.UserVO; wallet: WalletApi.WalletVO; col
.cell-item::after { .cell-item::after {
content: ':'; content: ':';
} }
.kefu-descriptions {
::v-deep(.el-descriptions__cell) {
display: flex;
align-items: center;
justify-content: space-between;
.el-descriptions__label {
width: 120px;
display: block;
text-align: left;
}
.el-descriptions__content {
flex: 1;
text-align: end;
}
}
}
</style> </style>
src/views/member/user/detail/UserBasicInfo.vue
...@@ -68,7 +68,7 @@ ...@@ -68,7 +68,7 @@
</el-row> </el-row>
<template v-if="mode === 'kefu'"> <template v-if="mode === 'kefu'">
<ElAvatar :size="140" :src="user.avatar || undefined" shape="square" /> <ElAvatar :size="140" :src="user.avatar || undefined" shape="square" />
<el-descriptions :column="1"> <el-descriptions :column="1" class="kefu-descriptions">
<el-descriptions-item> <el-descriptions-item>
<template #label> <template #label>
<descriptions-item-label icon="ep:user" label="用户名" /> <descriptions-item-label icon="ep:user" label="用户名" />
...@@ -81,7 +81,7 @@ ...@@ -81,7 +81,7 @@
</template> </template>
{{ user.nickname }} {{ user.nickname }}
</el-descriptions-item> </el-descriptions-item>
<el-descriptions-item label="手机号"> <el-descriptions-item>
<template #label> <template #label>
<descriptions-item-label icon="ep:phone" label="手机号" /> <descriptions-item-label icon="ep:phone" label="手机号" />
</template> </template>
...@@ -143,4 +143,23 @@ withDefaults(defineProps<{ user: UserApi.UserVO; mode?: string }>(), { ...@@ -143,4 +143,23 @@ withDefaults(defineProps<{ user: UserApi.UserVO; mode?: string }>(), {
justify-content: space-between; justify-content: space-between;
align-items: center; align-items: center;
} }
::v-deep(.kefu-descriptions) {
.el-descriptions__cell {
display: flex;
align-items: center;
justify-content: space-between;
.el-descriptions__label {
width: 120px;
display: block;
text-align: left;
}
.el-descriptions__content {
flex: 1;
text-align: end;
}
}
}
</style> </style>
Markdown is supported
0% or
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!
Please register or sign in to comment