|
|
@@ -42,7 +42,6 @@
|
|
|
|
|
|
<script>
|
|
|
import * as ww from '@wecom/jssdk';
|
|
|
-import defaultStaffAvatar from '@/assets/images/user.png';
|
|
|
import { qwLogin, qwSignature, qwConversations, getQwSessionConfig } from '@/api/qw/companySession';
|
|
|
|
|
|
// ========== 全局配置缓存 ==========
|
|
|
@@ -70,7 +69,6 @@ export default {
|
|
|
props: {
|
|
|
corpId: { type: String, default: null },
|
|
|
customerId: { type: String, default: null },
|
|
|
- customerAvatar: { type: String, default: '' },
|
|
|
staffUserId: { type: String, default: null }
|
|
|
},
|
|
|
data() {
|
|
|
@@ -83,7 +81,6 @@ export default {
|
|
|
loadingMore: false,
|
|
|
chatInstance: null,
|
|
|
_sdkInited: false,
|
|
|
- defaultStaffAvatar: defaultStaffAvatar,
|
|
|
config: { corpid: '', agentid: '', domain: '' },
|
|
|
configReady: false,
|
|
|
configError: false,
|
|
|
@@ -137,11 +134,6 @@ export default {
|
|
|
}
|
|
|
}
|
|
|
},
|
|
|
- customerAvatar(newAvatar) {
|
|
|
- if (this.chatInstance && newAvatar) {
|
|
|
- this.chatInstance.setData({ customerAvatar: newAvatar });
|
|
|
- }
|
|
|
- },
|
|
|
isLoggedIn: {
|
|
|
handler(newVal) {
|
|
|
if (!newVal && this.configReady && !this.configError && this._sdkInited && !this._loginPanelCreated) {
|
|
|
@@ -398,7 +390,8 @@ export default {
|
|
|
});
|
|
|
const data = this._extractResponse(res);
|
|
|
if (data.errcode !== 0) throw new Error(data.errmsg || '拉取失败');
|
|
|
- this.msgList = data.data || [];
|
|
|
+ const rawList = data.data || [];
|
|
|
+ this.msgList = this.processMessages(rawList, false);
|
|
|
this.cursor = data.next_cursor || '';
|
|
|
this.hasMore = data.has_more === 1;
|
|
|
this.isReady = true;
|
|
|
@@ -427,7 +420,8 @@ export default {
|
|
|
if (data.errcode !== 0) throw new Error(data.errmsg || '拉取更多失败');
|
|
|
const newMessages = data.data || [];
|
|
|
if (newMessages.length) {
|
|
|
- this.msgList.push(...newMessages);
|
|
|
+ const processed = this.processMessages(newMessages, true);
|
|
|
+ this.msgList.push(...processed);
|
|
|
this.cursor = data.next_cursor || '';
|
|
|
this.hasMore = data.has_more === 1;
|
|
|
if (this.chatInstance) this.chatInstance.setData({ msgList: this.msgList });
|
|
|
@@ -442,6 +436,28 @@ export default {
|
|
|
}
|
|
|
},
|
|
|
|
|
|
+ processMessages(messages, isAppend = false) {
|
|
|
+ const prevLastMsg = isAppend && this.msgList.length > 0
|
|
|
+ ? this.msgList[this.msgList.length - 1]
|
|
|
+ : null
|
|
|
+ let prevDate = prevLastMsg ? (prevLastMsg.dateStr || '') : ''
|
|
|
+
|
|
|
+ return messages.map(msg => {
|
|
|
+ const timeStr = msg.send_time_str || ''
|
|
|
+ const parts = timeStr.split(' ')
|
|
|
+ const dateStr = parts[0] || ''
|
|
|
+ const displayTime = parts[1] ? parts[1].substring(0, 5) : ''
|
|
|
+ const showDate = !!dateStr && dateStr !== prevDate
|
|
|
+ prevDate = dateStr
|
|
|
+ return {
|
|
|
+ ...msg,
|
|
|
+ dateStr,
|
|
|
+ displayTime,
|
|
|
+ showDate
|
|
|
+ }
|
|
|
+ })
|
|
|
+ },
|
|
|
+
|
|
|
async renderOrUpdateChat() {
|
|
|
if (this.msgList.length === 0 || this.configError) return;
|
|
|
const container = document.getElementById('chat-container');
|
|
|
@@ -460,26 +476,96 @@ export default {
|
|
|
template: `
|
|
|
<scroll-view scroll-y="{{true}}" bindscrolltolower="onScrollToLower" style="height: 100%;">
|
|
|
<view wx:for="{{data.msgList}}" wx:for-item="msg" wx:key="msgid" style="margin-bottom: 15px;">
|
|
|
- <view style="text-align: center; margin-bottom: 8px;">
|
|
|
- <text style="background:#e9e9e9; color:#333; padding:4px 12px; border-radius:16px; font-size:12px;">
|
|
|
- {{ msg.send_time_str }}
|
|
|
- </text>
|
|
|
+ <!-- 日期分隔线:仅跨天时显示 -->
|
|
|
+ <view wx:if="{{msg.showDate}}" style="text-align: center; margin-bottom: 12px;">
|
|
|
+ <text style="background:#e9e9e9; color:#888; padding:3px 12px; border-radius:12px; font-size:11px;">{{ msg.dateStr }}</text>
|
|
|
+ </view>
|
|
|
+ <!-- 客户/机器人消息(左对齐) -->
|
|
|
+ <view wx:if="{{msg.sender.type == 2 || msg.sender.type == 3}}" style="display:flex; flex-direction:row; align-items:flex-start;">
|
|
|
+ <ww-open-data wx:if="{{msg.sender.type == 2}}" type="externalUserAvatar" openid="{{msg.sender.id}}" class="msg-avatar-left" />
|
|
|
+ <ww-open-data wx:if="{{msg.sender.type == 3}}" type="userAvatar" openid="{{msg.sender.id}}" class="msg-avatar-left" />
|
|
|
+ <view style="display:flex; flex-direction:column; max-width:70%; margin-left:10px;">
|
|
|
+ <view style="display:flex; align-items:center; margin-bottom:4px;">
|
|
|
+ <ww-open-data wx:if="{{msg.sender.type == 2}}" type="externalUserName" openid="{{msg.sender.id}}" class="sender-name" />
|
|
|
+ <ww-open-data wx:if="{{msg.sender.type == 3}}" type="userName" openid="{{msg.sender.id}}" class="sender-name" />
|
|
|
+ <text class="msg-time">{{ msg.displayTime }}</text>
|
|
|
+ </view>
|
|
|
+ <view class="msg-bubble msg-bubble-left">
|
|
|
+ <ww-open-message message-id="{{msg.msgid}}" secret-key="{{msg.secretKey}}" open-type="viewMessage"/>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <!-- 员工消息(右对齐) -->
|
|
|
+ <view wx:if="{{msg.sender.type == 1}}" style="display:flex; flex-direction:row; justify-content:flex-end; align-items:flex-start;">
|
|
|
+ <view style="display:flex; flex-direction:column; align-items:flex-end; max-width:70%; margin-right:10px;">
|
|
|
+ <view style="display:flex; align-items:center; margin-bottom:4px;">
|
|
|
+ <text class="msg-time msg-time-right">{{ msg.displayTime }}</text>
|
|
|
+ <ww-open-data type="userName" openid="{{msg.sender.id}}" class="sender-name" />
|
|
|
+ </view>
|
|
|
+ <view class="msg-bubble msg-bubble-right">
|
|
|
+ <ww-open-message message-id="{{msg.msgid}}" secret-key="{{msg.secretKey}}" open-type="viewMessage"/>
|
|
|
+ </view>
|
|
|
+ </view>
|
|
|
+ <ww-open-data type="userAvatar" openid="{{msg.sender.id}}" class="msg-avatar-right" />
|
|
|
</view>
|
|
|
- <view style="display:flex; flex-direction:row; {{msg.sender.type == 1 ? 'justify-content:flex-end;' : 'justify-content:flex-start;'}}">
|
|
|
- <image wx:if="{{msg.sender.type == 2}}" src="{{data.customerAvatar}}" style="width:36px;height:36px;border-radius:4px;margin-right:10px;background:#fff;"></image>
|
|
|
- <view style="max-width:70%;padding:10px 14px;border-radius:8px;word-break:break-all;background:{{msg.sender.type == 1 ? '#95ec69' : '#ffffff'}};box-shadow:0 1px 3px rgba(0,0,0,0.1);display:flex;align-items:center;">
|
|
|
+ <!-- 未知类型消息(居中,无头像) -->
|
|
|
+ <view wx:if="{{msg.sender.type != 1 && msg.sender.type != 2 && msg.sender.type != 3}}" style="display:flex; justify-content:center;">
|
|
|
+ <view class="msg-bubble msg-bubble-left">
|
|
|
<ww-open-message message-id="{{msg.msgid}}" secret-key="{{msg.secretKey}}" open-type="viewMessage"/>
|
|
|
</view>
|
|
|
- <image wx:if="{{msg.sender.type == 1}}" src="{{data.defaultStaffAvatar}}" style="width:36px;height:36px;border-radius:4px;margin-left:10px;background:#fff;"></image>
|
|
|
</view>
|
|
|
</view>
|
|
|
- <view wx:if="{{data.hasMore && data.loadingMore}}" style="text-align:center;padding:10px;color:#999;">加载更多...</view>
|
|
|
+ <view wx:if="{{data.hasMore && data.loadingMore}}" style="text-align:center; padding:10px; color:#999;">加载更多...</view>
|
|
|
</scroll-view>
|
|
|
`,
|
|
|
+ style: `
|
|
|
+ .msg-avatar-left {
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ border-radius: 4px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .msg-avatar-right {
|
|
|
+ width: 36px;
|
|
|
+ height: 36px;
|
|
|
+ border-radius: 4px;
|
|
|
+ flex-shrink: 0;
|
|
|
+ }
|
|
|
+ .sender-name {
|
|
|
+ font-size: 12px;
|
|
|
+ color: #666;
|
|
|
+ max-width: 120px;
|
|
|
+ overflow: hidden;
|
|
|
+ text-overflow: ellipsis;
|
|
|
+ white-space: nowrap;
|
|
|
+ }
|
|
|
+ .msg-time {
|
|
|
+ font-size: 11px;
|
|
|
+ color: #999;
|
|
|
+ margin-left: 8px;
|
|
|
+ }
|
|
|
+ .msg-time-right {
|
|
|
+ margin-left: 0;
|
|
|
+ margin-right: 8px;
|
|
|
+ }
|
|
|
+ .msg-bubble {
|
|
|
+ padding: 10px 14px;
|
|
|
+ border-radius: 8px;
|
|
|
+ word-break: break-all;
|
|
|
+ display: flex;
|
|
|
+ align-items: center;
|
|
|
+ }
|
|
|
+ .msg-bubble-left {
|
|
|
+ background: #ffffff;
|
|
|
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
|
+ }
|
|
|
+ .msg-bubble-right {
|
|
|
+ background: #95ec69;
|
|
|
+ box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
|
|
+ }
|
|
|
+ `,
|
|
|
data: {
|
|
|
msgList: this.msgList,
|
|
|
- customerAvatar: this.customerAvatar,
|
|
|
- defaultStaffAvatar: this.defaultStaffAvatar,
|
|
|
hasMore: this.hasMore,
|
|
|
loadingMore: this.loadingMore
|
|
|
},
|