lucky_shop/components/hover-nav/hover-nav.vue

<template>
	<!-- 悬浮按钮 -->
	<view v-if="pageCount == 1 || need" class="fixed-box" 
		:style="[{ height: fixBtnShow ? '330rpx' : '120rpx' }, customContainerStyle]">
		<!-- <view class="btn-item" v-if="fixBtnShow" @click="$util.redirectTo('/pages/index/index')"> -->
		<!-- 切换语言按钮 -->
		<button class="btn-item" v-if="fixBtnShow && isLanguageSwitchEnabled" @click="toggleLanguage()"
			:style="[{ backgroundSize: '100% 100%' }, customButtonStyle]">
			<text :style="customTextStyle">{{ currentLangDisplayName }}</text>
		</button>
		<!-- 客服按钮 -->
		<!-- #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%' }, customButtonStyle]">
			<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%' }, customButtonStyle]">
			<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>
		<view class="btn-item switch" v-else :class="{ show: fixBtnShow }"
			@click="fixBtnShow ? (fixBtnShow = false) : (fixBtnShow = true)">
			<view class="">快捷</view>
			<view>导航</view>
		</view> -->
	</view>
</template>

<script>
export default {
	name: 'hover-nav',
	props: {
		need: {
			type: Boolean,
			default: false
		}
	},
	data() {
		return {
			pageCount: 0,
			fixBtnShow: true,
			tel: '',
			kefuimg: '',
			phoneimg: '',
			shopInfo: null, // 店铺信息对象

			// --- 语言切换相关 ---
			currentLangIndex: 0,  // 当前选中的语言索引
			langIndexMap: {},     // 语言索引到语言值的映射
			isLanguageSwitchEnabled: false,  // 是否启用语言切换

			// --- 其他 ---
		};
	},
	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:${JSON.stringify(e.data)}`)
				this.shopInfo = e.data;

				// 从店铺信息中获取手机号
				this.tel = e.data.mobile
				// 从店铺信息中获取是否启用语言切换
				this.isLanguageSwitchEnabled = e.data.ischina;
			}
		})

	},
	computed: {
		currentLangDisplayName() {
			// 语言切换按钮显示名称，当前语言为中文时显示EN，否则显示CN
			// 根据 langIndexMap 获取当前语言值
			const lang = this.langIndexMap[this.currentLangIndex];
			return lang == 'zh-cn' ? 'EN' : 'CN';
		},

		// 获取容器的自定义样式
		customContainerStyle() {
			// 只返回非空的样式属性，确保不覆盖原有的默认样式
			return this.shopInfo?.floatingButton?.container || {};
		},

		// 获取按钮的自定义样式
		customButtonStyle() {
			// 只返回非空的样式属性，确保不覆盖原有的默认样式
			return this.shopInfo?.floatingButton?.button || {};
		},

		// 获取文本的自定义样式
		customTextStyle() {
			// 只返回非空的样式属性，确保不覆盖原有的默认样式
			return this.shopInfo?.floatingButton?.text || {};
		}
	},
	methods: {
		initLanguage() {
			// 初始化语言列表
			this.langList = this.$langConfig.list();

			// 初始化语言索引映射
			for (let i = 0; i < this.langList.length; i++) {
				this.langIndexMap[i] = this.langList[i].value;
			}

			// 获取存储的语言设置
			const savedLang = uni.getStorageSync('lang');
			if (savedLang) {
				for (let i = 0; i < this.langList.length; i++) {
					if (this.langList[i].value == savedLang) {
						this.currentLangIndex = i;
						break;
					}
				}
			} else {
				this.currentLangIndex = 0;
			}
		},
		//拨打电话
		call() {
			uni.makePhoneCall({
				phoneNumber: this.tel + ''
			})
		},
		toggleLanguage() {
			// 切换语言索引
			this.currentLangIndex = this.currentLangIndex == 0 ? 1 : 0;
			const targetLang = this.langIndexMap[this.currentLangIndex];

			// 获取当前页面路由
			let currentRoute = this.$util.getCurrentRoute().path;
			// 切换语言并重新加载当前页面
			this.$langConfig.change(targetLang, currentRoute);

		}
	}
};
</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: 240rpx;
	// #ifdef H5
	bottom: 320rpx;
	// #endif
	z-index: 10;
	// background: #fff;
	// box-shadow: 2rpx 2rpx 22rpx rgba(0, 0, 0, 0.3);
	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;
		text-align: center;
		flex-direction: column;
		line-height: 1;
		margin: 14rpx 0;
		transition: 0.1s;
		background: #c6251b;
		color: #fff;
		border-radius: 40rpx;
		width: 80rpx;
		height: 80rpx;
		padding: 0;
		overflow: hidden;

		text {
			font-size: 28rpx;
		}
		.iconfont,
		.icox {
			font-size: 36rpx;
			font-weight: bold;
			width: 100%;
			height: 100%;
			display: flex;
			justify-content: center;
			align-items: center;
			border-radius: 40rpx;
			/* 确保图标本身也是圆形 */
		}

		view {
			font-size: 26rpx;
			font-weight: bold;
		}

		&.show {
			transform: rotate(180deg);
		}

		&.switch {}

		&.icon-xiala {
			margin: 0;
			margin-top: 0.1rpx;
		}
	}
}
</style>