Files
a_long/miniprogram/pages/kefuliaotian/kefuliaotian.js
2026-06-27 01:26:11 +08:00

526 lines
19 KiB
JavaScript

const app = getApp();
import { formatDate } from '../../static/lib/utils';
import { showConfirmByScene, matchAutoReply, getWelcomeText } from '../../utils/scriptService.js';
Page({
data: {
teamId: '',
teamName: '客服',
teamAvatar: '',
currentUser: null,
messages: [],
inputText: '',
showEmojiPanel: false,
showPlusPanel: false,
showOrderSender: false,
loadingHistory: false,
isRefreshing: false,
lastTimestamp: null,
hasMore: true,
scrollToView: '',
detailText: '',
showDetailModal: false,
lastTapTime: 0,
lastTapMsgId: '',
showOrderDetail: false,
detailOrder: null,
emojiList: ['😀','😁','😂','🤣','😃','😄','😅','😆','😉','😊','😋','😎','😍','😘','😗','😙','😚','🙂','🤗','🤩','🤔','🤨','😐','😑','😶','🙄','😏','😣','😥','😮','🤐','😯','😪','😫','😴','😌','😛','😜','😝','🤤','😒','😓','😔','😕','🙃','🤑','😲','☹','🙁','😖','😞','😟','😤','😢','😭','😦','😧','😨','😩','🤯','😬','😰','😱','🥵','🥶','😳','🤪','😵','😡','😠','🤬','😷','🤒','🤕','🤢','🤮','🤧','😇','🤠','🤡','🤥','🤫','🤭','🧐','🤓','😈','👿','👹','👺','💀','👻','👽','🤖','💩','😺','😸','😹','😻','😼','😽','🙀','😿','😾'],
pendingImage: '',
keyboardHeight: 0,
bottomSafeHeight: 10,
welcomeText: '你好,请问有什么可以帮到您的?'
},
onLoad(options) {
let teamId = '', teamName = '客服', teamAvatar = '';
if (options.data) {
try {
const p = JSON.parse(decodeURIComponent(options.data));
teamId = p.teamId || '';
teamName = p.teamName || '客服';
teamAvatar = p.teamAvatar || '';
} catch (e) {
console.error('解析客服页面参数失败', e);
}
}
// 默认头像使用全局配置
if (!teamAvatar) {
teamAvatar = app.globalData.ossImageUrl + app.globalData.morentouxiang;
}
this.setData({ teamId, teamName, teamAvatar });
wx.setNavigationBarTitle({ title: teamName });
this.initCurrentUser();
this.loadWelcomeScript();
},
async loadWelcomeScript() {
try {
const text = await getWelcomeText();
if (text) {
this.setData({ welcomeText: text });
const msgs = this.data.messages;
const idx = msgs.findIndex((m) => m.messageId === 'welcome-cs');
if (idx >= 0) {
const updated = [...msgs];
updated[idx] = { ...updated[idx], payload: { ...updated[idx].payload, text } };
this.setData({ messages: updated });
}
}
} catch (e) {
console.warn('loadWelcomeScript failed', e);
}
},
onShow() {
this.autoConnect();
},
onHide() {
this.clearAllListeners();
},
autoConnect() {
const role = app.globalData.currentRole || 'normal';
const uid = wx.getStorageSync('uid');
const prefixMap = { normal:'Boss', dashou:'Ds', shangjia:'Sj', guanshi:'Gs', zuzhang:'Zz' };
const prefix = prefixMap[role] || 'Boss';
const targetUserId = prefix + uid;
const status = wx.goEasy.getConnectionStatus ? wx.goEasy.getConnectionStatus() : 'disconnected';
if (status === 'connected' || status === 'reconnected') {
const currentUserId = wx.goEasy.im ? wx.goEasy.im.userId : null;
if (currentUserId === targetUserId) {
this.setupAllListeners();
this.loadHistory(true);
return;
} else {
wx.goEasy.disconnect();
}
}
this.connectGoEasy(targetUserId);
},
connectGoEasy(userId) {
const { currentUser } = this.data;
if (!currentUser) return;
wx.goEasy.connect({
id: userId,
data: {
name: currentUser.name,
avatar: currentUser.avatar
},
onSuccess: () => {
this.setupAllListeners();
this.loadHistory(true);
},
onFailed: (error) => {
if (error.code === 408) {
this.setupAllListeners();
this.loadHistory(true);
} else {
wx.showToast({ title: '连接失败,请重试', icon: 'none' });
}
}
});
},
setupAllListeners() {
this.clearAllListeners();
this.listenNewMsg();
this.listenRecall();
this.listenDelete();
this.listenRead();
},
clearAllListeners() {
if (this._msgHandler) { wx.goEasy.im.off(wx.GoEasy.IM_EVENT.CS_MESSAGE_RECEIVED, this._msgHandler); this._msgHandler = null; }
if (this._recallHandler) { wx.goEasy.im.off(wx.GoEasy.IM_EVENT.MESSAGE_RECALLED, this._recallHandler); this._recallHandler = null; }
if (this._deleteHandler) { wx.goEasy.im.off(wx.GoEasy.IM_EVENT.MESSAGE_DELETED, this._deleteHandler); this._deleteHandler = null; }
if (this._readHandler) { wx.goEasy.im.off(wx.GoEasy.IM_EVENT.MESSAGE_READ, this._readHandler); this._readHandler = null; }
},
initCurrentUser() {
const uid = wx.getStorageSync('uid');
const role = app.globalData.currentRole || 'normal';
const prefix = { normal:'Boss', dashou:'Ds', shangjia:'Sj', guanshi:'Gs', zuzhang:'Zz' }[role] || 'Boss';
const avatar = this.fixAvatar(wx.getStorageSync('touxiang'));
this.setData({
currentUser: {
id: prefix + uid,
name: app.globalData.currentUser?.name || `用户${uid}`,
avatar: avatar
}
});
},
fixAvatar(url) {
if (!url) return app.globalData.ossImageUrl + app.globalData.morentouxiang;
if (url.startsWith('http')) return url;
return app.globalData.ossImageUrl + url;
},
// ---------- 历史消息 + 永久欢迎语 ----------
loadHistory(refresh) {
if (!refresh && !this.data.hasMore) return Promise.resolve();
return new Promise((resolve) => {
this.setData({ loadingHistory: true });
const { teamId, lastTimestamp } = this.data;
const ts = refresh ? null : lastTimestamp;
wx.goEasy.im.history({
type: wx.GoEasy.IM_SCENE.CS,
id: teamId,
lastTimestamp: ts,
limit: 20,
onSuccess: (res) => {
let list = res.content || [];
list.sort((a, b) => a.timestamp - b.timestamp);
list.forEach((m, idx) => {
m.formattedTime = formatDate(m.timestamp);
if (idx === 0) m.showTime = true;
else m.showTime = (m.timestamp - list[idx-1].timestamp) / 60000 > 5;
if (m.senderId === this.data.currentUser.id) {
m.senderData = { name: this.data.currentUser.name, avatar: this.data.currentUser.avatar };
} else {
m.senderData = { name: this.data.teamName, avatar: this.data.teamAvatar };
}
});
let final = refresh ? list : [...list, ...this.data.messages];
if (!refresh) {
for (let i=0; i<final.length; i++) {
if (i===0) final[i].showTime = true;
else final[i].showTime = (final[i].timestamp - final[i-1].timestamp) / 60000 > 5;
}
}
const ids = new Set();
const unique = [];
for (const m of final) { if (!ids.has(m.messageId)) { ids.add(m.messageId); unique.push(m); } }
// 强制在第一行插入欢迎语(如果不存在)
const welcomeId = 'welcome-cs';
if (!unique.some(m => m.messageId === welcomeId)) {
const welcome = this.createWelcomeMessage();
welcome.messageId = welcomeId;
welcome.showTime = true;
unique.unshift(welcome);
}
const update = {
messages: unique,
hasMore: list.length >= 20,
lastTimestamp: unique.length ? unique[0].timestamp : lastTimestamp,
loadingHistory: false
};
if (refresh) update.scrollToView = 'msg-bottom';
this.setData(update);
resolve();
},
onFailed: () => { this.setData({ loadingHistory: false }); resolve(); }
});
});
},
createWelcomeMessage() {
return {
messageId: 'welcome-cs',
type: 'text',
timestamp: Date.now(),
senderId: 'system',
receiverId: this.data.currentUser?.id,
senderData: { name: '系统消息', avatar: '' },
payload: { text: this.data.welcomeText || '你好,请问有什么可以帮到您的?' },
status: 'success',
read: false,
formattedTime: formatDate(Date.now()),
showTime: true
};
},
// ---------- 接收新客服消息 ----------
listenNewMsg() {
if (this._msgHandler) wx.goEasy.im.off(wx.GoEasy.IM_EVENT.CS_MESSAGE_RECEIVED, this._msgHandler);
this._msgHandler = (msg) => {
if (msg.teamId !== this.data.teamId && msg.to !== this.data.teamId) return;
if (msg.senderId === this.data.currentUser.id) return;
msg.formattedTime = formatDate(msg.timestamp);
msg.senderData = { name: this.data.teamName, avatar: this.data.teamAvatar };
const msgs = this.data.messages;
const last = msgs.length ? msgs[msgs.length-1] : null;
msg.showTime = last ? (msg.timestamp - last.timestamp) / 60000 > 5 : true;
if (msgs.some(m => m.messageId === msg.messageId)) return;
this.setData({ messages: [...msgs, msg], scrollToView: 'msg-bottom' });
this.markCsMessageAsRead();
};
wx.goEasy.im.on(wx.GoEasy.IM_EVENT.CS_MESSAGE_RECEIVED, this._msgHandler);
},
markCsMessageAsRead() {
if (!this.data.teamId) return;
wx.goEasy.im.markMessageAsRead({
type: wx.GoEasy.IM_SCENE.CS,
id: this.data.teamId
});
},
// 已读回执监听
listenRead() {
if (this._readHandler) wx.goEasy.im.off(wx.GoEasy.IM_EVENT.MESSAGE_READ, this._readHandler);
this._readHandler = (msgs) => {
if (!msgs || !msgs.length) return;
const ids = new Set(msgs.map(m => m.messageId));
const newMsgs = this.data.messages.map(m => ids.has(m.messageId) ? { ...m, read: true } : m);
this.setData({ messages: newMsgs });
};
wx.goEasy.im.on(wx.GoEasy.IM_EVENT.MESSAGE_READ, this._readHandler);
},
// 撤回监听
listenRecall() {
if (this._recallHandler) wx.goEasy.im.off(wx.GoEasy.IM_EVENT.MESSAGE_RECALLED, this._recallHandler);
this._recallHandler = (msgs) => {
if (!msgs || !msgs.length) return;
const ids = new Set(msgs.map(m => m.messageId));
this.setData({ messages: this.data.messages.filter(m => !ids.has(m.messageId)) });
};
wx.goEasy.im.on(wx.GoEasy.IM_EVENT.MESSAGE_RECALLED, this._recallHandler);
},
// 删除监听
listenDelete() {
if (this._deleteHandler) wx.goEasy.im.off(wx.GoEasy.IM_EVENT.MESSAGE_DELETED, this._deleteHandler);
this._deleteHandler = (msgs) => {
if (!msgs || !msgs.length) return;
const ids = new Set(msgs.map(m => m.messageId));
this.setData({ messages: this.data.messages.filter(m => !ids.has(m.messageId)) });
};
wx.goEasy.im.on(wx.GoEasy.IM_EVENT.MESSAGE_DELETED, this._deleteHandler);
},
// ---------- 面板控制 ----------
togglePlusPanel() { this.setData({ showPlusPanel: !this.data.showPlusPanel, showEmojiPanel: false }); },
closePlusPanel() { this.setData({ showPlusPanel: false }); },
openEmojiFromPlus() { this.setData({ showPlusPanel: false, showEmojiPanel: true }); },
toggleEmoji() { this.setData({ showEmojiPanel: !this.data.showEmojiPanel }); },
insertEmoji(e) { this.setData({ inputText: this.data.inputText + e.currentTarget.dataset.emoji }); },
closeEmojiPanel() { this.setData({ showEmojiPanel: false }); },
// ---------- 发送消息 ----------
onInput(e) { this.setData({ inputText: e.detail.value }); },
chooseImage() {
const that = this;
wx.chooseImage({
count: 1, sizeType: ['compressed'], sourceType: ['album', 'camera'],
success(res) { that.setData({ pendingImage: res.tempFilePaths[0] }); }
});
},
clearPendingImage() { this.setData({ pendingImage: '' }); },
sendMessage() {
if (this.data.pendingImage) {
const file = this.data.pendingImage;
showConfirmByScene('chat_image_confirm', () => {
this.sendImageMsg(file);
this.setData({ pendingImage: '' });
});
return;
}
const text = this.data.inputText.trim();
if (!text) return;
this.sendText(text);
this.setData({ inputText: '' });
},
sendText(text) {
const { currentUser, teamId, teamName, teamAvatar } = this.data;
if (!teamId || !currentUser) return;
const id = 'local-'+Date.now();
const local = {
messageId:id, type:'text', timestamp:Date.now(),
senderId:currentUser.id, receiverId:teamId,
senderData: { name: currentUser.name, avatar: currentUser.avatar },
payload:{text}, status:'sending', read:false,
formattedTime:formatDate(Date.now()), showTime:this.needShow(Date.now())
};
this.setData({ messages: [...this.data.messages, local], scrollToView: 'msg-bottom' });
const msg = wx.goEasy.im.createTextMessage({
text,
to:{ type:wx.GoEasy.IM_SCENE.CS, id:teamId, data:{ name:teamName, avatar:teamAvatar } }
});
wx.goEasy.im.sendMessage({
message:msg,
onSuccess:() => {
this.updateMsg(id, 'success');
this.tryAutoReply(text);
},
onFailed:() => this.updateMsg(id, 'failed')
});
},
async tryAutoReply(userText) {
try {
const result = await matchAutoReply(userText);
if (result && result.matched && result.content) {
this.insertCsAutoReply(result.content);
}
} catch (e) {
console.warn('tryAutoReply failed', e);
}
},
insertCsAutoReply(content) {
const msg = {
messageId: 'auto-reply-' + Date.now(),
type: 'text',
timestamp: Date.now(),
senderId: this.data.teamId,
receiverId: this.data.currentUser?.id,
senderData: { name: this.data.teamName, avatar: this.data.teamAvatar },
payload: { text: content },
status: 'success',
read: false,
formattedTime: formatDate(Date.now()),
showTime: this.needShow(Date.now()),
};
this.setData({
messages: [...this.data.messages, msg],
scrollToView: 'msg-bottom',
});
},
sendImageMsg(file) {
const { currentUser, teamId, teamName, teamAvatar } = this.data;
if (!teamId || !currentUser) return;
const id = 'img-'+Date.now();
const local = {
messageId:id, type:'image', timestamp:Date.now(),
senderId:currentUser.id, receiverId:teamId,
payload:{url:file}, status:'sending', read:false,
formattedTime:formatDate(Date.now()), showTime:this.needShow(Date.now())
};
this.setData({ messages: [...this.data.messages, local], scrollToView: 'msg-bottom' });
const imgMsg = wx.goEasy.im.createImageMessage({
file,
to:{ type:wx.GoEasy.IM_SCENE.CS, id:teamId, data:{ name:teamName, avatar:teamAvatar } }
});
wx.goEasy.im.sendMessage({ message:imgMsg, onSuccess:()=>this.updateMsg(id,'success'), onFailed:()=>{ this.updateMsg(id,'failed'); } });
},
// ---------- 订单发送 ----------
openOrderSender() { this.setData({ showOrderSender: true, showPlusPanel: false }); },
closeOrderSender() { this.setData({ showOrderSender: false }); },
onSendOrder(e) {
const order = e.detail.order;
if (!order) return;
this.sendOrderMessage(order);
},
sendOrderMessage(order) {
const { currentUser, teamId, teamName, teamAvatar } = this.data;
if (!teamId || !currentUser) return;
const id = 'order-'+Date.now();
const local = {
messageId:id, type:'order', timestamp:Date.now(),
senderId:currentUser.id, receiverId:teamId,
senderData: { name: currentUser.name, avatar: currentUser.avatar },
payload: order, status:'sending', read:false,
formattedTime:formatDate(Date.now()), showTime:this.needShow(Date.now())
};
this.setData({ messages: [...this.data.messages, local], scrollToView: 'msg-bottom' });
const customMsg = wx.goEasy.im.createCustomMessage({
type:'order',
payload: order,
to:{ type:wx.GoEasy.IM_SCENE.CS, id:teamId, data:{ name:teamName, avatar:teamAvatar } }
});
wx.goEasy.im.sendMessage({
message:customMsg,
onSuccess:() => this.updateMsg(id, 'success'),
onFailed:() => this.updateMsg(id, 'failed')
});
},
updateMsg(id, status) { this.setData({ messages: this.data.messages.map(m => m.messageId === id ? { ...m, status } : m) }); },
needShow(ts) { const ms = this.data.messages; if (!ms.length) return true; const last = ms[ms.length-1]; return (ts - last.timestamp) / 60000 > 5; },
// ---------- 消息操作 ----------
onBubbleTap(e) {
const msgId = e.currentTarget.dataset.messageid;
const text = e.currentTarget.dataset.text;
const now = Date.now();
if (msgId === this.data.lastTapMsgId && now - this.data.lastTapTime < 350) {
this.setData({ detailText: text, showDetailModal: true, lastTapTime:0, lastTapMsgId:'' });
} else {
this.data.lastTapTime = now;
this.data.lastTapMsgId = msgId;
}
},
hideDetail() { this.setData({ showDetailModal: false }); },
copyDetail() { wx.setClipboardData({ data: this.data.detailText }); },
showAction(e) {
const msgId = e.currentTarget.dataset.messageid;
if (!msgId) return;
const msg = this.data.messages.find(m => m.messageId === msgId);
if (!msg || msg.messageId.startsWith('local-')) return;
const itemList = ['复制', '删除'];
if (msg.senderId === this.data.currentUser.id && (Date.now() - msg.timestamp < 120000)) {
itemList.push('撤回');
}
wx.showActionSheet({
itemList,
success: (res) => {
if (itemList[res.tapIndex] === '复制') { if (msg.type === 'text') wx.setClipboardData({ data: msg.payload.text }); }
else if (itemList[res.tapIndex] === '删除') { this.deleteMsg(msg); }
else if (itemList[res.tapIndex] === '撤回') { this.recallMsg(msg); }
}
});
},
deleteMsg(msg) {
wx.showModal({
title: '提示', content: '仅自己看不到',
success: (res) => {
if (res.confirm) {
wx.goEasy.im.deleteMessage({ messages: [msg] });
this.setData({ messages: this.data.messages.filter(m => m.messageId !== msg.messageId) });
}
}
});
},
recallMsg(msg) {
wx.showModal({
title: '提示', content: '撤回后对方也看不到',
success: (res) => {
if (res.confirm) {
wx.goEasy.im.recallMessage({ messages: [msg] });
const newMsgs = this.data.messages.map(m => {
if (m.messageId === msg.messageId) return { ...m, type:'text', payload:{text:'你撤回了一条消息'}, recalled:true };
return m;
});
this.setData({ messages: newMsgs });
}
}
});
},
previewImage(e) {
const url = e.currentTarget.dataset.url;
if (url) wx.previewImage({ urls: [url], current: url });
},
// 订单详情弹窗
showOrderDetailPopup(e) {
const order = e.currentTarget.dataset.order;
this.setData({ showOrderDetail: true, detailOrder: order });
},
hideOrderDetail() {
this.setData({ showOrderDetail: false, detailOrder: null });
},
onKeyboardHeightChange(e) { this.setData({ keyboardHeight: e.detail.height }); },
onPullDownRefresh() {
if (this.data.loadingHistory) return;
this.setData({ isRefreshing: true });
this.loadHistory(false).finally(() => { this.setData({ isRefreshing: false }); wx.stopPullDownRefresh(); });
}
});