修正了 pages 名为拼音的问题
This commit is contained in:
529
pages/cs-chat/cs-chat.js
Normal file
529
pages/cs-chat/cs-chat.js
Normal file
@@ -0,0 +1,529 @@
|
||||
const app = getApp();
|
||||
import { formatDate } from '../../static/lib/utils';
|
||||
import { getLocalImUserId } from '../../utils/im-user.js';
|
||||
import { resolveAvatarUrl } from '../../utils/avatar.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: '',
|
||||
pendingImageFile: null,
|
||||
keyboardHeight: 0,
|
||||
bottomSafeHeight: 10
|
||||
},
|
||||
|
||||
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) {
|
||||
}
|
||||
}
|
||||
if (!teamAvatar) {
|
||||
teamAvatar = app.globalData.ossImageUrl + app.globalData.morentouxiang;
|
||||
}
|
||||
this.setData({ teamId, teamName, teamAvatar });
|
||||
wx.setNavigationBarTitle({ title: teamName });
|
||||
this.initCurrentUser();
|
||||
},
|
||||
|
||||
onShow() {
|
||||
this.autoConnect();
|
||||
},
|
||||
|
||||
onHide() {
|
||||
this.clearAllListeners();
|
||||
},
|
||||
|
||||
autoConnect() {
|
||||
const targetUserId = getLocalImUserId(app);
|
||||
if (!targetUserId) return;
|
||||
|
||||
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: resolveAvatarUrl(currentUser.avatar, app)
|
||||
},
|
||||
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 imId = getLocalImUserId(app);
|
||||
const uid = wx.getStorageSync('uid');
|
||||
this.setData({
|
||||
currentUser: {
|
||||
id: imId || ('Boss' + uid),
|
||||
name: app.globalData.currentUser?.name || `用户${uid}`,
|
||||
avatar: resolveAvatarUrl(wx.getStorageSync('touxiang'), app),
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
fixAvatar(url) {
|
||||
return resolveAvatarUrl(url, app);
|
||||
},
|
||||
|
||||
buildImageFile(tempPath, size) {
|
||||
return {
|
||||
path: tempPath,
|
||||
tempFilePath: tempPath,
|
||||
size: size || 0,
|
||||
};
|
||||
},
|
||||
|
||||
normalizeMessage(msg) {
|
||||
if (!msg) return msg;
|
||||
if (!msg.payload) msg.payload = {};
|
||||
if (msg.type === 'image') {
|
||||
const p = msg.payload;
|
||||
if (!p.url) p.url = p.thumbnail || p.thumb || p.imageUrl || '';
|
||||
}
|
||||
return msg;
|
||||
},
|
||||
|
||||
mergeSentMessage(localId, sent) {
|
||||
if (!sent) {
|
||||
this.updateMsg(localId, 'success');
|
||||
return;
|
||||
}
|
||||
const msgs = this.data.messages.map((m) => {
|
||||
if (m.messageId !== localId) return m;
|
||||
return this.normalizeMessage({
|
||||
...m,
|
||||
...sent,
|
||||
status: 'success',
|
||||
messageId: sent.messageId || m.messageId,
|
||||
payload: sent.payload || m.payload,
|
||||
senderData: m.senderData || sent.senderData,
|
||||
});
|
||||
});
|
||||
this.setData({ messages: msgs });
|
||||
},
|
||||
|
||||
// 历史消息
|
||||
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 = this.normalizeMessage(m);
|
||||
list[idx] = m;
|
||||
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: '你好，请问有什么可以帮到您的？' },
|
||||
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 = this.normalizeMessage(msg);
|
||||
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.chooseMedia({
|
||||
count: 1,
|
||||
mediaType: ['image'],
|
||||
sizeType: ['compressed'],
|
||||
sourceType: ['album', 'camera'],
|
||||
success(res) {
|
||||
const file = (res.tempFiles && res.tempFiles[0]) || null;
|
||||
if (!file || !file.tempFilePath) return;
|
||||
that.setData({
|
||||
pendingImage: file.tempFilePath,
|
||||
pendingImageFile: that.buildImageFile(file.tempFilePath, file.size),
|
||||
});
|
||||
},
|
||||
fail() {
|
||||
wx.showToast({ title: '选择图片失败', icon: 'none' });
|
||||
},
|
||||
});
|
||||
},
|
||||
clearPendingImage() { this.setData({ pendingImage: '', pendingImageFile: null }); },
|
||||
|
||||
sendMessage() {
|
||||
if (this.data.pendingImage) {
|
||||
this.sendImageMsg(this.data.pendingImage, this.data.pendingImageFile);
|
||||
this.setData({ pendingImage: '', pendingImageFile: null });
|
||||
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'),
|
||||
onFailed:() => this.updateMsg(id, 'failed')
|
||||
});
|
||||
},
|
||||
|
||||
sendImageMsg(filePath, fileObj) {
|
||||
const { currentUser, teamId, teamName, teamAvatar } = this.data;
|
||||
if (!teamId || !currentUser || !filePath) return;
|
||||
if (!wx.goEasy || !wx.goEasy.im) {
|
||||
wx.showToast({ title: '聊天未连接', icon: 'none' });
|
||||
return;
|
||||
}
|
||||
const id = 'img-'+Date.now();
|
||||
const imageFile = fileObj || this.buildImageFile(filePath, 0);
|
||||
const local = {
|
||||
messageId:id, type:'image', timestamp:Date.now(),
|
||||
senderId:currentUser.id, receiverId:teamId,
|
||||
senderData: { name: currentUser.name, avatar: currentUser.avatar },
|
||||
payload:{url:filePath}, 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: imageFile,
|
||||
to:{ type:wx.GoEasy.IM_SCENE.CS, id:teamId, data:{ name:teamName, avatar:teamAvatar } }
|
||||
});
|
||||
wx.goEasy.im.sendMessage({
|
||||
message: imgMsg,
|
||||
onSuccess: (sent) => this.mergeSentMessage(id, sent),
|
||||
onFailed: (error) => {
|
||||
console.error('[客服] 图片发送失败', error);
|
||||
this.updateMsg(id, 'failed');
|
||||
wx.showToast({ title: '图片发送失败', icon: 'none' });
|
||||
},
|
||||
});
|
||||
},
|
||||
|
||||
// 订单发送
|
||||
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(); });
|
||||
}
|
||||
});
|
||||
7
pages/cs-chat/cs-chat.json
Normal file
7
pages/cs-chat/cs-chat.json
Normal file
@@ -0,0 +1,7 @@
|
||||
{
|
||||
"navigationBarTitleText": "聊天",
|
||||
"usingComponents": {
|
||||
"order-card": "/components/order-card/order-card",
|
||||
"order-sender": "/components/order-sender/order-sender"
|
||||
}
|
||||
}
|
||||
109
pages/cs-chat/cs-chat.wxml
Normal file
109
pages/cs-chat/cs-chat.wxml
Normal file
@@ -0,0 +1,109 @@
|
||||
<view class="chat-page">
|
||||
<scroll-view class="msg-list" scroll-y="true"
|
||||
scroll-into-view="{{scrollToView}}"
|
||||
refresher-enabled="{{true}}"
|
||||
refresher-triggered="{{isRefreshing}}"
|
||||
bindrefresherrefresh="onPullDownRefresh"
|
||||
style="top: 20rpx; bottom: calc({{bottomSafeHeight}}rpx + {{keyboardHeight}}px + env(safe-area-inset-bottom) + 20rpx);">
|
||||
<view class="loading-more" wx:if="{{loadingHistory}}">加载更早消息...</view>
|
||||
<block wx:for="{{messages}}" wx:key="messageId">
|
||||
<view class="msg-wrapper" data-messageid="{{item.messageId}}" bindlongpress="showAction">
|
||||
<view class="time-tag" wx:if="{{item.showTime}}">{{item.formattedTime}}</view>
|
||||
<view class="msg-row {{item.senderId === currentUser.id ? 'right' : 'left'}}">
|
||||
<!-- 对方头像（客服） -->
|
||||
<image wx:if="{{item.senderId !== currentUser.id}}" class="avatar" src="{{teamAvatar}}" mode="aspectFill" />
|
||||
<view class="bubble {{item.senderId === currentUser.id ? 'bubble-right' : 'bubble-left'}}"
|
||||
data-messageid="{{item.messageId}}"
|
||||
data-text="{{item.type==='text' ? item.payload.text : ''}}"
|
||||
bindtap="{{item.type==='text' ? 'onBubbleTap' : (item.type==='image' ? 'previewImage' : '')}}"
|
||||
data-url="{{item.type==='image' ? item.payload.url : ''}}">
|
||||
<text wx:if="{{item.type === 'text'}}" class="msg-text">{{item.payload.text}}</text>
|
||||
<image wx:elif="{{item.type === 'image'}}" class="msg-image" src="{{item.payload.url}}" mode="widthFix" data-url="{{item.payload.url}}" bindtap="previewImage"/>
|
||||
<view wx:elif="{{item.type === 'order'}}" class="order-bubble">
|
||||
<text class="order-label">📋 订单消息</text>
|
||||
<view class="order-brief">
|
||||
<text>订单号：{{item.payload.dingdan_id || '无'}}</text>
|
||||
<text>服务：{{item.payload.jieshao || ''}}</text>
|
||||
<text class="order-price">¥{{item.payload.jine}}</text>
|
||||
</view>
|
||||
<button class="order-detail-btn" catchtap="showOrderDetailPopup" data-order="{{item.payload}}" size="mini">查看详情</button>
|
||||
</view>
|
||||
<text wx:else class="msg-text">{{item.payload.text || '[未知消息]'}}</text>
|
||||
</view>
|
||||
<!-- 自己头像 -->
|
||||
<image wx:if="{{item.senderId === currentUser.id}}" class="avatar" src="{{currentUser.avatar}}" mode="aspectFill" />
|
||||
</view>
|
||||
<!-- 🔥 已读/未读标签已彻底移除 -->
|
||||
</view>
|
||||
</block>
|
||||
<view id="msg-bottom" style="height:20rpx;"></view>
|
||||
</scroll-view>
|
||||
|
||||
<!-- 底部输入区域（保持不变） -->
|
||||
<view class="input-area" style="bottom: {{keyboardHeight}}px; padding-bottom: calc(10rpx + env(safe-area-inset-bottom));">
|
||||
<view class="plus-panel {{showPlusPanel ? 'show' : ''}}" catchtap="closePlusPanel">
|
||||
<view class="plus-grid">
|
||||
<view class="plus-item" catchtap="openEmojiFromPlus">
|
||||
<text class="plus-icon">😀</text>
|
||||
<text class="plus-label">表情</text>
|
||||
</view>
|
||||
<view class="plus-item" catchtap="chooseImage">
|
||||
<text class="plus-icon">📷</text>
|
||||
<text class="plus-label">图片</text>
|
||||
</view>
|
||||
<view class="plus-item" catchtap="openOrderSender">
|
||||
<text class="plus-icon">📋</text>
|
||||
<text class="plus-label">订单</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<view class="emoji-mask" wx:if="{{showEmojiPanel}}" catchtap="closeEmojiPanel"></view>
|
||||
<view class="emoji-panel {{showEmojiPanel ? 'show' : ''}}">
|
||||
<scroll-view scroll-y="true" class="emoji-scroll">
|
||||
<view class="emoji-grid">
|
||||
<block wx:for="{{emojiList}}" wx:key="*this">
|
||||
<view class="emoji-item" data-emoji="{{item}}" catchtap="insertEmoji">{{item}}</view>
|
||||
</block>
|
||||
</view>
|
||||
</scroll-view>
|
||||
</view>
|
||||
|
||||
<view class="pending-image" wx:if="{{pendingImage}}">
|
||||
<image class="pending-thumb" src="{{pendingImage}}" mode="aspectFill" />
|
||||
<view class="pending-remove" catchtap="clearPendingImage">✕</view>
|
||||
</view>
|
||||
|
||||
<view class="write-row">
|
||||
<input class="text-input" placeholder="消息" value="{{inputText}}" bindinput="onInput" adjust-position="{{false}}" bindkeyboardheightchange="onKeyboardHeightChange" cursor-spacing="10"/>
|
||||
<view class="send-btn" bindtap="sendMessage">发送</view>
|
||||
<view class="plus-btn" bindtap="togglePlusPanel">
|
||||
<text class="plus-icon-single">➕</text>
|
||||
</view>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 文本双击放大弹窗 -->
|
||||
<view class="detail-modal" wx:if="{{showDetailModal}}" catchtap="hideDetail">
|
||||
<view class="detail-content" catchtap="noop">
|
||||
<text class="detail-text" user-select="true">{{detailText}}</text>
|
||||
<button class="copy-btn" bindtap="copyDetail">复制</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单详情弹窗 -->
|
||||
<view class="order-detail-mask" wx:if="{{showOrderDetail}}" catchtap="hideOrderDetail">
|
||||
<view class="order-detail-panel" catchtap="noop">
|
||||
<view class="order-detail-title">订单详情</view>
|
||||
<view class="order-detail-item">订单号：{{detailOrder.dingdan_id}}</view>
|
||||
<view class="order-detail-item">服务描述：{{detailOrder.jieshao}}</view>
|
||||
<view class="order-detail-item">金额：¥{{detailOrder.jine}}</view>
|
||||
<view class="order-detail-item">类型：{{detailOrder.leixing || '无'}}</view>
|
||||
<view class="order-detail-item">时间：{{detailOrder.shijian || '无'}}</view>
|
||||
<button class="order-detail-close-btn" catchtap="hideOrderDetail">关闭</button>
|
||||
</view>
|
||||
</view>
|
||||
|
||||
<!-- 订单发送组件 -->
|
||||
<order-sender visible="{{showOrderSender}}" bind:send="onSendOrder" bind:close="closeOrderSender" />
|
||||
</view>
|
||||
67
pages/cs-chat/cs-chat.wxss
Normal file
67
pages/cs-chat/cs-chat.wxss
Normal file
@@ -0,0 +1,67 @@
|
||||
.chat-page { width:100%; height:100vh; background:#f5f5f5; }
|
||||
.msg-list { position:absolute; left:0; right:0; padding:0 20rpx; box-sizing:border-box; overflow-y:auto; }
|
||||
.loading-more { text-align:center; font-size:24rpx; color:#999; padding:20rpx 0; }
|
||||
.time-tag { text-align:center; margin:28rpx 0; font-size:24rpx; color:#b0b0b0; }
|
||||
.msg-wrapper { margin-bottom:12rpx; }
|
||||
.msg-row { display:flex; align-items:flex-start; margin-bottom:4rpx; }
|
||||
.right { justify-content:flex-end; }
|
||||
.left { justify-content:flex-start; }
|
||||
.avatar { width:76rpx; height:76rpx; border-radius:50%; background:#e0e0e0; margin:0 12rpx; flex-shrink:0; }
|
||||
.bubble { max-width:70%; padding:16rpx 20rpx; border-radius:16rpx; position:relative; word-break:break-all; font-size:30rpx; line-height:1.5; }
|
||||
.bubble-left { background:#fff; border-top-left-radius:4rpx; }
|
||||
.bubble-right { background:#00aaff; color:#fff; border-top-right-radius:4rpx; }
|
||||
.msg-text { color:inherit; }
|
||||
.msg-image { max-width:240rpx; border-radius:10rpx; }
|
||||
|
||||
/* 已读/未读标签：靠右显示 */
|
||||
.read-tag {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
font-size: 20rpx;
|
||||
color: #888;
|
||||
padding: 4rpx 12rpx 0 0;
|
||||
margin-top: 2rpx;
|
||||
}
|
||||
|
||||
/* 订单气泡 */
|
||||
.order-bubble { background:#fff7e0; padding:12rpx; border-radius:8rpx; }
|
||||
.order-label { font-size:24rpx; color:#e6a23c; font-weight:600; margin-bottom:8rpx; }
|
||||
.order-brief { font-size:24rpx; color:#333; line-height:1.6; }
|
||||
.order-price { color:#e6a23c; font-weight:bold; }
|
||||
.order-detail-btn { margin-top:10rpx; background:#e6a23c; color:#fff; border-radius:8rpx; }
|
||||
|
||||
/* 订单详情弹窗 */
|
||||
.order-detail-mask { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.6); z-index:999; display:flex; justify-content:center; align-items:center; }
|
||||
.order-detail-panel { width:80%; background:#fff; border-radius:20rpx; padding:30rpx; }
|
||||
.order-detail-title { font-size:34rpx; font-weight:bold; margin-bottom:20rpx; color:#333; }
|
||||
.order-detail-item { font-size:28rpx; margin:16rpx 0; color:#555; }
|
||||
.order-detail-close-btn { width:100%; height:80rpx; background:#00aaff; color:#fff; border-radius:12rpx; margin-top:30rpx; font-size:30rpx; }
|
||||
|
||||
/* 底部输入区域 */
|
||||
.input-area { position:fixed; left:0; right:0; background:#f7f7f7; border-top:1rpx solid #ddd; z-index:10; }
|
||||
.plus-panel { position:absolute; bottom:100%; left:0; right:0; background:#fff; border-top:1rpx solid #e0e0e0; padding:20rpx; transform:translateY(100%); opacity:0; transition:0.3s; pointer-events:none; z-index:9; }
|
||||
.plus-panel.show { transform:translateY(0); opacity:1; pointer-events:auto; }
|
||||
.plus-grid { display:flex; justify-content:space-around; }
|
||||
.plus-item { display:flex; flex-direction:column; align-items:center; width:120rpx; }
|
||||
.plus-icon { font-size:60rpx; }
|
||||
.plus-label { font-size:24rpx; color:#666; margin-top:8rpx; }
|
||||
.emoji-mask { position:fixed; top:0; left:0; right:0; bottom:0; background:transparent; z-index:8; }
|
||||
.emoji-panel { position:absolute; bottom:100%; left:0; right:0; background:#fff; border-top:1rpx solid #e0e0e0; height:380rpx; transform:translateY(100%); opacity:0; transition:0.3s; pointer-events:none; z-index:9; }
|
||||
.emoji-panel.show { transform:translateY(0); opacity:1; pointer-events:auto; }
|
||||
.emoji-scroll { height:100%; }
|
||||
.emoji-grid { display:flex; flex-wrap:wrap; padding:20rpx 10rpx; }
|
||||
.emoji-item { width:14.28%; text-align:center; padding:16rpx 0; font-size:44rpx; }
|
||||
.pending-image { display:flex; align-items:center; padding:10rpx 20rpx; background:#fff; }
|
||||
.pending-thumb { width:80rpx; height:80rpx; border-radius:8rpx; }
|
||||
.pending-remove { font-size:30rpx; color:#999; margin-left:10rpx; }
|
||||
.write-row { display:flex; padding:0 20rpx 10rpx; align-items:center; }
|
||||
.text-input { flex:1; height:76rpx; background:#fff; border-radius:12rpx; padding:0 20rpx; font-size:30rpx; margin-right:12rpx; }
|
||||
.send-btn { width:120rpx; height:76rpx; background:#00aaff; color:#fff; font-size:28rpx; font-weight:500; border-radius:12rpx; display:flex; align-items:center; justify-content:center; }
|
||||
.plus-btn { width:56rpx; height:56rpx; display:flex; align-items:center; justify-content:center; margin-left:10rpx; }
|
||||
.plus-icon-single { font-size:46rpx; color:#00aaff; }
|
||||
|
||||
/* 双击放大文本弹窗 */
|
||||
.detail-modal { position:fixed; top:0; left:0; right:0; bottom:0; background:rgba(0,0,0,0.7); z-index:999; display:flex; align-items:center; justify-content:center; }
|
||||
.detail-content { width:80%; max-height:80%; background:#fff; border-radius:16rpx; padding:40rpx; }
|
||||
.detail-text { font-size:32rpx; line-height:1.6; word-break:break-all; overflow-y:auto; }
|
||||
.copy-btn { width:100%; height:80rpx; background:#00aaff; color:#fff; border-radius:12rpx; margin-top:20rpx; font-size:30rpx; }
|
||||
Reference in New Issue
Block a user