Uniapp/lucky_shop
3
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat：添加中英文切换按钮

Browse Source
This commit is contained in:
Zhukj
2025-12-19 14:20:58 +08:00
parent 5b37e00b98
commit e77bdc0359
12 changed files with 402 additions and 267 deletions
Download Patch File Download Diff File Expand all files Collapse all files

4
pages/contact/contact.vue
View File

@@ -132,10 +132,6 @@
</uni-popup>
</view>
<!-- 👇 新增：语言切换按钮 -->
<view class="lang-switch-wrap" @click="toggleLang">
<text class="lang-text">{{ $lang('common.langSwitchBtn') }}</text>
</view>
</view>
<hover-nav></hover-nav>
<diy-bottom-nav></diy-bottom-nav>

48
pages/goods/category.vue
View File

@@ -30,7 +30,9 @@
components: {},
data() {
return {
diyData: null
diyData: null,
// 新增：标记是否已监听语言事件，避免重复监听
langListenerAdded: false
};
},
onLoad() {
@@ -38,20 +40,51 @@
this.$langConfig.refresh();
uni.hideTabBar();
this.getDiyInfo();
// 新增：监听全局语言切换事件
this.addLangListener();
},
onShow() {
if (this.$refs.category) this.$refs.category[0].pageShow();
},
onUnload() {
if (!this.storeToken && this.$refs.login) this.$refs.login.cancelCompleteInfo();
// 新增：页面销毁时移除语言监听，避免内存泄漏
this.removeLangListener();
},
methods: {
// 新增：添加语言切换监听（封装为方法，避免重复监听）
addLangListener() {
if (!this.langListenerAdded) {
uni.$on('lang-changed', this.handleLangChange);
this.langListenerAdded = true;
}
},
// 新增：移除语言切换监听
removeLangListener() {
if (this.langListenerAdded) {
uni.$off('lang-changed', this.handleLangChange);
this.langListenerAdded = false;
}
},
// 新增：语言切换后的处理逻辑
handleLangChange() {
// 1. 刷新多语言配置（确保语言包生效）
this.$langConfig.refresh();
// 2. 显示加载遮罩，提升用户体验
if (this.$refs.loadingCover) this.$refs.loadingCover.show();
// 3. 重新请求分类数据（核心：获取对应语言的分类内容）
this.getDiyInfo();
},
getDiyInfo() {
this.$api.sendRequest({
url: '/api/diyview/info',
data: {
name: 'DIY_VIEW_GOODS_CATEGORY'
},
// 新增：请求头携带当前语言，让后端返回对应语言的分类数据
header: {
'lang': uni.getStorageSync('lang') || 'zh-cn'
},
success: res => {
if (res.code == 0 && res.data) {
this.diyData = res.data;
@@ -61,6 +94,11 @@
}
uni.stopPullDownRefresh();
}
},
// 新增：请求失败时隐藏加载遮罩，避免遮罩卡死
fail: () => {
if (this.$refs.loadingCover) this.$refs.loadingCover.hide();
uni.stopPullDownRefresh();
}
});
},
@@ -71,6 +109,14 @@
onPullDownRefresh() {
uni.hideTabBar();
this.getDiyInfo();
},
// 新增：页面隐藏时移除监听（可选，增强容错）
onHide() {
this.removeLangListener();
},
// 新增：页面重新显示时重新添加监听
onReShow() {
this.addLangListener();
}
};
</script>

136
pages/index/index.vue
View File

@@ -7,17 +7,16 @@
<image :src="$util.img(siteInfo.logo_square)" mode="aspectFill"></image>
</view>
<view class="info-box" :style="{ color: '#ffffff' }">
<text class="font-size-base">{{ siteInfo.site_name }}</text>
<text>{{ followOfficialAccount.welcomeMsg }}</text>
<!-- 新增：多语言 - 站点名称 -->
<text class="font-size-base">{{ $lang('common.siteName') || siteInfo.site_name }}</text>
<!-- 新增：多语言 - 公众号欢迎语 -->
<text>{{ $lang('common.welcomeMsg') || followOfficialAccount.welcomeMsg }}</text>
</view>
</view>
<view class="dite-button" @click="officialAccountsOpen">关注公众号</view>
<!-- 新增：多语言 - 关注公众号按钮 -->
<view class="dite-button" @click="officialAccountsOpen">{{ $lang('common.followOfficialAccount') }}</view>
</view>
<!-- <view class="page-header" v-if="diyData.global && diyData.global.navBarSwitch" :style="{ backgroundImage: bgImg }">
<ns-navbar :title-color="textNavColor" :data="diyData.global" :scrollTop="scrollTop" :isBack="false"/>
</view> -->
<diy-index-page v-if="topIndexValue" ref="indexPage" :value="topIndexValue" :bgUrl="bgUrl" :scrollTop="scrollTop" :diyGlobal="diyData.global" class="diy-index-page">
<template v-slot:components>
<diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop" :haveTopCategory="true" :followOfficialAccount="followOfficialAccount"/>
@@ -36,33 +35,15 @@
<view @touchmove.prevent.stop>
<uni-popup ref="uniPopupWindow" type="center" class="wap-floating" :maskClick="false">
<view class="small-bot">
<!-- <view class="adver-time" wx:if="{{startadv.params.style=='default'&&startadv.params.canclose==1}}">
<view bindtap="adverclose">跳过</view>
<view class="time">{{clock}}s</view>
</view>
<view class="adver-time" wx:if="{{startadv.params.style=='default'&&startadv.params.canclose==0}}">
<view class="time" style="line-height: 64rpx;">{{clock}}s</view>
</view> -->
<swiper autoplay="true" :circular="true" indicator-active-color="#fff" indicator-color="rgba(255,255,255,0.6)" :indicator-dots="true" interval="3000">
<swiper-item v-for="(item, index) in adv.list" :key="index">
<image class="slide-image" @click="$util.diyRedirectTo(item.link)" height="100%" :src="$util.img(item.imageUrl)" width="100%"></image>
<!-- <image bindtap="adverclose" class="slide-image" height="100%" src="{{item.imgurl}}" width="100%" wx:if="{{item.click==1}}"></image> -->
</swiper-item>
</swiper>
<view bindtap="adverclose" class="small-bot-close" @click="closePopupWindow">
<i class="iconfont icon-round-close" style="color:#fff"></i>
</view>
</view>
<!-- <view class="image-wrap">
<swiper class="swiper" style="width:100%;height: 1200rpx;" :autoplay="true" interval="3000" circular="true" :indicator-dots="true" indicator-color="#000" indicator-active-color="red">
<swiper-item class="swiper-item" v-for="(item, index) in adv.list" :key="index" v-if="item.imageUrl" @click="$util.diyRedirectTo(item.link)">
<view class="item">
<image :src="$util.img(item.imageUrl)" mode="aspectFit" :show-menu-by-longpress="true"/>
</view>
</swiper-item>
</swiper>
</view>
<text class="iconfont icon-round-close" @click="closePopupWindow"></text> -->
</uni-popup>
</view>
</template>
@@ -77,7 +58,8 @@
<uni-popup ref="officialAccountsPopup" type="center">
<view class="official-accounts-wrap">
<image class="content" :src="$util.img(wechatQrcode)" mode="aspectFit"></image>
<text class="desc">关注了解更多</text>
<!-- 新增：多语言 - 关注公众号提示 -->
<text class="desc">{{ $lang('common.followMoreInfo') }}</text>
<text class="close iconfont icon-round-close" @click="officialAccountsClose"></text>
</view>
</uni-popup>
@@ -87,25 +69,29 @@
<uni-popup ref="collectPopupWindow" type="top" class="wap-floating wap-floating-collect">
<view v-if="showTip" class="collectPopupWindow" :style="{ marginTop: (collectTop + statusBarHeight) * 2 + 'rpx' }">
<image :src="$util.img('public/uniapp/index/collect2.png')" mode="aspectFit"/>
<text @click="closeCollectPopupWindow">我知道了</text>
<!-- 新增：多语言 - 我知道了 -->
<text @click="closeCollectPopupWindow">{{ $lang('common.iKnow') }}</text>
</view>
</uni-popup>
<!-- 选择门店弹出框，定位当前位置，展示最近的一个门店 -->
<!-- 选择门店弹出框 -->
<view @touchmove.prevent.stop class="choose-store">
<uni-popup ref="chooseStorePopup" type="center" :maskClick="false" class="choose-store">
<view class="choose-store-popup">
<view class="head-wrap" @click="closeChooseStorePopup">请确认门店</view>
<!-- 新增：多语言 - 请确认门店 -->
<view class="head-wrap" @click="closeChooseStorePopup">{{ $lang('common.confirmStore') }}</view>
<view class="position-wrap">
<text class="iconfont icon-dizhi"></text>
<text class="address">{{ currentPosition }}</text>
<view class="reposition" @click="reposition" v-if="globalStoreConfig && globalStoreConfig.is_allow_change == 1">
<text class="iconfont icon-dingwei"></text>
<text>重新定位</text>
<!-- 新增：多语言 - 重新定位 -->
<text>{{ $lang('common.reposition') }}</text>
</view>
</view>
<view class="store-wrap" v-if="nearestStore">
<text class="tag">当前门店</text>
<!-- 新增：多语言 - 当前门店 -->
<text class="tag">{{ $lang('common.currentStore') }}</text>
<view class="store-name">{{ nearestStore.store_name }}</view>
<view class="address">{{ nearestStore.show_address }}</view>
<view class="distance" v-if="nearestStore.distance">
@@ -113,26 +99,25 @@
<text>{{ nearestStore.distance > 1 ? nearestStore.distance + 'km' : nearestStore.distance * 1000 + 'm' }}</text>
</view>
</view>
<button type="primary" @click="enterStore">确认进入</button>
<!-- 新增：多语言 - 确认进入 -->
<button type="primary" @click="enterStore">{{ $lang('common.confirmEnter') }}</button>
<view class="other-store" @click="chooseOtherStore" v-if="globalStoreConfig && globalStoreConfig.is_allow_change == 1">
<text>选择其他门店</text>
<!-- 新增：多语言 - 选择其他门店 -->
<text>{{ $lang('common.chooseOtherStore') }}</text>
<text class="iconfont icon-right"></text>
</view>
</view>
</uni-popup>
</view>
<!-- 悬浮按钮组件（已包含语言切换按钮） -->
<hover-nav></hover-nav>
<!-- #ifdef MP-WEIXIN -->
<!-- 小程序隐私协议 -->
<privacy-popup ref="privacyPopup"></privacy-popup>
<!-- #endif -->
<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
<ns-login ref="login"></ns-login>
<!-- 👇 新增：语言切换按钮 -->
<view class="lang-switch-wrap" @click="toggleLang">
<text class="lang-text">{{ $lang('common.langSwitchBtn') }}</text>
</view>
<!-- 👇 删除：重复的语言切换按钮（hover-nav里已有） -->
</view>
</template>
@@ -143,7 +128,7 @@
import indexJs from './public/js/index.js';
import toTop from '@/components/toTop/toTop.vue';
import scroll from '@/common/js/scroll-view.js';
// 👇 引入语言工具文件
// 👇 保留引入，但无需重复定义切换方法（hover-nav已处理）
import langUtil from '@/common/js/lang.js';
export default {
@@ -153,13 +138,45 @@
toTop
},
mixins: [diyJs, scroll, indexJs],
data() {
return {
// 新增：标记是否已监听语言事件
langListenerAdded: false
};
},
onLoad() {
// 新增：监听语言切换事件，刷新首页DIY数据
this.addLangListener();
},
onUnload() {
// 新增：页面销毁时移除监听
this.removeLangListener();
},
methods: {
// 👇 新增：语言切换方法
toggleLang() {
const currentLang = this.$lang?.locale || 'zh-cn';
const targetLang = currentLang === 'zh-cn' ? 'en-us' : 'zh-cn';
langUtil.change(targetLang);
}
// 新增：添加语言监听
addLangListener() {
if (!this.langListenerAdded) {
uni.$on('lang-changed', this.handleLangChange);
this.langListenerAdded = true;
}
},
// 新增：移除语言监听
removeLangListener() {
if (this.langListenerAdded) {
uni.$off('lang-changed', this.handleLangChange);
this.langListenerAdded = false;
}
},
// 新增：语言切换后刷新首页数据
handleLangChange() {
// 重新请求首页DIY数据，确保内容同步为新语言
if (this.getDiyInfo) {
this.getDiyInfo(); // 调用首页获取DIY数据的方法
}
// 刷新多语言配置
this.$langConfig?.refresh();
},
// 👇 删除：重复的toggleLang方法（hover-nav里已有）
}
};
</script>
@@ -168,8 +185,6 @@
@import '@/common/css/diy.scss';
@import './public/css/index.scss';
.small-bot {
width: 100%;
height: 100%;
@@ -208,7 +223,6 @@
.small-bot-close i {
font-size: 60rpx;
}
</style>
<style scoped>
.swiper /deep/ .uni-swiper-dots-horizontal {
@@ -247,29 +261,5 @@
bottom: 182rpx !important;
}
/* 👇 新增：语言切换按钮样式 */
.lang-switch-wrap {
position: fixed !important;
bottom: 120rpx !important; /* 避开底部tabBar */
right: 30rpx !important;
z-index: 99999 !important; /* 层级拉满 */
width: 120rpx;
height: 60rpx;
background-color: #ffffff !important;
border: 1px solid #e5e5e5 !important;
border-radius: 30rpx !important;
display: flex !important;
align-items: center !important;
justify-content: center !important;
box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1) !important;
}
.lang-text {
font-size: 28rpx !important;
color: #333333 !important;
font-weight: 500 !important;
}
.lang-switch-wrap:active {
transform: scale(0.95) !important;
transition: transform 0.1s ease !important;
}
/* 👇 删除：重复的语言按钮样式（hover-nav里已有） */
</style>

4
pages/member/index.vue
View File

@@ -4,10 +4,6 @@
<view class="member-page">
<!-- 原有页面内容（因你未提供完整模板，此处保留核心结构，按钮添加在最后） -->
<!-- 👇 新增：语言切换按钮 -->
<view class="lang-switch-wrap" @click="toggleLang">
<text class="lang-text">{{ $lang('common.langSwitchBtn') }}</text>
</view>
</view>
</template>