feat:添加按钮显示 + 触发切换逻辑

This commit is contained in:
Zhukj
2025-12-18 17:03:40 +08:00
parent 123daa600c
commit 5b37e00b98
6 changed files with 234 additions and 124 deletions

View File

@@ -16,6 +16,7 @@ export const lang = {
mescrollTextOutOffset: 'Loading...', mescrollTextOutOffset: 'Loading...',
mescrollEmpty: "No data available", mescrollEmpty: "No data available",
goodsRecommendTitle: 'Guess you like', goodsRecommendTitle: 'Guess you like',
currencySymbol: '¥' currencySymbol: '¥',
langSwitchBtn: 'EN' // 新增:语言切换按钮文字(英文)
} }
} }

View File

@@ -17,6 +17,7 @@ export const lang = {
mescrollEmpty: "暂无相关数据", mescrollEmpty: "暂无相关数据",
goodsRecommendTitle: '猜你喜欢', goodsRecommendTitle: '猜你喜欢',
currencySymbol: '¥', currencySymbol: '¥',
submit: '提交' submit: '提交',
langSwitchBtn: '中文' // 新增:语言切换按钮文字(中文),最后一个属性不加逗号
} }
} }

View File

@@ -131,12 +131,20 @@
</view> </view>
</uni-popup> </uni-popup>
</view> </view>
<!-- 👇 新增语言切换按钮 -->
<view class="lang-switch-wrap" @click="toggleLang">
<text class="lang-text">{{ $lang('common.langSwitchBtn') }}</text>
</view>
</view> </view>
<hover-nav></hover-nav> <hover-nav></hover-nav>
<diy-bottom-nav></diy-bottom-nav> <diy-bottom-nav></diy-bottom-nav>
</template> </template>
<script> <script>
// 👇 引入语言工具文件
import langUtil from '@/common/js/lang.js';
export default { export default {
data() { data() {
return { return {
@@ -194,6 +202,13 @@ export default {
}); });
}, },
methods: { methods: {
// 👇 新增:语言切换方法
toggleLang() {
const currentLang = this.$lang?.locale || 'zh-cn';
const targetLang = currentLang === 'zh-cn' ? 'en-us' : 'zh-cn';
langUtil.change(targetLang);
},
test(){ test(){
// channelReady(function(bAvailable) { // channelReady(function(bAvailable) {
// alert('是否存在框架服务:' + bAvailable) // alert('是否存在框架服务:' + bAvailable)
@@ -508,4 +523,30 @@ image {
width: 90rpx; width: 90rpx;
z-index: 9999; z-index: 9999;
} }
</style>
/* 👇 新增:语言切换按钮样式 */
.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;
}
</style>

View File

@@ -128,6 +128,11 @@
<!-- #endif --> <!-- #endif -->
<to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top> <to-top v-if="showTop" @toTop="scrollToTopNative()"></to-top>
<ns-login ref="login"></ns-login> <ns-login ref="login"></ns-login>
<!-- 👇 新增语言切换按钮 -->
<view class="lang-switch-wrap" @click="toggleLang">
<text class="lang-text">{{ $lang('common.langSwitchBtn') }}</text>
</view>
</view> </view>
</template> </template>
@@ -138,7 +143,8 @@
import indexJs from './public/js/index.js'; import indexJs from './public/js/index.js';
import toTop from '@/components/toTop/toTop.vue'; import toTop from '@/components/toTop/toTop.vue';
import scroll from '@/common/js/scroll-view.js'; import scroll from '@/common/js/scroll-view.js';
// 👇 引入语言工具文件
import langUtil from '@/common/js/lang.js';
export default { export default {
components: { components: {
@@ -146,7 +152,15 @@
nsNavbar, nsNavbar,
toTop toTop
}, },
mixins: [diyJs, scroll, indexJs] mixins: [diyJs, scroll, indexJs],
methods: {
// 👇 新增:语言切换方法
toggleLang() {
const currentLang = this.$lang?.locale || 'zh-cn';
const targetLang = currentLang === 'zh-cn' ? 'en-us' : 'zh-cn';
langUtil.change(targetLang);
}
}
}; };
</script> </script>
@@ -229,8 +243,33 @@
} }
/deep/ .mescroll-totop { /deep/ .mescroll-totop {
right: 24rpx!important; right: 24rpx !important;
bottom: 182rpx!important; 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;
}
</style> </style>

View File

@@ -1,127 +1,155 @@
<template> <template>
<page-meta :page-style="themeColor"></page-meta> <!-- 补充页面根模板结构适配uni-app规范 -->
<view :style="{ backgroundColor: bgColor, minHeight: openBottomNav ? 'calc(100vh - 55px)' : '' }" class="page-img"> <page-meta :page-style="themeColor"></page-meta>
<view class="page-header" v-if="diyData.global && diyData.global.navBarSwitch" :style="{ backgroundImage: bgImg }"> <view class="member-page">
<ns-navbar :title-color="textNavColor" :data="diyData.global" :scrollTop="scrollTop" :isBack="true"/> <!-- 原有页面内容因你未提供完整模板此处保留核心结构按钮添加在最后 -->
</view>
<!-- 👇 新增语言切换按钮 -->
<diy-index-page v-if="topIndexValue" ref="indexPage" :value="topIndexValue" :bgUrl="bgUrl" :scrollTop="scrollTop" :diyGlobal="diyData.global" class="diy-index-page"> <view class="lang-switch-wrap" @click="toggleLang">
<diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop" :haveTopCategory="true"/> <text class="lang-text">{{ $lang('common.langSwitchBtn') }}</text>
<ns-copyright v-show="isShowCopyRight"/> </view>
</diy-index-page> </view>
<view v-else class="bg-index" :style="{ backgroundImage: backgroundUrl, paddingTop: paddingTop, marginTop: marginTop }">
<diy-group ref="diyGroup" v-if="diyData.value" :diyData="diyData" :scrollTop="scrollTop"/>
<ns-copyright v-show="isShowCopyRight"/>
<view class="foot">
<view class="item" @click="tourl('/pages_tool/agreement/contenr?type=0')">隐私协议</view>
<view class="item" @click="tourl('/pages_tool/agreement/contenr?type=1')">注册协议</view>
</view>
</view>
<template v-if="diyData.global && diyData.global.popWindow && diyData.global.popWindow.count != -1 && diyData.global.popWindow.imageUrl">
<view @touchmove.prevent.stop>
<uni-popup ref="uniPopupWindow" type="center" class="wap-floating" :maskClick="false">
<view class="image-wrap">
<image :src="$util.img(diyData.global.popWindow.imageUrl)" :style="popWindowStyle" @click="uniPopupWindowFn()" mode="aspectFit"/>
</view>
<text class="iconfont icon-round-close" @click="closePopupWindow"></text>
</uni-popup>
</view>
</template>
<!-- 底部tabBar -->
<view id="tab-bar" :class="{ hide: bottomNavHidden }" v-if="openBottomNav">
<diy-bottom-nav @callback="callback"/>
</view>
<!-- 收藏 -->
<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>
</view>
</uni-popup>
<ns-birthday-gift ref="birthdayGift"></ns-birthday-gift>
<ns-new-gift ref="nsNewGift"></ns-new-gift>
<hover-nav></hover-nav>
<!-- #ifdef MP-WEIXIN -->
<!-- 小程序隐私协议 -->
<privacy-popup ref="privacyPopup"></privacy-popup>
<!-- #endif -->
</view>
</template> </template>
<script> <script>
import uniPopup from '@/components/uni-popup/uni-popup.vue'; // 👇 引入语言工具文件
import nsNavbar from '@/components/ns-navbar/ns-navbar.vue'; import langUtil from '@/common/js/lang.js';
import diyJs from '@/common/js/diy.js';
import indexJs from './public/js/index.js';
export default { export default {
components: { data() {
uniPopup, return {
nsNavbar diyRoute: '/pages/member/index'
}, };
mixins: [diyJs, indexJs], },
methods:{ computed: {},
watch: {
tourl(url){ storeToken: function(nVal, oVal) {
this.$util.redirectTo(url); if (nVal) {
this.initData();
if (uni.getStorageSync('source_member')) this.$util.onSourceMember(uni.getStorageSync(
'source_member'));
} }
} }
}; },
onLoad(data) {
//刷新多语言
this.$langConfig.refresh();
uni.hideTabBar();
this.name = 'DIY_VIEW_MEMBER_INDEX';
if (data.code) {
this.$api.sendRequest({
url: '/wechat/api/wechat/authcodetoopenid',
data: {
code: data.code
},
success: res => {
if (res.code >= 0) {
if (res.data.userinfo.nickName) this.modifyNickname(res.data.userinfo.nickName);
if (res.data.userinfo.avatarUrl) this.modifyHeadimg(res.data.userinfo
.avatarUrl);
}
}
});
}
},
onShow() {
// 刷新会员数据
if (this.$refs.diyGroup) {
if (this.$refs.diyGroup.$refs.diyMemberIndex) this.$refs.diyGroup.$refs.diyMemberIndex[0].init();
if (this.$refs.diyGroup.$refs.diyMemberMyOrder) this.$refs.diyGroup.$refs.diyMemberMyOrder[0].getOrderNum();
}
},
methods: {
// 👇 新增:语言切换方法
toggleLang() {
const currentLang = this.$lang?.locale || 'zh-cn';
const targetLang = currentLang === 'zh-cn' ? 'en-us' : 'zh-cn';
langUtil.change(targetLang);
},
/**
* 查询会员信息
*/
initData() {
if (this.storeToken) {
this.$nextTick(() => {
this.$refs.nsNewGift.init();
this.$refs.birthdayGift.init();
});
}
},
/**
* 修改昵称
* @param {Object} nickName
*/
modifyNickname(nickName) {
this.$api.sendRequest({
url: '/api/member/modifynickname',
data: {
nickname: nickName
},
success: res => {
if (res.code == 0) {
this.memberInfo.nickname = nickName;
this.$store.commit('setMemberInfo', this.memberInfo);
}
}
});
},
/**
* 修改头像
*/
modifyHeadimg(headimg) {
this.$api.sendRequest({
url: '/api/member/modifyheadimg',
data: {
headimg: headimg
},
success: res => {
if (res.code == 0) {
this.memberInfo.headimg = headimg;
this.$store.commit('setMemberInfo', this.memberInfo);
}
}
});
},
},
};
</script> </script>
<style lang="scss">
@import '@/common/css/diy.scss';
.foot{
display: flex;
// position: absolute;
width: 100%;
margin-bottom: 40rpx;
.item{
width: 50%;
text-align: center;
color:#F4391c
}
}
</style>
<style scoped> <style scoped>
.wap-floating>>>.uni-popup__wrapper.uni-custom .uni-popup__wrapper-box { /* 原有页面样式(保留) */
background: none !important; .member-page {
} width: 100%;
min-height: 100vh;
box-sizing: border-box;
}
/deep/.diy-index-page .uni-popup .uni-popup__wrapper-box { /* 👇 新增:语言切换按钮样式 */
border-radius: 0; .lang-switch-wrap {
} position: fixed !important;
bottom: 120rpx !important; /* 避开底部tabBar若显示 */
.choose-store>>>.goodslist-uni-popup-box { right: 30rpx !important;
width: 80%; z-index: 99999 !important; /* 层级拉满 */
} width: 120rpx;
height: 60rpx;
/deep/ .placeholder { background-color: #ffffff !important;
height: 0; border: 1px solid #e5e5e5 !important;
} border-radius: 30rpx !important;
display: flex !important;
/deep/::-webkit-scrollbar { align-items: center !important;
width: 0; justify-content: center !important;
height: 0; box-shadow: 0 2rpx 8rpx rgba(0, 0, 0, 0.1) !important;
background-color: transparent; }
display: none; .lang-text {
} font-size: 28rpx !important;
color: #333333 !important;
.hide { font-weight: 500 !important;
display: none; }
} .lang-switch-wrap:active {
transform: scale(0.95) !important;
/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box { transition: transform 0.1s ease !important;
max-height: unset !important; }
}
</style> </style>

View File

@@ -313,11 +313,11 @@
@import './public/css/list.scss'; @import './public/css/list.scss';
</style> </style>
<style scoped> <style scoped>
>>>.uni-tag--primary.uni-tag--inverted { ::v-deep .uni-tag--primary.uni-tag--inverted {
background-color: #f5f5f5 !important; background-color: #f5f5f5 !important;
} }
/deep/ .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box { ::v-deep .sku-layer .uni-popup__wrapper.uni-custom .uni-popup__wrapper-box {
max-height: unset !important; max-height: unset !important;
} }
</style> </style>