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

common/js/lang.js

@@ -58,8 +58,12 @@ 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;
 
@@ -68,9 +72,9 @@ export default {
 
 		this.refresh();
 
-		uni.reLaunch({
+		if (url) {
-			url: '/pages/member/index'
+			uni.reLaunch({ url: url });
-		});
+		}
 	},
 	//刷新标题、tabbar
 	refresh() {

components/hover-nav/hover-nav.vue

@@ -1,14 +1,24 @@
 <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> -->
 		</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>
@@ -31,7 +41,7 @@
 		need: {
 			type: Boolean,
 			default: false
-			},
+		}
 	},
 	data() {
 		return {
@@ -39,28 +49,105 @@
 			fixBtnShow: true,
 			tel: '',
 			kefuimg: '',
-				phoneimg:''
+			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;
-			var that = this
+
+		// 从店铺信息中获取相关信息
 		uni.getStorage({
 			key: 'shopInfo',
-				success(e){
+			success: (e) => {
-					that.tel = e.data.mobile
+				// 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);
+
 		}
 	}
 };
@@ -117,6 +204,7 @@
 		width: 80rpx;
 		height: 80rpx;
 		padding: 0;
+
 		text {
 			font-size: 36rpx;
 			font-weight: bold;