feat:添加中英文切换按钮

This commit is contained in:
Zhukj
2025-12-19 14:20:58 +08:00
parent 5b37e00b98
commit e77bdc0359
12 changed files with 402 additions and 267 deletions

View File

@@ -1,26 +1,20 @@
<template>
<!-- 悬浮按钮 -->
<view v-if="pageCount == 1 || need" class="fixed-box" :style="{ height: fixBtnShow ? '330rpx' : '120rpx' }">
<!-- <view class="btn-item" v-if="fixBtnShow" @click="$util.redirectTo('/pages/index/index')"> -->
<!-- 客服按钮 -->
<!-- #ifdef MP-WEIXIN -->
<button class="btn-item" v-if="fixBtnShow" hoverClass="none" openType="contact" sessionFrom="weapp" showMessageCard="true" :style="{backgroundImage:'url('+(kefuimg?kefuimg:'')+')',backgroundSize:'100% 100%'}">
<text class="icox icox-kefu" v-if="!kefuimg"></text>
<!-- <view>首页</view> -->
</button>
<!-- #endif -->
<!-- 电话按钮 -->
<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> -->
</view>
<!-- <view class="btn-item icon-xiala" v-if="fixBtnShow" @click="fixBtnShow ? (fixBtnShow = false) : (fixBtnShow = true)">
<text class="iconfont icon-unfold"></text>
<!-- 新增语言切换按钮 -->
<view class="btn-item" v-if="fixBtnShow" @click="switchLang" :style="{backgroundSize:'100% 100%'}">
<text class="lang-text">{{ currentLang === 'zh-cn' ? 'EN' : '中文' }}</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>
</template>
@@ -39,7 +33,9 @@
fixBtnShow: true,
tel:'',
kefuimg:'',
phoneimg:''
phoneimg:'',
// 新增:当前语言(默认中文)
currentLang: uni.getStorageSync('lang') || 'zh-cn'
};
},
created() {
@@ -53,7 +49,10 @@
that.tel = e.data.mobile
}
})
// 新增:监听全局语言切换事件,实时更新按钮文字
uni.$on('lang-changed', (lang) => {
this.currentLang = lang;
})
},
methods: {
//拨打电话
@@ -61,7 +60,26 @@
uni.makePhoneCall({
phoneNumber:this.tel+''
})
},
// 新增:语言切换核心方法
switchLang() {
// 1. 切换目标语言(中文↔英文)
const targetLang = this.currentLang === 'zh-cn' ? 'en-us' : 'zh-cn';
// 2. 保存到本地存储(全局生效)
uni.setStorageSync('lang', targetLang);
// 3. 触发全局语言事件(通知其他页面更新)
uni.$emit('lang-changed', targetLang);
// 4. 延迟重启当前页面(避免白屏,保证语言生效)
setTimeout(() => {
const pages = getCurrentPages();
const currentPage = pages[pages.length - 1];
uni.reLaunch({ url: '/' + currentPage.route });
}, 300);
}
},
// 新增:页面销毁时移除监听,避免内存泄漏
beforeDestroy() {
uni.$off('lang-changed');
}
};
</script>
@@ -92,8 +110,6 @@
right: 0rpx;
bottom: 200rpx;
z-index: 10;
// background: #fff;
// box-shadow: 2rpx 2rpx 22rpx rgba(0, 0, 0, 0.3);
border-radius: 120rpx;
padding: 20rpx 0;
display: flex;
@@ -107,6 +123,7 @@
.btn-item {
display: flex;
justify-content: center;
align-items: center; // 新增:垂直居中,和其他按钮对齐
text-align: center;
flex-direction: column;
line-height: 1;
@@ -121,6 +138,12 @@
font-size: 36rpx;
font-weight: bold;
}
// 新增:语言按钮文字样式
.lang-text {
font-size: 24rpx; // 适配圆形按钮大小
font-weight: 600;
color: #333; // 和其他按钮图标颜色统一
}
view {
font-size: 26rpx;