chore:加了中英文切换按钮

This commit is contained in:
2026-01-14 18:24:42 +08:00
parent e8fb35b310
commit 82df9ddbac

View File

@@ -1,24 +1,26 @@
<template> <template>
<view v-if="pageCount == 1 || need" class="fixed-box" <view v-if="pageCount == 1 || need" class="fixed-box"
:style="[{ height: fixBtnShow ? '400rpx' : '320rpx' }, customContainerStyle]"> :style="[customContainerStyle, {
height: fixBtnShow ? '400rpx' : '320rpx',
backgroundImage: bgUrl ? `url(${bgUrl})` : '',
backgroundSize: 'cover'
}]">
<!-- AI 智能助手优先显示 --> <!-- AI 智能助手优先显示 -->
<view <view
v-if="fixBtnShow && enableAIChat" v-if="fixBtnShow && enableAIChat"
class="btn-item" class="btn-item common-bg"
@click="openAIChat" @click="openAIChat"
:style="{ backgroundImage: aiAgentimg ? `url(${aiAgentimg})` : '', backgroundSize: '100% 100%' }" :style="{ backgroundImage: aiAgentimg ? `url(${aiAgentimg})` : '', backgroundSize: '100% 100%' }"
> >
<text class="ai-icon" v-if="!aiAgentimg">🤖</text> <text class="ai-icon" v-if="!aiAgentimg">🤖</text>
</view> </view>
<!-- 普通客服仅当未启用 AI 时显示 --> <!-- 普通客服仅当未启用 AI 时显示 -->
<template v-else-if="fixBtnShow"> <template v-else-if="fixBtnShow">
<!-- #ifdef MP-WEIXIN --> <!-- #ifdef MP-WEIXIN -->
<button <button
class="btn-item" class="btn-item common-bg"
hoverClass="none" hoverClass="none"
openType="contact" openType="contact"
sessionFrom="weapp" sessionFrom="weapp"
@@ -31,7 +33,7 @@
<!-- #ifndef MP-WEIXIN --> <!-- #ifndef MP-WEIXIN -->
<button <button
class="btn-item" class="btn-item common-bg"
hoverClass="none" hoverClass="none"
@click="openKefuSelectPopup" @click="openKefuSelectPopup"
:style="[{ backgroundImage: kefuimg ? `url(${kefuimg})` : '', backgroundSize: '100% 100%' }, customButtonStyle]" :style="[{ backgroundImage: kefuimg ? `url(${kefuimg})` : '', backgroundSize: '100% 100%' }, customButtonStyle]"
@@ -41,10 +43,19 @@
<!-- #endif --> <!-- #endif -->
</template> </template>
<!-- 中英文切换按钮 -->
<view
v-if="isLanguageSwitchEnabled && fixBtnShow"
class="btn-item common-bg"
@click="toggleLanguage"
>
<text>{{ currentLangDisplayName }}</text>
</view>
<!-- 电话按钮始终显示 --> <!-- 电话按钮始终显示 -->
<view <view
v-if="fixBtnShow" v-if="fixBtnShow"
class="btn-item" class="btn-item common-bg"
@click="call()" @click="call()"
:style="[{ backgroundImage: phoneimg ? `url(${phoneimg})` : '', backgroundSize: '100% 100%' }, customButtonStyle]" :style="[{ backgroundImage: phoneimg ? `url(${phoneimg})` : '', backgroundSize: '100% 100%' }, customButtonStyle]"
> >
@@ -66,15 +77,9 @@ export default {
return { return {
pageCount: 0, pageCount: 0,
fixBtnShow: true, fixBtnShow: true,
tel: '',
kefuimg: '',
phoneimg: '',
shopInfo: null, shopInfo: null,
enableAIChat: false, // 默认关闭,但会在 created 中智能判断
aiAgentimg: '',
currentLangIndex: 0, currentLangIndex: 0,
langIndexMap: {}, langIndexMap: {},
isLanguageSwitchEnabled: false,
kefuList: [ kefuList: [
{ id: 'weixin-official', name: '微信官方客服', isOfficial: true, type: 'weapp' }, { id: 'weixin-official', name: '微信官方客服', isOfficial: true, type: 'weapp' },
{ id: 'custom-kefu', name: '自定义在线客服', isOfficial: false, type: 'custom' }, { id: 'custom-kefu', name: '自定义在线客服', isOfficial: false, type: 'custom' },
@@ -82,41 +87,37 @@ export default {
], ],
selectedKefu: null, selectedKefu: null,
customerService: null, customerService: null,
buttonConfig: null buttonConfig: null,
}; };
}, },
created() {
this.initLanguage();
this.kefuimg = this.$util.getDefaultImage().kefu;
this.phoneimg = this.$util.getDefaultImage().phone;
this.pageCount = getCurrentPages().length;
uni.getStorage({
key: 'shopInfo',
success: (e) => {
console.log('【调试】当前 shopInfo:', e.data);
this.shopInfo = e.data;
this.tel = e.data.mobile || '';
this.isLanguageSwitchEnabled = !!e.data.ischina;
// 🔧 关键修复:如果后台没传 enableAIChat默认开启方便测试
// 正式环境建议由后台控制,此处可改为 false
const defaultEnableAI = true; // ← 改成 false 可关闭默认开启
this.enableAIChat = e.data.hasOwnProperty('enableAIChat')
? !!e.data.enableAIChat
: defaultEnableAI;
this.aiAgentimg = e.data.aiAgentimg || '';
console.log('【调试】AI 客服是否启用:', this.enableAIChat);
},
fail: () => {
console.warn('未获取到 shopInfo使用默认设置');
// 如果完全没有 shopInfo也可以默认开启 AI
this.enableAIChat = true;
}
});
},
computed: { computed: {
// 安全读取 shopInfo 中的字段,避免 undefined 报错
bgUrl() {
return this.shopInfo?.bgUrl || '';
},
aiAgentimg() {
return this.shopInfo?.aiAgentimg || '';
},
kefuimg() {
return this.shopInfo?.kefuimg || this.$util.getDefaultImage().kefu;
},
phoneimg() {
return this.shopInfo?.phoneimg || this.$util.getDefaultImage().phone;
},
tel() {
return this.shopInfo?.mobile || '';
},
isLanguageSwitchEnabled() {
return !!this.shopInfo?.ischina;
},
enableAIChat() {
const defaultEnable = true;
if (!this.shopInfo) return defaultEnable;
return this.shopInfo.hasOwnProperty('enableAIChat')
? !!this.shopInfo.enableAIChat
: defaultEnable;
},
currentLangDisplayName() { currentLangDisplayName() {
const lang = this.langIndexMap[this.currentLangIndex]; const lang = this.langIndexMap[this.currentLangIndex];
return lang === 'zh-cn' ? 'EN' : 'CN'; return lang === 'zh-cn' ? 'EN' : 'CN';
@@ -134,6 +135,30 @@ export default {
return this.$store.state.aiUnreadCount || 0; return this.$store.state.aiUnreadCount || 0;
} }
}, },
watch: {
shopInfo: {
handler(newVal) {
// 可在此添加额外逻辑(如埋点、通知等),当前无需操作
},
immediate: true
}
},
created() {
this.initLanguage();
this.pageCount = getCurrentPages().length;
uni.getStorage({
key: 'shopInfo',
success: (e) => {
console.log('【调试】当前 shopInfo:', e.data);
this.shopInfo = e.data;
},
fail: () => {
console.warn('未获取到 shopInfo使用默认设置');
// shopInfo 为 nullcomputed 会自动返回默认值,无需手动赋值
}
});
},
methods: { methods: {
initLanguage() { initLanguage() {
this.langList = this.$langConfig.list(); this.langList = this.$langConfig.list();
@@ -209,7 +234,7 @@ export default {
}); });
} }
} }
} }
</script> </script>
<style scoped> <style scoped>
@@ -240,7 +265,6 @@ export default {
line-height: 1; line-height: 1;
margin: 14rpx 0; margin: 14rpx 0;
transition: 0.1s; transition: 0.1s;
background: var(--hover-nav-bg-color);
color: var(--hover-nav-text-color); color: var(--hover-nav-text-color);
border-radius: 40rpx; border-radius: 40rpx;
width: 80rpx; width: 80rpx;
@@ -249,6 +273,11 @@ export default {
overflow: hidden; overflow: hidden;
} }
/* 定义共同的背景颜色 */
.common-bg {
background-color: var(--hover-nav-bg-color); /* 使用变量以保持一致性 */
}
.btn-item text { .btn-item text {
font-size: 28rpx; font-size: 28rpx;
} }