Compare commits

...

4 Commits

3 changed files with 683 additions and 699 deletions

View File

@@ -2,10 +2,21 @@
* 客服统一处理服务 * 客服统一处理服务
* 整合各种客服方式,提供统一的调用接口 * 整合各种客服方式,提供统一的调用接口
*/ */
export class CustomerService { export class CustomerService {
constructor(vueInstance) { constructor(vueInstance, externalConfig = null) {
this.vm = vueInstance; this.vm = vueInstance;
this.externalConfig = externalConfig; // 外部传入的最新配置(优先级最高)
this.latestPlatformConfig = null;
}
/**
* 强制刷新配置(支持传入外部配置)
* @param {Object} externalConfig 外部最新配置
*/
refreshConfig(externalConfig = null) {
this.externalConfig = externalConfig || this.externalConfig;
this.latestPlatformConfig = null;
return this.getPlatformConfig();
} }
/** /**
@@ -13,23 +24,38 @@ export class CustomerService {
* @returns {Object} 平台对应的客服配置 * @returns {Object} 平台对应的客服配置
*/ */
getPlatformConfig() { getPlatformConfig() {
const servicerConfig = this.vm.$store.state.servicerConfig; if (this.latestPlatformConfig) {
console.log(`客服配置:`, servicerConfig) return this.latestPlatformConfig;
if (!servicerConfig) return null; }
// 优先级:外部传入的最新配置 > vuex配置 > 空对象
const servicerConfig = this.externalConfig || this.vm.$store.state.servicerConfig || {};
console.log(`【实时客服配置】`, servicerConfig);
let platformConfig = null;
// #ifdef H5 // #ifdef H5
return servicerConfig.h5; platformConfig = servicerConfig.h5 ? (typeof servicerConfig.h5 === 'object' ? servicerConfig.h5 : null) : null;
// #endif // #endif
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
return servicerConfig.weapp; platformConfig = servicerConfig.weapp ? (typeof servicerConfig.weapp === 'object' ? servicerConfig.weapp : null) : null;
// #endif // #endif
// #ifdef MP-ALIPAY // #ifdef MP-ALIPAY
return servicerConfig.aliapp; platformConfig = servicerConfig.aliapp ? (typeof servicerConfig.aliapp === 'object' ? servicerConfig.aliapp : null) : null;
// #endif // #endif
return null; // #ifdef PC
platformConfig = servicerConfig.pc ? (typeof servicerConfig.pc === 'object' ? servicerConfig.pc : null) : null;
// #endif
// 处理空数组情况(你的配置中pc/aliapp是空数组,转为null)
if (Array.isArray(platformConfig)) {
platformConfig = null;
}
this.latestPlatformConfig = platformConfig;
return platformConfig;
} }
/** /**
@@ -37,7 +63,7 @@ export class CustomerService {
* @returns {Object} 企业微信配置 * @returns {Object} 企业微信配置
*/ */
getWxworkConfig() { getWxworkConfig() {
return this.vm.$store.state.wxworkConfig; return this.vm.$store.state.wxworkConfig || {};
} }
/** /**
@@ -69,12 +95,15 @@ export class CustomerService {
return result; return result;
} }
if (config.type === 'aikefu') {
return result;
}
if (!config.type) { if (!config.type) {
result.isValid = false; result.isValid = false;
result.errors.push('客服类型未配置'); result.errors.push('客服类型未配置');
} }
// 验证企业微信配置
if (config.type === 'wxwork') { if (config.type === 'wxwork') {
if (!wxworkConfig) { if (!wxworkConfig) {
result.isValid = false; result.isValid = false;
@@ -93,24 +122,42 @@ export class CustomerService {
} }
/** /**
* 获取客服类型 * 跳转到Dify客服页面
* @returns {string} 客服类型
*/ */
getServiceType() { openDifyService() {
const config = this.getPlatformConfig(); try {
return config?.type || 'none'; if (this.vm.setAiUnreadCount) {
this.vm.setAiUnreadCount(0);
}
// 强制跳转,忽略框架层的封装
uni.redirectTo({
url: '/pages_tool/ai-chat/index',
fail: (err) => {
// 兜底:使用window.location跳转(H5)
// #ifdef H5
window.location.href = '/pages_tool/ai-chat/index';
// #endif
console.error('跳转Dify客服失败:', err);
uni.showToast({
title: '跳转客服失败',
icon: 'none'
});
}
});
} catch (e) {
console.error('跳转Dify客服异常:', e);
uni.showToast({
title: '跳转客服失败',
icon: 'none'
});
}
} }
/** /**
* 处理客服点击事件 * 处理客服点击事件
* @param {Object} options 选项参数 * @param {Object} options 选项参数
* @param {Object} options.niushop 牛商客服参数
* @param {string} options.sendMessageTitle 消息标题
* @param {string} options.sendMessagePath 消息路径
* @param {string} options.sendMessageImg 消息图片
*/ */
handleCustomerClick(options = {}) { handleCustomerClick(options = {}) {
// 验证配置
const validation = this.validateConfig(); const validation = this.validateConfig();
if (!validation.isValid) { if (!validation.isValid) {
console.error('客服配置验证失败:', validation.errors); console.error('客服配置验证失败:', validation.errors);
@@ -118,27 +165,23 @@ export class CustomerService {
return; return;
} }
// 显示警告(如果有)
if (validation.warnings.length > 0) { if (validation.warnings.length > 0) {
console.warn('客服配置警告:', validation.warnings); console.warn('客服配置警告:', validation.warnings);
} }
const config = this.getPlatformConfig(); const config = this.getPlatformConfig();
const { const { niushop = {}, sendMessageTitle = '', sendMessagePath = '', sendMessageImg = '' } = options;
niushop = {},
sendMessageTitle = '',
sendMessagePath = '',
sendMessageImg = ''
} = options;
// 检查是否为无客服类型
if (config.type === 'none') { if (config.type === 'none') {
this.showNoServicePopup(); this.showNoServicePopup();
return; return;
} }
// 根据类型处理客服 // 核心分支:根据最新的type处理
switch (config.type) { switch (config.type) {
case 'aikefu':
this.openDifyService();
break;
case 'wxwork': case 'wxwork':
this.openWxworkService(false, config, options); this.openWxworkService(false, config, options);
break; break;
@@ -163,33 +206,25 @@ export class CustomerService {
* 打开企业微信客服 * 打开企业微信客服
* @param {boolean} useOriginalService 是否使用原有客服方式 * @param {boolean} useOriginalService 是否使用原有客服方式
* @param {Object} servicerConfig 客服配置 * @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 (wxworkConfig?.enable && wxworkConfig?.contact_url && !useOriginalService) { if (wxworkConfig?.enable && wxworkConfig?.contact_url && !useOriginalService) {
// 使用活码链接跳转到企业微信
wx.navigateToMiniProgram({ wx.navigateToMiniProgram({
appId: 'wxeb490c6f9b154ef9', // 企业微信官方小程序AppID appId: 'wxeb490c6f9b154ef9',
path: `pages/contacts/externalContactDetail?url=${encodeURIComponent(wxworkConfig.contact_url)}`, path: `pages/contacts/externalContactDetail?url=${encodeURIComponent(wxworkConfig.contact_url)}`,
success: () => { success: () => console.log('跳转企业微信成功'),
console.log('跳转企业微信成功');
},
fail: (err) => { fail: (err) => {
console.error('跳转企业微信失败:', err); console.error('跳转企业微信失败:', err);
this.fallbackToOriginalService(); this.fallbackToOriginalService();
} }
}); });
} else { } else {
// 使用原有的客服会话方式
wx.openCustomerServiceChat({ wx.openCustomerServiceChat({
extInfo: { url: config.wxwork_url }, extInfo: { url: config.wxwork_url },
corpId: config.corpid, corpId: config.corpid,
@@ -204,8 +239,10 @@ export class CustomerService {
// #ifdef H5 // #ifdef H5
if (wxworkConfig?.enable && wxworkConfig?.contact_url) { if (wxworkConfig?.enable && wxworkConfig?.contact_url) {
window.location.href = wxworkConfig.contact_url; window.location.href = wxworkConfig.contact_url;
} else { } else if (config.wxwork_url) {
location.href = config.wxwork_url; location.href = config.wxwork_url;
} else {
this.fallbackToPhoneCall();
} }
// #endif // #endif
} }
@@ -216,7 +253,9 @@ export class CustomerService {
*/ */
openThirdService(config) { openThirdService(config) {
if (config.third_url) { if (config.third_url) {
location.href = config.third_url; window.location.href = config.third_url;
} else {
this.fallbackToPhoneCall();
} }
} }
@@ -238,24 +277,12 @@ export class CustomerService {
* @param {Object} options 选项参数 * @param {Object} options 选项参数
*/ */
openWeappService(config, options = {}) { openWeappService(config, options = {}) {
// 如果是官方客服,由 open-type="contact" 自动处理
if (!this.shouldUseCustomService(config)) { if (!this.shouldUseCustomService(config)) {
console.log('使用官方微信小程序客服'); console.log('使用官方微信小程序客服');
return; return;
} }
// 自定义客服处理
console.log('使用自定义微信小程序客服'); console.log('使用自定义微信小程序客服');
// 这里可以实现自定义的客服逻辑
// 例如:跳转到自定义客服页面、显示客服弹窗等
const {
sendMessageTitle = '',
sendMessagePath = '',
sendMessageImg = ''
} = options;
// 实现自定义客服逻辑
this.handleCustomWeappService(config, options); this.handleCustomWeappService(config, options);
} }
@@ -265,18 +292,11 @@ export class CustomerService {
* @param {Object} options 选项参数 * @param {Object} options 选项参数
*/ */
handleCustomWeappService(config, options = {}) { handleCustomWeappService(config, options = {}) {
const { const { sendMessageTitle = '', sendMessagePath = '', sendMessageImg = '' } = options;
sendMessageTitle = '',
sendMessagePath = '',
sendMessageImg = ''
} = options;
// 优先级1: 如果有自定义客服页面URL,跳转到自定义页面
if (config.customServiceUrl) { if (config.customServiceUrl) {
// 构建带参数的URL
let url = config.customServiceUrl; let url = config.customServiceUrl;
const params = []; const params = [];
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)}`);
@@ -295,7 +315,6 @@ export class CustomerService {
return; return;
} }
// 优先级2: 尝试第三方客服
this.tryThirdPartyService(config, options); this.tryThirdPartyService(config, options);
} }
@@ -305,14 +324,12 @@ export class CustomerService {
* @param {Object} options 选项参数 * @param {Object} options 选项参数
*/ */
tryThirdPartyService(config, options = {}) { tryThirdPartyService(config, options = {}) {
// 如果配置了第三方客服URL
if (config.thirdPartyServiceUrl) { if (config.thirdPartyServiceUrl) {
// #ifdef H5 // #ifdef H5
window.open(config.thirdPartyServiceUrl, '_blank'); window.open(config.thirdPartyServiceUrl, '_blank');
// #endif // #endif
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
// 微信小程序可以使用web-view或者跳转到第三方小程序
if (config.thirdPartyMiniAppId) { if (config.thirdPartyMiniAppId) {
wx.navigateToMiniProgram({ wx.navigateToMiniProgram({
appId: config.thirdPartyMiniAppId, appId: config.thirdPartyMiniAppId,
@@ -323,7 +340,6 @@ export class CustomerService {
} }
}); });
} else { } else {
// 设置到剪贴板,让用户手动访问
uni.setClipboardData({ uni.setClipboardData({
data: config.thirdPartyServiceUrl, data: config.thirdPartyServiceUrl,
success: () => { success: () => {
@@ -339,7 +355,6 @@ export class CustomerService {
return; return;
} }
// 降级到电话客服
this.fallbackToPhoneCall(); this.fallbackToPhoneCall();
} }
@@ -363,8 +378,18 @@ export class CustomerService {
* @param {Object} config 客服配置 * @param {Object} config 客服配置
*/ */
openAliappService(config) { openAliappService(config) {
// 支付宝小程序客服会由 contact-button 组件自动处理 console.log('支付宝小程序客服', config);
console.log('支付宝小程序客服'); switch (config.type) {
case 'aikefu':
this.openDifyService();
break;
case 'third':
this.openThirdService(config);
break;
default:
console.log('使用支付宝官方客服');
break;
}
} }
/** /**
@@ -378,7 +403,18 @@ export class CustomerService {
uni.makePhoneCall({ uni.makePhoneCall({
phoneNumber: res.data.mobile phoneNumber: res.data.mobile
}); });
} else {
uni.showToast({
title: '暂无客服电话',
icon: 'none'
});
} }
},
fail: () => {
uni.showToast({
title: '获取客服电话失败',
icon: 'none'
});
} }
}); });
} }
@@ -387,7 +423,7 @@ export class CustomerService {
* 显示无客服弹窗 * 显示无客服弹窗
*/ */
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}`
: '抱歉,商家暂无客服,请线下联系'; : '抱歉,商家暂无客服,请线下联系';
@@ -421,7 +457,6 @@ export class CustomerService {
content: '无法直接添加企业微信客服,是否使用其他方式联系客服?', content: '无法直接添加企业微信客服,是否使用其他方式联系客服?',
success: (res) => { success: (res) => {
if (res.confirm) { if (res.confirm) {
console.log('降级处理:使用原有客服方式');
this.openWxworkService(true); this.openWxworkService(true);
} }
} }
@@ -437,13 +472,9 @@ export class CustomerService {
if (!config) return { openType: '' }; if (!config) return { openType: '' };
let openType = ''; let openType = '';
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
if (config.type === 'weapp') { if (config.type === 'weapp') {
// 检查是否使用官方客服 openType = config.useOfficial !== false ? 'contact' : '';
if (config.useOfficial !== false) { // 默认为true,使用官方客服
openType = 'contact';
}
} }
// #endif // #endif
@@ -451,10 +482,7 @@ export class CustomerService {
if (config.type === 'aliapp') openType = 'contact'; if (config.type === 'aliapp') openType = 'contact';
// #endif // #endif
return { return { ...config, openType };
...config,
openType
};
} }
/** /**
@@ -464,13 +492,10 @@ export class CustomerService {
*/ */
shouldUseCustomService(config) { shouldUseCustomService(config) {
// #ifdef MP-WEIXIN // #ifdef MP-WEIXIN
// 如果是微信小程序且type为weapp,检查useOfficial配置
if (config?.type === 'weapp') { if (config?.type === 'weapp') {
return config.useOfficial === false; // 明确设置为false才使用自定义 return config.useOfficial === false;
} }
// #endif // #endif
// 其他平台或类型都使用自定义处理
return true; return true;
} }
} }
@@ -478,8 +503,9 @@ export class CustomerService {
/** /**
* 创建客服服务实例 * 创建客服服务实例
* @param {Object} vueInstance Vue实例 * @param {Object} vueInstance Vue实例
* @param {Object} externalConfig 外部最新配置
* @returns {CustomerService} 客服服务实例 * @returns {CustomerService} 客服服务实例
*/ */
export function createCustomerService(vueInstance) { export function createCustomerService(vueInstance, externalConfig = null) {
return new CustomerService(vueInstance); return new CustomerService(vueInstance, externalConfig);
} }

View File

@@ -1,60 +1,37 @@
<template> <template>
<!-- 悬浮按钮 --> <view v-if="pageCount == 1 || need" class="fixed-box" :style="{ height: fixBtnShow ? (isH5 ? '180rpx' : '330rpx') : '120rpx' }">
<view v-if="pageCount == 1 || need" class="fixed-box" :style="{ height: fixBtnShow ? '330rpx' : '120rpx' }"> <!-- 统一的客服耳机按钮:H5和小程序共用 -->
<!-- 微信小程序:区分官方客服和自定义客服 -->
<!-- #ifdef MP-WEIXIN --> <!-- #ifdef MP-WEIXIN -->
<!-- 官方客服:使用open-type="contact" -->
<button <button
class="btn-item" class="btn-item"
v-if="fixBtnShow && useOfficialService" v-if="fixBtnShow"
hoverClass="none" hoverClass="none"
open-type="contact" :open-type="weappOfficialService ? 'contact' : ''"
sessionFrom="weapp" @click="handleWeappCustomerClick"
showMessageCard="true"
:style="{ backgroundImage: 'url(' + (kefuimg ? kefuimg : '') + ')', backgroundSize: '100% 100%' }"
>
<text class="icox icox-kefu" v-if="!kefuimg"></text>
</button>
<!-- 自定义客服:点击触发contactServicer -->
<button
class="btn-item"
v-if="fixBtnShow && !useOfficialService"
hoverClass="none"
@click="contactServicer"
:style="{ backgroundImage: 'url(' + (kefuimg ? kefuimg : '') + ')', backgroundSize: '100% 100%' }" :style="{ backgroundImage: 'url(' + (kefuimg ? kefuimg : '') + ')', backgroundSize: '100% 100%' }"
> >
<text class="icox icox-kefu" v-if="!kefuimg"></text> <text class="icox icox-kefu" v-if="!kefuimg"></text>
<view v-if="unreadCount > 0 && isDifyService" class="unread-badge">
<text class="badge-text">{{ unreadCount > 99 ? '99+' : unreadCount }}</text>
</view>
</button> </button>
<!-- #endif --> <!-- #endif -->
<!-- H5:自定义客服按钮 -->
<!-- #ifdef H5 --> <!-- #ifdef H5 -->
<button <button
class="btn-item" class="btn-item"
v-if="fixBtnShow" v-if="fixBtnShow"
hoverClass="none" hoverClass="none"
@click="contactServicer" @click="handleCustomerService"
:style="{ backgroundImage: 'url(' + (kefuimg ? kefuimg : '') + ')', backgroundSize: '100% 100%' }" :style="{ backgroundImage: 'url(' + (kefuimg ? kefuimg : '') + ')', backgroundSize: '100% 100%' }"
> >
<text class="icox icox-kefu" v-if="!kefuimg"></text> <text class="icox icox-kefu" v-if="!kefuimg"></text>
<view v-if="unreadCount > 0 && isDifyService" class="unread-badge">
<text class="badge-text">{{ unreadCount > 99 ? '99+' : unreadCount }}</text>
</view>
</button> </button>
<!-- #endif --> <!-- #endif -->
<!-- AI智能助手 -->
<view
class="btn-item"
v-if="fixBtnShow && enableAIKefuButton"
@click="openAIChat"
:style="{ backgroundImage: 'url(' + (aiAgentimg ? aiAgentimg : '') + ')', backgroundSize: '100% 100%' }"
>
<text class="ai-icon" v-if="!aiAgentimg">🤖</text>
<!-- 未读消息小红点 -->
<view v-if="unreadCount > 0" class="unread-badge">
<text class="badge-text">{{ unreadCount > 99 ? '99+' : unreadCount }}</text>
</view>
</view>
<!-- 电话 -->
<view <view
class="btn-item" class="btn-item"
v-if="fixBtnShow" v-if="fixBtnShow"
@@ -86,31 +63,35 @@ export default {
kefuimg: '', kefuimg: '',
phoneimg: '', phoneimg: '',
customerService: null, customerService: null,
buttonConfig: null buttonConfig: null,
isH5: false,
platformConfig: null,
latestConfig: null,
weappOfficialService: false // 微信小程序是否使用官方客服
}; };
}, },
created() { created() {
// 1. 判断平台类型
// #ifdef H5
this.isH5 = true;
// #endif
// #ifdef MP-WEIXIN
this.isH5 = false;
// #endif
// 2. 初始化资源
this.kefuimg = this.$util.getDefaultImage().kefu; this.kefuimg = this.$util.getDefaultImage().kefu;
this.phoneimg = this.$util.getDefaultImage().phone; this.phoneimg = this.$util.getDefaultImage().phone;
this.pageCount = getCurrentPages().length; this.pageCount = getCurrentPages().length;
this.customerService = createCustomerService(this); // 3. 获取店铺电话
this.buttonConfig = this.customerService.getButtonConfig(); this.getShopTel();
console.log(`buttonConfig: `, this.buttonConfig); // 4. 首次加载获取最新配置(小程序强制请求最新配置,避免缓存)
this.getLatestConfig(true).then(config => {
const that = this; this.latestConfig = config;
uni.getStorage({ this.initCustomerService(config);
key: 'shopInfo', this.initWeappServiceType();
success(e) {
// 校验手机号是否有效
if (e.data && e.data.mobile && /^1[3-9]\d{9}$/.test(e.data.mobile)) {
that.tel = e.data.mobile;
}
},
fail() {
console.warn('未获取到店铺信息');
}
}); });
}, },
computed: { computed: {
@@ -118,26 +99,15 @@ export default {
'globalAIKefuConfig', 'globalAIKefuConfig',
'aiUnreadCount' 'aiUnreadCount'
]), ]),
enableAIKefuButton() { isDifyService() {
return this.buttonConfig?.type === 'aikefu' && this.enableAIChat; const serviceType = this.platformConfig?.type || '';
return serviceType === 'aikefu';
}, },
aiAgentimg() { aiAgentimg() {
return this.globalAIKefuConfig?.icon || this.$util.getDefaultImage().aiAgent || ''; return this.globalAIKefuConfig?.icon || this.$util.getDefaultImage().aiAgent || '';
}, },
unreadCount() { unreadCount() {
return this.aiUnreadCount; return this.aiUnreadCount;
},
enableAIChat() {
return this.globalAIKefuConfig?.enable || true;
},
useOfficialService() {
if (!this.buttonConfig) return true;
// #ifdef MP-WEIXIN
if (this.buttonConfig.type === 'weapp') {
return this.buttonConfig.useOfficial !== false;
}
// #endif
return false;
} }
}, },
methods: { methods: {
@@ -145,154 +115,165 @@ export default {
'setAiUnreadCount' 'setAiUnreadCount'
]), ]),
/** /**
* 拨打电话逻辑:增加手机号校验和异常处理 * 修复:微信小程序客服点击事件(直接触发客服逻辑)
*/ */
call() { handleWeappCustomerClick() {
// 1. 校验手机号是否存在且有效 if (!this.weappOfficialService) {
if (!this.tel || !/^1[3-9]\d{9}$/.test(this.tel)) { // 直接调用客服处理逻辑
uni.showToast({ this.handleCustomerService();
title: '暂无有效联系电话',
icon: 'none',
duration: 2000
});
return;
} }
// 2. 调用系统拨号API
uni.makePhoneCall({
phoneNumber: this.tel,
fail(err) {
console.log('拨号操作失败:', err);
// 非用户取消的情况,给出提示
if (err.errMsg !== 'makePhoneCall:fail cancel') {
uni.showToast({
title: '拨号失败,请稍后重试',
icon: 'none',
duration: 2000
});
}
}
});
},
openAIChat() {
if (this.enableAIChat) {
this.setAiUnreadCount(0);
}
this.$util.redirectTo('/pages_tool/ai-chat/index');
}, },
/** /**
* 处理客服点击:调用客服服务的统一处理方法 * 修复:获取最新配置(支持强制刷新,解决小程序缓存问题)
*/ */
contactServicer() { async getLatestConfig(forceRefresh = false) {
// 移除错误的js路径跳转,直接调用客服服务的处理方法 return new Promise((resolve) => {
this.customerService.handleCustomerClick({ // H5/小程序强制请求最新配置,避免缓存
// 可传递自定义参数,例如牛商客服参数、消息卡片参数 this.$api.sendRequest({
// niushop: { /* 牛商客服参数 */ }, url: '/api/site/getServicerConfig',
// sendMessageTitle: '客服消息标题', header: {
// sendMessagePath: '/pages/index/index', 'Cache-Control': 'no-cache, no-store, must-revalidate',
// sendMessageImg: 'https://example.com/img.png' 'Pragma': 'no-cache',
'Expires': '0'
},
data: { t: new Date().getTime() },
success: (res) => {
const config = res.code === 0 ? res.data : this.$store.state.servicerConfig || {};
this.$store.commit('UPDATE_SERVICER_CONFIG', config);
resolve(config);
},
fail: () => resolve(this.$store.state.servicerConfig || {})
}); });
});
},
/**
* 初始化客服服务(确保实例正确创建)
*/
initCustomerService(config = null) {
// 强制重新创建客服实例
this.customerService = null;
this.customerService = createCustomerService(this, config || this.latestConfig);
this.platformConfig = this.customerService.refreshConfig(config || this.latestConfig);
this.buttonConfig = this.customerService.getButtonConfig();
},
/**
* 微信小程序:初始化服务类型(修复判断逻辑)
*/
initWeappServiceType() {
// #ifdef MP-WEIXIN
this.weappOfficialService = this.buttonConfig?.openType === 'contact' && !this.isDifyService;
// #endif
},
/**
* 获取店铺电话
*/
getShopTel() {
uni.getStorage({
key: 'shopInfo',
success: (e) => {
if (e.data && e.data.mobile && /^1[3-9]\d{9}$/.test(e.data.mobile)) {
this.tel = e.data.mobile;
}
}
});
},
/**
* 拨打电话
*/
call() {
if (!this.tel || !/^1[3-9]\d{9}$/.test(this.tel)) {
uni.showToast({ title: '暂无有效联系电话', icon: 'none' });
return;
}
uni.makePhoneCall({
phoneNumber: this.tel,
fail: (err) => {
if (err.errMsg !== 'makePhoneCall:fail cancel') {
uni.showToast({ title: '拨号失败,请稍后重试', icon: 'none' });
}
}
});
},
/**
* 客服点击逻辑(修复:确保小程序端正确执行)
*/
async handleCustomerService() {
uni.showLoading({ title: '加载中...', mask: true });
try {
// 再次获取最新配置,确保是dify模式
const newConfig = await this.getLatestConfig(true);
this.initCustomerService(newConfig);
// 强制触发客服点击
if (this.customerService) {
this.customerService.handleCustomerClick();
}
} catch (e) {
uni.showToast({ title: '操作失败', icon: 'none' });
} finally {
uni.hideLoading();
}
} }
} }
}; };
</script> </script>
<style lang="scss"> <style scoped>
.container-box { /* 样式保持不变 */
width: 100%;
.item-wrap {
border-radius: 10rpx;
.image-box {
border-radius: 10rpx;
}
image {
width: 100%;
height: auto;
border-radius: 10rpx;
will-change: transform;
}
}
}
//悬浮按钮
.fixed-box { .fixed-box {
position: fixed; position: fixed;
right: 0rpx; right: 20rpx;
bottom: 200rpx; bottom: 200rpx;
z-index: 10; z-index: 9999;
border-radius: 120rpx;
padding: 20rpx 0;
display: flex; display: flex;
justify-content: center;
flex-direction: column; flex-direction: column;
width: 100rpx; align-items: center;
box-sizing: border-box; gap: 14rpx;
transition: 0.3s; }
overflow: hidden;
.btn-item { .btn-item {
display: flex; width: 88rpx !important;
justify-content: center; height: 88rpx !important;
align-items: center; border-radius: 50% !important;
text-align: center; background-color: #ffffff !important;
flex-direction: column; background-size: 60% 60% !important;
line-height: 1; background-position: center !important;
margin: 14rpx 0; background-repeat: no-repeat !important;
transition: 0.1s; border: none !important;
background: #fff; padding: 0 !important;
border-radius: 50rpx; margin: 0 !important;
width: 80rpx; display: flex !important;
height: 80rpx; justify-content: center !important;
padding: 0; align-items: center !important;
position: relative; box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.1);
}
text { .btn-item::after {
font-size: 36rpx; border: none !important;
font-weight: bold;
} }
view {
font-size: 26rpx;
font-weight: bold;
}
// 未读消息小红点
.unread-badge { .unread-badge {
position: absolute; position: absolute;
top: -5rpx; top: -5rpx;
right: -5rpx; right: -5rpx;
background-color: #ff4544; background: #ff4544;
color: white; color: #fff;
border-radius: 20rpx; border-radius: 20rpx;
min-width: 30rpx; min-width: 30rpx;
height: 30rpx; height: 30rpx;
font-size: 10rpx;
line-height: 30rpx; line-height: 30rpx;
text-align: center; text-align: center;
font-size: 10rpx;
padding: 0 8rpx; padding: 0 8rpx;
box-shadow: 0 2rpx 10rpx rgba(255, 73, 72, 0.3);
z-index: 1; z-index: 1;
box-shadow: 0 2rpx 10rpx rgba(255, 69, 68, 0.3); }
.badge-text { /* #ifdef MP-WEIXIN */
font-size: 8rpx; .unread-badge {
// #ifdef MP-WEIXIN
font-size: 20rpx; font-size: 20rpx;
// #endif
}
} }
/* #endif */
// AI图标样式优化
.ai-icon { .ai-icon {
font-size: 40rpx; font-size: 40rpx;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
}
} }
</style> </style>

View File

@@ -1,23 +0,0 @@
{
"libVersion": "3.12.0",
"projectname": "lucky_shop",
"condition": {},
"setting": {
"urlCheck": true,
"coverView": true,
"lazyloadPlaceholderEnable": false,
"skylineRenderEnable": false,
"preloadBackgroundData": false,
"autoAudits": false,
"useApiHook": true,
"showShadowRootInWxmlPanel": true,
"useStaticServer": false,
"useLanDebug": false,
"showES6CompileOption": false,
"compileHotReLoad": true,
"checkInvalidKey": true,
"ignoreDevUnusedFiles": true,
"bigPackageSizeSupport": false,
"useIsolateContext": true
}
}