topWindow.vue
3.79 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
<template>
<view>
<b-navbar toggleable="lg" type="dark" class="b-navbar">
<b-navbar-brand :title="$t('hdk.gohome')" href="/mobile/pages/homePage/index">
<img src="@/static/hdk-top-logo.png" width="63px" height="32px" style="margin-left: 10px;" alt="Kitten">
</b-navbar-brand>
<b-navbar-toggle target="nav-collapse"></b-navbar-toggle>
<b-collapse id="nav-collapse" is-nav class="p-2">
<!-- <b-navbar-nav>
<b-nav-item href="#">Link</b-nav-item>
<b-nav-item href="#" disabled>Disabled</b-nav-item>
</b-navbar-nav> -->
<!-- Right aligned nav items -->
<b-navbar-nav class="ml-auto">
<b-navbar-nav v-show="!isHome" class="b-navbar">
<b-nav-item @click="handleClick('productInformation')"
:class="{ 'activeCSS': selectedNavItem === 'productInformation' }">{{$t('hdk.productInformation')}}</b-nav-item>
<b-nav-item @click="handleClick('inspectionInformation')"
:class="{ 'activeCSS': selectedNavItem === 'inspectionInformation' }">{{$t('hdk.inspectionInformation')}}</b-nav-item>
<b-nav-item @click="handleClick('attachmentInformation')"
:class="{ 'activeCSS': selectedNavItem === 'attachmentInformation' }">{{$t('hdk.attachmentInformation')}}</b-nav-item>
</b-navbar-nav>
<b-nav-item-dropdown :text="selectedLanguage" right>
<b-dropdown-item href="#" @click="changeLanguage('en')">{{$t('locale.en')}}</b-dropdown-item>
<b-dropdown-item href="#"
@click="changeLanguage('zh-hans')">{{$t('locale.zh-hans')}}</b-dropdown-item>
</b-nav-item-dropdown>
</b-navbar-nav>
</b-collapse>
</b-navbar>
</view>
</template>
<script>
export default {
data() {
return {
selectedLanguage: this.$t('index.language'),
selectedNavItem: 'productInformation'
}
},
props: {
isHome: {
type: Boolean,
default: true
},
},
mounted() {
var url = window.location.href;
var lang = this.getQueryString('lang');
console.log("地址携带语种",lang);
if(lang === "zh"){
this.$i18n.locale = 'zh-Hans';
uni.setLocale('zh-Hans');
this.selectedLanguage = `${this.$t('index.language')}:${this.$t('locale.zh-hans')}`;
}else if(lang === "en"){
this.$i18n.locale = 'en';
uni.setLocale('en');
this.selectedLanguage = `${this.$t('index.language')}:${this.$t('locale.en')}`;
}else{
let Localelang = uni.getLocale();
console.log("本地语言",Localelang);
this.selectedLanguage = Localelang == 'en'?`${this.$t('index.language')}:${this.$t('locale.en')}`:`${this.$t('index.language')}:${this.$t('locale.zh-hans')}`
}
},
methods: {
getQueryString(key) {
const url = new URL(decodeURIComponent(location.href));
return url.searchParams.get(key);
},
handleClick(item) {
this.selectedNavItem = item;
this.$emit('item-click', item);
},
changeLanguage(locale) {
console.log('切换语言为:', locale);
// 更新选择的语言
if (locale === 'en') {
this.$i18n.locale = 'en';
uni.setLocale('en');
this.selectedLanguage = `${this.$t('index.language')}:${this.$t('locale.en')}`;
} else if (locale === 'zh-hans') {
this.$i18n.locale = 'zh-Hans';
uni.setLocale('zh-Hans');
this.selectedLanguage = `${this.$t('index.language')}:${this.$t('locale.zh-hans')}`;
}
}
}
}
</script>
<style>
.uni-top-window {
padding: 0 15px;
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: center;
box-sizing: border-box;
border-bottom: 1px solid #e1e1e1;
background-color: #00AEAA;
color: #333;
}
.b-navbar {
width: 100vw;
background-color: #00AEAA;
}
.nav-items{
background: #000;
}
.b-navCss{
color: #fff;
}
#nav-collapse{
height: 100%;
}
.activeCSS{
/* background: rgba(255, 255, 255, 0.5); */
/* color: #000 !important; */
}
</style>