feat:添加中英文切换按钮
This commit is contained in:
@@ -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;
|
||||
|
||||
Reference in New Issue
Block a user