345 lines
9.8 KiB
JavaScript
345 lines
9.8 KiB
JavaScript
/**
|
|
* 客服统一处理服务
|
|
* 整合各种客服方式，提供统一的调用接口
|
|
*/
|
|
|
|
export class CustomerService {
|
|
constructor(vueInstance) {
|
|
this.vm = vueInstance;
|
|
}
|
|
|
|
/**
|
|
* 获取平台配置
|
|
* @returns {Object} 平台对应的客服配置
|
|
*/
|
|
getPlatformConfig() {
|
|
const servicerConfig = this.vm.$store.state.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);
|
|
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 客服配置
|
|
*/
|
|
openWeappService(config) {
|
|
// 微信小程序客服会由 open-type="contact" 自动处理
|
|
console.log('微信小程序客服');
|
|
}
|
|
|
|
/**
|
|
* 打开支付宝小程序客服
|
|
* @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') openType = 'contact';
|
|
// #endif
|
|
|
|
// #ifdef MP-ALIPAY
|
|
if (config.type === 'aliapp') openType = 'contact';
|
|
// #endif
|
|
|
|
return {
|
|
...config,
|
|
openType
|
|
};
|
|
}
|
|
}
|
|
|
|
/**
|
|
* 创建客服服务实例
|
|
* @param {Object} vueInstance Vue实例
|
|
* @returns {CustomerService} 客服服务实例
|
|
*/
|
|
export function createCustomerService(vueInstance) {
|
|
return new CustomerService(vueInstance);
|
|
} |