chore: 隐藏电话悬浮按钮
This commit is contained in:
@@ -1,7 +1,7 @@
|
|||||||
<template>
|
<template>
|
||||||
<!-- Vue 2 / uni-app 单根约束:用 view 包一层 -->
|
<!-- Vue 2 / uni-app 单根约束:用 view 包一层 -->
|
||||||
<view>
|
<view>
|
||||||
<view v-if="pageCount === 1 || need" class="fixed-box"
|
<view v-if="(pageCount === 1 || need) && hasVisibleFixBtn" class="fixed-box"
|
||||||
:style="[customContainerStyle, {
|
:style="[customContainerStyle, {
|
||||||
height: containerHeight,
|
height: containerHeight,
|
||||||
bottom: containerBottom,
|
bottom: containerBottom,
|
||||||
@@ -74,10 +74,11 @@
|
|||||||
<text class="icox icox-kefu" v-if="!kefuimg"></text>
|
<text class="icox icox-kefu" v-if="!kefuimg"></text>
|
||||||
</button>
|
</button>
|
||||||
|
|
||||||
<!-- 电话按钮 -->
|
<!-- 电话按钮 (已隐藏: 仅 display:none, DOM/事件/逻辑全部保留, 把 hidePhoneBtn 改回 false 即恢复) -->
|
||||||
<view
|
<view
|
||||||
v-if="fixBtnShow"
|
v-if="fixBtnShow"
|
||||||
class="btn-item common-bg"
|
class="btn-item common-bg"
|
||||||
|
:class="{ 'btn-item-hide': hidePhoneBtn }"
|
||||||
:style="[btnItemStyle, { backgroundImage: phoneimg ? `url(${phoneimg})` : '', backgroundSize: '100% 100%' }, customButtonStyle]"
|
:style="[btnItemStyle, { backgroundImage: phoneimg ? `url(${phoneimg})` : '', backgroundSize: '100% 100%' }, customButtonStyle]"
|
||||||
@click="call"
|
@click="call"
|
||||||
>
|
>
|
||||||
@@ -178,6 +179,9 @@ export default {
|
|||||||
langDisplayMap: { ...LANG_DISPLAY_NAMES }, // 后端 langDisplayNames 会覆盖默认值
|
langDisplayMap: { ...LANG_DISPLAY_NAMES }, // 后端 langDisplayNames 会覆盖默认值
|
||||||
showLangPopup: false, // 语言选择弹窗显隐
|
showLangPopup: false, // 语言选择弹窗显隐
|
||||||
customerService: null,
|
customerService: null,
|
||||||
|
// 是否隐藏「电话」悬浮按钮: true = 隐藏(只隐藏不移除, DOM/点击事件/拨打逻辑都保留)
|
||||||
|
// 需要恢复时改回 false 即可, 或按需接后端配置
|
||||||
|
hidePhoneBtn: true,
|
||||||
// ============================================================
|
// ============================================================
|
||||||
// 布局参数(从 App.vue 的 :root CSS 变量读取,权威源在 App.vue)
|
// 布局参数(从 App.vue 的 :root CSS 变量读取,权威源在 App.vue)
|
||||||
// 关键设计:
|
// 关键设计:
|
||||||
@@ -295,6 +299,12 @@ export default {
|
|||||||
const customerService = createCustomerService(this);
|
const customerService = createCustomerService(this);
|
||||||
return customerService.hasValidKefuConfig();
|
return customerService.hasValidKefuConfig();
|
||||||
},
|
},
|
||||||
|
// 是否还有需要展示的浮动按钮:
|
||||||
|
// 电话按钮被隐藏、且没有语言切换/客服按钮时, 整个浮动按钮容器都不渲染,
|
||||||
|
// 避免留下一个透明的空容器挡住下面的页面内容点击
|
||||||
|
hasVisibleFixBtn() {
|
||||||
|
return !this.hidePhoneBtn || this.isLanguageSwitchEnabled || this.hasValidKefuConfig;
|
||||||
|
},
|
||||||
|
|
||||||
//根据显示的按钮数量动态计算容器高度
|
//根据显示的按钮数量动态计算容器高度
|
||||||
// 计算明细(buttonCount 按钮场景):
|
// 计算明细(buttonCount 按钮场景):
|
||||||
@@ -309,7 +319,8 @@ export default {
|
|||||||
containerHeight() {
|
containerHeight() {
|
||||||
if (!this.fixBtnShow) return '320rpx';
|
if (!this.fixBtnShow) return '320rpx';
|
||||||
|
|
||||||
let buttonCount = 1;
|
// 电话按钮隐藏时不再占用容器高度, 避免底部留白
|
||||||
|
let buttonCount = this.hidePhoneBtn ? 0 : 1;
|
||||||
if (this.isLanguageSwitchEnabled) buttonCount++;
|
if (this.isLanguageSwitchEnabled) buttonCount++;
|
||||||
if (this.showWeappSystemKefu) buttonCount++;
|
if (this.showWeappSystemKefu) buttonCount++;
|
||||||
buttonCount++;
|
buttonCount++;
|
||||||
@@ -864,6 +875,11 @@ export default {
|
|||||||
background-color: var(--hover-nav-bg-color);
|
background-color: var(--hover-nav-bg-color);
|
||||||
}
|
}
|
||||||
|
|
||||||
|
/* 电话悬浮按钮隐藏态: 只隐藏不移除(DOM、点击事件、拨打逻辑都还在), 去掉该类即恢复 */
|
||||||
|
.btn-item-hide {
|
||||||
|
display: none !important;
|
||||||
|
}
|
||||||
|
|
||||||
.btn-item text {
|
.btn-item text {
|
||||||
font-size: 28rpx;
|
font-size: 28rpx;
|
||||||
}
|
}
|
||||||
|
|||||||
Reference in New Issue
Block a user