generated from chenhao/template-h5
81 lines
2.0 KiB
Vue
81 lines
2.0 KiB
Vue
<template>
|
|
<router-view></router-view>
|
|
|
|
<div class="copyright">
|
|
<span>
|
|
版权所有 微生客 ©<br>
|
|
Copyright 2019. All Rights Reserved. <br>
|
|
浙ICP备13026631号-2
|
|
</span>
|
|
</div>
|
|
<van-tabbar v-model="active" placeholder @change="changeActive" active-color="#00c250" inactive-color="#666" fixed>
|
|
<van-tabbar-item v-for="(item, index) in Tabbars" :name="item.Name" :dot="item.Dot" @click="refresh(item.Name)">
|
|
<span>{{ item.Label }}</span>
|
|
<template #icon="props">
|
|
<img :src="props.active ? item.Icon_Active : item.Icon_Inactive" />
|
|
</template>
|
|
</van-tabbar-item>
|
|
</van-tabbar>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
name: 'Index',
|
|
data() {
|
|
return {
|
|
active: this.$route.name,
|
|
Tabbars: [
|
|
{
|
|
Name: 'Home',
|
|
Icon_Inactive: '/img/home_inactive.png',
|
|
Icon_Active: '/img/home_active.png',
|
|
Label: '首页',
|
|
},
|
|
{
|
|
Name: 'About',
|
|
Icon_Inactive: '/img/about_inactive.png',
|
|
Icon_Active: '/img/about_active.png',
|
|
Label: '关于公司',
|
|
},
|
|
{
|
|
Name: 'Service',
|
|
Icon_Inactive: '/img/service_inactive.png',
|
|
Icon_Active: '/img/service_active.png',
|
|
Label: '产品服务',
|
|
},
|
|
{
|
|
Name: 'Apply',
|
|
Icon_Inactive: '/img/apply_inactive.png',
|
|
Icon_Active: '/img/apply_active.png',
|
|
Label: '申请加盟',
|
|
}
|
|
]
|
|
}
|
|
},
|
|
watch: {
|
|
$route(to, from) {
|
|
this.active = to.name;
|
|
}
|
|
},
|
|
methods: {
|
|
refresh(name) {
|
|
if (this.$route.name == name) {
|
|
location.reload();
|
|
};
|
|
this.active = name;
|
|
this.$router.push({ name: name })
|
|
},
|
|
changeActive(name) {
|
|
this.active = name;
|
|
},
|
|
init() {
|
|
if (this.$route.name == 'Index') {
|
|
location.replace(`/${this.Tabbars[0].Name}`);
|
|
}
|
|
}
|
|
},
|
|
beforeMount() {
|
|
this.init();
|
|
}
|
|
}
|
|
</script> |