🤖
{{ unreadCount > 99 ? '99+' : unreadCount }}
// 打开客服选择弹窗
openKefuSelectPopup() {
const kefuNames = this.kefuList.map(item => item.name);
wx.showActionSheet({
itemList: kefuNames,
success: (res) => {
this.selectedKefu = this.kefuList[res.tapIndex];
this.reinitCustomerService(this.selectedKefu);
this.handleSelectedKefu();
}
});
},
// 重新初始化客服实例
reinitCustomerService(kefu) {
this.customerService = createCustomerService(this, kefu);
this.buttonConfig = this.customerService.getButtonConfig();
},
}
// 执行选中的客服逻辑
handleSelectedKefu() {
const kefu = this.selectedKefu;
if (!kefu) return;
if (kefu.isOfficial) {
wx.openCustomerServiceConversation({ sessionFrom: 'weapp', showMessageCard: true });
} else if (kefu.id === 'custom-kefu') {
this.customerService.handleCustomerClick();
} else if (kefu.id === 'qyweixin-kefu') {
this.customerService.handleQyWeixinKefuClick();
}
},
// 打开AI聊天（修复setAiUnreadCount的核心）
openAIChat() {
if (this.enableAIChat) {
// 直接用$store.commit调用Vuex mutation，绕过映射问题
this.$store.commit('setAiUnreadCount', 0);
}
this.$util.redirectTo('/pages_tool/ai-chat/index')
}
}
};
}
//悬浮按钮
.fixed-box {
position: fixed;
right: 0rpx;
bottom: 240rpx;
// #ifdef H5
bottom: 320rpx;
// #endif
z-index: 10;
border-radius: 120rpx;
padding: 20rpx 0;
display: flex;
justify-content: center;
flex-direction: column;
width: 100rpx;
box-sizing: border-box;
transition: 0.3s;
overflow: hidden;
.btn-item {
display: flex;
justify-content: center;
text-align: center;
flex-direction: column;
line-height: 1;
margin: 14rpx 0;
transition: 0.1s;
background: var(--hover-nav-bg-color);
color: var(--hover-nav-text-color);
border-radius: 40rpx;
width: 80rpx;
height: 80rpx;
padding: 0;
overflow: hidden;
text {
font-size: 28rpx;
}
.iconfont,
.icox {
font-size: 36rpx;
font-weight: bold;
width: 100%;
height: 100%;
display: flex;
justify-content: center;
align-items: center;
margin: 14rpx 0;
background: #fff;
border-radius: 50rpx;
width: 80rpx;
height: 80rpx;
padding: 0;
position: relative;
text {
font-size: 36rpx;
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 {
font-size: 40rpx;
width: 100%;
height: 100%;
display: flex;
align-items: center;
justify-content: center;
}
}
}
}