76 lines
1.7 KiB
Vue
76 lines
1.7 KiB
Vue
<template>
|
|
<div id="app" :style="{paddingBottom: paddingBottom + 'px'}">
|
|
<router-view />
|
|
<van-tabbar v-model="active" v-if="showTabbar" class="tabbar" ref="tabbar" route>
|
|
<van-tabbar-item icon="home-o" v-for="(tab, index) in tabbar" :key="index" :to="tab.path">{{tab.title}}</van-tabbar-item>
|
|
</van-tabbar>
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
import { tabbar } from '../src/router'
|
|
import { getWechatSign } from './api'
|
|
import { signToWechat } from './common/wechat-web';
|
|
|
|
export default {
|
|
name: 'App',
|
|
data(){
|
|
return {
|
|
active: '0',
|
|
paddingBottom: 0,
|
|
tabbar
|
|
}
|
|
},
|
|
provide(){
|
|
return {
|
|
root: this,
|
|
tabbar: this.$refs.tabbar,
|
|
showTabbar: false,
|
|
}
|
|
},
|
|
components: {
|
|
},
|
|
beforeCreate: () => {
|
|
getWechatSign(location.href).then(res => {
|
|
signToWechat(res)
|
|
})
|
|
},
|
|
watch: {
|
|
'$route': {
|
|
immediate: true,
|
|
handler(to){
|
|
const path = tabbar.map(tab => tab.path);
|
|
document.title = to.meta.title || '自在福田';
|
|
this.showTabbar = path.includes(path)
|
|
}
|
|
}
|
|
},
|
|
mounted(){
|
|
if(this.showTabbar){
|
|
this.paddingBottom = this.$refs.tabbar.$el.offsetHeight;
|
|
} else{
|
|
this.paddingBottom = 0
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
@import '~@/assets/css/reset.css';
|
|
@import '//at.alicdn.com/t/font_2897403_4wpxnjzf9qy.css';
|
|
|
|
#app {
|
|
font-family: Avenir, Helvetica, Arial, sans-serif;
|
|
-webkit-font-smoothing: antialiased;
|
|
-moz-osx-font-smoothing: grayscale;
|
|
max-width: 750px;
|
|
margin-left: auto;
|
|
margin-right: auto;
|
|
}
|
|
.tabbar{
|
|
padding-top: .57rem;
|
|
background: url('~@/assets/img/bg.png') top center no-repeat;
|
|
background-size: contain;
|
|
}
|
|
</style>
|