lanan-app/components/detection/tabBar.vue
2024-08-20 20:02:05 +08:00

136 lines
2.6 KiB
Vue

<template>
<view class="bottoms">
<view class="box" @click="getgogo(1)">
<view class="imgs">
<image src="../../static/detection/sy.png" v-show="aindex == 1" ></image>
<image src="../../static/detection/syw.png" v-show="aindex != 1" ></image>
</view>
<view class="xzz" v-show="aindex == 1">首页</view>
<view class="wxz" v-show="aindex != 1">首页</view>
</view>
<view class="box" @click="getgogo(2)">
<view class="imgs">
<image src="../../static/detection/dd.png" v-show="aindex == 2"></image>
<image src="../../static/detection/ddw.png" v-show="aindex != 2"></image>
</view>
<view class="xzz" v-show="aindex == 2">订单</view>
<view class="wxz" v-show="aindex != 2">订单</view>
</view>
<view class="box" @click="getgogo(3)">
<view class="imgs">
<image src="../../static/detection/wd.png" v-show="aindex == 3"></image>
<image src="../../static/detection/wdw.png" v-show="aindex != 3"></image>
</view>
<view class="xzz" v-show="aindex == 3">我的</view>
<view class="wxz" v-show="aindex != 3">我的</view>
</view>
</view>
</template>
<script>
import request from '../../utils/request';
export default{
data(){
return{
aindex:1,
arr:[
{text:'首页'},
{text:'消息'},
{text:'运力'},
{text:'个人中心'},
],
}
},
props:{
msg:String,
},
mounted() {
console.log(this.aindex);
this.aindex = this.msg
},
methods:{
getgogo(index){
// if(index != 1){
// this.index = index
// uni.showToast({
// title:'此功能暂未开发',
// icon:'none'
// })
// }
if(index == 1){
this.aindex = index
uni.navigateTo({
url:'/pages/detection/detection'
})
}
if(index == 2){
this.aindex = index
uni.navigateTo({
url:'/pages/detection/my-order'
})
}
if(index == 3){
this.aindex = index
uni.navigateTo({
url:'/pages/detection/my'
})
}
if(index == 4){
this.aindex = index
uni.showToast({
title:'此功能暂未开发',
icon:'none'
})
}
}
}
}
</script>
<style scoped lang="scss">
.bottoms{
width: 100%;
height: 50px;
position: fixed;
bottom: 0px;
background: white;
display: flex;
justify-content: space-between;
font-size: 14px;
font-weight: 400;
}
.box{
width: 33%;
text-align: center;
font-size: 12px;
}
.imgs{
margin: 0 auto;
margin-top: 10px;
width: 18px;
height: 16px;
image{
width: 100%;
height: 100%;
}
}
.xzz{
color: #0D2E8D;
}
.wxz{
color: #AAAAAA;
}
</style>