177 lines
4.4 KiB
Vue
177 lines
4.4 KiB
Vue
<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" openType="contact" sessionFrom="weapp" showMessageCard="true" :style="{backgroundImage:'url('+(kefuimg?kefuimg:'')+')',backgroundSize:'100% 100%'}">
|
||
<text class="icox icox-kefu" v-if="!kefuimg"></text>
|
||
</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 class="btn-item" v-if="fixBtnShow" @click="switchLang" :style="{backgroundSize:'100% 100%'}">
|
||
<text class="lang-text">{{ currentLang === 'zh-cn' ? 'EN' : '中文' }}</text>
|
||
</view>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: 'hover-nav',
|
||
props: {
|
||
need: {
|
||
type: Boolean,
|
||
default: false
|
||
},
|
||
},
|
||
data() {
|
||
return {
|
||
pageCount: 0,
|
||
fixBtnShow: true,
|
||
tel:'',
|
||
kefuimg:'',
|
||
phoneimg:'',
|
||
// 新增：当前语言（默认中文）
|
||
currentLang: uni.getStorageSync('lang') || 'zh-cn'
|
||
};
|
||
},
|
||
created() {
|
||
this.kefuimg = this.$util.getDefaultImage().kefu
|
||
this.phoneimg = this.$util.getDefaultImage().phone
|
||
this.pageCount = getCurrentPages().length;
|
||
var that = this
|
||
uni.getStorage({
|
||
key:'shopInfo',
|
||
success(e){
|
||
that.tel = e.data.mobile
|
||
}
|
||
})
|
||
// 新增：监听全局语言切换事件，实时更新按钮文字
|
||
uni.$on('lang-changed', (lang) => {
|
||
this.currentLang = lang;
|
||
})
|
||
},
|
||
methods: {
|
||
//拨打电话
|
||
call(){
|
||
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>
|
||
|
||
<style lang="scss">
|
||
.container-box {
|
||
width: 100%;
|
||
|
||
.item-wrap {
|
||
border-radius: 10rpx;
|
||
|
||
.image-box {
|
||
border-radius: 10rpx;
|
||
}
|
||
|
||
image {
|
||
width: 100%;
|
||
height: auto;
|
||
border-radius: 10rpx;
|
||
will-change: transform;
|
||
}
|
||
}
|
||
}
|
||
|
||
//悬浮按钮（容器样式保持原始不变，确保按钮不消失）
|
||
.fixed-box {
|
||
position: fixed;
|
||
right: 0rpx;
|
||
bottom: 200rpx;
|
||
z-index: 10;
|
||
border-radius: 120rpx;
|
||
padding: 20rpx 0;
|
||
display: flex;
|
||
justify-content: center;
|
||
flex-direction: column;
|
||
width: 100rpx;
|
||
box-sizing: border-box;
|
||
transition: 0.3s;
|
||
overflow: hidden;
|
||
|
||
.btn-item {
|
||
display: flex;
|
||
justify-content: center;
|
||
align-items: center; // 新增：垂直居中，和其他按钮对齐
|
||
text-align: center;
|
||
flex-direction: column;
|
||
line-height: 1;
|
||
margin: 14rpx 0;
|
||
transition: 0.1s;
|
||
// ========== 修改1：按钮背景改为纯红色（红底） ==========
|
||
background: #E60012;
|
||
border-radius: 50rpx;
|
||
width: 80rpx;
|
||
height: 80rpx;
|
||
padding: 0;
|
||
text {
|
||
font-size: 36rpx;
|
||
font-weight: bold;
|
||
// ========== 修改2：图标文字改为白色（白字） ==========
|
||
color: #FFFFFF;
|
||
}
|
||
// 新增：语言按钮文字样式
|
||
.lang-text {
|
||
font-size: 24rpx; // 适配圆形按钮大小
|
||
font-weight: 600;
|
||
// ========== 修改3：语言按钮文字改为白色 ==========
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
view {
|
||
font-size: 26rpx;
|
||
font-weight: bold;
|
||
// ========== 兜底：确保所有文字都是白色 ==========
|
||
color: #FFFFFF;
|
||
}
|
||
|
||
&.show {
|
||
transform: rotate(180deg);
|
||
}
|
||
|
||
&.switch {}
|
||
|
||
&.icon-xiala {
|
||
margin: 0;
|
||
margin-top: 0.1rpx;
|
||
}
|
||
|
||
// ========== 新增：按钮点击交互效果 ==========
|
||
&:active {
|
||
background: #C4000F; // 红色轻微加深
|
||
transform: scale(0.95); // 按钮小幅度缩小
|
||
}
|
||
}
|
||
}
|
||
</style> |