lanan-repair/components/tabBar/tabBar.vue
2024-09-22 15:07:01 +08:00

173 lines
3.4 KiB
Vue

<template>
<view class="bottoms">
<view class="box" :class="{active: aindex == 1}" @click="getgogo(1)" v-if="identity == 'user' ">
<view class="imgs">
<image mode="aspectFit" src="@/static/icons/tabbar/home.png" v-show="aindex != 1"></image>
<image mode="aspectFit" src="@/static/icons/tabbar/home-checked.png" v-show="aindex == 1"></image>
</view>
<view class="">首页</view>
</view>
<view class="box" :class="{active: aindex == 2}" @click="getgogo(2)">
<view class="imgs">
<image mode="aspectFit" src="@/static/icons/tabbar/order.png" v-show="aindex != 2"></image>
<image mode="aspectFit" src="@/static/icons/tabbar/order-checked.png" v-show="aindex == 2"></image>
</view>
<view class="">订单</view>
</view>
<view class="box" :class="{active: aindex == 3}" @click="getgogo(3)">
<view class="imgs">
<image mode="aspectFit" src="@/static/icons/tabbar/my.png" v-show="aindex != 3"></image>
<image mode="aspectFit" src="@/static/icons/tabbar/my-checked.png" v-show="aindex == 3"></image>
</view>
<view class="">我的</view>
</view>
</view>
</template>
<script>
import request from '../../utils/request';
import {
getToken
} from '@/utils/auth'
export default {
data() {
return {
aindex: 1,
msgNum: null,
identity: 'user',
nowPageInterval: null,
arr: [{
text: '首页'
},
{
text: '消息'
},
{
text: '运力'
}
]
}
},
props: {
msg: String|Number
},
onLoad() {
console.log('tabbag', uni.getStorageSync('identity'));
},
onUnload() {
if (this.nowPageInterval) {
clearTimeout(this.nowPageInterval);
}
},
mounted() {
// #ifdef APP || H5
this.identity = uni.getStorageSync('identity');
// #endif
this.aindex = this.msg
this.getbottom()
},
methods: {
async getbottom() {
if (!getToken()) {
return
}
let res = await request({
url: '/announcement/announcement/getOwnNoRead',
method: 'get',
})
console.log('jitiao', res);
if (res.code == 200) {
this.msgNum = res.data
}
},
getgogo(index) {
if (index == 1) {
this.aindex = index
uni.reLaunch({
url: '/pages/home/home'
})
}
if (index == 2) {
this.aindex = index
uni.reLaunch({
url: '/pages/orderList/orderList'
})
}
if (index == 3) {
this.aindex = index
uni.reLaunch({
url: '/pages/my/my'
})
}
}
}
}
</script>
<style scoped lang="scss">
.bottoms {
width: 100%;
// position: fixed;
// bottom: 0px;
background: #fff;
display: flex;
justify-content: space-between;
font-size: 14px;
font-weight: 400;
color: #FFFFFF;
padding: 12rpx 40rpx;
box-sizing: border-box;
box-shadow: 4rpx 2rpx 12rpx 0 #c3c3c3;
position: relative;
z-index: 99;
}
.box {
flex: 1;
width: 0;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
font-size: 12px;
color: #929292;
&.active {
color: #327DFB;
}
}
.imgs {
margin: 0 auto;
width: 50rpx;
height: 50rpx;
image {
width: 100%;
height: 100%;
}
}
.hongdian {
width: 12px;
height: 12px;
background-color: crimson;
border-radius: 50%;
overflow: hidden;
position: absolute;
top: -5px;
right: -8px;
z-index: 9999;
display: flex;
align-items: center;
justify-content: center;
color: white;
font-size: 2px;
}
</style>