feat(lang): 实现浮动按钮切换语言功能

2025-12-24 14:45:17 +08:00
parent d2da799dfc
commit d8d6c5631f
2 changed files with 197 additions and 105 deletions
--- a/common/js/lang.js
+++ b/common/js/lang.js
@@ -58,19 +58,23 @@ export default {
 		if (value == undefined || (value == 'title' && field == 'title')) value = ''; // field
 		return value;
 	},
-	//切换语言
-	change(value) {
+	/**
+	 * * 切换语言
+	 * @param {String} value 语言值
+	 * @param {String} url 切换后跳转的页面url
+	 */
+	change(value, url = '/pages/member/index') {
 		let _this = getCurrentPages()[getCurrentPages().length - 1];
 		if (!_this) return;

 		uni.setStorageSync("lang", value);
 		locale = uni.getStorageSync('lang') || "zh-cn"; //设置语言
-		
+
 		this.refresh();

-		uni.reLaunch({
-			url: '/pages/member/index'
-		});
+		if (url) {
+			uni.reLaunch({ url: url });
+		}
 	},
 	//刷新标题、tabbar
 	refresh() {
--- a/components/hover-nav/hover-nav.vue
+++ b/components/hover-nav/hover-nav.vue
@@ -1,19 +1,29 @@
 <template>
 	<!-- 悬浮按钮 -->
-	<view v-if="pageCount == 1 || need" class="fixed-box" :style="{ height: fixBtnShow ? '330rpx' : '120rpx' }">
+	<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%'}">
+		<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> -->
+			<!-- 	<view>首页</view> -->
 		</button>
 		<!-- #endif -->
-		<view class="btn-item" v-if="fixBtnShow" @click="call()"  :style="{backgroundImage:'url('+(phoneimg?phoneimg:'')+')',backgroundSize:'100% 100%'}">
+		<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)">
+		<!-- 	<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 }"
@@ -25,118 +35,196 @@
 </template>

 <script>
-	export default {
-		name: 'hover-nav',
-		props: {
-			need: {
-				type: Boolean,
-				default: false
-			},
-		},
-		data() {
-			return {
-				pageCount: 0,
-				fixBtnShow: true,
-				tel:'',
-				kefuimg:'',
-				phoneimg:''
-			};
-		},
-		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
-				}
-			})
-		
-		},
-		methods: {
-			//拨打电话
-			call(){
-				uni.makePhoneCall({
-					phoneNumber:this.tel+''
-				})
-			}
+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%;
+.container-box {
+	width: 100%;

-		.item-wrap {
+	.item-wrap {
+		border-radius: 10rpx;
+
+		.image-box {
 			border-radius: 10rpx;
+		}

-			.image-box {
-				border-radius: 10rpx;
-			}
-
-			image {
-				width: 100%;
-				height: auto;
-				border-radius: 10rpx;
-				will-change: transform;
-			}
+		image {
+			width: 100%;
+			height: auto;
+			border-radius: 10rpx;
+			will-change: transform;
 		}
 	}
+}

-	//悬浮按钮
-	.fixed-box {
-		position: fixed;
-		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;
+//悬浮按钮
+.fixed-box {
+	position: fixed;
+	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;
+	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;
-		width: 100rpx;
-		box-sizing: border-box;
-		transition: 0.3s;
-		overflow: hidden;
+		line-height: 1;
+		margin: 14rpx 0;
+		transition: 0.1s;
+		background: #fff;
+		border-radius: 50rpx;
+		width: 80rpx;
+		height: 80rpx;
+		padding: 0;

-		.btn-item {
-			display: flex;
-			justify-content: center;
-			text-align: center;
-			flex-direction: column;
-			line-height: 1;
-			margin: 14rpx 0;
-			transition: 0.1s;
-			background: #fff;
-			border-radius: 50rpx;
-			width: 80rpx;
-			height: 80rpx;
-			padding: 0;
-			text {
-				font-size: 36rpx;
-				font-weight: bold;
-			}
+		text {
+			font-size: 36rpx;
+			font-weight: bold;
+		}

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

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

-			&.switch {}
+		&.switch {}

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