yudao
/
mall-uniapp
mirror of https://gitee.com/yudaocode/yudao-mall-uniapp.git
3
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

【功能完善】商城：客服消息样式调整

pull/125/head
puhui999 2024-11-18 16:54:55 +08:00
parent 92e89bae34
commit 18aa26dcae
2 changed files with 19 additions and 33 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

7
pages/chat/components/messageList.vue
View File

@ -83,9 +83,10 @@
refreshMessage.value = false; // 更新好后重置状态 refreshMessage.value = false; // 更新好后重置状态
return; return;
} }
if (data.slice(-1).length > 0) {
// 设置最后一次历史查询的最后一条消息的 createTime // 设置最后一次历史查询的最后一条消息的 createTime
queryParams.createTime = formatDate(data.at(-1).createTime); queryParams.createTime = formatDate(data.slice(-1)[0].createTime);
}
pagingRef.value.completeByNoMore(data, false); pagingRef.value.completeByNoMore(data, false);
}; };
/** 刷新消息列表 */ /** 刷新消息列表 */

45
pages/chat/components/messageListItem.vue
View File

@ -68,10 +68,12 @@
</view> </view>
</template> </template>
<template v-if="message.contentType === KeFuMessageContentTypeEnum.PRODUCT"> <template v-if="message.contentType === KeFuMessageContentTypeEnum.PRODUCT">
<div class="ss-m-b-10">
<GoodsItem <GoodsItem
:goodsData="getMessageContent(message)" :goodsData="getMessageContent(message)"
@tap="sheep.$router.go('/pages/goods/index', { id: getMessageContent(message).spuId })" @tap="sheep.$router.go('/pages/goods/index', { id: getMessageContent(message).spuId })"
/> />
</div>
</template> </template>
<template v-if="message.contentType === KeFuMessageContentTypeEnum.ORDER"> <template v-if="message.contentType === KeFuMessageContentTypeEnum.ORDER">
<OrderItem <OrderItem
@ -84,7 +86,7 @@
v-if="message.senderType === UserTypeEnum.MEMBER" v-if="message.senderType === UserTypeEnum.MEMBER"
class="chat-avatar ss-m-l-24" class="chat-avatar ss-m-l-24"
:src=" :src="
sheep.$url.cdn(message.senderAvatar) || sheep.$url.cdn(userInfo.avatar) ||
sheep.$url.static('/static/img/shop/chat/default.png') sheep.$url.static('/static/img/shop/chat/default.png')
" "
mode="aspectFill" mode="aspectFill"
@ -122,7 +124,9 @@
default: () => [], default: () => [],
}, },
}); });
const getMessageContent = computed(() => (item) => jsonParse(item.content)); // 解析消息内容 const getMessageContent = computed(() => (item) => jsonParse(item.content)); // 解析消息内容
const userInfo = computed(() => sheep.$store('user').userInfo);
//======================= 工具 ======================= //======================= 工具 =======================
@ -145,7 +149,7 @@
let emojiFile = selEmojiFile(item); let emojiFile = selEmojiFile(item);
newData = newData.replace( newData = newData.replace(
item, item,
`<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;" src="${sheep.$url.cdn( `<img class="chat-img" style="width: 24px;height: 24px;margin: 0 3px;vertical-align: middle;" src="${sheep.$url.cdn(
'/static/img/chat/emoji/' + emojiFile, '/static/img/chat/emoji/' + emojiFile,
)}"/>`, )}"/>`,
); );
@ -167,7 +171,7 @@
<style scoped lang="scss"> <style scoped lang="scss">
.message-item { .message-item {
margin-bottom: 33rpx; margin-bottom: 10rpx;
} }
.date-message, .date-message,
@ -231,18 +235,23 @@
.message-box { .message-box {
max-width: 50%; max-width: 50%;
font-size: 16px; font-size: 16px;
line-height: 20px;
white-space: normal; white-space: normal;
word-break: break-all; word-break: break-all;
word-wrap: break-word; word-wrap: break-word;
padding: 20rpx; padding: 20rpx;
border-radius: 10rpx;
color: #fff; color: #fff;
background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient)); background: linear-gradient(90deg, var(--ui-BG-Main), var(--ui-BG-Main-gradient));
margin-top: 18px;
margin-bottom: 9px;
border-top-left-radius: 10px;
border-bottom-right-radius: 10px;
border-bottom-left-radius: 10px;
&.admin { &.admin {
background: #fff; background: #fff;
color: #333; color: #333;
margin-top: 18px;
margin-bottom: 9px;
border-radius: 0 10px 10px 10px;
} }
:deep() { :deep() {
@ -270,30 +279,6 @@
border-radius: 6rpx; border-radius: 6rpx;
} }
.template-wrap {
// width: 100%;
padding: 20rpx 24rpx;
background: #fff;
border-radius: 10rpx;
.title {
font-size: 26rpx;
font-weight: 500;
color: #333;
margin-bottom: 29rpx;
}
.item {
font-size: 24rpx;
color: var(--ui-BG-Main);
margin-bottom: 16rpx;
&:last-of-type {
margin-bottom: 0;
}
}
}
.error-img { .error-img {
width: 400rpx; width: 400rpx;
height: 400rpx; height: 400rpx;