Compare commits

4 Commits

Author SHA1 Message Date
b23c21d05b Merge pull request 'fix/lang' (#4) from fix/lang into main
Reviewed-on: #4
2026-02-04 09:12:58 +00:00
65a24f25bb fix(lang): 提取getCurrentLocale为独立函数并优化代码格式
将getCurrentLocale方法提取为独立函数以避免重复代码
移除多余的空格并保持代码风格一致
2026-02-04 17:10:12 +08:00
2a0935b581 Merge pull request 'docs: 更新readme文档结构和内容' (#2) from dev/1.0 into main
Reviewed-on: #2
2026-01-24 09:41:36 +00:00
b31197a8b4 Merge pull request 'dev/1.0' (#1) from dev/1.0 into main
Reviewed-on: #1
2026-01-24 09:24:05 +00:00
15 changed files with 2117 additions and 2194 deletions

View File

@@ -42,6 +42,6 @@ const localDevConfig = ({
uniacid: 2, uniacid: 2,
domain: 'http://localhost:8050/', domain: 'http://localhost:8050/',
}, },
})['1']; // 选择要使用的环境配置 })['2811']; // 选择要使用的环境配置
export default localDevConfig; export default localDevConfig;

View File

@@ -62,105 +62,53 @@ export default {
*/ */
async sendStreamMessage(message, onChunk, onComplete) { async sendStreamMessage(message, onChunk, onComplete) {
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
return new Promise((resolve, reject) => { // 微信小程序:降级为普通请求 + 前端打字模拟
const socketTask = wx.connectSocket({
url: 'wss://dev.aigc-quickapp.com/ws/aikefu',
header: {}
});
let content = '';
let conversationId = '';
let isAuthenticated = false;
socketTask.onOpen(() => {
console.log('WebSocket 连接成功,开始认证...');
socketTask.send({
data: JSON.stringify({
action: 'auth',
uniacid: store.state.uniacid || '1',
token: store.state.token || 'test_token',
user_id: store.state.memberInfo?.id || 'anonymous'
})
});
});
socketTask.onMessage((res) => {
try { try {
const data = JSON.parse(res.data); const result = await this.sendMessage(message);
console.log('收到 WebSocket 消息:', data); const content = result.content || '';
const conversationId = result.conversationId || '';
if (data.type === 'auth_success') { // 保存会话ID确保连续对话
console.log('认证成功,发送聊天消息...');
isAuthenticated = true;
socketTask.send({
data: JSON.stringify({
action: 'chat',
uniacid: store.state.uniacid || '1',
query: message,
user_id: store.state.memberInfo?.id || 'anonymous',
conversation_id: this.getConversationId() || ''
})
});
} else if (data.type === 'auth_failed') {
const errorMsg = '认证失败,请重新登录';
console.error(errorMsg, data);
reject(new Error(errorMsg));
if (onComplete) onComplete({ error: errorMsg });
socketTask.close();
}
// 处理流式消息块
else if (data.type === 'message' || data.event === 'message') {
const text = data.answer || data.content || data.text || '';
content += text;
if (onChunk) onChunk(text);
}
// 处理流结束
else if (data.event === 'message_end' || data.type === 'message_end') {
conversationId = data.conversation_id || '';
if (conversationId) { if (conversationId) {
this.setConversationId(conversationId); this.setConversationId(conversationId);
} }
// 模拟打字效果
let index = 0;
const chunkSize = 2; // 每次显示2个字符
return new Promise((resolve) => {
const timer = setInterval(() => {
if (index < content.length) {
const chunk = content.substring(index, index + chunkSize);
index += chunkSize;
if (onChunk) onChunk(chunk);
} else {
clearInterval(timer);
if (onComplete) { if (onComplete) {
onComplete({ content, conversation_id: conversationId }); onComplete({
content: content,
conversation_id: conversationId
});
} }
resolve({ content, conversation_id: conversationId }); resolve({ content, conversation_id: conversationId });
socketTask.close();
} }
}, 80); // 打字速度80ms/次
// 可选:处理 done });
else if (data.type === 'done') { } catch (error) {
console.log('对话完成:', data); console.error('小程序流式消息降级失败:', error);
if (onComplete) {
onComplete({ error: error.message || '发送失败' });
} }
throw error;
} catch (e) {
console.error('WebSocket 消息解析失败:', e, '原始数据:', res.data);
} }
}); // #endif
socketTask.onError((err) => { // #ifdef H5
const errorMsg = 'WebSocket 连接失败'; // H5使用真实流式EventSource / Fetch
console.error(errorMsg, err); return this.sendHttpStream(message, onChunk, onComplete);
reject(new Error(errorMsg));
if (onComplete) onComplete({ error: errorMsg });
});
socketTask.onClose(() => {
console.log('WebSocket 连接已关闭');
});
const timeout = setTimeout(() => {
if (!isAuthenticated || content === '') {
console.warn('WebSocket 超时,强制关闭');
socketTask.close();
reject(new Error('AI服务响应超时'));
if (onComplete) onComplete({ error: 'AI服务响应超时' });
}
}, 10000);
});
// #endif // #endif
}, },
/** /**
* HTTP 流式请求(仅 H5 使用) * HTTP 流式请求(仅 H5 使用)
*/ */
@@ -184,8 +132,11 @@ export default {
}) })
}); });
if (!response.ok || !response.body) { if (!response.ok) {
throw new Error('无效响应'); throw new Error(`HTTP ${response.status}`);
}
if (!response.body) {
throw new Error('响应体不可用');
} }
const reader = response.body.getReader(); const reader = response.body.getReader();
@@ -194,64 +145,50 @@ export default {
let content = ''; let content = '';
let conversationId = ''; let conversationId = '';
while (true) { function processBuffer(buf, callback) {
const { done, value } = await reader.read(); const lines = buf.split('\n');
if (done) break; buf = lines.pop() || '';
buffer += decoder.decode(value, { stream: true });
// 按行分割,保留不完整的最后一行
const lines = buffer.split('\n');
buffer = lines.pop() || ''; // 未完成的行留到下次
for (const line of lines) { for (const line of lines) {
const trimmed = line.trim(); const trimmed = line.trim();
if (trimmed.startsWith('data:')) { if (trimmed.startsWith('data:')) {
try {
const jsonStr = trimmed.slice(5).trim(); const jsonStr = trimmed.slice(5).trim();
if (jsonStr && jsonStr !== '[DONE]') { if (jsonStr) {
try {
const data = JSON.parse(jsonStr); const data = JSON.parse(jsonStr);
if (data.event === 'message') { if (data.event === 'message') {
const text = data.answer || data.text || ''; const text = data.answer || data.text || '';
content += text; content += text;
if (onChunk) onChunk(text); callback(text);
} }
if (data.conversation_id) { if (data.conversation_id) {
conversationId = data.conversation_id; conversationId = data.conversation_id;
} }
if (data.event === 'message_end') { if (data.event === 'message_end') {
// 可提前结束 // 可选:提前完成
}
} }
} catch (e) { } catch (e) {
console.warn('解析失败:', e, line); console.warn('解析流数据失败:', e);
} }
} }
} }
} }
return buf;
}
// 处理最后残留的 buffer如果有 while (true) {
if (buffer.trim().startsWith('data:')) { const { done, value } = await reader.read();
try { if (done) break;
const jsonStr = buffer.trim().slice(5); buffer += decoder.decode(value, { stream: true });
if (jsonStr) { buffer = processBuffer(buffer, (chunk) => {
const data = JSON.parse(jsonStr); if (onChunk) onChunk(chunk);
if (data.event === 'message') { });
const text = data.answer || '';
content += text;
if (onChunk) onChunk(text);
}
if (data.conversation_id) {
conversationId = data.conversation_id;
}
}
} catch (e) {
console.warn('最后 buffer 解析失败:', e);
}
} }
if (onComplete) { if (onComplete) {
onComplete({ content, conversation_id: conversationId }); onComplete({
content,
conversation_id: conversationId
});
} }
return { content, conversation_id: conversationId }; return { content, conversation_id: conversationId };
} catch (error) { } catch (error) {
@@ -259,6 +196,11 @@ export default {
throw error; throw error;
} }
// #endif // #endif
// #ifdef MP-WEIXIN
// 理论上不会执行到这里,但防止 fallback
return this.sendStreamMessage(message, onChunk, onComplete);
// #endif
}, },
/** /**

View File

@@ -2,13 +2,68 @@
* 客服统一处理服务 * 客服统一处理服务
* 整合各种客服方式,提供统一的调用接口 * 整合各种客服方式,提供统一的调用接口
*/ */
export class CustomerService { class CustomerService {
constructor(vueInstance, externalConfig = null) { constructor(vueInstance, externalConfig = {}) {
if (!vueInstance.$lang) {
throw new Error('CustomerService 必须在 Vue 实例中初始化');
}
this.vm = vueInstance; this.vm = vueInstance;
this.externalConfig = externalConfig; // 外部传入的最新配置(优先级最高) this.externalConfig = externalConfig; // 外部传入的最新配置(优先级最高)
this.latestPlatformConfig = null; this.latestPlatformConfig = null;
} }
getSupoortKeFuList() {
if (!this.vm) return [];
const vm = this.vm;
return [
{
id: 'weixin-official',
name: vm.$lang('customer.weChatKefu'),
isOfficial: true,
type: 'weapp'
},
{
id: 'custom-kefu',
name: vm.$lang('customer.systemKefu'),
isOfficial: false
},
{
id: 'qyweixin-kefu',
name: vm.$lang('customer.weChatWorkKefu'),
isOfficial: false
},
]
}
/**
* 打开客服选择弹窗
*/
openCustomerSelectPopupDialog() {
const kefu_list = this.getSupoortKeFuList();
const kefuNames = kefu_list.map(item => item.name);
uni.showActionSheet({
itemList: kefuNames,
success: (res) => {
const kefu = kefu_list[res.tapIndex];
this.externalConfig = kefu ?? this.externalConfig ?? {};
if (kefu.isOfficial) {
uni.openCustomerServiceConversation({
sessionFrom: 'weapp',
showMessageCard: true
});
} else if (kefu.id === 'custom-kefu') {
this.handleCustomerClick();
} else if (kefu.id === 'qyweixin-kefu') {
this.handleQyWeixinKefuClick();
}
}
});
}
/** /**
* 强制刷新配置(支持传入外部配置) * 强制刷新配置(支持传入外部配置)
* @param {Object} externalConfig 外部最新配置 * @param {Object} externalConfig 外部最新配置
@@ -28,29 +83,28 @@ export class CustomerService {
return this.latestPlatformConfig; return this.latestPlatformConfig;
} }
// 优先级:外部传入 > vuex store > 空对象 // 优先级:外部传入的最新配置 > vuex配置 > 空对象
const servicerConfig = this.externalConfig || this.vm.$store.state.servicerConfig || {}; const servicerConfig = this.externalConfig || this.vm.$store.state.servicerConfig || {};
console.log(`【实时客服配置】`, servicerConfig); console.log(`【实时客服配置】`, servicerConfig);
let platformConfig = null; let platformConfig = null;
// #ifdef H5 // #ifdef H5
platformConfig = servicerConfig.h5 && typeof servicerConfig.h5 === 'object' ? servicerConfig.h5 : null; platformConfig = servicerConfig.h5 ? (typeof servicerConfig.h5 === 'object' ? servicerConfig.h5 : null) : null;
// #endif // #endif
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
platformConfig = servicerConfig.weapp && typeof servicerConfig.weapp === 'object' ? servicerConfig.weapp : null; platformConfig = servicerConfig.weapp ? (typeof servicerConfig.weapp === 'object' ? servicerConfig.weapp : null) : null;
// #endif // #endif
// #ifdef MP-ALIPAY // #ifdef MP-ALIPAY
platformConfig = servicerConfig.aliapp && typeof servicerConfig.aliapp === 'object' ? servicerConfig.aliapp : null; platformConfig = servicerConfig.aliapp ? (typeof servicerConfig.aliapp === 'object' ? servicerConfig.aliapp : null) : null;
// #endif // #endif
// #ifdef PC // #ifdef PC
platformConfig = servicerConfig.pc && typeof servicerConfig.pc === 'object' ? servicerConfig.pc : null; platformConfig = servicerConfig.pc ? (typeof servicerConfig.pc === 'object' ? servicerConfig.pc : null) : null;
// #endif // #endif
// 防止空数组被当作有效配置 // 处理空数组情况你的配置中pc/aliapp是空数组转为null
if (Array.isArray(platformConfig)) { if (Array.isArray(platformConfig)) {
platformConfig = null; platformConfig = null;
} }
@@ -90,18 +144,32 @@ export class CustomerService {
warnings: [] warnings: []
}; };
if (!config || !config.type) { if (!config) {
result.isValid = false;
result.errors.push('客服配置不存在');
return result;
}
if (config.type === 'aikefu') {
return result;
}
if (!config.type) {
result.isValid = false; result.isValid = false;
result.errors.push('客服类型未配置'); result.errors.push('客服类型未配置');
return result;
} }
if (config.type === 'wxwork') { if (config.type === 'wxwork') {
if (!wxworkConfig || !wxworkConfig.enable) { if (!wxworkConfig) {
result.warnings.push('企业微信未启用'); result.isValid = false;
result.errors.push('企业微信配置不存在');
} else {
if (!wxworkConfig.enable) {
result.warnings.push('企业微信功能未启用');
} }
if (!wxworkConfig.contact_url) { if (!wxworkConfig.contact_url) {
result.warnings.push('企业微信活码链接未配置'); result.warnings.push('企业微信活码链接未配置,将使用原有客服方式');
}
} }
} }
@@ -109,39 +177,16 @@ export class CustomerService {
} }
/** /**
* 跳转到 AI 客服页面Dify * 跳转到AI客服页面
*/ */
openDifyService() { openAIKeFuService() {
try { const vm = this.vm;
// 清除未读数(如果存在) vm.$util.redirectTo(vm.$util.AI_CHAT_PAGE_URL);
if (typeof this.vm.setAiUnreadCount === 'function') {
this.vm.setAiUnreadCount(0);
}
// ✅ 修正路径:必须与 pages.json 中注册的路径一致
const aiChatUrl = '/pages_tool/ai-chat/index';
// ✅ 使用 navigateTo 保留返回栈(体验更好)
uni.navigateTo({
url: aiChatUrl,
fail: (err) => {
console.error('跳转 AI 客服失败:', err);
// H5 兜底
// #ifdef H5
window.location.href = aiChatUrl;
// #endif
uni.showToast({ title: '打开客服失败', icon: 'none' });
}
});
} catch (e) {
console.error('跳转 AI 客服异常:', e);
uni.showToast({ title: '打开客服失败', icon: 'none' });
}
} }
/** /**
* 处理客服点击事件(统一入口) * 处理客服点击事件
* @param {Object} options 选项参数(用于消息卡片等) * @param {Object} options 选项参数
*/ */
handleCustomerClick(options = {}) { handleCustomerClick(options = {}) {
const validation = this.validateConfig(); const validation = this.validateConfig();
@@ -156,61 +201,51 @@ export class CustomerService {
} }
const config = this.getPlatformConfig(); const config = this.getPlatformConfig();
console.log('【当前客服配置】', config); const { niushop = {}, sendMessageTitle = '', sendMessagePath = '', sendMessageImg = '' } = options || {};
console.log('【客服类型】', config.type);
const { niushop = {}, sendMessageTitle = '', sendMessagePath = '', sendMessageImg = '' } = options;
if (config.type === 'none') { if (config.type === 'none') {
this.showNoServicePopup(); this.showNoServicePopup();
return; return;
} }
// 核心路由:根据 type 决定行为 // 核心分支:根据最新的type处理
switch (config.type) { switch (config.type) {
case 'aikefu': case 'aikefu':
console.log('【跳转 AI 客服】目标路径: /pages_tool/ai-chat/index'); this.openAIKeFuService();
this.openDifyService();
break; break;
case 'wxwork': case 'wxwork':
console.log('【跳转企业微信客服】');
this.openWxworkService(false, config, options); this.openWxworkService(false, config, options);
break; break;
case 'third': case 'third':
console.log('【跳转第三方客服】');
this.openThirdService(config);
break;
case 'miniprogram':
console.log('【跳转第三方小程序客服】');
this.openThirdService(config); this.openThirdService(config);
break; break;
case 'niushop': case 'niushop':
console.log('【跳转牛商客服】');
this.openNiushopService(niushop); this.openNiushopService(niushop);
break; break;
case 'weapp': case 'weapp':
console.log('【跳转微信官方客服】');
this.openWeappService(config, options); this.openWeappService(config, options);
break; break;
case 'aliapp': case 'aliapp':
console.log('【跳转支付宝客服】');
this.openAliappService(config); this.openAliappService(config);
break; break;
default: default:
console.error('【未知客服类型】', config.type);
this.makePhoneCall(); this.makePhoneCall();
} }
} }
// ================== 各类型客服实现 ================== /**
* 打开企业微信客服
* @param {boolean} useOriginalService 是否使用原有客服方式
* @param {Object} servicerConfig 客服配置
* @param {Object} options 选项参数
*/
openWxworkService(useOriginalService = false, servicerConfig = null, options = {}) { openWxworkService(useOriginalService = false, servicerConfig = null, options = {}) {
const config = servicerConfig || this.getPlatformConfig(); const config = servicerConfig || this.getPlatformConfig();
const wxworkConfig = this.getWxworkConfig(); const wxworkConfig = this.getWxworkConfig();
const { sendMessageTitle = '', sendMessagePath = '', sendMessageImg = '' } = options; const { sendMessageTitle = '', sendMessagePath = '', sendMessageImg = '' } = options || {};
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
if (!useOriginalService && wxworkConfig?.enable && wxworkConfig?.contact_url) { if (wxworkConfig?.enable && wxworkConfig?.contact_url && !useOriginalService) {
wx.navigateToMiniProgram({ wx.navigateToMiniProgram({
appId: 'wxeb490c6f9b154ef9', appId: 'wxeb490c6f9b154ef9',
path: `pages/contacts/externalContactDetail?url=${encodeURIComponent(wxworkConfig.contact_url)}`, path: `pages/contacts/externalContactDetail?url=${encodeURIComponent(wxworkConfig.contact_url)}`,
@@ -221,16 +256,9 @@ export class CustomerService {
} }
}); });
} else { } else {
// 检查是否有企业微信配置
if (!config.wxwork_url && !config.corpid) {
console.error('企业微信配置不完整,缺少 wxwork_url 或 corpid');
uni.showToast({ title: '企业微信配置不完整', icon: 'none' });
this.fallbackToPhoneCall();
return;
}
wx.openCustomerServiceChat({ wx.openCustomerServiceChat({
extInfo: { url: config.wxwork_url || '' }, extInfo: { url: config.wxwork_url },
corpId: config.corpid || '', corpId: config.corpid,
showMessageCard: true, showMessageCard: true,
sendMessageTitle, sendMessageTitle,
sendMessagePath, sendMessagePath,
@@ -240,125 +268,120 @@ export class CustomerService {
// #endif // #endif
// #ifdef H5 // #ifdef H5
if (!useOriginalService && wxworkConfig?.enable && wxworkConfig?.contact_url) { if (wxworkConfig?.enable && wxworkConfig?.contact_url) {
window.location.href = wxworkConfig.contact_url; window.location.href = wxworkConfig.contact_url;
} else if (config.wxwork_url) { } else if (config.wxwork_url) {
window.location.href = config.wxwork_url; location.href = config.wxwork_url;
} else { } else {
this.fallbackToPhoneCall(); this.fallbackToPhoneCall();
} }
// #endif // #endif
} }
/**
* 打开第三方客服
* @param {Object} config 客服配置
*/
openThirdService(config) { openThirdService(config) {
console.log('【第三方客服配置】', config);
console.log('【配置字段】', Object.keys(config));
// 支持多种可能的字段名
const miniAppId = config.mini_app_id || config.miniAppId || config.appid || config.appId || config.app_id;
const miniAppPath = config.mini_app_path || config.miniAppPath || config.path || config.page_path || '';
console.log('【解析后的小程序配置】AppID:', miniAppId, 'Path:', miniAppPath);
// 优先处理第三方微信小程序客服
if (miniAppId) {
console.log('【跳转第三方小程序】AppID:', miniAppId, 'Path:', miniAppPath);
// #ifdef MP-WEIXIN
wx.navigateToMiniProgram({
appId: miniAppId,
path: miniAppPath,
success: () => {
console.log('【跳转第三方小程序成功】');
},
fail: (err) => {
console.error('【跳转第三方小程序失败】', err);
uni.showToast({ title: '跳转失败,请稍后重试', icon: 'none' });
}
});
// #endif
// #ifdef H5
uni.showToast({ title: '第三方小程序客服仅在微信小程序中可用', icon: 'none' });
// #endif
return;
}
// 处理第三方链接客服
if (config.third_url) { if (config.third_url) {
console.log('【跳转第三方链接】', config.third_url);
// #ifdef H5
window.location.href = config.third_url; window.location.href = config.third_url;
// #endif
// #ifdef MP-WEIXIN
uni.setClipboardData({
data: config.third_url,
success: () => {
uni.showToast({ title: '链接已复制,请在浏览器打开', icon: 'none' });
}
});
// #endif
} else { } else {
console.error('【第三方客服配置不完整】缺少 mini_app_id 或 third_url');
this.fallbackToPhoneCall(); this.fallbackToPhoneCall();
} }
} }
/**
* 打开牛商客服
* @param {Object} niushop 牛商参数
*/
openNiushopService(niushop) { openNiushopService(niushop) {
if (Object.keys(niushop).length > 0 && this.vm.$util?.redirectTo) { if (Object.keys(niushop).length > 0) {
this.vm.$util.redirectTo('/pages_tool/chat/room', niushop); this.vm.$util.redirectTo('/pages_tool/chat/room', niushop);
} else { } else {
this.makePhoneCall(); this.makePhoneCall();
} }
} }
/**
* 打开微信小程序客服
* @param {Object} config 客服配置
* @param {Object} options 选项参数
*/
openWeappService(config, options = {}) { openWeappService(config, options = {}) {
// 如果 useOfficial 为 true 或 undefined则使用原生系统客服由 button open-type="contact" 触发) if (!this.shouldUseCustomService(config)) {
// 此方法仅用于自定义跳转(如 useOfficial: false console.log('使用官方微信小程序客服');
if (config.useOfficial !== false) {
// 不做任何事,应由 <button open-type="contact"> 触发
console.log('使用微信官方客服,请确保按钮为 <button open-type="contact">');
return; return;
} }
console.log('使用自定义微信小程序客服');
this.handleCustomWeappService(config, options); this.handleCustomWeappService(config, options);
} }
/**
* 处理自定义微信小程序客服
* @param {Object} config 客服配置
* @param {Object} options 选项参数
*/
handleCustomWeappService(config, options = {}) { handleCustomWeappService(config, options = {}) {
const { sendMessageTitle = '', sendMessagePath = '', sendMessageImg = '' } = options || {};
if (config.customServiceUrl) { if (config.customServiceUrl) {
let url = config.customServiceUrl; let url = config.customServiceUrl;
const params = []; const params = [];
const { sendMessageTitle, sendMessagePath, sendMessageImg } = options;
if (sendMessageTitle) params.push(`title=${encodeURIComponent(sendMessageTitle)}`); if (sendMessageTitle) params.push(`title=${encodeURIComponent(sendMessageTitle)}`);
if (sendMessagePath) params.push(`path=${encodeURIComponent(sendMessagePath)}`); if (sendMessagePath) params.push(`path=${encodeURIComponent(sendMessagePath)}`);
if (sendMessageImg) params.push(`img=${encodeURIComponent(sendMessageImg)}`); if (sendMessageImg) params.push(`img=${encodeURIComponent(sendMessageImg)}`);
if (params.length > 0) { if (params.length > 0) {
url += (url.includes('?') ? '&' : '?') + params.join('&'); url += (url.includes('?') ? '&' : '?') + params.join('&');
} }
uni.navigateTo({ url });
uni.navigateTo({
url: url,
fail: (err) => {
console.error('跳转自定义客服页面失败:', err);
this.tryThirdPartyService(config, options);
}
});
return; return;
} }
this.tryThirdPartyService(config, options); this.tryThirdPartyService(config, options);
} }
/**
* 尝试使用第三方客服
* @param {Object} config 客服配置
* @param {Object} options 选项参数
*/
tryThirdPartyService(config, options = {}) { tryThirdPartyService(config, options = {}) {
// 支持第三方微信小程序客服 if (config.thirdPartyServiceUrl) {
if (config.thirdPartyMiniAppId || config.mini_app_id) {
// #ifdef MP-WEIXIN
wx.navigateToMiniProgram({
appId: config.thirdPartyMiniAppId || config.mini_app_id,
path: config.thirdPartyMiniAppPath || config.mini_app_path || ''
});
// #endif
return;
}
// 支持第三方链接客服
if (config.thirdPartyServiceUrl || config.third_url) {
const serviceUrl = config.thirdPartyServiceUrl || config.third_url;
// #ifdef H5 // #ifdef H5
window.open(serviceUrl, '_blank'); window.open(config.thirdPartyServiceUrl, '_blank');
// #endif // #endif
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
uni.setClipboardData({ data: serviceUrl }); if (config.thirdPartyMiniAppId) {
uni.showToast({ title: '客服链接已复制', icon: 'none' }); wx.navigateToMiniProgram({
appId: config.thirdPartyMiniAppId,
path: config.thirdPartyMiniAppPath || '',
fail: (err) => {
console.error('跳转第三方小程序失败:', err);
this.fallbackToPhoneCall();
}
});
} else {
uni.setClipboardData({
data: config.thirdPartyServiceUrl,
success: () => {
uni.showModal({
title: '客服链接已复制',
content: '客服链接已复制到剪贴板,请在浏览器中粘贴访问',
showCancel: false
});
}
});
}
// #endif // #endif
return; return;
} }
@@ -366,55 +389,106 @@ export class CustomerService {
this.fallbackToPhoneCall(); this.fallbackToPhoneCall();
} }
openAliappService(config) { /**
if (config.type === 'aikefu') { * 降级到电话客服
this.openDifyService(); */
} else if (config.type === 'third') { fallbackToPhoneCall() {
this.openThirdService(config); uni.showModal({
} else { title: '联系客服',
// 支付宝原生客服由 button open-type="contact" 触发,此处不处理 content: '在线客服暂时不可用,是否拨打电话联系客服?',
console.log('使用支付宝官方客服'); success: (res) => {
if (res.confirm) {
this.makePhoneCall();
} }
} }
// ================== 辅助方法 ==================
makePhoneCall() {
this.vm.$api.sendRequest({
url: '/api/site/shopcontact',
success: res => {
if (res.code === 0 && res.data?.mobile) {
uni.makePhoneCall({ phoneNumber: res.data.mobile });
} else {
uni.showToast({ title: '暂无客服电话', icon: 'none' });
}
},
fail: () => {
uni.showToast({ title: '获取客服电话失败', icon: 'none' });
}
}); });
} }
/**
* 打开支付宝小程序客服
* @param {Object} config 客服配置
*/
openAliappService(config) {
console.log('支付宝小程序客服', config);
switch (config.type) {
case 'aikefu':
this.openAIKeFuService();
break;
case 'third':
this.openThirdService(config);
break;
default:
console.log('使用支付宝官方客服');
break;
}
}
/**
* 拨打电话
*/
makePhoneCall(mobileNumber) {
if (mobileNumber) {
return uni.makePhoneCall({
phoneNumber: mobileNumber
});
}
// 从缓存中获取电话信息
uni.getStorage({
key: 'shopInfo',
success: (res) => {
const shopInfo = res.data;
const mobile = shopInfo?.mobile ?? '';
if (mobile) {
uni.makePhoneCall({
phoneNumber: mobile
});
} else {
uni.showToast({
title: '暂无客服电话',
icon: 'none'
});
}
}
});
}
/**
* 显示无客服弹窗
*/
showNoServicePopup() { showNoServicePopup() {
const siteInfo = this.vm.$store.state.siteInfo || {}; const siteInfo = this.vm.$store.state.siteInfo || {};
const message = siteInfo?.site_tel const message = siteInfo?.site_tel
? `请联系客服,客服电话是${siteInfo.site_tel}` ? `请联系客服,客服电话是${siteInfo.site_tel}`
: '抱歉,商家暂无客服,请线下联系'; : '抱歉,商家暂无客服,请线下联系';
uni.showModal({ title: '联系客服', content: message, showCancel: false });
}
showConfigErrorPopup(errors) {
uni.showModal({ uni.showModal({
title: '客服配置错误', title: '联系客服',
content: `配置有误:\n${errors.join('\n')}`, content: message,
showCancel: false showCancel: false
}); });
} }
/**
* 显示配置错误弹窗
* @param {Array} errors 错误列表
*/
showConfigErrorPopup(errors) {
const message = errors.join('\n');
uni.showModal({
title: '配置错误',
content: `客服配置有误:\n${message}`,
showCancel: false
});
}
/**
* 降级处理:使用原有客服方式
*/
fallbackToOriginalService() { fallbackToOriginalService() {
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
content: '无法直接添加企业微信,是否使用其他方式联系客服?', content: '无法直接添加企业微信客服,是否使用其他方式联系客服?',
success: (res) => { success: (res) => {
if (res.confirm) { if (res.confirm) {
this.openWxworkService(true); this.openWxworkService(true);
@@ -423,19 +497,9 @@ export class CustomerService {
}); });
} }
fallbackToPhoneCall() {
uni.showModal({
title: '提示',
content: '在线客服不可用,是否拨打电话联系客服?',
success: (res) => {
if (res.confirm) this.makePhoneCall();
}
});
}
/** /**
* 获取按钮配置(用于 template 中 v-if / open-type 判断) * 获取客服按钮配置
* @returns {Object} * @returns {Object} 按钮配置
*/ */
getButtonConfig() { getButtonConfig() {
const config = this.getPlatformConfig(); const config = this.getPlatformConfig();
@@ -443,24 +507,39 @@ export class CustomerService {
let openType = ''; let openType = '';
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
if (config.type === 'weapp' && config.useOfficial !== false) { if (config.type === 'weapp') {
openType = 'contact'; openType = config.useOfficial !== false ? 'contact' : '';
} }
// #endif // #endif
// #ifdef MP-ALIPAY // #ifdef MP-ALIPAY
if (config.type === 'aliapp') openType = 'contact'; if (config.type === 'aliapp') openType = 'contact';
// #endif // #endif
return { ...config, openType }; return { ...config, openType };
} }
/**
* 判断是否应该使用自定义客服处理
* @param {Object} config 客服配置
* @returns {boolean} 是否使用自定义客服
*/
shouldUseCustomService(config) {
// #ifdef MP-WEIXIN
if (config?.type === 'weapp') {
return config.useOfficial === false;
}
// #endif
return true;
}
} }
/** /**
* 创建客服服务实例 * 创建客服服务实例
* @param {Object} vueInstance Vue 实例(通常是 this * @param {Object} vueInstance Vue实例
* @param {Object} externalConfig 可选:外部传入的最新配置(如从 DIY 数据中提取) * @param {Object} externalConfig 外部最新配置
* @returns {CustomerService} * @returns {CustomerService} 客服服务实例
*/ */
export function createCustomerService(vueInstance, externalConfig = null) { export function createCustomerService(vueInstance, externalConfig = {}) {
return new CustomerService(vueInstance, externalConfig); return new CustomerService(vueInstance, externalConfig);
} }

View File

@@ -7,7 +7,7 @@ export default {
computed: { computed: {
// 是否是英文环境 // 是否是英文环境
isEnEnv() { isEnEnv() {
return uni.getStorageSync('lang') === 'en-us'; return this.$langConfig.getCurrentLocale() === 'en-us';
}, },
themeStyle() { themeStyle() {
return this.$store.state.themeStyle; return this.$store.state.themeStyle;
@@ -65,10 +65,6 @@ export default {
componentRefresh() { componentRefresh() {
return this.$store.state.componentRefresh; return this.$store.state.componentRefresh;
}, },
// AI客服配置
globalAIKefuConfig() {
return this.$store.state.globalAIKefuConfig;
},
// 客服配置 // 客服配置
servicerConfig() { servicerConfig() {
return this.$store.state.servicerConfig; return this.$store.state.servicerConfig;

View File

@@ -1,5 +1,6 @@
import { langConfig } from './config-external.js'; import { langConfig } from './config-external.js';
// 缓存已加载的语言包 // 缓存已加载的语言包
const loadedLangPacks = {}; const loadedLangPacks = {};
@@ -8,15 +9,21 @@ function processRoutePath(route) {
let routeParts = route.split("/"); let routeParts = route.split("/");
// ---- 处理页面目录映射 <begin> 分包造成的,需要根据实际目录结构进行映射---- // ---- 处理页面目录映射 <begin> 分包造成的,需要根据实际目录结构进行映射----
// 先处理特殊的分包路径
if (routeParts[0] === 'pages_tool') { if (routeParts[0] === 'pages_tool') {
// pages_tool 分包下的页面,直接使用子目录作为语言包路径
routeParts = [routeParts[1], ...routeParts.slice(2)]; routeParts = [routeParts[1], ...routeParts.slice(2)];
} else if (routeParts[0] === 'pages_goods') { } else if (routeParts[0] === 'pages_goods') {
// pages_goods 分包映射到 goods 目录
routeParts[0] = 'goods'; routeParts[0] = 'goods';
} else if (routeParts[0] === 'pages_member') { } else if (routeParts[0] === 'pages_member') {
// pages_member 分包映射到 member 目录
routeParts[0] = 'member'; routeParts[0] = 'member';
} else if (routeParts[0] === 'pages_order') { } else if (routeParts[0] === 'pages_order') {
// pages_order 分包映射到 order 目录
routeParts[0] = 'order'; routeParts[0] = 'order';
} else if (routeParts[0] === 'pages_promotion') { } else if (routeParts[0] === 'pages_promotion') {
// pages_promotion 分包特殊处理
const promotionModules = ['point', 'fenxiao', 'merch']; const promotionModules = ['point', 'fenxiao', 'merch'];
if (routeParts[1] && promotionModules.includes(routeParts[1])) { if (routeParts[1] && promotionModules.includes(routeParts[1])) {
routeParts = [routeParts[1], ...routeParts.slice(2)]; routeParts = [routeParts[1], ...routeParts.slice(2)];
@@ -24,6 +31,7 @@ function processRoutePath(route) {
} }
// ---- 处理页面目录映射 <end>---- // ---- 处理页面目录映射 <end>----
// 去掉pages目录只保留子目录
if (routeParts[0] === 'pages') { if (routeParts[0] === 'pages') {
routeParts = routeParts.slice(1); routeParts = routeParts.slice(1);
} }
@@ -46,32 +54,54 @@ function loadLangPackSync(lang, path) {
} }
} }
/**
* 获得当前本地语言
* @returns
*/
function getCurrentLocale() {
return uni.getStorageSync('lang') || "zh-cn";
}
export default { export default {
langList: langConfig.langList, langList: langConfig.langList,
/** /**
* 解析多语言 * 获得当前本地语言
* @returns
*/
getCurrentLocale,
/**
* * 解析多语言
* @param {Object} field
*/ */
lang(field) { lang(field) {
let _this = getCurrentPages()[getCurrentPages().length - 1]; let _page = getCurrentPages()[getCurrentPages().length - 1];
if (!_this) return; if (!_page) return;
const locale = uni.getStorageSync('lang') || "zh-cn"; const locale = getCurrentLocale(); // 获得当前本地语言
let value = ''; let value = ''; // 存放解析后的语言值
let langPath = ''; let langPath = ''; // 存放当前页面语言包路径
try { try {
//公共语言包(同步加载)
var lang = loadLangPackSync(locale, 'common'); var lang = loadLangPackSync(locale, 'common');
let route = _this.route; //当前页面语言包(同步加载)
let route = _page.route;
langPath = processRoutePath(route); langPath = processRoutePath(route);
// 加载当前页面语言包
let currentPageLang = loadLangPackSync(locale, langPath); let currentPageLang = loadLangPackSync(locale, langPath);
// 合并语言包
let mergedLang = { ...lang, ...currentPageLang }; let mergedLang = { ...lang, ...currentPageLang };
// 解析字段
var arr = field.split("."); var arr = field.split(".");
if (arr.length > 1) { if (arr.length > 1) {
// 处理嵌套属性,如 common.currencySymbol
let temp = mergedLang; let temp = mergedLang;
let found = true; let found = true;
for (let key of arr) { for (let key of arr) {
@@ -93,12 +123,14 @@ export default {
} }
if (arguments.length > 1) { if (arguments.length > 1) {
//有参数,需要替换
for (var i = 1; i < arguments.length; i++) { for (var i = 1; i < arguments.length; i++) {
value = value.replace("{" + (i - 1) + "}", arguments[i]); value = value.replace("{" + (i - 1) + "}", arguments[i]);
} }
} }
if (value == undefined || (value == 'title' && field == 'title')) value = ''; if (value == undefined || (value == 'title' && field == 'title')) value = ''; // field
// 多语言调试,注释后可以关闭控制台输出
if (field == value) { if (field == value) {
console.warn(`警告: 字段 ${field} 在语言包 ${langPath} 中未找到对应值,使用默认值 ${field} 当前语言: ${locale}`); console.warn(`警告: 字段 ${field} 在语言包 ${langPath} 中未找到对应值,使用默认值 ${field} 当前语言: ${locale}`);
} }
@@ -106,19 +138,23 @@ export default {
return value; return value;
}, },
/** /**
* 切换语言 * * 切换语言
* @param {String} value 语言值
* @param {String} url 切换后跳转的页面url
*/ */
change(value, url = '/pages_tool/member/index') { change(value, url = '/pages_tool/member/index') {
let _this = getCurrentPages()[getCurrentPages().length - 1]; let _page = getCurrentPages()[getCurrentPages().length - 1];
if (!_this) return; if (!_page) return;
uni.setStorageSync("lang", value); uni.setStorageSync("lang", value);
const locale = uni.getStorageSync('lang') || "zh-cn"; const locale = getCurrentLocale();
// ✅ 关键修复:清空所有语言包缓存(不再保留任何旧缓存) // 清空已加载的语言包缓存
for (let key in loadedLangPacks) { for (let key in loadedLangPacks) {
if (!key.startsWith(locale)) {
delete loadedLangPacks[key]; delete loadedLangPacks[key];
} }
}
this.refresh(); this.refresh();
@@ -128,16 +164,39 @@ export default {
}, },
//刷新标题、tabbar //刷新标题、tabbar
refresh() { refresh() {
let _this = getCurrentPages()[getCurrentPages().length - 1]; let _page = getCurrentPages()[getCurrentPages().length - 1];
if (!_this) return; if (!_page) return;
const locale = uni.getStorageSync('lang') || "zh-cn";
const locale = getCurrentLocale();
this.title(this.lang("title")); this.title(this.lang("title"));
//设置tabbar的文字语言
// uni.setTabBarItem({
// index: 0,
// text: this.lang("tabBar.home")
// });
// uni.setTabBarItem({
// index: 1,
// text: this.lang("tabBar.category")
// });
// uni.setTabBarItem({
// index: 2,
// text: this.lang("tabBar.cart")
// });
// uni.setTabBarItem({
// index: 3,
// text: this.lang("tabBar.member")
// });
}, },
title(str) { title(str) {
if (str) { if (str) {
uni.setNavigationBarTitle({ uni.setNavigationBarTitle({
title: str title: str,
success: function (res) {
},
fail: function (err) {
}
}); });
} }
}, },
@@ -145,6 +204,7 @@ export default {
list() { list() {
var list = []; var list = [];
try { try {
//公共语言包
for (var i = 0; i < langConfig.langList.length; i++) { for (var i = 0; i < langConfig.langList.length; i++) {
let langType = langConfig.langList[i]; let langType = langConfig.langList[i];
let item = loadLangPackSync(langType, 'common'); let item = loadLangPackSync(langType, 'common');

View File

@@ -156,11 +156,11 @@
</script> </script>
<style lang="scss"> <style lang="scss">
/deep/.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box { ::v-deep .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
background-color: #000; background-color: #000;
} }
/deep/.uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box { ::v-deep .uni-popup__wrapper.uni-custom.center .uni-popup__wrapper-box {
max-width: 100%; max-width: 100%;
width: 100%; width: 100%;
} }
@@ -179,7 +179,6 @@
.chat-message { .chat-message {
width: 100%; width: 100%;
height: 100%; height: 100%;
background: white; /* 白色 */
.message { .message {
padding: 13rpx 20rpx; padding: 13rpx 20rpx;
@@ -271,7 +270,7 @@
flex-direction: row-reverse; flex-direction: row-reverse;
.content { .content {
background-color: #c4e0ff; /* 浅蓝色 */ background-color: #4cd964;
margin-right: 28rpx; margin-right: 28rpx;
word-break: break-all; word-break: break-all;
line-height: 36rpx; line-height: 36rpx;

View File

@@ -1,57 +1,43 @@
<template> <template>
<view v-if="pageCount == 1 || need" class="fixed-box" <!-- 悬浮按钮 -->
:style="[customContainerStyle, { <view v-if="pageCount == 1 || need" class="fixed-box" :style="[customContainerStyle, {
height: containerHeight, height: fixBtnShow ? '400rpx' : '320rpx',
backgroundImage: bgUrl ? `url(${bgUrl})` : '', backgroundImage: bgUrl ? `url(${bgUrl})` : '',
backgroundSize: 'cover' backgroundSize: 'cover'
}]"> }]">
<!-- 统一客服入口根据后台配置自动适配 AI / 企业微信 / 第三方等 -->
<!-- 微信官方客服需要使用 button open-type="contact" -->
<button
v-if="fixBtnShow && isWeappOfficialKefu"
class="btn-item common-bg"
open-type="contact"
:style="{ backgroundImage: currentKefuImg ? `url( $ {currentKefuImg})` : '', backgroundSize: '100% 100%' }"
>
<text class="ai-icon" v-if="!currentKefuImg">🤖</text>
</button>
<!-- 其他类型客服使用普通 view -->
<view
v-else-if="fixBtnShow"
class="btn-item common-bg"
@click="handleUnifiedKefuClick"
:style="{ backgroundImage: currentKefuImg ? `url( $ {currentKefuImg})` : '', backgroundSize: '100% 100%' }"
>
<text class="ai-icon" v-if="!currentKefuImg">🤖</text>
</view>
<!-- 新增小程序系统客服按钮当附加设置开启时显示 -->
<button
v-if="fixBtnShow && showWeappSystemKefu"
class="btn-item common-bg"
open-type="contact"
:style="{ backgroundImage: currentKefuImg ? `url( $ {currentKefuImg})` : '', backgroundSize: '100% 100%' }"
>
<text class="ai-icon" v-if="!currentKefuImg">💬</text>
</button>
<!-- 中英文切换按钮 --> <!-- 中英文切换按钮 -->
<view <view v-if="isLanguageSwitchEnabled && fixBtnShow" class="btn-item common-bg" @click="toggleLanguage">
v-if="isLanguageSwitchEnabled && fixBtnShow"
class="btn-item common-bg"
@click="toggleLanguage"
>
<text>{{ currentLangDisplayName }}</text> <text>{{ currentLangDisplayName }}</text>
</view> </view>
<!-- AI 智能助手 -->
<view v-if="fixBtnShow && enableAIChat" class="btn-item common-bg" @click="openAIChat"
:style="{ backgroundImage: aiAgentimg ? `url(${aiAgentimg})` : '', backgroundSize: '100% 100%' }">
<text class="ai-icon" v-if="!aiAgentimg">🤖</text>
</view>
<!-- 微信小程序客服按钮 -->
<!-- #ifdef MP-WEIXIN -->
<button class="btn-item common-bg" hoverClass="none" openType="contact" sessionFrom="weapp" showMessageCard="true"
:style="[{ backgroundImage: kefuimg ? `url(${kefuimg})` : '', backgroundSize: '100% 100%' }, customButtonStyle]">
<text class="icox icox-kefu" v-if="!kefuimg"></text>
</button>
<!-- #endif -->
<!-- 普通客服仅当未启用 AI 时显示 -->
<!-- #ifdef H5 -->
<template v-if="fixBtnShow">
<button class="btn-item common-bg" hoverClass="none" @click="openCustomerSelectPopup"
:style="[{ backgroundImage: kefuimg ? `url(${kefuimg})` : '', backgroundSize: '100% 100%' }, customButtonStyle]">
<text class="icox icox-kefu" v-if="!kefuimg"></text>
</button>
</template>
<!-- #endif -->
<!-- 电话按钮始终显示 --> <!-- 电话按钮始终显示 -->
<view <view v-if="fixBtnShow" class="btn-item common-bg" @click="call()"
v-if="fixBtnShow" :style="[{ backgroundImage: phoneimg ? `url(${phoneimg})` : '', backgroundSize: '100% 100%' }, customButtonStyle]">
class="btn-item common-bg"
@click="call()"
:style="[{ backgroundImage: phoneimg ? `url( $ {phoneimg})` : '', backgroundSize: '100% 100%' }, customButtonStyle]"
>
<text class="iconfont icon-dianhua" v-if="!phoneimg"></text> <text class="iconfont icon-dianhua" v-if="!phoneimg"></text>
</view> </view>
@@ -70,18 +56,16 @@ export default {
return { return {
pageCount: 0, pageCount: 0,
fixBtnShow: true, fixBtnShow: true,
shopInfo: null, shopInfo: null,
currentLangIndex: 0, currentLangIndex: 0,
langIndexMap: {}, langIndexMap: {},
kefuList: [
{ id: 'weixin-official', name: '微信官方客服', isOfficial: true, type: 'weapp' }, customerService: null,
{ id: 'custom-kefu', name: '自定义在线客服', isOfficial: false, type: 'custom' },
{ id: 'qyweixin-kefu', name: '企业微信客服', isOfficial: false, type: 'qyweixin' }
],
selectedKefu: null,
}; };
}, },
computed: { computed: {
// 安全读取 shopInfo 中的字段,避免 undefined 报错
bgUrl() { bgUrl() {
return this.shopInfo?.bgUrl || ''; return this.shopInfo?.bgUrl || '';
}, },
@@ -100,6 +84,9 @@ export default {
isLanguageSwitchEnabled() { isLanguageSwitchEnabled() {
return !!this.shopInfo?.ischina; return !!this.shopInfo?.ischina;
}, },
enableAIChat() {
return !!this.shopInfo?.enableAIChat;
},
currentLangDisplayName() { currentLangDisplayName() {
const lang = this.langIndexMap[this.currentLangIndex]; const lang = this.langIndexMap[this.currentLangIndex];
return lang === 'zh-cn' ? 'EN' : 'CN'; return lang === 'zh-cn' ? 'EN' : 'CN';
@@ -109,87 +96,30 @@ export default {
}, },
customButtonStyle() { customButtonStyle() {
return this.shopInfo?.floatingButton?.button || {}; return this.shopInfo?.floatingButton?.button || {};
},
unreadCount() {
return this. $store.state.aiUnreadCount || 0;
},
// ✅ 新增:根据当前客服类型动态返回图标
currentKefuImg() {
if (!this.shopInfo) return '';
const customerService = createCustomerService(this);
const config = customerService.getPlatformConfig();
if (config?.type === 'aikefu') {
return this.aiAgentimg;
} else if (config?.type === 'wxwork' || config?.type === 'qyweixin') {
// 企业微信客服专用图标
return this.aiAgentimg;
}
// 默认客服图标
return this.kefuimg;
},
// ✅ 新增:判断是否为微信官方客服
isWeappOfficialKefu() {
if (!this.shopInfo) return false;
const customerService = createCustomerService(this);
const config = customerService.getPlatformConfig();
return config?.type === 'weapp';
},
// ✅ 新增:判断是否需要同时显示小程序系统客服
showWeappSystemKefu() {
if (!this.shopInfo) return false;
const customerService = createCustomerService(this);
const config = customerService.getPlatformConfig();
// 检查附加设置是否开启了同时显示小程序系统客服,且当前客服类型不是小程序系统客服
return (config?.show_system_service === true || config?.show_system_service === '1') && config?.type !== 'weapp';
},
//根据显示的按钮数量动态计算容器高度
containerHeight() {
if (!this.fixBtnShow) return '320rpx';
let buttonCount = 1;
if (this.isLanguageSwitchEnabled) buttonCount++;
if (this.showWeappSystemKefu) buttonCount++;
buttonCount++;
const totalRpx = 94 * buttonCount - 14;
const pxValue = Math.round(totalRpx * 0.5);
return ` $ {pxValue}px`;
}
},
watch: {
shopInfo: {
handler(newVal) {
// 可在此添加额外逻辑(如埋点、通知等),当前无需操作
},
immediate: true
} }
}, },
created() { created() {
this.customerService = createCustomerService(this);
this.initLanguage(); this.initLanguage();
this.pageCount = getCurrentPages().length;
uni.getStorage({ uni.getStorage({
key: 'shopInfo', key: 'shopInfo',
success: (e) => { success: (e) => {
console.log('【调试】当前 shopInfo:', e.data);
this.shopInfo = e.data; this.shopInfo = e.data;
},
fail: () => {
console.warn('未获取到 shopInfo使用默认设置');
} }
}); });
}, },
methods: { methods: {
/**
* 初始化多语言配置
*/
initLanguage() { initLanguage() {
this.langList = this.$langConfig.list(); this.langList = this.$langConfig.list();
this.langIndexMap = {}; this.langIndexMap = {};
for (let i = 0; i < this.langList.length; i++) { for (let i = 0; i < this.langList.length; i++) {
this.langIndexMap[i] = this.langList[i].value; this.langIndexMap[i] = this.langList[i].value;
} }
const savedLang = uni.getStorageSync('lang'); const savedLang = this.$langConfig.getCurrentLocale();
if (savedLang) { if (savedLang) {
for (let i = 0; i < this.langList.length; i++) { for (let i = 0; i < this.langList.length; i++) {
if (this.langList[i].value === savedLang) { if (this.langList[i].value === savedLang) {
@@ -201,118 +131,43 @@ export default {
this.currentLangIndex = 0; this.currentLangIndex = 0;
} }
}, },
/**
* 电话联系客服
*/
call() { call() {
if (this.tel) { this.customerService.makePhoneCall(this.tel);
uni.makePhoneCall({ phoneNumber: this.tel + '' });
} else {
uni.showToast({ title: '暂无联系电话', icon: 'none' });
}
}, },
/**
* 切换中英文语言,并刷新当前页面(保留所有参数)
*/
toggleLanguage() { toggleLanguage() {
this.currentLangIndex = this.currentLangIndex === 0 ? 1 : 0; this.currentLangIndex = this.currentLangIndex === 0 ? 1 : 0;
const targetLang = this.langIndexMap[this.currentLangIndex]; const targetLang = this.langIndexMap[this.currentLangIndex];
// 调用语言切换逻辑(设置 storage + 清空缓存)
this.$langConfig.change(targetLang); this.$langConfig.change(targetLang);
if (uni.getSystemInfoSync().platform === 'browser') {
setTimeout(() => {
window.location.reload();
}, 100);
}
}, },
// ✅ 核心方法:统一客服入口 /**
handleUnifiedKefuClick() { * 打开 AI 智能助手
const customerService = createCustomerService(this); */
const validation = customerService.validateConfig(); openAIChat() {
this.$util.redirectTo(this.$util.AI_CHAT_PAGE_URL);
console.log('【客服配置验证】', validation);
if (!validation.isValid) {
console.error('客服配置无效:', validation.errors);
uni.showToast({ title: '客服暂不可用', icon: 'none' });
return;
}
if (validation.warnings.length > 0) {
console.warn('客服配置警告:', validation.warnings);
}
const platformConfig = customerService.getPlatformConfig();
console.log('【当前客服配置】', platformConfig);
// 检查企业微信配置
if (platformConfig.type === 'wxwork') {
const wxworkConfig = customerService.getWxworkConfig();
console.log('【企业微信配置】', wxworkConfig);
// #ifdef MP-WEIXIN
if (!wxworkConfig?.enable || !wxworkConfig?.contact_url) {
console.warn('企业微信配置不完整,使用原生客服');
uni.showToast({ title: '企业微信配置不完整', icon: 'none' });
}
// #endif
// #ifdef H5
if (!wxworkConfig?.contact_url && !platformConfig.wxwork_url) {
console.error('企业微信链接未配置');
uni.showToast({ title: '企业微信链接未配置', icon: 'none' });
return;
}
// #endif
}
// 直接调用统一处理方法,由 CustomerService 内部根据配置路由
try {
customerService.handleCustomerClick({
sendMessageTitle: '来自悬浮按钮的咨询',
sendMessagePath: '/pages/index/index'
});
} catch (error) {
console.error('客服处理失败:', error);
uni.showToast({ title: '打开客服失败', icon: 'none' });
}
}, },
// 以下方法保留用于 actionSheet如仍需手动选择 /**
openKefuSelectPopup() { * 打开客服选择对话框
const kefuNames = this.kefuList.map(item => item.name); */
uni.showActionSheet({ openCustomerSelectPopup() {
itemList: kefuNames, this.customerService.openCustomerSelectPopupDialog();
success: (res) => {
this.selectedKefu = this.kefuList[res.tapIndex];
const cs = createCustomerService(this, this.selectedKefu);
if (this.selectedKefu.isOfficial) {
uni.openCustomerServiceConversation({
sessionFrom: 'weapp',
showMessageCard: true
});
} else if (this.selectedKefu.id === 'qyweixin-kefu') {
// 处理企业微信客服
if (uni.getSystemInfoSync().platform === 'wechat') {
// 小程序端:跳转到企业微信客服
uni.navigateTo({
url: '/pages_tool/qyweixin-kefu/index'
});
} else {
// H5端跳转到企业微信链接
const qyweixinUrl = this.shopInfo.qyweixinUrl; // 后端返回的企业微信链接
if (qyweixinUrl) {
window.location.href = qyweixinUrl;
} else {
uni.showToast({ title: '企业微信客服未配置', icon: 'none' });
}
}
} else {
cs.handleCustomerClick();
}
}
});
} }
} }
} }
</script> </script>
<style scoped> <style lang="scss" scoped>
.fixed-box { .fixed-box {
position: fixed; position: fixed;
right: 0rpx; right: 0rpx;
@@ -333,16 +188,27 @@ export default {
} }
.btn-item { .btn-item {
display: flex;
justify-content: center;
text-align: center;
flex-direction: column;
line-height: 1;
margin: 14rpx 0;
transition: 0.1s;
color: var(--hover-nav-text-color);
border-radius: 40rpx;
width: 80rpx; width: 80rpx;
height: 80rpx; height: 80rpx;
background: #fff; padding: 0;
border-radius: 50%; overflow: hidden;
display: flex;
align-items: center;
justify-content: center;
margin: 14rpx 0;
box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
} }
/* 定义共同的背景颜色 */
.common-bg {
background-color: var(--hover-nav-bg-color);
/* 使用变量以保持一致性 */
}
.btn-item text { .btn-item text {
font-size: 28rpx; font-size: 28rpx;
} }
@@ -357,7 +223,6 @@ export default {
justify-content: center; justify-content: center;
align-items: center; align-items: center;
margin: 14rpx 0; margin: 14rpx 0;
background: #fff;
border-radius: 50rpx; border-radius: 50rpx;
width: 80rpx; width: 80rpx;
height: 80rpx; height: 80rpx;
@@ -371,21 +236,7 @@ export default {
font-weight: bold; font-weight: bold;
} }
.unread-badge {
position: absolute;
top: -5rpx;
right: -5rpx;
background-color: #ff4544;
color: white;
border-radius: 20rpx;
min-width: 30rpx;
height: 30rpx;
font-size: 20rpx;
line-height: 30rpx;
text-align: center;
padding: 0 8rpx;
box-shadow: 0 2rpx 10rpx rgba(255, 69, 68, 0.3);
}
.ai-icon { .ai-icon {
font-size: 40rpx; font-size: 40rpx;

View File

@@ -104,7 +104,7 @@
}, },
"router" : { "router" : {
"mode" : "history", "mode" : "history",
"base" : "/hwappx/common/" "base" : "/hwappx/2811/"
}, },
"title" : "", "title" : "",
"devServer" : { "devServer" : {

View File

@@ -321,6 +321,12 @@
"navigationBarTitleText": "AI 客服" "navigationBarTitleText": "AI 客服"
} }
}, },
{
"path": "agreement/contenr",
"style": {
"navigationBarTitleText": ""
}
},
{ {
"path": "vr/index", "path": "vr/index",
"style": { "style": {
@@ -919,6 +925,12 @@
// #endif // #endif
"navigationBarTitleText": "查看文件" "navigationBarTitleText": "查看文件"
} }
},
{
"path": "file-preview/file-preview",
"style": {
"navigationBarTitleText": "文件预览"
}
} }
] ]
} }

View File

@@ -17,7 +17,11 @@
}}</view> }}</view>
</view> </view>
<diy-index-page v-if="topIndexValue" ref="indexPage" :value="topIndexValue" :bgUrl="safeBgUrl" <!-- <view class="page-header" v-if="diyData.global && diyData.global.navBarSwitch" :style="{ backgroundImage: bgImg }">
<ns-navbar :title-color="textNavColor" :data="diyData.global" :scrollTop="scrollTop" :isBack="false"/>
</view> -->
<diy-index-page v-if="topIndexValue" ref="indexPage" :value="topIndexValue" :bgUrl="bgUrl"
:scrollTop="scrollTop" :diyGlobal="diyData.global" class="diy-index-page"> :scrollTop="scrollTop" :diyGlobal="diyData.global" class="diy-index-page">
<template v-slot:components> <template v-slot:components>
<diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop" <diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop"
@@ -29,7 +33,7 @@
</diy-index-page> </diy-index-page>
<view v-else class="bg-index" <view v-else class="bg-index"
:style="{ backgroundImage: backgroundUrlStyle, paddingTop: paddingTop, marginTop: marginTop }"> :style="{ backgroundImage: backgroundUrl, paddingTop: paddingTop, marginTop: marginTop }">
<diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop" <diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop"
:followOfficialAccount="followOfficialAccount" /> :followOfficialAccount="followOfficialAccount" />
<ns-copyright v-show="isShowCopyRight" /> <ns-copyright v-show="isShowCopyRight" />
@@ -39,17 +43,35 @@
<view @touchmove.prevent.stop> <view @touchmove.prevent.stop>
<uni-popup ref="uniPopupWindow" type="center" class="wap-floating" :maskClick="false"> <uni-popup ref="uniPopupWindow" type="center" class="wap-floating" :maskClick="false">
<view class="small-bot"> <view class="small-bot">
<!-- <view class="adver-time" wx:if="{{startadv.params.style=='default'&&startadv.params.canclose==1}}">
<view bindtap="adverclose">跳过</view>
<view class="time">{{clock}}s</view>
</view>
<view class="adver-time" wx:if="{{startadv.params.style=='default'&&startadv.params.canclose==0}}">
<view class="time" style="line-height: 64rpx;">{{clock}}s</view>
</view> -->
<swiper autoplay="true" :circular="true" indicator-active-color="#fff" <swiper autoplay="true" :circular="true" indicator-active-color="#fff"
indicator-color="rgba(255,255,255,0.6)" :indicator-dots="true" interval="3000"> indicator-color="rgba(255,255,255,0.6)" :indicator-dots="true" interval="3000">
<swiper-item v-for="(item, index) in adv.list" :key="index"> <swiper-item v-for="(item, index) in adv.list" :key="index">
<image class="slide-image" @click="$util.diyRedirectTo(item.link)" height="100%" <image class="slide-image" @click="$util.diyRedirectTo(item.link)" height="100%"
:src="$util.img(item.imageUrl)" width="100%"></image> :src="$util.img(item.imageUrl)" width="100%"></image>
<!-- <image bindtap="adverclose" class="slide-image" height="100%" src="{{item.imgurl}}" width="100%" wx:if="{{item.click==1}}"></image> -->
</swiper-item> </swiper-item>
</swiper> </swiper>
<view class="small-bot-close" @click="closePopupWindow"> <view bindtap="adverclose" class="small-bot-close" @click="closePopupWindow">
<i class="iconfont icon-round-close" style="color:#fff"></i> <i class="iconfont icon-round-close" style="color:#fff"></i>
</view> </view>
</view> </view>
<!-- <view class="image-wrap">
<swiper class="swiper" style="width:100%;height: 1200rpx;" :autoplay="true" interval="3000" circular="true" :indicator-dots="true" indicator-color="#000" indicator-active-color="red">
<swiper-item class="swiper-item" v-for="(item, index) in adv.list" :key="index" v-if="item.imageUrl" @click="$util.diyRedirectTo(item.link)">
<view class="item">
<image :src="$util.img(item.imageUrl)" mode="aspectFit" :show-menu-by-longpress="true"/>
</view>
</swiper-item>
</swiper>
</view>
<text class="iconfont icon-round-close" @click="closePopupWindow"></text> -->
</uni-popup> </uni-popup>
</view> </view>
</template> </template>
@@ -79,7 +101,7 @@
</view> </view>
</uni-popup> </uni-popup>
<!-- 选择门店弹出框 --> <!-- 选择门店弹出框定位当前位置展示最近的一个门店 -->
<view @touchmove.prevent.stop class="choose-store"> <view @touchmove.prevent.stop class="choose-store">
<uni-popup ref="chooseStorePopup" type="center" :maskClick="false" class="choose-store"> <uni-popup ref="chooseStorePopup" type="center" :maskClick="false" class="choose-store">
<view class="choose-store-popup"> <view class="choose-store-popup">
@@ -115,6 +137,7 @@
</uni-popup> </uni-popup>
</view> </view>
<hover-nav :need="true"></hover-nav> <hover-nav :need="true"></hover-nav>
<!-- 隐私协议 -->
<privacy-popup ref="privacyPopup"></privacy-popup> <privacy-popup ref="privacyPopup"></privacy-popup>
<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top> <to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
<ns-login ref="login"></ns-login> <ns-login ref="login"></ns-login>
@@ -123,45 +146,14 @@
</template> </template>
<script> <script>
import diyJs from '@/common/js/diy.js'; import diyJs from '@/common/js/diy.js';
import scroll from '@/common/js/scroll-view.js'; import scroll from '@/common/js/scroll-view.js';
import indexJs from './public/js/index.js'; import indexJs from './public/js/index.js';
export default { export default {
mixins: [diyJs, scroll, indexJs], mixins: [diyJs, scroll, indexJs]
data() {
return {
diyData: { global: {}, value: null },
followOfficialAccount: {},
wechatQrcode: '',
adv: { advshow: -1, list: [] },
// ❌ 不要定义 siteInfo、bgUrl除非你明确知道它们不会冲突
};
},
computed: {
// ✅ 安全获取 bgUrl用于 diy-index-page 的 prop
safeBgUrl() {
// 优先取全局配置中的 bgUrl没有则用组件自己的 bgUrl如有否则为空
return this.diyData?.global?.bgUrl || this.bgUrl || '';
},
// ✅ 安全生成 background-image 样式字符串(用于 fallback 区域)
backgroundUrlStyle() {
const url = this.diyData?.global?.bgUrl || this.bgUrl || '';
return url ? `url(${url})` : 'none';
}
},
// 如果你的 mixin 中已经处理了数据加载,这里可以留空
// 否则建议在 created/mounted 中初始化默认值或请求数据
created() {
// 可选:如果 mixin 没有初始化 diyData这里再兜底一次
if (!this.diyData) {
this.diyData = { global: {}, value: null };
}
}
}; };
</script> </script>
@@ -208,9 +200,8 @@ export default {
font-size: 60rpx; font-size: 60rpx;
} }
</style> </style>
<style scoped> <style scoped>
.swiper /deep/ .uni-swiper-dots-horizontal { .swiper ::v-deep .uni-swiper-dots-horizontal {
left: 40%; left: 40%;
bottom: 40px bottom: 40px
} }
@@ -223,26 +214,26 @@ export default {
width: 80%; width: 80%;
} }
/deep/.diy-index-page .uni-popup .uni-popup__wrapper-box { ::v-deep .diy-index-page .uni-popup .uni-popup__wrapper-box {
border-radius: 0; border-radius: 0;
} }
/deep/ .placeholder { ::v-deep .placeholder {
height: 0; height: 0;
} }
/deep/::-webkit-scrollbar { ::v-deep ::-webkit-scrollbar {
width: 0; width: 0;
height: 0; height: 0;
background-color: transparent; background-color: transparent;
display: none; display: none;
} }
/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box { ::v-deep .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
max-height: unset !important; max-height: unset !important;
} }
/deep/ .mescroll-totop { ::v-deep .mescroll-totop {
/* #ifdef H5 */ /* #ifdef H5 */
right: 28rpx !important; right: 28rpx !important;
bottom: 200rpx !important; bottom: 200rpx !important;

View File

@@ -1,11 +1,7 @@
<template> <template>
<view class="ai-chat-container"> <view class="ai-chat-container">
<!-- 聊天消息列表 --> <!-- 聊天消息列表 -->
<scroll-view <scroll-view class="chat-messages" scroll-y :scroll-top="scrollTop" @scroll="onScroll"
class="chat-messages"
scroll-y
:scroll-top="scrollTop"
@scroll="onScroll"
:scroll-with-animation="false"> :scroll-with-animation="false">
<!-- 加载更多历史消息 --> <!-- 加载更多历史消息 -->
@@ -14,11 +10,7 @@
</view> </view>
<!-- 消息列表 --> <!-- 消息列表 -->
<view <view v-for="item in messagesWithKey" :key="item.__renderKey" class="message-item" :class="[item.role, { 'first-message': item.__index === 0 }]">
v-for="(message, index) in messages"
:key="`msg-${message.id || message.timestamp}-${index}`"
class="message-item"
:class="[message.role, { 'first-message': index === 0 }]">
<!-- 用户消息 --> <!-- 用户消息 -->
<view v-if="message.role === 'user'" class="user-message"> <view v-if="message.role === 'user'" class="user-message">
@@ -85,21 +77,12 @@
<text class="audio-duration">{{ formatDuration(message.duration) }}</text> <text class="audio-duration">{{ formatDuration(message.duration) }}</text>
</view> </view>
<view class="audio-controls"> <view class="audio-controls">
<button <button class="play-btn" :class="{ playing: message.playing }" @click="toggleAudio(message)">
class="play-btn"
:class="{ playing: message.playing }"
@click="toggleAudio(message)">
<text class="iconfont" :class="message.playing ? 'icon-pause' : 'icon-play'"></text> <text class="iconfont" :class="message.playing ? 'icon-pause' : 'icon-play'"></text>
</button> </button>
<slider <slider class="audio-slider" :value="message.currentTime || 0" :max="message.duration || 0"
class="audio-slider" @changing="onAudioSliderChange" @change="onAudioSliderChangeEnd" activeColor="#8a9fb8"
:value="message.currentTime || 0" backgroundColor="#e8edf3" block-size="12" />
:max="message.duration || 0"
@changing="onAudioSliderChange"
@change="onAudioSliderChangeEnd"
activeColor="#8a9fb8"
backgroundColor="#e8edf3"
block-size="12" />
</view> </view>
</view> </view>
</view> </view>
@@ -107,14 +90,8 @@
<!-- 视频消息 --> <!-- 视频消息 -->
<view v-else-if="message.type === 'video'" class="video-content"> <view v-else-if="message.type === 'video'" class="video-content">
<view class="video-player"> <view class="video-player">
<video <video :src="message.url" :poster="message.cover" :controls="true" :autoplay="false"
:src="message.url" class="video-element" @play="onVideoPlay(message)" @pause="onVideoPause(message)">
:poster="message.cover"
:controls="true"
:autoplay="false"
class="video-element"
@play="onVideoPlay(message)"
@pause="onVideoPause(message)">
</video> </video>
<view class="video-info"> <view class="video-info">
<text class="video-title">{{ message.title || '视频消息' }}</text> <text class="video-title">{{ message.title || '视频消息' }}</text>
@@ -163,12 +140,8 @@
<!-- 操作按钮 --> <!-- 操作按钮 -->
<view class="message-actions" v-if="message.actions && message.actions.length > 0"> <view class="message-actions" v-if="message.actions && message.actions.length > 0">
<button <button v-for="action in message.actions" :key="action.id" class="action-btn"
v-for="action in message.actions" :class="[`iconfont`, action.icon, action.type]" @click="handleAction(action, message)">
:key="action.id"
class="action-btn"
:class="[`iconfont`, action.icon, action.type]"
@click="handleAction(action, message)">
{{ action.text }} {{ action.text }}
</button> </button>
</view> </view>
@@ -199,21 +172,11 @@
</view> </view>
<view class="input-container"> <view class="input-container">
<textarea <textarea v-model="inputText" class="message-input" placeholder="请输入您的问题..." :maxlength="500"
v-model="inputText" :auto-height="true" :show-confirm-bar="false" @confirm="sendMessage" @input="onInput" />
class="message-input"
placeholder="请输入您的问题..."
:maxlength="500"
:auto-height="true"
:show-confirm-bar="false"
@confirm="sendMessage"
@input="onInput" />
<!-- 发送按钮 --> <!-- 发送按钮 -->
<button <button class="send-btn" :class="{ disabled: !inputText.trim() }" @click="sendMessage"
class="send-btn"
:class="{ disabled: !inputText.trim() }"
@click="sendMessage"
:disabled="!inputText.trim()"> :disabled="!inputText.trim()">
<text>发送</text> <text>发送</text>
</button> </button>
@@ -271,11 +234,7 @@
</view> </view>
<view class="voice-content"> <view class="voice-content">
<view class="voice-wave" :class="{ recording: voiceInputing }"> <view class="voice-wave" :class="{ recording: voiceInputing }">
<view <view v-for="i in 8" :key="i" class="wave-bar" :style="{ animationDelay: (i * 0.1) + 's' }"></view>
v-for="i in 8"
:key="i"
class="wave-bar"
:style="{ animationDelay: (i * 0.1) + 's' }"></view>
</view> </view>
<text class="voice-tip">{{ voiceInputing ? '正在录音,松开结束' : '点击开始录音' }}</text> <text class="voice-tip">{{ voiceInputing ? '正在录音,松开结束' : '点击开始录音' }}</text>
</view> </view>
@@ -331,23 +290,15 @@
</view> </view>
<view class="nickname-editor-content"> <view class="nickname-editor-content">
<view class="nickname-input-container"> <view class="nickname-input-container">
<input <input v-model="tempNickname" class="nickname-input" placeholder="请输入您的新昵称" :maxlength="12" type="text" />
v-model="tempNickname"
class="nickname-input"
placeholder="请输入您的新昵称"
:maxlength="12"
type="text" />
</view> </view>
<view class="nickname-tip">昵称长度限制1-12个字符仅自己可见</view> <view class="nickname-tip">昵称长度限制1-12个字符仅自己可见</view>
<view class="nickname-editor-actions"> <view class="nickname-editor-actions">
<button class="nickname-action-btn cancel" @click="closeNicknameEditor"> <button class="nickname-action-btn cancel" @click="closeNicknameEditor">
<text>取消</text> <text>取消</text>
</button> </button>
<button <button class="nickname-action-btn confirm" :class="{ disabled: !tempNickname.trim() }"
class="nickname-action-btn confirm" :disabled="!tempNickname.trim()" @click="saveNickname">
:class="{ disabled: !tempNickname.trim() }"
:disabled="!tempNickname.trim()"
@click="saveNickname">
<text>保存</text> <text>保存</text>
</button> </button>
</view> </view>
@@ -440,15 +391,20 @@ export default {
isFetchingHistory: false isFetchingHistory: false
} }
}, },
onShow() { computed: {
// 如果不是 AI 客服,立即退出并跳转 // 为每条消息生成兼容小程序的唯一 key
if (customerServiceType !== 'ai') { messagesWithKey() {
uni.showToast({ title: '当前客服类型不支持此页面', icon: 'none' }); return this.messages.map((msg, idx) => {
setTimeout(() => { const uniqueId = msg.id || msg.timestamp || idx;
uni.navigateBack({ delta: 1 }); // 或 redirectTo 首页 return {
}, 1000); ...msg,
return; // ⚠️ 关键:阻止后续初始化 __renderKey: `msg_${uniqueId}_${idx}`,
__index: idx // 保留原始索引,用于判断 first-message 等
};
});
} }
},
onShow() {
// 优先读取本地缓存的会话 ID // 优先读取本地缓存的会话 ID
const localConvId = this.getConversationIdFromLocal(); const localConvId = this.getConversationIdFromLocal();
if (localConvId) { if (localConvId) {
@@ -818,7 +774,6 @@ export default {
}, },
// 发送流式消息 // 发送流式消息
// 发送流式消息(自动适配 H5 / 微信小程序)
async sendStreamMessage(userMessage) { async sendStreamMessage(userMessage) {
// 创建流式消息对象 // 创建流式消息对象
const streamMessage = { const streamMessage = {
@@ -828,36 +783,35 @@ export default {
content: '', content: '',
timestamp: Date.now(), timestamp: Date.now(),
isStreaming: true isStreaming: true
}; }
// 移除加载状态,添加流式消息 // 移除加载状态,添加流式消息
this.messages = this.messages.filter(msg => msg.type !== 'loading'); this.messages = this.messages.filter(msg => msg.type !== 'loading')
this.shouldScrollToBottom = true; this.shouldScrollToBottom = true
this.messages.push(streamMessage); this.messages.push(streamMessage)
try { // 开始流式响应
// #ifdef H5 await aiService.sendStreamMessage(
// ===== H5: 使用 POST + 流式 (fetch readable stream) =====
await aiService.sendHttpStream(
userMessage, userMessage,
// 流式数据回调
(chunk) => { (chunk) => {
// 实时更新内容 streamMessage.content += chunk
streamMessage.content += chunk; this.$forceUpdate() // 或 this.$nextTick()
this.$forceUpdate(); // 强制更新视图
}, },
// 完成回调:处理对象或字符串
(completeResult) => { (completeResult) => {
// 流结束回调
let finalContent = ''; let finalContent = '';
let convId = ''; let convId = '';
// 判断是对象还是字符串
if (typeof completeResult === 'string') { if (typeof completeResult === 'string') {
finalContent = completeResult; finalContent = completeResult;
} else { } else {
finalContent = completeResult.content || ''; finalContent = completeResult.content || '';
convId = completeResult.conversation_id || ''; convId = completeResult.conversation_id || ''; // 👈 关键:提取 conversation_id
} }
// 更新最终内容 // 更新消息状态
streamMessage.isStreaming = false; streamMessage.isStreaming = false;
streamMessage.content = finalContent; streamMessage.content = finalContent;
@@ -867,71 +821,17 @@ export default {
{ id: 2, text: '没帮助', type: 'dislike' } { id: 2, text: '没帮助', type: 'dislike' }
]; ];
// 保存会话 ID // 保存 conversation_id 到本地
if (convId) { if (convId) {
this.currentConversationId = convId;
aiService.setConversationId(convId); aiService.setConversationId(convId);
this.saveConversationIdToLocal(convId);
} }
// 触发事件 // 触发事件
this.$emit('ai-response', streamMessage); this.$emit('ai-response', streamMessage);
}
);
// #endif
// #ifdef MP-WEIXIN
// ===== 微信小程序: 使用 WebSocket =====
await aiService.sendStreamMessage(
userMessage,
(chunk) => {
// 实时更新内容
streamMessage.content += chunk;
this.$forceUpdate();
},
(completeResult) => {
// 流结束回调
let finalContent = completeResult?.content || '';
let convId = completeResult?.conversation_id || '';
// 更新最终内容
streamMessage.isStreaming = false;
streamMessage.content = finalContent;
// 添加操作按钮
streamMessage.actions = [
{ id: 1, text: '有帮助', type: 'like' },
{ id: 2, text: '没帮助', type: 'dislike' }
];
// 保存会话 ID
if (convId) {
this.currentConversationId = convId;
aiService.setConversationId(convId);
this.saveConversationIdToLocal(convId); this.saveConversationIdToLocal(convId);
} this.currentConversationId = convId;
// 触发事件
this.$emit('ai-response', streamMessage);
} }
); );
// #endif
} catch (error) {
console.error('流式请求失败:', error);
// 移除流式消息
this.messages = this.messages.filter(msg => msg.id !== streamMessage.id);
// 显示错误
const errorMsg = {
id: ++this.messageId,
role: 'ai',
type: 'text',
content: '抱歉,服务暂时不可用,请稍后重试。',
timestamp: Date.now(),
actions: [{ id: 1, text: '重试', type: 'retry' }]
};
this.messages.push(errorMsg);
this.$emit('ai-response', errorMsg);
}
}, },
generateAIResponse(userMessage) { generateAIResponse(userMessage) {
const responses = { const responses = {
@@ -1452,7 +1352,7 @@ $radius-lg: 36rpx;
display: flex; display: flex;
flex-direction: column; flex-direction: column;
/* 仅新增:科技感粉蓝渐变背景 + 流动动画 */ /* 仅新增:科技感粉蓝渐变背景 + 流动动画 */
background: white; /* 白色 */ background: linear-gradient(135deg, #fde6f7 0%, #f8b7e8 20%, #c4e0ff 50%, #8cb4ff 80%, #ffffff 100%);
background-size: 200% 200%; background-size: 200% 200%;
animation: gradient-flow 15s ease infinite; animation: gradient-flow 15s ease infinite;
/* 原有样式保持不变 */ /* 原有样式保持不变 */
@@ -1466,7 +1366,8 @@ $radius-lg: 36rpx;
padding: 24rpx 32rpx; padding: 24rpx 32rpx;
overflow-y: auto; overflow-y: auto;
box-sizing: border-box; box-sizing: border-box;
min-height: 0; /* 重要防止flex元素溢出 */ min-height: 0;
/* 重要防止flex元素溢出 */
.load-more { .load-more {
text-align: center; text-align: center;
@@ -1481,7 +1382,8 @@ $radius-lg: 36rpx;
margin-top: 24rpx; margin-top: 24rpx;
} }
.user-message, .ai-message { .user-message,
.ai-message {
display: flex; display: flex;
align-items: flex-start; align-items: flex-start;
@@ -1512,7 +1414,25 @@ $radius-lg: 36rpx;
margin-left: 24rpx; margin-left: 24rpx;
max-width: calc(100% - 112rpx); max-width: calc(100% - 112rpx);
min-width: 0; min-width: 0;
width: 0; /* 添加这个属性防止flex元素溢出 */ width: 0;
/* 添加这个属性防止flex元素溢出 */
.message-nickname {
font-size: 24rpx;
color: $color-text-light;
margin-bottom: 8rpx;
letter-spacing: 0.5rpx;
text-align: right;
}
// AI昵称专属样式 - 左移到气泡上方
.ai-nickname {
text-align: left;
margin-left: 0;
padding-left: 0;
align-self: flex-start;
margin-bottom: 4rpx;
}
.message-bubble { .message-bubble {
padding: 24rpx 32rpx; padding: 24rpx 32rpx;
@@ -1933,28 +1853,6 @@ $radius-lg: 36rpx;
} }
} }
/* ========== 关键修复:拆分 .message-nickname 样式 ========== */
.message-nickname {
font-size: 24rpx;
color: $color-text-light;
margin-bottom: 8rpx;
letter-spacing: 0.5rpx;
}
/* 用户昵称:右对齐 */
.user-message .message-nickname {
text-align: right;
}
/* AI 昵称:使用 .ai-nickname 类控制 */
.ai-nickname {
text-align: left;
margin-left: 0;
padding-left: 0;
align-self: flex-start;
margin-bottom: 4rpx;
}
/* 用户消息特有样式 */ /* 用户消息特有样式 */
.user-message { .user-message {
flex-direction: row-reverse; flex-direction: row-reverse;
@@ -1965,20 +1863,27 @@ $radius-lg: 36rpx;
text-align: right; text-align: right;
.message-bubble { .message-bubble {
background: #c4e0ff !important; /* 浅蓝色 */ background: linear-gradient(135deg, #ffadd2, #f783ac) !important;
color: black !important; /* 粉色渐变 */
border-radius: 16rpx 16rpx 4rpx 16rpx; /* 右对齐气泡尖角适配 */ color: white !important;
box-shadow: 0 8rpx 20rpx rgba(196, 224, 255, 0.3) !important; border-radius: 16rpx 16rpx 4rpx 16rpx;
/* 右对齐气泡尖角适配 */
box-shadow: 0 8rpx 20rpx rgba(247, 131, 172, 0.3) !important;
border: none !important; border: none !important;
/* ✅ 关键:允许内容撑开高度 */ /* ✅ 关键:允许内容撑开高度 */
min-height: auto; min-height: auto;
height: auto; height: auto;
padding: 24rpx 32rpx; /* 保留内边距 */ padding: 24rpx 32rpx;
display: inline-block; /* 让宽度也随内容收缩(可选) */ /* 保留内边距 */
max-width: 80%; /* 防止过宽 */ display: inline-block;
/* 让宽度也随内容收缩(可选) */
max-width: 80%;
/* 防止过宽 */
word-break: break-word; word-break: break-word;
white-space: pre-wrap; /* 保留用户输入的换行符 */ white-space: pre-wrap;
/* 保留用户输入的换行符 */
line-height: 1.6; line-height: 1.6;
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
@@ -1986,7 +1891,8 @@ $radius-lg: 36rpx;
right: -14rpx; right: -14rpx;
width: 24rpx; width: 24rpx;
height: 24rpx; height: 24rpx;
background: #ffffff !important; /* 菱形改为白色 */ background: #ffffff !important;
/* 菱形改为白色 */
border-radius: 6rpx; border-radius: 6rpx;
transform: rotate(45deg); transform: rotate(45deg);
box-shadow: 4rpx -4rpx 4rpx rgba(0, 0, 0, 0.05); box-shadow: 4rpx -4rpx 4rpx rgba(0, 0, 0, 0.05);
@@ -1999,11 +1905,9 @@ $radius-lg: 36rpx;
left: -100%; left: -100%;
width: 50%; width: 50%;
height: 100%; height: 100%;
background: linear-gradient( background: linear-gradient(to right,
to right,
rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0) 0%,
rgba(255, 255, 255, 0.15) 100% rgba(255, 255, 255, 0.15) 100%);
);
animation: shine 4s infinite linear; animation: shine 4s infinite linear;
} }
} }
@@ -2019,11 +1923,13 @@ $radius-lg: 36rpx;
align-items: flex-start; align-items: flex-start;
.message-bubble { .message-bubble {
background: white !important; /* 白色 */ background: linear-gradient(135deg, #dbeafe, #bfdbfe) !important;
color: black !important; /* 蓝色浅渐变 */
border-radius: 16rpx 16rpx 16rpx 4rpx; /* 左对齐气泡尖角适配 */ color: #2c3e50 !important;
box-shadow: 0 8rpx 20rpx rgba(0, 0, 0, 0.1) !important; border-radius: 16rpx 16rpx 16rpx 4rpx;
border: 1rpx solid #e0e0e0 !important; /* 左对齐气泡尖角适配 */
box-shadow: 0 8rpx 20rpx rgba(191, 219, 254, 0.4) !important;
border: 1rpx solid #dbeafe !important;
min-height: auto; min-height: auto;
height: auto; height: auto;
padding: 24rpx 32rpx; padding: 24rpx 32rpx;
@@ -2032,6 +1938,7 @@ $radius-lg: 36rpx;
word-break: break-word; word-break: break-word;
white-space: pre-wrap; white-space: pre-wrap;
line-height: 1.6; line-height: 1.6;
&::before { &::before {
content: ''; content: '';
position: absolute; position: absolute;
@@ -2039,7 +1946,8 @@ $radius-lg: 36rpx;
left: -14rpx; left: -14rpx;
width: 24rpx; width: 24rpx;
height: 24rpx; height: 24rpx;
background: #ffffff !important; /* 菱形改为白色 */ background: #ffffff !important;
/* 菱形改为白色 */
border-radius: 6rpx; border-radius: 6rpx;
transform: rotate(45deg); transform: rotate(45deg);
box-shadow: -4rpx 4rpx 4rpx rgba(0, 0, 0, 0.05); box-shadow: -4rpx 4rpx 4rpx rgba(0, 0, 0, 0.05);
@@ -2055,7 +1963,7 @@ $radius-lg: 36rpx;
/* 输入区域 */ /* 输入区域 */
.input-area { .input-area {
background: #c4e0ff; /* 浅蓝色 */ background: linear-gradient(135deg, #fde6f7 0%, #f8b7e8 20%, #c4e0ff 50%, #8cb4ff 80%, #ffffff 100%);
border-top: 2rpx solid #f0f4f8; border-top: 2rpx solid #f0f4f8;
padding: 24rpx 32rpx; padding: 24rpx 32rpx;
/* 确保在微信小程序中紧贴底部 */ /* 确保在微信小程序中紧贴底部 */
@@ -2139,9 +2047,12 @@ $radius-lg: 36rpx;
font-size: 28rpx; font-size: 28rpx;
font-weight: 500; font-weight: 500;
border: none; border: none;
text-align: center; /* 兼容多端文字居中 */ text-align: center;
white-space: nowrap; /* 强制文字单行横向显示 */ /* 兼容多端文字居中 */
line-height: 1; /* 重置行高,避免文字垂直偏移 */ white-space: nowrap;
/* 强制文字单行横向显示 */
line-height: 1;
/* 重置行高,避免文字垂直偏移 */
top: -10px; top: -10px;
&.disabled { &.disabled {
@@ -2165,8 +2076,10 @@ $radius-lg: 36rpx;
left: 0; left: 0;
right: 0; right: 0;
bottom: 0; bottom: 0;
pointer-events: none; /* 让鼠标事件穿透容器,不影响主内容交互 */ pointer-events: none;
z-index: 999; /* 基础弹窗层级 */ /* 让鼠标事件穿透容器,不影响主内容交互 */
z-index: 999;
/* 基础弹窗层级 */
/* 子弹窗需要开启 pointer-events否则点击无效 */ /* 子弹窗需要开启 pointer-events否则点击无效 */
>.tools-popup, >.tools-popup,
@@ -2537,14 +2450,45 @@ $radius-lg: 36rpx;
border-radius: 4rpx; border-radius: 4rpx;
animation: none; animation: none;
&:nth-child(1) { height: 60rpx; animation-delay: 0s; } &:nth-child(1) {
&:nth-child(2) { height: 90rpx; animation-delay: 0.1s; } height: 60rpx;
&:nth-child(3) { height: 50rpx; animation-delay: 0.2s; } animation-delay: 0s;
&:nth-child(4) { height: 120rpx; animation-delay: 0.3s; } }
&:nth-child(5) { height: 70rpx; animation-delay: 0.4s; }
&:nth-child(6) { height: 100rpx; animation-delay: 0.5s; } &:nth-child(2) {
&:nth-child(7) { height: 80rpx; animation-delay: 0.6s; } height: 90rpx;
&:nth-child(8) { height: 40rpx; animation-delay: 0.7s; } animation-delay: 0.1s;
}
&:nth-child(3) {
height: 50rpx;
animation-delay: 0.2s;
}
&:nth-child(4) {
height: 120rpx;
animation-delay: 0.3s;
}
&:nth-child(5) {
height: 70rpx;
animation-delay: 0.4s;
}
&:nth-child(6) {
height: 100rpx;
animation-delay: 0.5s;
}
&:nth-child(7) {
height: 80rpx;
animation-delay: 0.6s;
}
&:nth-child(8) {
height: 40rpx;
animation-delay: 0.7s;
}
} }
} }
@@ -2712,10 +2656,13 @@ $radius-lg: 36rpx;
/* 动画定义 */ /* 动画定义 */
@keyframes dotPulse { @keyframes dotPulse {
0%, 100% {
0%,
100% {
opacity: 0.4; opacity: 0.4;
transform: scale(0.8); transform: scale(0.8);
} }
50% { 50% {
opacity: 1; opacity: 1;
transform: scale(1.2); transform: scale(1.2);
@@ -2723,10 +2670,13 @@ $radius-lg: 36rpx;
} }
@keyframes wave { @keyframes wave {
0%, 100% {
0%,
100% {
transform: scaleY(0.5); transform: scaleY(0.5);
opacity: 0.7; opacity: 0.7;
} }
50% { 50% {
transform: scaleY(1); transform: scaleY(1);
opacity: 1; opacity: 1;
@@ -2737,6 +2687,7 @@ $radius-lg: 36rpx;
0% { 0% {
left: -100%; left: -100%;
} }
100% { 100% {
left: 200%; left: 200%;
} }
@@ -2746,9 +2697,11 @@ $radius-lg: 36rpx;
0% { 0% {
background-position: 0% 50%; background-position: 0% 50%;
} }
50% { 50% {
background-position: 100% 50%; background-position: 100% 50%;
} }
100% { 100% {
background-position: 0% 50%; background-position: 0% 50%;
} }
@@ -2785,7 +2738,8 @@ $radius-lg: 36rpx;
.message-item { .message-item {
margin-bottom: 24rpx; margin-bottom: 24rpx;
.user-message, .ai-message { .user-message,
.ai-message {
.avatar { .avatar {
width: 72rpx; width: 72rpx;
height: 72rpx; height: 72rpx;

View File

@@ -1,5 +1,5 @@
<template> <template>
<view class="container" :style="wrapperPageStyle"> <view class="ai-chat-page" :style="wrapperPageStyle">
<!--自定义导航头部 --> <!--自定义导航头部 -->
<view class="custom-navbar" ref="pageHeader" v-if="showCustomNavbar"> <view class="custom-navbar" ref="pageHeader" v-if="showCustomNavbar">
<view class="header-left"> <view class="header-left">
@@ -51,11 +51,12 @@
import { mapGetters, mapMutations } from 'vuex' import { mapGetters, mapMutations } from 'vuex'
import navigationHelper from '@/common/js/navigation'; import navigationHelper from '@/common/js/navigation';
import { EventSafety } from '@/common/js/event-safety'; import { EventSafety } from '@/common/js/event-safety';
import aiChatMessage from './ai-chat-message.vue'; import aiChatMessage from './ai-chat-message.vue';
export default { export default {
components: { components: {
aiChatMessage aiChatMessage,
}, },
data() { data() {
return { return {
@@ -85,11 +86,11 @@ export default {
// --- 聊天内容区域 --- // --- 聊天内容区域 ---
scrollViewHeight: '0px', scrollViewHeight: '0px',
// 事件处理器引用(用于清理) // 事件处理器引用(用于清理)
safeEventHandlers: new Map() safeEventHandlers: new Map()
} }
}, },
computed: { computed: {
...mapGetters([ ...mapGetters([
'globalAIKefuConfig' 'globalAIKefuConfig'
@@ -120,42 +121,35 @@ export default {
wrapperChatContentStyle() { wrapperChatContentStyle() {
return { return {
height: this.containerHeight, height: this.containerHeight,
paddingTop: this.showCustomNavbar ? '0' : (this.navBarHeight + 'px') paddingTop: this.showCustomNavbar ? '0' : (this.navHeight + 'px')
} }
} }
}, },
async onLoad(options) { async onLoad(options) {
// ✅ 修改:取消权限校验,允许所有客服类型访问此页面 await this.initPage(options)
// const hasAccess = this.checkAccessPermission();
// if (!hasAccess) {
// // 如果校验失败,不继续初始化
// return;
// }
this. $langConfig.title('AI智能客服');
this.initChat();
}, },
async onReady() { async onReady() {
await this.initNavigation(); await this.initNavigation()
}, },
onShow() { onShow() {
// 可在此补充逻辑(如刷新未读数)
}, },
onHide() { onHide() {
// 页面隐藏时可暂停音频等
}, },
onUnload() { onUnload() {
this.cleanup(); this.cleanup()
}, },
methods: { methods: {
// ========== 安全事件处理 ========== // ========== 安全事件处理 ==========
setupSafeEventListeners() { setupSafeEventListeners() {
// 使用 EventSafety 包装事件处理器
const safeHandlers = { const safeHandlers = {
serviceRequest: EventSafety.wrapEventHandler( serviceRequest: EventSafety.wrapEventHandler(
this.handleServiceRequest.bind(this), this.handleServiceRequest.bind(this),
@@ -171,41 +165,49 @@ export default {
) )
} }
this. $on('service.requestComponentInfo', safeHandlers.serviceRequest); // 注册事件监听
this. $on('navigation.requestInfo', safeHandlers.navigationRequest); this.$on('service.requestComponentInfo', safeHandlers.serviceRequest)
this. $on('component.interaction', safeHandlers.componentInteraction); this.$on('navigation.requestInfo', safeHandlers.navigationRequest)
this.$on('component.interaction', safeHandlers.componentInteraction)
this.safeEventHandlers.set('serviceRequest', safeHandlers.serviceRequest); // 保存处理器引用用于清理
this.safeEventHandlers.set('navigationRequest', safeHandlers.navigationRequest); this.safeEventHandlers.set('serviceRequest', safeHandlers.serviceRequest)
this.safeEventHandlers.set('componentInteraction', safeHandlers.componentInteraction); this.safeEventHandlers.set('navigationRequest', safeHandlers.navigationRequest)
this.safeEventHandlers.set('componentInteraction', safeHandlers.componentInteraction)
}, },
setupNavigationEvents() { setupNavigationEvents() {
// 监听窗口大小变化
uni.onWindowResize((res) => { uni.onWindowResize((res) => {
console.log('窗口大小变化:', res.size); console.log('窗口大小变化:', res.size)
this.calculateScrollViewHeight(); this.calculateScrollViewHeight()
}); })
}, },
// ========== 事件处理方法 ========== // ========== 事件处理方法 ==========
async handleServiceRequest(event) { async handleServiceRequest(event) {
console.log('处理服务请求:', EventSafety.extractEventData(event)); console.log('处理服务请求:', EventSafety.extractEventData(event))
// 安全地检查事件目标
if (event.matches('.service-component') || if (event.matches('.service-component') ||
event.detail?.componentType === 'service') { event.detail?.componentType === 'service') {
await this.processServiceRequest(event); await this.processServiceRequest(event)
} }
}, },
async handleNavigationRequest(event) { async handleNavigationRequest(event) {
console.log('处理导航请求:', event.type); console.log('处理导航请求:', event.type)
this.emitNavigationInfo(event);
// 提供导航信息
this.emitNavigationInfo(event)
}, },
handleComponentInteraction(event) { handleComponentInteraction(event) {
console.log('处理组件交互:', event.detail); console.log('处理组件交互:', event.detail)
this.processComponentInteraction(event);
// 安全地处理组件交互
this.processComponentInteraction(event)
}, },
handleEventError(error, event) { handleEventError(error, event) {
@@ -213,58 +215,74 @@ export default {
error: error.message, error: error.message,
eventType: event?.type, eventType: event?.type,
component: this.$options.name component: this.$options.name
}); })
this.showError('操作失败,请重试'); this.showError('操作失败,请重试')
}, },
// ========== 初始化页面 ========== // ========== 初始化页面 ==========
initChat() { async initPage(options = {}) {
console.log('AI聊天页面初始化'); this.$langConfig.title('AI智能客服');
this.initChat()
}, },
// 初始化导航栏相关配置
async initNavigation() { async initNavigation() {
try { try {
this.navBarHeight = await navigationHelper.getNavigationHeight(this, {forceRefresh: false}); // 获取导航栏高度
this.statusBarHeight = navigationHelper.getStatusBarHeight(); this.navBarHeight = await navigationHelper.getNavigationHeight(this, {forceRefresh: false})
this.calculateScrollViewHeight();
this.setupNavigationEvents(); // 获取状态栏高度
this.statusBarHeight = navigationHelper.getStatusBarHeight()
// 计算滚动视图高度
this.calculateScrollViewHeight()
// 注册导航相关事件
this.setupNavigationEvents()
} catch (error) { } catch (error) {
console.error('初始化导航栏失败:', error); console.error('初始化导航栏失败:', error)
this.setFallbackNavigationValues(); this.setFallbackNavigationValues()
} }
}, },
// 计算滚动视图高度
calculateScrollViewHeight() { calculateScrollViewHeight() {
const safeArea = navigationHelper.getSafeAreaInsets(); const safeArea = navigationHelper.getSafeAreaInsets()
const bottomInset = safeArea.bottom || 0; const bottomInset = safeArea.bottom || 0
const inputHeight = 120; const inputHeight = 120 // 输入区域高度
this.scrollViewHeight = `calc(100vh - $ {this.navBarHeight + this.statusBarHeight + inputHeight + bottomInset}px)`;
this.scrollViewHeight = `calc(100vh - ${this.navBarHeight + this.statusBarHeight + inputHeight + bottomInset}px)`
}, },
// 备用高度设置
setFallbackNavigationValues() { setFallbackNavigationValues() {
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
this.navBarHeight = 44; this.navBarHeight = 44
this.statusBarHeight = 20; this.statusBarHeight = 20
// #endif // #endif
// #ifdef H5 // #ifdef H5
this.navBarHeight = 44; this.navBarHeight = 44
this.statusBarHeight = 0; this.statusBarHeight = 0
// #endif // #endif
// #ifdef APP-PLUS // #ifdef APP-PLUS
this.navBarHeight = 88; this.navBarHeight = 88
this.statusBarHeight = 44; this.statusBarHeight = 44
// #endif // #endif
}, },
cleanup() { cleanup() {
// 清理事件监听器
this.safeEventHandlers.forEach((handler, eventType) => { this.safeEventHandlers.forEach((handler, eventType) => {
this. $off(eventType, handler); this.$off(eventType, handler)
}); })
this.safeEventHandlers.clear(); this.safeEventHandlers.clear()
console.log('组件清理完成');
console.log('组件清理完成')
}, },
showError(message) { showError(message) {
@@ -272,12 +290,19 @@ export default {
title: message, title: message,
icon: 'none', icon: 'none',
duration: 2000 duration: 2000
}); })
},
// 初始化聊天
initChat() {
// 可以在这里加载历史消息
console.log('AI聊天页面初始化')
}, },
// 返回上一页 // 返回上一页
goBack() { goBack() {
uni.navigateBack(); uni.navigateBack()
}, },
// 显示菜单 // 显示菜单
@@ -287,54 +312,59 @@ export default {
success: (res) => { success: (res) => {
switch (res.tapIndex) { switch (res.tapIndex) {
case 0: case 0:
this.clearChat(); this.clearChat()
break; break
case 1: case 1:
this.exportChat(); this.exportChat()
break; break
case 2: case 2:
this.showSettings(); this.showSettings()
break; break
case 3: case 3:
this.showHelp(); this.showHelp()
break; break
} }
} }
}); })
}, },
// 清空聊天
clearChat() { clearChat() {
uni.showModal({ uni.showModal({
title: '提示', title: '提示',
content: '确定要清空聊天记录吗?', content: '确定要清空聊天记录吗?',
success: (res) => { success: (res) => {
if (res.confirm) { if (res.confirm) {
this. $refs.chat.clearMessages(); this.$refs.chat.clearMessages()
// 重新添加欢迎消息
this.$refs.chat.addMessage({ this.$refs.chat.addMessage({
id: Date.now(), id: Date.now(),
role: 'ai', role: 'ai',
type: 'text', type: 'text',
content: '聊天记录已清空,有什么可以帮助您的吗?', content: '聊天记录已清空,有什么可以帮助您的吗?',
timestamp: Date.now() timestamp: Date.now()
}); })
} }
} }
}); })
}, },
// 导出聊天记录
exportChat() { exportChat() {
uni.showToast({ uni.showToast({
title: '功能开发中', title: '功能开发中',
icon: 'none' icon: 'none'
}); })
}, },
// 显示设置
showSettings() { showSettings() {
uni.navigateTo({ uni.navigateTo({
url: '/pages/settings/index' url: '/pages/settings/index'
}); })
}, },
// 显示帮助
showHelp() { showHelp() {
const helpMessage = { const helpMessage = {
id: Date.now(), id: Date.now(),
@@ -361,18 +391,27 @@ export default {
- **复制**: 长按消息可复制内容 - **复制**: 长按消息可复制内容
- **转发**: 支持消息转发功能`, - **转发**: 支持消息转发功能`,
timestamp: Date.now() timestamp: Date.now()
}; }
this. $refs.chat.addMessage(helpMessage); this.$refs.chat.addMessage(helpMessage)
}, },
// 用户发送消息
onMessageSent(message) { onMessageSent(message) {
console.log('用户发送消息:', message); console.log('用户发送消息:', message)
// 使用AI服务获取回复
// AI聊天组件内部已经集成了AI服务这里只需要监听事件
}, },
// AI回复消息
onAIResponse(message) { onAIResponse(message) {
console.log('AI回复消息:', message); console.log('AI回复消息:', message)
// 可以在这里处理AI回复后的逻辑
// 比如记录对话、更新状态等
}, },
// 生成AI回复
generateAIResponse(userMessage) { generateAIResponse(userMessage) {
const responses = [ const responses = [
'我理解您的需求,让我为您详细解答。', '我理解您的需求,让我为您详细解答。',
@@ -380,9 +419,9 @@ export default {
'根据您的问题,我建议您可以考虑以下几个方面:', '根据您的问题,我建议您可以考虑以下几个方面:',
'这个问题很常见,让我为您提供一些解决方案。', '这个问题很常见,让我为您提供一些解决方案。',
'我明白您的困惑,让我帮您分析一下。' '我明白您的困惑,让我帮您分析一下。'
]; ]
const randomResponse = responses[Math.floor(Math.random() * responses.length)]; const randomResponse = responses[Math.floor(Math.random() * responses.length)]
const aiMessage = { const aiMessage = {
id: Date.now(), id: Date.now(),
@@ -394,121 +433,112 @@ export default {
{ type: 'like', count: 0 }, { type: 'like', count: 0 },
{ type: 'dislike', count: 0 } { type: 'dislike', count: 0 }
] ]
}; }
this. $refs.chat.addMessage(aiMessage); this.$refs.chat.addMessage(aiMessage)
this. $emit('ai-response', aiMessage); this.$emit('ai-response', aiMessage)
}, },
// 操作按钮点击
onActionClick({ action, message }) { onActionClick({ action, message }) {
console.log('操作点击:', action, message)
switch (action.type) { switch (action.type) {
case 'like': case 'like':
uni.showToast({ title: '感谢您的反馈!', icon: 'success' }); uni.showToast({
break; title: '感谢您的反馈!',
icon: 'success'
})
break
case 'dislike': case 'dislike':
uni.showToast({ title: '我们会改进服务', icon: 'none' }); uni.showToast({
break; title: '我们会改进服务',
icon: 'none'
})
break
} }
}, },
// 历史消息加载完成
onHistoryLoaded(messages) { onHistoryLoaded(messages) {
console.log('历史消息加载完成:', messages.length); console.log('历史消息加载完成:', messages.length)
}, },
// 文件预览
onFilePreview(message) { onFilePreview(message) {
uni.showToast({ title: '打开文件: ' + message.fileName, icon: 'none' }); console.log('文件预览:', message)
uni.showToast({
title: '打开文件: ' + message.fileName,
icon: 'none'
})
}, },
// 音频播放
onAudioPlay(message) { onAudioPlay(message) {
console.log('音频播放:', message); console.log('音频播放:', message)
}, },
// 音频暂停
onAudioPause(message) { onAudioPause(message) {
console.log('音频暂停:', message); console.log('音频暂停:', message)
}, },
// 视频播放
onVideoPlay(message) { onVideoPlay(message) {
console.log('视频播放:', message); console.log('视频播放:', message)
}, },
// 视频暂停
onVideoPause(message) { onVideoPause(message) {
console.log('视频暂停:', message); console.log('视频暂停:', message)
}, },
// 链接打开
onLinkOpen(message) { onLinkOpen(message) {
console.log('链接打开:', message)
uni.showModal({ uni.showModal({
title: '打开链接', title: '打开链接',
content: `确定要打开链接:${message.url} 吗?`, content: `确定要打开链接:${message.url} 吗?`,
success: (res) => { success: (res) => {
if (res.confirm) { if (res.confirm) {
// #ifdef H5 // #ifdef H5
window.open(message.url, '_blank'); window.open(message.url, '_blank')
// #endif // #endif
// #ifdef APP-PLUS // #ifdef APP-PLUS
plus.runtime.openURL(message.url); plus.runtime.openURL(message.url)
// #endif // #endif
} }
} }
}); })
}, },
// 商品查看
onProductView(message) { onProductView(message) {
uni.showToast({ title: '查看商品: ' + message.title, icon: 'none' }); console.log('商品查看:', message)
uni.showToast({
title: '查看商品: ' + message.title,
icon: 'none'
})
}, },
// 输入内容变化
onInputChange(value) { onInputChange(value) {
console.log('输入内容:', value); console.log('输入内容:', value)
},
// ✅ 新增:权限校验(核心修复)
checkAccessPermission() {
const servicerConfig = this. $store.state.servicerConfig;
// 如果配置未加载延迟重试最多3次防白屏
if (!servicerConfig) {
console.warn('【AI客服】servicerConfig 未加载200ms后重试...');
setTimeout(() => {
this.checkAccessPermission();
}, 200);
return false;
}
let currentType = 'none';
// #ifdef MP-WEIXIN
currentType = servicerConfig?.weapp?.type || 'none';
// #endif
// #ifdef H5
currentType = servicerConfig?.h5?.type || 'none';
// #endif
if (currentType !== 'aikefu') {
uni.showToast({ title: '当前客服类型不支持此页面', icon: 'none' });
setTimeout(() => {
const pages = getCurrentPages();
if (pages.length > 1) {
uni.navigateBack();
} else {
// 回到首页(假设首页是 tab 页)
uni.switchTab({ url: '/pages/index/index' });
}
}, 1500);
return false;
}
return true;
} }
} }
} }
</script> </script>
<style lang="scss"> <style lang="scss">
/* 引入图标字体 */ /* 引入图标字体 */
@import url('/common/css/iconfont.css'); @import url('@/common/css/iconfont.css');
/* 页面样式 */ /* 页面样式 */
.container { .ai-chat-page {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
background-color: white; /* 白色 */ background-color: #f8f8f8;
overflow: hidden; overflow: hidden;
position: fixed; position: fixed;
top: 0; top: 0;
@@ -523,7 +553,7 @@ export default {
align-items: center; align-items: center;
justify-content: space-between; justify-content: space-between;
padding: 20rpx 30rpx; padding: 20rpx 30rpx;
background-color: #c4e0ff; /* 浅蓝色 */ background-color: white;
border-bottom: 2rpx solid #eeeeee; border-bottom: 2rpx solid #eeeeee;
.header-left { .header-left {
@@ -535,7 +565,7 @@ export default {
width: 60rpx; width: 60rpx;
height: 60rpx; height: 60rpx;
border-radius: 50%; border-radius: 50%;
background-color: #ffffff; /* 白色按钮 */ background-color: #f8f8f8;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -580,7 +610,7 @@ export default {
width: 60rpx; width: 60rpx;
height: 60rpx; height: 60rpx;
border-radius: 50%; border-radius: 50%;
background-color: #ffffff; /* 白色按钮 */ background-color: #f8f8f8;
display: flex; display: flex;
align-items: center; align-items: center;
justify-content: center; justify-content: center;
@@ -604,11 +634,18 @@ export default {
display: flex; display: flex;
flex-direction: column; flex-direction: column;
overflow: hidden; overflow: hidden;
top: 0;
left: 0;
right: 0;
bottom: 0;
} }
/* 底部tabBar占位样式 */ /* 底部tabBar占位样式 */
.page-bottom { .page-bottom {
width: 100%; width: 100%;
background-color: transparent; background-color: transparent;
} }
</style> </style>

View File

@@ -7,7 +7,7 @@
"setting": { "setting": {
"urlCheck": true, "urlCheck": true,
"es6": true, "es6": true,
"enhance": false, "enhance": true,
"postcss": true, "postcss": true,
"preloadBackgroundData": false, "preloadBackgroundData": false,
"minified": true, "minified": true,
@@ -39,19 +39,27 @@
"packNpmManually": false, "packNpmManually": false,
"packNpmRelationList": [], "packNpmRelationList": [],
"minifyWXSS": true, "minifyWXSS": true,
"compileWorklet": false, "condition": true,
"swc": false,
"disableSWC": true,
"minifyWXML": true, "minifyWXML": true,
"compileWorklet": true,
"localPlugins": false, "localPlugins": false,
"disableUseStrict": false, "disableUseStrict": false,
"useCompilerPlugins": false, "useCompilerPlugins": false
"condition": false,
"swc": false,
"disableSWC": true
}, },
"compileType": "miniprogram", "compileType": "miniprogram",
"libVersion": "3.12.0", "libVersion": "2.16.1",
"appid": "wx29215aa1bd97bbd6", "appid": "wx29215aa1bd97bbd6",
"projectname": "uniapp", "projectname": "uniapp",
"debugOptions": {
"hidedInDevtools": []
},
"scripts": {},
"staticServerOptions": {
"baseURL": "",
"servePath": ""
},
"isGameTourist": false, "isGameTourist": false,
"condition": { "condition": {
"search": { "search": {
@@ -72,7 +80,5 @@
"miniprogram": { "miniprogram": {
"list": [] "list": []
} }
}, }
"simulatorPluginLibVersion": {},
"editorSetting": {}
} }

View File

@@ -1,4 +1,4 @@
module.exports = { module.exports = {
baseUrl: "https://dev.aigc-quickapp.com/",//修改域名 baseUrl: "https://xcx6.aigc-quickapp.com/",//修改域名
uniacid: 1,//后台对应uniacid uniacid: 2811,//后台对应uniacid
}; };

View File

@@ -65,7 +65,6 @@ const store = new Vuex.Store({
bottomNavHidden: false, // 底部导航是否隐藏true隐藏false显示 bottomNavHidden: false, // 底部导航是否隐藏true隐藏false显示
aiUnreadCount: 10, // AI未读消息数量 aiUnreadCount: 10, // AI未读消息数量
globalAIKefuConfig: null, // AI客服配置 globalAIKefuConfig: null, // AI客服配置
customerServiceType: 'ai',
globalStoreConfig: null, // 门店配置 globalStoreConfig: null, // 门店配置
globalStoreInfo: null, // 门店信息 globalStoreInfo: null, // 门店信息
defaultStoreInfo: null, // 默认门店 defaultStoreInfo: null, // 默认门店
@@ -160,9 +159,6 @@ const store = new Vuex.Store({
state.globalAIKefuConfig = value; state.globalAIKefuConfig = value;
uni.setStorageSync('globalAIKefuConfig', value); // 初始化数据调用 uni.setStorageSync('globalAIKefuConfig', value); // 初始化数据调用
}, },
setCustomerServiceType(state, type) {
state.customerServiceType = type;
},
setGlobalStoreConfig(state, value) { setGlobalStoreConfig(state, value) {
state.globalStoreConfig = value; state.globalStoreConfig = value;
uni.setStorageSync('globalStoreConfig', value); // 初始化数据调用 uni.setStorageSync('globalStoreConfig', value); // 初始化数据调用
@@ -416,7 +412,7 @@ const store = new Vuex.Store({
}, },
// 生成主题颜色CSS变量 // 生成主题颜色CSS变量
themeColorSet() { themeColorSet() {
console.log('样式颜色设置...'); // console.log('样式颜色设置...');
let theme = this.state.themeStyle; let theme = this.state.themeStyle;
if (!theme?.main_color || !theme?.aux_color) return; if (!theme?.main_color || !theme?.aux_color) return;
try { try {
@@ -440,7 +436,7 @@ const store = new Vuex.Store({
} catch (e) { } catch (e) {
console.error('设置主题颜色失败', e); console.error('设置主题颜色失败', e);
} }
console.log('themeColor => ', this.state.themeColor); // console.log('themeColor => ', this.state.themeColor);
} }
} }
}) })