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

chore：修改客服

Browse Source
This commit is contained in:
jinhhanhan
2025-12-19 14:05:48 +08:00
parent 3a455bd644
commit b34003e2c0
1 changed files with 58 additions and 19 deletions
Download Patch File Download Diff File Expand all files Collapse all files

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

@@ -1,34 +1,66 @@
<template>
<!-- 悬浮按钮 -->
<view v-if="pageCount == 1 || need" class="fixed-box" :style="{ height: fixBtnShow ? '330rpx' : '120rpx' }">
<!-- 微信小程序：区分官方客服和自定义客服 -->
<!-- #ifdef MP-WEIXIN -->
<button class="btn-item" v-if="fixBtnShow" hoverClass="none" open-type="contact"
sessionFrom="weapp" showMessageCard="true"
:style="{ backgroundImage: 'url(' + (kefuimg ? kefuimg : '') + ')', backgroundSize: '100% 100%' }">
<!-- 官方客服：使用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"
:style="{ backgroundImage: 'url(' + (kefuimg ? kefuimg : '') + ')', backgroundSize: '100% 100%' }"
>
<text class="icox icox-kefu" v-if="!kefuimg"></text>
</button>
<!-- #endif -->
<!-- H5：自定义客服按钮 -->
<!-- #ifdef H5 -->
<!-- 自定义客服按钮 -->
<button class="btn-item" v-if="fixBtnShow" hoverClass="none" @click="contactServicer"
:style="{ backgroundImage: 'url(' + (kefuimg ? kefuimg : '') + ')', backgroundSize: '100% 100%' }">
<button
class="btn-item"
v-if="fixBtnShow"
hoverClass="none"
@click="contactServicer"
:style="{ backgroundImage: 'url(' + (kefuimg ? kefuimg : '') + ')', backgroundSize: '100% 100%' }"
>
<text class="icox icox-kefu" v-if="!kefuimg"></text>
</button>
<!-- #endif -->
<!-- AI智能助手 -->
<view class="btn-item" v-if="fixBtnShow && enableAIKefuButton" @click="openAIChat"
:style="{ backgroundImage: 'url(' + (aiAgentimg ? aiAgentimg : '') + ')', backgroundSize: '100% 100%' }">
<!-- 核心修改：添加🤖表情，保留原有判断逻辑 -->
<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 class="btn-item" v-if="fixBtnShow" @click="call()"
:style="{ backgroundImage: 'url(' + (phoneimg ? phoneimg : '') + ')', backgroundSize: '100% 100%' }">
<!-- 电话 -->
<view
class="btn-item"
v-if="fixBtnShow"
@click="call()"
:style="{ backgroundImage: 'url(' + (phoneimg ? phoneimg : '') + ')', backgroundSize: '100% 100%' }"
>
<text class="iconfont icon-dianhua" v-if="!phoneimg"></text>
</view>
</view>
@@ -71,12 +103,11 @@ export default {
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;
}
},
// 补充storage读取失败的提示
fail() {
console.warn('未获取到店铺信息');
}
@@ -127,10 +158,9 @@ export default {
return;
}
// 2. 调用系统拨号API（自动弹出拨号对话框）
// 2. 调用系统拨号API
uni.makePhoneCall({
phoneNumber: this.tel,
// 拨号失败的回调（如用户取消、设备不支持等）
fail(err) {
console.log('拨号操作失败：', err);
// 非用户取消的情况，给出提示
@@ -150,9 +180,18 @@ export default {
}
this.$util.redirectTo('/pages_tool/ai-chat/index');
},
/**
* 处理客服点击：调用客服服务的统一处理方法
*/
contactServicer() {
this.customerService.handleCustomerClick();
// 移除错误的js路径跳转，直接调用客服服务的处理方法
this.customerService.handleCustomerClick({
// 可传递自定义参数，例如牛商客服参数、消息卡片参数
// niushop: { /* 牛商客服参数 */ },
// sendMessageTitle: '客服消息标题',
// sendMessagePath: '/pages/index/index',
// sendMessageImg: 'https://example.com/img.png'
});
}
}
};
@@ -245,7 +284,7 @@ export default {
}
}
// AI图标样式优化（让🤖表情居中显示）
// AI图标样式优化
.ai-icon {
font-size: 40rpx;
display: flex;