Uniapp/lucky_shop
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

chore：实现后台控制哪个客服，H5可以正常切换客服

Browse Source
This commit is contained in:
jinhhanhan
2025-12-19 17:07:57 +08:00
parent b34003e2c0
commit 95375d5476
2 changed files with 700 additions and 661 deletions
Download Patch File Download Diff File Expand all files Collapse all files

367
components/hover-nav/hover-nav.vue
View File

@@ -1,60 +1,49 @@
<template>
<!-- 悬浮按钮 -->
<view v-if="pageCount == 1 || need" class="fixed-box" :style="{ height: fixBtnShow ? '330rpx' : '120rpx' }">
<!-- 微信小程序：区分官方客服和自定义客服 -->
<view v-if="pageCount == 1 || need" class="fixed-box" :style="{ height: fixBtnShow ? (isH5 ? '180rpx' : '330rpx') : '120rpx' }">
<!-- #ifdef MP-WEIXIN -->
<!-- 官方客服：使用open-type="contact" -->
<!-- 微信小程序：根据配置自动选择官方客服/自定义客服 -->
<button
class="btn-item"
v-if="fixBtnShow && useOfficialService"
hoverClass="none"
open-type="contact"
sessionFrom="weapp"
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"
v-if="fixBtnShow"
hoverClass="none"
:open-type="weappOfficialService ? 'contact' : ''"
@click="weappOfficialService ? '' : handleWeappCustomerService"
:style="{ backgroundImage: 'url(' + (kefuimg ? kefuimg : '') + ')', backgroundSize: '100% 100%' }"
>
<text class="icox icox-kefu" v-if="!kefuimg"></text>
</button>
<!-- #endif -->
<!-- H5：自定义客服按钮 -->
<!-- #ifdef H5 -->
<!-- H5逻辑保持不变 -->
<button
class="btn-item"
v-if="fixBtnShow"
hoverClass="none"
@click="contactServicer"
@click="handleCustomerService"
:style="{ backgroundImage: 'url(' + (kefuimg ? kefuimg : '') + ')', backgroundSize: '100% 100%' }"
>
<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>
<!-- #endif -->
<!-- AI智能助手 -->
<!-- #ifndef H5 -->
<view
class="btn-item"
v-if="fixBtnShow && enableAIKefuButton"
@click="openAIChat"
v-if="fixBtnShow && isDifyService"
@click="handleCustomerService"
: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>
<!-- #endif -->
<!-- 电话 -->
<view
class="btn-item"
v-if="fixBtnShow"
@@ -86,31 +75,36 @@ export default {
kefuimg: '',
phoneimg: '',
customerService: null,
buttonConfig: null
buttonConfig: null,
isH5: false,
platformConfig: null,
latestConfig: null,
weappOfficialService: false // 微信小程序是否使用官方客服
};
},
created() {
// 1. 判断平台类型
// #ifdef H5
this.isH5 = true;
// #endif
// #ifdef MP-WEIXIN
this.isH5 = false;
// #endif
// 2. 初始化资源
this.kefuimg = this.$util.getDefaultImage().kefu;
this.phoneimg = this.$util.getDefaultImage().phone;
this.pageCount = getCurrentPages().length;
this.customerService = createCustomerService(this);
this.buttonConfig = this.customerService.getButtonConfig();
console.log(`buttonConfig: `, this.buttonConfig);
// 3. 获取店铺电话
this.getShopTel();
const that = this;
uni.getStorage({
key: 'shopInfo',
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('未获取到店铺信息');
}
// 4. 首次加载获取最新配置
this.getLatestConfig().then(config => {
this.latestConfig = config;
this.initCustomerService(config);
// 微信小程序：判断是否使用官方客服
this.initWeappServiceType();
});
},
computed: {
@@ -118,26 +112,15 @@ export default {
'globalAIKefuConfig',
'aiUnreadCount'
]),
enableAIKefuButton() {
return this.buttonConfig?.type === 'aikefu' && this.enableAIChat;
isDifyService() {
const serviceType = this.platformConfig?.type || '';
return serviceType === 'aikefu';
},
aiAgentimg() {
return this.globalAIKefuConfig?.icon || this.$util.getDefaultImage().aiAgent || '';
},
unreadCount() {
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: {
@@ -145,154 +128,184 @@ export default {
'setAiUnreadCount'
]),
/**
* 拨打电话逻辑：增加手机号校验和异常处理
* 获取最新配置（H5禁用缓存，小程序保留默认）
*/
call() {
// 1. 校验手机号是否存在且有效
if (!this.tel || !/^1[3-9]\d{9}$/.test(this.tel)) {
uni.showToast({
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
});
async getLatestConfig() {
return new Promise((resolve) => {
// H5：强制请求最新配置；小程序：优先用vuex缓存
if (this.isH5) {
this.$api.sendRequest({
url: '/api/site/getServicerConfig',
header: {
'Cache-Control': 'no-cache, no-store, must-revalidate',
'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 || {})
});
} else {
// 小程序：直接用vuex缓存（后台修改后需重启开发者工具）
resolve(this.$store.state.servicerConfig || {});
}
});
},
/**
* 初始化客服服务
*/
initCustomerService(config = 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
// 从buttonConfig中获取官方客服标识
this.weappOfficialService = this.buttonConfig?.openType === 'contact';
// #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;
}
}
});
},
openAIChat() {
if (this.enableAIChat) {
this.setAiUnreadCount(0);
/**
* 拨打电话
*/
call() {
if (!this.tel || !/^1[3-9]\d{9}$/.test(this.tel)) {
uni.showToast({ title: '暂无有效联系电话', icon: 'none' });
return;
}
this.$util.redirectTo('/pages_tool/ai-chat/index');
uni.makePhoneCall({
phoneNumber: this.tel,
fail: (err) => {
if (err.errMsg !== 'makePhoneCall:fail cancel') {
uni.showToast({ title: '拨号失败，请稍后重试', icon: 'none' });
}
}
});
},
/**
* 处理客服点击：调用客服服务的统一处理方法
* H5客服点击逻辑（保持不变）
*/
contactServicer() {
// 移除错误的js路径跳转，直接调用客服服务的处理方法
this.customerService.handleCustomerClick({
// 可传递自定义参数，例如牛商客服参数、消息卡片参数
// niushop: { /* 牛商客服参数 */ },
// sendMessageTitle: '客服消息标题',
// sendMessagePath: '/pages/index/index',
// sendMessageImg: 'https://example.com/img.png'
});
async handleCustomerService() {
if (this.isH5) {
uni.showLoading({ title: '加载中...', mask: true });
try {
const newConfig = await this.getLatestConfig();
this.latestConfig = newConfig;
this.initCustomerService(newConfig);
this.customerService.handleCustomerClick();
} catch (e) {
uni.showToast({ title: '操作失败', icon: 'none' });
} finally {
uni.hideLoading();
}
} else {
// 小程序：直接调用客服逻辑
this.customerService.handleCustomerClick();
}
},
/**
* 微信小程序自定义客服点击逻辑
*/
handleWeappCustomerService() {
// #ifdef MP-WEIXIN
this.customerService.handleCustomerClick();
// #endif
}
}
};
</script>
<style lang="scss">
.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;
}
}
}
//悬浮按钮
<style scoped>
.fixed-box {
position: fixed;
right: 0rpx;
right: 0;
bottom: 200rpx;
z-index: 10;
border-radius: 120rpx;
padding: 20rpx 0;
display: flex;
justify-content: center;
flex-direction: column;
justify-content: center;
align-items: center;
width: 100rpx;
box-sizing: border-box;
transition: 0.3s;
overflow: hidden;
}
.btn-item {
display: flex;
justify-content: center;
align-items: center;
text-align: center;
flex-direction: column;
line-height: 1;
margin: 14rpx 0;
transition: 0.1s;
background: #fff;
border-radius: 50rpx;
width: 80rpx;
height: 80rpx;
padding: 0;
position: relative;
/* 核心修改：确保按钮背景是正圆 */
.btn-item {
display: flex;
justify-content: center;
align-items: center;
width: 80rpx;
height: 80rpx;
margin: 14rpx 0;
/* 强制正圆：使用远大于宽高的固定值，比50%更稳定 */
border-radius: 100rpx;
/* 确保背景色是白色（即使图片加载失败也能看到正圆） */
background-color: #ffffff;
/* 防止边框/内边距影响宽高比 */
box-sizing: border-box;
/* 移除默认边框（button标签可能有默认边框） */
border: none;
/* 清除默认内边距 */
padding: 0;
position: relative;
transition: all 0.1s ease;
/* 防止背景图片拉伸导致视觉上的非正圆 */
background-position: center;
background-repeat: no-repeat;
}
text {
font-size: 36rpx;
font-weight: bold;
}
/* 清除button标签的默认点击样式（微信小程序/浏览器） */
.btn-item::after {
border: none !important;
}
view {
font-size: 26rpx;
font-weight: bold;
}
.unread-badge {
position: absolute;
top: -5rpx;
right: -5rpx;
background: #ff4544;
color: #fff;
border-radius: 20rpx;
min-width: 30rpx;
height: 30rpx;
line-height: 30rpx;
text-align: center;
font-size: 10rpx;
padding: 0 8rpx;
box-shadow: 0 2rpx 10rpx rgba(255, 73, 72, 0.3);
z-index: 1;
}
// 未读消息小红点
.unread-badge {
position: absolute;
top: -5rpx;
right: -5rpx;
background-color: #ff4544;
color: white;
border-radius: 20rpx;
min-width: 30rpx;
height: 30rpx;
font-size: 10rpx;
line-height: 30rpx;
text-align: center;
padding: 0 8rpx;
z-index: 1;
box-shadow: 0 2rpx 10rpx rgba(255, 69, 68, 0.3);
/* 微信小程序字体适配 */
/* #ifdef MP-WEIXIN */
.unread-badge {
font-size: 20rpx;
}
/* #endif */
.badge-text {
font-size: 8rpx;
// #ifdef MP-WEIXIN
font-size: 20rpx;
// #endif
}
}
// AI图标样式优化
.ai-icon {
font-size: 40rpx;
display: flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
}
}
.ai-icon {
font-size: 40rpx;
}
</style>