shortPlay-mini/components/gTabbar.vue

176 lines
3.5 KiB
Vue

<template>
<view>
<view class="page-content">
<slot></slot>
</view>
<u-tabbar
:value="current"
:placeholder="true"
:safeAreaInsetBottom="true"
>
<!-- #ifdef MP-WEIXIN -->
<u-tabbar-item text="首页" icon="home" @click="changeTab(0)" ></u-tabbar-item>
<u-tabbar-item text="短剧" icon="photo" @click="changeTab(1)" ></u-tabbar-item>
<u-tabbar-item text="数据" icon="integral" @click="changeTab(2)" ></u-tabbar-item>
<u-tabbar-item text="任务" icon="play-right" @click="changeTab(3)" ></u-tabbar-item>
<u-tabbar-item text="我的" icon="account" @click="changeTab(4)" ></u-tabbar-item>
<!-- #endif -->
<!-- #ifdef H5 -->
<u-tabbar-item text="首页" icon="home" @click="changeTab(0)" ></u-tabbar-item>
<u-tabbar-item text="变现" icon="photo" @click="changeTab(1)" ></u-tabbar-item>
<u-tabbar-item text="我的" icon="account" @click="changeTab(2)" ></u-tabbar-item>
<!-- #endif -->
</u-tabbar>
</view>
</template>
<script>
import {
mapState,
mapActions
} from 'vuex'
export default {
name:"gTabbar",
props: {
current: {
type: Number,
default: 0
}
},
computed: {
...mapState(['token'])
},
data() {
return {
list: []
};
},
onLoad() {
uni.hideTabBar()
},
onShow() {
uni.hideTabBar()
if(this.token) {
this.getUserInfo()
}
},
methods: {
...mapActions(['getUserInfo']),
changeTab(name) {
if(name == this.current) return;
let url = ''
// #ifdef H5
switch(name) {
case 0:
url = '/pages/home/h5/h5'
break;
case 1:
url = '/pages/shortPlay/shortPlay'
break;
case 2:
url = '/pages/my/h5/h5'
break;
}
// #endif
// #ifdef MP-WEIXIN
switch(name) {
case 0:
url = '/pages/home/mini/mini'
break;
case 1:
url = '/pages/shortPlay/shortPlay'
break;
case 2:
url = '/pages/data/data'
break;
case 3:
url = '/pages/task/task'
break;
case 4:
url = '/pages/my/mini/mini'
break;
}
// #endif
if(this.token || (!this.token && ['/pages/home/mini/mini', '/pages/shortPlay/shortPlay'].includes(url))) {
uni.switchTab({
url,
success() {
uni.hideTabBar()
}
})
} else {
uni.reLaunch({
// #ifdef H5
url: '/pages/login/login',
// #endif
// #ifdef MP-WEIXIN
url: '/pages/entry/entry'
// #endif
})
}
}
}
}
</script>
<style lang="scss" scoped>
.page-content {
width: 100vw;
background-color: #F7F8FA;
overflow-x: hidden;
}
.custom_style {
width: 132upx;
height: 132upx;
image {
width: 132upx;
height: 132upx;
margin-top: -36upx;
}
}
.loginBtn {
width: 686upx;
height: 88upx;
background: linear-gradient(180deg, #C8F8B4 0%, #53DC1A 100%);
font-size: 36upx;
font-family: Source Han Sans SC, Source Han Sans SC;
font-weight: 400;
color: #FFFFFF;
display: flex;
justify-content: center;
align-items: center;
border-radius: 44upx;
margin-top: 132upx;
margin-bottom: 44upx;
position: relative;
view {
position: absolute;
width: 100%;
height: 100%;
top: 0;
left: 0;
z-index: 2;
}
}
.disagreeBtn {
width: 686upx;
height: 88upx;
background: #EBEDF0;
font-size: 36upx;
font-family: Source Han Sans SC, Source Han Sans SC;
font-weight: 400;
color: #323233;
border-radius: 44upx;
display: flex;
justify-content: center;
align-items: center;
margin-bottom: 132upx;
}
</style>