133 lines
3.2 KiB
Vue
133 lines
3.2 KiB
Vue
<template>
|
|
<view class="tab_bar">
|
|
<view class="tabbarBox">
|
|
<view class="handleBox" @click="goPageIndex()">
|
|
<view class="menuIcon">
|
|
<image v-if="selectIndex === '/pages/index/index'" class="second" src="/static/images/tabBar/home-active.png">
|
|
</image>
|
|
<image v-else-if="selectIndex !== '/pages/index/index'" class="second" src="/static/images/tabBar/home.png">
|
|
</image>
|
|
<text v-if="selectIndex === '/pages/index/index'" class="text red">云南交投</text>
|
|
<text v-else-if="selectIndex !== '/pages/index/index'" class="text">云南交投</text>
|
|
</view>
|
|
</view>
|
|
<view class="handleBox" @click="goPages('/pages/userCenter/userCenter')">
|
|
<view class="menuIcon">
|
|
<image v-if="selectIndex === '/pages/userCenter/userCenter'" class="second"
|
|
src="/static/images/tabBar/user_active.png"></image>
|
|
<image v-else-if="selectIndex !== '/pages/userCenter/userCenter'" class="second"
|
|
src="/static/images/tabBar/user.png"></image>
|
|
<text v-if="selectIndex === '/pages/userCenter/userCenter'" class="text red">我的</text>
|
|
<text v-else-if="selectIndex !== '/pages/userCenter/userCenter'" class="text">我的</text>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
import { mapGetters } from "vuex";
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
phone: '',
|
|
selectIndex: '/pages/index/index'
|
|
}
|
|
},
|
|
computed: {
|
|
...mapGetters({ 'user': 'getUser' })
|
|
},
|
|
props: {
|
|
page: {
|
|
type: String,
|
|
default: ''
|
|
}
|
|
},
|
|
watch: {
|
|
page: {
|
|
handler(value) {
|
|
this.selectIndex = value
|
|
},
|
|
deep: true,
|
|
immediate: true
|
|
}
|
|
},
|
|
onLoad() { },
|
|
methods: {
|
|
goPageIndex() {
|
|
let version = uni.getStorageSync('version')
|
|
if (version === 1) {
|
|
this.$util.toNextRoute('switchTab', '/pages/index/index')
|
|
} else {
|
|
// this.$util.toNextRoute('switchTab', '/pages/index/old/index')
|
|
this.$util.toNextRoute('switchTab', '/pages/index/index')
|
|
}
|
|
},
|
|
goPages(pageIndex) {
|
|
uni.switchTab({
|
|
url: pageIndex,
|
|
})
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style scoped lang="scss">
|
|
.tab_bar {
|
|
width: 100vw;
|
|
position: fixed;
|
|
bottom: 0rpx;
|
|
background: #ffffff;
|
|
border-top: 1px solid #e8e8ea;
|
|
box-sizing: border-box;
|
|
padding-bottom: env(safe-area-inset-bottom);
|
|
z-index: 99999;
|
|
|
|
.tabbarBox {
|
|
height: 60px;
|
|
display: flex;
|
|
align-items: center;
|
|
margin-top: 5rpx;
|
|
|
|
.handleBox {
|
|
width: 50%;
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
height: 60px;
|
|
|
|
.menuIcon {
|
|
display: flex;
|
|
flex-direction: column;
|
|
align-items: center;
|
|
justify-content: center;
|
|
|
|
.first {
|
|
width: 25px;
|
|
height: 30px;
|
|
}
|
|
|
|
.second {
|
|
width: 25px;
|
|
height: 25px;
|
|
margin-bottom: 3px;
|
|
}
|
|
|
|
.text {
|
|
font-size: 24rpx;
|
|
font-family: PingFangSC-Regular, PingFang SC;
|
|
font-weight: 400;
|
|
color: #a69e9f;
|
|
line-height: 12px;
|
|
}
|
|
|
|
.red {
|
|
color: #03A24C;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</style>
|