485 lines
15 KiB
JavaScript
485 lines
15 KiB
JavaScript
/**
|
||
* 客服统一处理服务
|
||
* 整合各种客服方式，提供统一的调用接口
|
||
*/
|
||
|
||
export class CustomerService {
|
||
constructor(vueInstance) {
|
||
this.vm = vueInstance;
|
||
}
|
||
|
||
/**
|
||
* 获取平台配置
|
||
* @returns {Object} 平台对应的客服配置
|
||
*/
|
||
getPlatformConfig() {
|
||
const servicerConfig = this.vm.$store.state.servicerConfig;
|
||
console.log(`客服配置：`, servicerConfig)
|
||
if (!servicerConfig) return null;
|
||
|
||
// #ifdef H5
|
||
return servicerConfig.h5;
|
||
// #endif
|
||
|
||
// #ifdef MP-WEIXIN
|
||
return servicerConfig.weapp;
|
||
// #endif
|
||
|
||
// #ifdef MP-ALIPAY
|
||
return servicerConfig.aliapp;
|
||
// #endif
|
||
|
||
return null;
|
||
}
|
||
|
||
/**
|
||
* 获取企业微信配置
|
||
* @returns {Object} 企业微信配置
|
||
*/
|
||
getWxworkConfig() {
|
||
return this.vm.$store.state.wxworkConfig;
|
||
}
|
||
|
||
/**
|
||
* 检查客服配置是否可用
|
||
* @returns {boolean} 是否有可用配置
|
||
*/
|
||
isConfigAvailable() {
|
||
const config = this.getPlatformConfig();
|
||
return config && typeof config === 'object' && config.type;
|
||
}
|
||
|
||
/**
|
||
* 验证客服配置完整性
|
||
* @returns {Object} 验证结果
|
||
*/
|
||
validateConfig() {
|
||
const config = this.getPlatformConfig();
|
||
const wxworkConfig = this.getWxworkConfig();
|
||
|
||
const result = {
|
||
isValid: true,
|
||
errors: [],
|
||
warnings: []
|
||
};
|
||
|
||
if (!config) {
|
||
result.isValid = false;
|
||
result.errors.push('客服配置不存在');
|
||
return result;
|
||
}
|
||
|
||
if (!config.type) {
|
||
result.isValid = false;
|
||
result.errors.push('客服类型未配置');
|
||
}
|
||
|
||
// 验证企业微信配置
|
||
if (config.type === 'wxwork') {
|
||
if (!wxworkConfig) {
|
||
result.isValid = false;
|
||
result.errors.push('企业微信配置不存在');
|
||
} else {
|
||
if (!wxworkConfig.enable) {
|
||
result.warnings.push('企业微信功能未启用');
|
||
}
|
||
if (!wxworkConfig.contact_url) {
|
||
result.warnings.push('企业微信活码链接未配置，将使用原有客服方式');
|
||
}
|
||
}
|
||
}
|
||
|
||
return result;
|
||
}
|
||
|
||
/**
|
||
* 获取客服类型
|
||
* @returns {string} 客服类型
|
||
*/
|
||
getServiceType() {
|
||
const config = this.getPlatformConfig();
|
||
return config?.type || 'none';
|
||
}
|
||
|
||
/**
|
||
* 处理客服点击事件
|
||
* @param {Object} options 选项参数
|
||
* @param {Object} options.niushop 牛商客服参数
|
||
* @param {string} options.sendMessageTitle 消息标题
|
||
* @param {string} options.sendMessagePath 消息路径
|
||
* @param {string} options.sendMessageImg 消息图片
|
||
*/
|
||
handleCustomerClick(options = {}) {
|
||
// 验证配置
|
||
const validation = this.validateConfig();
|
||
if (!validation.isValid) {
|
||
console.error('客服配置验证失败:', validation.errors);
|
||
this.showConfigErrorPopup(validation.errors);
|
||
return;
|
||
}
|
||
|
||
// 显示警告（如果有）
|
||
if (validation.warnings.length > 0) {
|
||
console.warn('客服配置警告:', validation.warnings);
|
||
}
|
||
|
||
const config = this.getPlatformConfig();
|
||
const {
|
||
niushop = {},
|
||
sendMessageTitle = '',
|
||
sendMessagePath = '',
|
||
sendMessageImg = ''
|
||
} = options;
|
||
|
||
// 检查是否为无客服类型
|
||
if (config.type === 'none') {
|
||
this.showNoServicePopup();
|
||
return;
|
||
}
|
||
|
||
// 根据类型处理客服
|
||
switch (config.type) {
|
||
case 'wxwork':
|
||
this.openWxworkService(false, config, options);
|
||
break;
|
||
case 'third':
|
||
this.openThirdService(config);
|
||
break;
|
||
case 'niushop':
|
||
this.openNiushopService(niushop);
|
||
break;
|
||
case 'weapp':
|
||
this.openWeappService(config, options);
|
||
break;
|
||
case 'aliapp':
|
||
this.openAliappService(config);
|
||
break;
|
||
default:
|
||
this.makePhoneCall();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 打开企业微信客服
|
||
* @param {boolean} useOriginalService 是否使用原有客服方式
|
||
* @param {Object} servicerConfig 客服配置
|
||
*/
|
||
openWxworkService(useOriginalService = false, servicerConfig = null, options = {}) {
|
||
const config = servicerConfig || this.getPlatformConfig();
|
||
const wxworkConfig = this.getWxworkConfig();
|
||
|
||
const {
|
||
sendMessageTitle = '',
|
||
sendMessagePath = '',
|
||
sendMessageImg = ''
|
||
} = options;
|
||
|
||
// #ifdef MP-WEIXIN
|
||
if (wxworkConfig?.enable && wxworkConfig?.contact_url && !useOriginalService) {
|
||
// 使用活码链接跳转到企业微信
|
||
wx.navigateToMiniProgram({
|
||
appId: 'wxeb490c6f9b154ef9', // 企业微信官方小程序AppID
|
||
path: `pages/contacts/externalContactDetail?url=${encodeURIComponent(wxworkConfig.contact_url)}`,
|
||
success: () => {
|
||
console.log('跳转企业微信成功');
|
||
},
|
||
fail: (err) => {
|
||
console.error('跳转企业微信失败:', err);
|
||
this.fallbackToOriginalService();
|
||
}
|
||
});
|
||
} else {
|
||
// 使用原有的客服会话方式
|
||
wx.openCustomerServiceChat({
|
||
extInfo: { url: config.wxwork_url },
|
||
corpId: config.corpid,
|
||
showMessageCard: true,
|
||
sendMessageTitle,
|
||
sendMessagePath,
|
||
sendMessageImg
|
||
});
|
||
}
|
||
// #endif
|
||
|
||
// #ifdef H5
|
||
if (wxworkConfig?.enable && wxworkConfig?.contact_url) {
|
||
window.location.href = wxworkConfig.contact_url;
|
||
} else {
|
||
location.href = config.wxwork_url;
|
||
}
|
||
// #endif
|
||
}
|
||
|
||
/**
|
||
* 打开第三方客服
|
||
* @param {Object} config 客服配置
|
||
*/
|
||
openThirdService(config) {
|
||
if (config.third_url) {
|
||
location.href = config.third_url;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 打开牛商客服
|
||
* @param {Object} niushop 牛商参数
|
||
*/
|
||
openNiushopService(niushop) {
|
||
if (Object.keys(niushop).length > 0) {
|
||
this.vm.$util.redirectTo('/pages_tool/chat/room', niushop);
|
||
} else {
|
||
this.makePhoneCall();
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 打开微信小程序客服
|
||
* @param {Object} config 客服配置
|
||
* @param {Object} options 选项参数
|
||
*/
|
||
openWeappService(config, options = {}) {
|
||
// 如果是官方客服，由 open-type="contact" 自动处理
|
||
if (!this.shouldUseCustomService(config)) {
|
||
console.log('使用官方微信小程序客服');
|
||
return;
|
||
}
|
||
|
||
// 自定义客服处理
|
||
console.log('使用自定义微信小程序客服');
|
||
|
||
// 这里可以实现自定义的客服逻辑
|
||
// 例如：跳转到自定义客服页面、显示客服弹窗等
|
||
const {
|
||
sendMessageTitle = '',
|
||
sendMessagePath = '',
|
||
sendMessageImg = ''
|
||
} = options;
|
||
|
||
// 实现自定义客服逻辑
|
||
this.handleCustomWeappService(config, options);
|
||
}
|
||
|
||
/**
|
||
* 处理自定义微信小程序客服
|
||
* @param {Object} config 客服配置
|
||
* @param {Object} options 选项参数
|
||
*/
|
||
handleCustomWeappService(config, options = {}) {
|
||
const {
|
||
sendMessageTitle = '',
|
||
sendMessagePath = '',
|
||
sendMessageImg = ''
|
||
} = options;
|
||
|
||
// 优先级1: 如果有自定义客服页面URL，跳转到自定义页面
|
||
if (config.customServiceUrl) {
|
||
// 构建带参数的URL
|
||
let url = config.customServiceUrl;
|
||
const params = [];
|
||
|
||
if (sendMessageTitle) params.push(`title=${encodeURIComponent(sendMessageTitle)}`);
|
||
if (sendMessagePath) params.push(`path=${encodeURIComponent(sendMessagePath)}`);
|
||
if (sendMessageImg) params.push(`img=${encodeURIComponent(sendMessageImg)}`);
|
||
|
||
if (params.length > 0) {
|
||
url += (url.includes('?') ? '&' : '?') + params.join('&');
|
||
}
|
||
|
||
uni.navigateTo({
|
||
url: url,
|
||
fail: (err) => {
|
||
console.error('跳转自定义客服页面失败:', err);
|
||
this.tryThirdPartyService(config, options);
|
||
}
|
||
});
|
||
return;
|
||
}
|
||
|
||
// 优先级2: 尝试第三方客服
|
||
this.tryThirdPartyService(config, options);
|
||
}
|
||
|
||
/**
|
||
* 尝试使用第三方客服
|
||
* @param {Object} config 客服配置
|
||
* @param {Object} options 选项参数
|
||
*/
|
||
tryThirdPartyService(config, options = {}) {
|
||
// 如果配置了第三方客服URL
|
||
if (config.thirdPartyServiceUrl) {
|
||
// #ifdef H5
|
||
window.open(config.thirdPartyServiceUrl, '_blank');
|
||
// #endif
|
||
|
||
// #ifdef MP-WEIXIN
|
||
// 微信小程序可以使用web-view或者跳转到第三方小程序
|
||
if (config.thirdPartyMiniAppId) {
|
||
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
|
||
return;
|
||
}
|
||
|
||
// 降级到电话客服
|
||
this.fallbackToPhoneCall();
|
||
}
|
||
|
||
/**
|
||
* 降级到电话客服
|
||
*/
|
||
fallbackToPhoneCall() {
|
||
uni.showModal({
|
||
title: '联系客服',
|
||
content: '在线客服暂时不可用，是否拨打电话联系客服？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
this.makePhoneCall();
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 打开支付宝小程序客服
|
||
* @param {Object} config 客服配置
|
||
*/
|
||
openAliappService(config) {
|
||
// 支付宝小程序客服会由 contact-button 组件自动处理
|
||
console.log('支付宝小程序客服');
|
||
}
|
||
|
||
/**
|
||
* 拨打电话
|
||
*/
|
||
makePhoneCall() {
|
||
this.vm.$api.sendRequest({
|
||
url: '/api/site/shopcontact',
|
||
success: res => {
|
||
if (res.code === 0 && res.data?.mobile) {
|
||
uni.makePhoneCall({
|
||
phoneNumber: res.data.mobile
|
||
});
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 显示无客服弹窗
|
||
*/
|
||
showNoServicePopup() {
|
||
const siteInfo = this.vm.$store.state.siteInfo;
|
||
const message = siteInfo?.site_tel
|
||
? `请联系客服，客服电话是${siteInfo.site_tel}`
|
||
: '抱歉，商家暂无客服，请线下联系';
|
||
|
||
uni.showModal({
|
||
title: '联系客服',
|
||
content: message,
|
||
showCancel: false
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 显示配置错误弹窗
|
||
* @param {Array} errors 错误列表
|
||
*/
|
||
showConfigErrorPopup(errors) {
|
||
const message = errors.join('\n');
|
||
uni.showModal({
|
||
title: '配置错误',
|
||
content: `客服配置有误：\n${message}`,
|
||
showCancel: false
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 降级处理：使用原有客服方式
|
||
*/
|
||
fallbackToOriginalService() {
|
||
uni.showModal({
|
||
title: '提示',
|
||
content: '无法直接添加企业微信客服，是否使用其他方式联系客服？',
|
||
success: (res) => {
|
||
if (res.confirm) {
|
||
console.log('降级处理：使用原有客服方式');
|
||
this.openWxworkService(true);
|
||
}
|
||
}
|
||
});
|
||
}
|
||
|
||
/**
|
||
* 获取客服按钮配置
|
||
* @returns {Object} 按钮配置
|
||
*/
|
||
getButtonConfig() {
|
||
const config = this.getPlatformConfig();
|
||
if (!config) return { openType: '' };
|
||
|
||
let openType = '';
|
||
|
||
// #ifdef MP-WEIXIN
|
||
if (config.type === 'weapp') {
|
||
// 检查是否使用官方客服
|
||
if (config.useOfficial !== false) { // 默认为true，使用官方客服
|
||
openType = 'contact';
|
||
}
|
||
}
|
||
// #endif
|
||
|
||
// #ifdef MP-ALIPAY
|
||
if (config.type === 'aliapp') openType = 'contact';
|
||
// #endif
|
||
|
||
return {
|
||
...config,
|
||
openType
|
||
};
|
||
}
|
||
|
||
/**
|
||
* 判断是否应该使用自定义客服处理
|
||
* @param {Object} config 客服配置
|
||
* @returns {boolean} 是否使用自定义客服
|
||
*/
|
||
shouldUseCustomService(config) {
|
||
// #ifdef MP-WEIXIN
|
||
// 如果是微信小程序且type为weapp，检查useOfficial配置
|
||
if (config?.type === 'weapp') {
|
||
return config.useOfficial === false; // 明确设置为false才使用自定义
|
||
}
|
||
// #endif
|
||
|
||
// 其他平台或类型都使用自定义处理
|
||
return true;
|
||
}
|
||
}
|
||
|
||
/**
|
||
* 创建客服服务实例
|
||
* @param {Object} vueInstance Vue实例
|
||
* @returns {CustomerService} 客服服务实例
|
||
*/
|
||
export function createCustomerService(vueInstance) {
|
||
return new CustomerService(vueInstance);
|
||
} |