chore:智能体客服和原来的客服都在
This commit is contained in:
@@ -230,7 +230,15 @@ export class CustomerService {
|
|||||||
this.makePhoneCall();
|
this.makePhoneCall();
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
// 新增:企业微信客服处理方法
|
||||||
|
handleQyWeixinKefuClick() {
|
||||||
|
console.log('企业微信客服点击');
|
||||||
|
// 实现企业微信客服的逻辑(比如调用企业微信客服接口、跳转企业微信会话等)
|
||||||
|
// 示例:
|
||||||
|
wx.navigateTo({
|
||||||
|
url: '/pages/kefu/qyweixin-kefu'
|
||||||
|
});
|
||||||
|
}
|
||||||
/**
|
/**
|
||||||
* 打开微信小程序客服
|
* 打开微信小程序客服
|
||||||
* @param {Object} config 客服配置
|
* @param {Object} config 客服配置
|
||||||
|
|||||||
@@ -4,56 +4,29 @@
|
|||||||
<!-- AI智能助手 -->
|
<!-- AI智能助手 -->
|
||||||
<view class="btn-item" v-if="fixBtnShow && enableAIChat" @click="openAIChat"
|
<view class="btn-item" v-if="fixBtnShow && enableAIChat" @click="openAIChat"
|
||||||
:style="{backgroundImage:'url('+(aiAgentimg?aiAgentimg:'')+')',backgroundSize:'100% 100%'}">
|
:style="{backgroundImage:'url('+(aiAgentimg?aiAgentimg:'')+')',backgroundSize:'100% 100%'}">
|
||||||
<!-- 核心修改:添加🤖表情,保留原有判断逻辑 -->
|
|
||||||
<text class="ai-icon" v-if="!aiAgentimg">🤖</text>
|
<text class="ai-icon" v-if="!aiAgentimg">🤖</text>
|
||||||
<!-- 未读消息小红点 -->
|
|
||||||
<view v-if="unreadCount > 0" class="unread-badge">
|
<view v-if="unreadCount > 0" class="unread-badge">
|
||||||
<text class="badge-text">{{ unreadCount > 99 ? '99+' : unreadCount }}</text>
|
<text class="badge-text">{{ unreadCount > 99 ? '99+' : unreadCount }}</text>
|
||||||
</view>
|
</view>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
|
<!-- 客服按钮 -->
|
||||||
|
<button class="btn-item" v-if="fixBtnShow" hoverClass="none" @click="openKefuSelectPopup"
|
||||||
<!-- <view class="btn-item" v-if="fixBtnShow" @click="$util.redirectTo('/pages/index/index')"> -->
|
|
||||||
<!-- #ifdef MP-WEIXIN -->
|
|
||||||
<!-- 微信小程序默认客服按钮 -->
|
|
||||||
<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%' }">
|
: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>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- 自定义客服按钮 -->
|
<!-- 电话按钮 -->
|
||||||
<button class="btn-item" v-if="fixBtnShow && !useOfficialService" hoverClass="none" @click="contactServicer"
|
|
||||||
:style="{ backgroundImage: 'url(' + (kefuimg ? kefuimg : '') + ')', backgroundSize: '100% 100%' }">
|
|
||||||
<text class="icox icox-kefu" v-if="!kefuimg"></text>
|
|
||||||
</button>
|
|
||||||
<!-- #endif -->
|
|
||||||
|
|
||||||
<view class="btn-item" v-if="fixBtnShow" @click="call()"
|
<view class="btn-item" v-if="fixBtnShow" @click="call()"
|
||||||
:style="{ backgroundImage: 'url(' + (phoneimg ? phoneimg : '') + ')', backgroundSize: '100% 100%' }">
|
:style="{ backgroundImage: 'url(' + (phoneimg ? phoneimg : '') + ')', backgroundSize: '100% 100%' }">
|
||||||
<text class="iconfont icon-dianhua" v-if="!phoneimg"></text>
|
<text class="iconfont icon-dianhua" v-if="!phoneimg"></text>
|
||||||
</view>
|
</view>
|
||||||
|
|
||||||
<!-- <view class="btn-item icon-xiala" v-if="fixBtnShow" @click="fixBtnShow ? (fixBtnShow = false) : (fixBtnShow = true)">
|
|
||||||
<text class="iconfont icon-unfold"></text>
|
|
||||||
</view>
|
|
||||||
<view class="btn-item switch" v-else :class="{ show: fixBtnShow }"
|
|
||||||
@click="fixBtnShow ? (fixBtnShow = false) : (fixBtnShow = true)">
|
|
||||||
<view class="">快捷</view>
|
|
||||||
<view>导航</view>
|
|
||||||
</view> -->
|
|
||||||
</view>
|
</view>
|
||||||
</template>
|
</template>
|
||||||
|
|
||||||
<script>
|
<script>
|
||||||
import {
|
import { mapGetters } from 'vuex' // 去掉mapMutations,直接用$store.commit
|
||||||
mapGetters,
|
import { createCustomerService } from '@/common/js/customer-service.js';
|
||||||
mapMutations
|
|
||||||
} from 'vuex'
|
|
||||||
import {
|
|
||||||
createCustomerService
|
|
||||||
} from '@/common/js/customer-service.js';
|
|
||||||
|
|
||||||
export default {
|
export default {
|
||||||
name: 'hover-nav',
|
name: 'hover-nav',
|
||||||
@@ -70,25 +43,27 @@
|
|||||||
tel: '',
|
tel: '',
|
||||||
kefuimg: '',
|
kefuimg: '',
|
||||||
phoneimg: '',
|
phoneimg: '',
|
||||||
customerService: null, // 客服服务实例
|
customerService: null,
|
||||||
buttonConfig: null // 按钮配置
|
buttonConfig: null,
|
||||||
|
kefuList: [
|
||||||
|
{ id: 'weixin-official', name: '微信官方客服', isOfficial: true, type: 'weapp' },
|
||||||
|
{ id: 'custom-kefu', name: '自定义在线客服', isOfficial: false, type: 'custom' },
|
||||||
|
{ id: 'qyweixin-kefu', name: '企业微信客服', isOfficial: false, type: 'qyweixin' }
|
||||||
|
],
|
||||||
|
selectedKefu: null
|
||||||
};
|
};
|
||||||
},
|
},
|
||||||
created() {
|
created() {
|
||||||
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.selectedKefu = this.kefuList[0];
|
||||||
// 初始化客服服务
|
|
||||||
this.customerService = createCustomerService(this);
|
this.customerService = createCustomerService(this);
|
||||||
this.buttonConfig = this.customerService.getButtonConfig();
|
this.buttonConfig = this.customerService.getButtonConfig();
|
||||||
|
|
||||||
var that = this
|
|
||||||
uni.getStorage({
|
uni.getStorage({
|
||||||
key: 'shopInfo',
|
key: 'shopInfo',
|
||||||
success(e) {
|
success: (e) => { this.tel = e.data.mobile }
|
||||||
that.tel = e.data.mobile
|
|
||||||
}
|
|
||||||
})
|
})
|
||||||
},
|
},
|
||||||
computed: {
|
computed: {
|
||||||
@@ -97,54 +72,60 @@
|
|||||||
'aiUnreadCount'
|
'aiUnreadCount'
|
||||||
]),
|
]),
|
||||||
aiAgentimg() {
|
aiAgentimg() {
|
||||||
return this.globalAIKefuConfig?.icon || this.$util.getDefaultImage().aiAgent || '' // AI智能助手的头像
|
return this.globalAIKefuConfig?.icon || this.$util.getDefaultImage().aiAgent || ''
|
||||||
},
|
},
|
||||||
unreadCount() {
|
unreadCount() {
|
||||||
return this.aiUnreadCount
|
return this.aiUnreadCount
|
||||||
},
|
},
|
||||||
enableAIChat() {
|
enableAIChat() {
|
||||||
return this.globalAIKefuConfig?.enable || true // 是否开启AI智能助手
|
return this.globalAIKefuConfig?.enable || true
|
||||||
},
|
|
||||||
/**
|
|
||||||
* 是否使用官方客服
|
|
||||||
*/
|
|
||||||
useOfficialService() {
|
|
||||||
if (!this.buttonConfig) return true;
|
|
||||||
|
|
||||||
// #ifdef MP-WEIXIN
|
|
||||||
// 如果是微信小程序,检查配置
|
|
||||||
if (this.buttonConfig.type === 'weapp') {
|
|
||||||
// 默认使用官方客服,除非明确设置为false
|
|
||||||
return this.buttonConfig.useOfficial !== false;
|
|
||||||
}
|
|
||||||
// #endif
|
|
||||||
|
|
||||||
return false;
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
methods: {
|
methods: {
|
||||||
...mapMutations([
|
|
||||||
'setAiUnreadCount'
|
|
||||||
]),
|
|
||||||
|
|
||||||
// 拨打电话
|
// 拨打电话
|
||||||
call() {
|
call() {
|
||||||
uni.makePhoneCall({
|
uni.makePhoneCall({ phoneNumber: this.tel + '' })
|
||||||
phoneNumber: this.tel + ''
|
|
||||||
})
|
|
||||||
},
|
},
|
||||||
|
|
||||||
//处理客服点击事件
|
// 打开客服选择弹窗
|
||||||
contactServicer() {
|
openKefuSelectPopup() {
|
||||||
// 使用统一客服处理
|
const kefuNames = this.kefuList.map(item => item.name);
|
||||||
this.customerService.handleCustomerClick();
|
wx.showActionSheet({
|
||||||
|
itemList: kefuNames,
|
||||||
|
success: (res) => {
|
||||||
|
this.selectedKefu = this.kefuList[res.tapIndex];
|
||||||
|
this.reinitCustomerService(this.selectedKefu);
|
||||||
|
this.handleSelectedKefu();
|
||||||
|
}
|
||||||
|
});
|
||||||
},
|
},
|
||||||
// 打开AI聊天弹窗
|
|
||||||
|
// 重新初始化客服实例
|
||||||
|
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() {
|
openAIChat() {
|
||||||
if (this.enableAIChat) {
|
if (this.enableAIChat) {
|
||||||
this.setAiUnreadCount(0);
|
// 直接用$store.commit调用Vuex mutation,绕过映射问题
|
||||||
|
this.$store.commit('setAiUnreadCount', 0);
|
||||||
}
|
}
|
||||||
|
|
||||||
this.$util.redirectTo('/pages_tool/ai-chat/index')
|
this.$util.redirectTo('/pages_tool/ai-chat/index')
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@@ -152,26 +133,6 @@
|
|||||||
</script>
|
</script>
|
||||||
|
|
||||||
<style lang="scss">
|
<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;
|
|
||||||
}
|
|
||||||
}
|
|
||||||
}
|
|
||||||
|
|
||||||
//悬浮按钮
|
|
||||||
.fixed-box {
|
.fixed-box {
|
||||||
position: fixed;
|
position: fixed;
|
||||||
right: 0rpx;
|
right: 0rpx;
|
||||||
@@ -184,46 +145,25 @@
|
|||||||
flex-direction: column;
|
flex-direction: column;
|
||||||
width: 100rpx;
|
width: 100rpx;
|
||||||
box-sizing: border-box;
|
box-sizing: border-box;
|
||||||
transition: 0.3s;
|
|
||||||
overflow: hidden;
|
overflow: hidden;
|
||||||
|
|
||||||
.btn-item {
|
.btn-item {
|
||||||
display: flex;
|
display: flex;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
align-items: center; /* 新增:让🤖表情垂直居中 */
|
align-items: center;
|
||||||
text-align: center;
|
|
||||||
flex-direction: column;
|
|
||||||
line-height: 1;
|
|
||||||
margin: 14rpx 0;
|
margin: 14rpx 0;
|
||||||
transition: 0.1s;
|
|
||||||
background: #fff;
|
background: #fff;
|
||||||
border-radius: 50rpx;
|
border-radius: 50rpx;
|
||||||
width: 80rpx;
|
width: 80rpx;
|
||||||
height: 80rpx;
|
height: 80rpx;
|
||||||
padding: 0;
|
padding: 0;
|
||||||
position: relative;
|
position: relative;
|
||||||
|
|
||||||
text {
|
text {
|
||||||
font-size: 36rpx;
|
font-size: 36rpx;
|
||||||
font-weight: bold;
|
font-weight: bold;
|
||||||
}
|
}
|
||||||
|
|
||||||
view {
|
|
||||||
font-size: 26rpx;
|
|
||||||
font-weight: bold;
|
|
||||||
}
|
|
||||||
|
|
||||||
&.show {
|
|
||||||
transform: rotate(180deg);
|
|
||||||
}
|
|
||||||
|
|
||||||
&.switch {}
|
|
||||||
|
|
||||||
&.icon-xiala {
|
|
||||||
margin: 0;
|
|
||||||
margin-top: 0.1rpx;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 未读消息小红点
|
|
||||||
.unread-badge {
|
.unread-badge {
|
||||||
position: absolute;
|
position: absolute;
|
||||||
top: -5rpx;
|
top: -5rpx;
|
||||||
@@ -233,29 +173,20 @@
|
|||||||
border-radius: 20rpx;
|
border-radius: 20rpx;
|
||||||
min-width: 30rpx;
|
min-width: 30rpx;
|
||||||
height: 30rpx;
|
height: 30rpx;
|
||||||
font-size: 10rpx;
|
font-size: 20rpx;
|
||||||
line-height: 30rpx;
|
line-height: 30rpx;
|
||||||
text-align: center;
|
text-align: center;
|
||||||
padding: 0 8rpx;
|
padding: 0 8rpx;
|
||||||
z-index: 1;
|
|
||||||
box-shadow: 0 2rpx 10rpx rgba(255, 69, 68, 0.3);
|
box-shadow: 0 2rpx 10rpx rgba(255, 69, 68, 0.3);
|
||||||
|
|
||||||
.badge-text {
|
|
||||||
font-size: 8rpx;
|
|
||||||
// #ifdef MP-WEIXIN
|
|
||||||
font-size: 20rpx;
|
|
||||||
// #endif
|
|
||||||
}
|
|
||||||
}
|
}
|
||||||
|
|
||||||
// AI图标样式优化(让🤖表情居中显示)
|
|
||||||
.ai-icon {
|
.ai-icon {
|
||||||
font-size: 40rpx; // 调整🤖表情大小
|
font-size: 40rpx;
|
||||||
|
width: 100%;
|
||||||
|
height: 100%;
|
||||||
display: flex;
|
display: flex;
|
||||||
align-items: center;
|
align-items: center;
|
||||||
justify-content: center;
|
justify-content: center;
|
||||||
width: 100%;
|
|
||||||
height: 100%;
|
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user