86 lines
2.2 KiB
Vue
86 lines
2.2 KiB
Vue
<template>
|
|
<view>
|
|
<u-tabbar :value="tabbarValue" :placeholder="false" @change="changeTabbar" fixed>
|
|
<u-tabbar-item
|
|
text="首页"
|
|
:icon="tabbarValue == 1 ? '/static/images/imgs/home-active.png' : '/static/images/imgs/home.png'"
|
|
:name="1"
|
|
></u-tabbar-item>
|
|
<u-tabbar-item
|
|
v-if="userType == '00'"
|
|
text="数据看板"
|
|
:icon="tabbarValue == 2 ? '/static/images/imgs/data-board-active.png' : '/static/images/imgs/data-board.png'"
|
|
:name="2"
|
|
></u-tabbar-item>
|
|
<div class="checking-in" v-if="userType == '04' || userType == '05'">
|
|
<u-tabbar-item class="item" text="考勤打卡" :name="3"></u-tabbar-item>
|
|
</div>
|
|
<u-tabbar-item
|
|
text="我的"
|
|
:icon="tabbarValue == 4 ? '/static/images/imgs/my-active.png' : '/static/images/imgs/my.png'"
|
|
:name="4"
|
|
></u-tabbar-item>
|
|
</u-tabbar>
|
|
</view>
|
|
</template>
|
|
|
|
<script>
|
|
export default {
|
|
data() {
|
|
return {
|
|
userType: uni.getStorageSync('userInfo').userType,
|
|
tabbarValue: 1
|
|
}
|
|
},
|
|
created() {
|
|
console.log('created', this.userType)
|
|
this.tabbarValue = uni.getStorageSync('tabbarValue') || 1
|
|
},
|
|
methods: {
|
|
changeTabbar(e) {
|
|
console.log('changeTabbar', this.tabbarValue, e)
|
|
uni.setStorageSync('tabbarValue', e)
|
|
this.tabbarValue = uni.getStorageSync('tabbarValue')
|
|
switch (this.tabbarValue) {
|
|
case 1:
|
|
this.$tab.reLaunch('/pages/index')
|
|
break
|
|
case 2:
|
|
this.$tab.reLaunch('/pages/work/index')
|
|
break
|
|
case 3:
|
|
this.$tab.reLaunch('/pages/attendanceManagement/index')
|
|
break
|
|
case 4:
|
|
this.$tab.reLaunch('/pages/mine/index')
|
|
break
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
|
.checking-in {
|
|
position: relative;
|
|
top: -40px;
|
|
width: 80px;
|
|
height: 80px;
|
|
/* background: #94d1f4; */
|
|
// #BDD4F9 - #C2F0EB 渐变
|
|
background: linear-gradient(135deg, #a4c1fa, #adebe3);
|
|
border-radius: 50%;
|
|
margin: 0 auto;
|
|
box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
|
|
.item {
|
|
width: 80px;
|
|
height: 80px;
|
|
border-radius: 50%;
|
|
}
|
|
}
|
|
|
|
::v-deep .item .u-tabbar-item__text {
|
|
color: #fff !important;
|
|
}
|
|
</style>
|