feat:添加按钮显示 + 触发切换逻辑
This commit is contained in:
@@ -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' // 新增:语言切换按钮文字(英文)
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -17,6 +17,7 @@ export const lang = {
|
|||||||
mescrollEmpty: "暂无相关数据",
|
mescrollEmpty: "暂无相关数据",
|
||||||
goodsRecommendTitle: '猜你喜欢',
|
goodsRecommendTitle: '猜你喜欢',
|
||||||
currencySymbol: '¥',
|
currencySymbol: '¥',
|
||||||
submit: '提交'
|
submit: '提交',
|
||||||
|
langSwitchBtn: '中文' // 新增:语言切换按钮文字(中文),最后一个属性不加逗号
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
|
|||||||
@@ -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>
|
||||||
@@ -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>
|
||||||
@@ -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>
|
||||||
@@ -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>
|
||||||
Reference in New Issue
Block a user