dykj-outsource-12123/components/tabBar/index.vue
2024-06-28 11:30:43 +08:00

89 lines
2.9 KiB
Vue

<template>
<up-tabbar :value="props.val" @change="toRoute" zIndex="99" :fixed="true" :placeholder="false" activeColor="#4a7bb5" :safeAreaInsetBottom="false" :border="false">
<up-tabbar-item style="border-top: 1rpx solid #e4e4e4" text="首页">
<template #active-icon>
<image src="../../static/tabbar/clickone.png" style="width: 1.5rem; height: 1.5rem"></image>
</template>
<template #inactive-icon>
<image src="../../static/tabbar/one.png" style="width: 1.5rem; height: 1.5rem"></image>
</template>
</up-tabbar-item>
<up-tabbar-item style="border-top: 1rpx solid #e4e4e4" text="网版进度">
<template #active-icon>
<image src="../../static/tabbar/clicktow.png" style="width: 1.5rem; height: 1.5rem"></image>
</template>
<template #inactive-icon>
<image src="../../static/tabbar/tow.png" style="width: 1.5rem; height: 1.5rem"></image>
</template>
</up-tabbar-item>
<up-tabbar-item style="margin-top: -1.2rem; border-top: 4rpx solid #e4e4e4; border-radius: 50%; padding-top: 0.7rem" text="扫一扫">
<template #active-icon>
<image src="../../static/tabbar/three.png" style="width: 2.5rem; height: 2.5rem"></image>
</template>
<template #inactive-icon>
<image src="../../static/tabbar/three.png" style="width: 2.5rem; height: 2.5rem"></image>
</template>
</up-tabbar-item>
<up-tabbar-item style="border-top: 1rpx solid #e4e4e4" text="服务网点">
<template #active-icon>
<image src="../../static/tabbar/clickforu.png" style="width: 1.5rem; height: 1.5rem"></image>
</template>
<template #inactive-icon>
<image src="../../static/tabbar/foru.png" style="width: 1.5rem; height: 1.5rem"></image>
</template>
</up-tabbar-item>
<up-tabbar-item style="border-top: 1rpx solid #e4e4e4" text="我的">
<template #active-icon>
<image src="../../static/tabbar/yonghu_1.png" style="width: 1.5rem; height: 1.5rem"></image>
</template>
<template #inactive-icon>
<image src="../../static/tabbar/yonghu_1.png" style="width: 1.5rem; height: 1.5rem"></image>
</template>
</up-tabbar-item>
</up-tabbar>
</template>
<script setup>
import { ref } from 'vue';
uni.hideTabBar();
const props = defineProps({
val: {
type: Number,
default: 0
}
});
const toRoute = (index) => {
if (index == 0) {
uni.switchTab({
url: '/pages/index/index'
});
}
if (index == 1) {
uni.switchTab({
url: '/pages/schedule/index'
});
}
if (index == 2) {
// uni.navigateTo({
// url: '/pages/index/index'
// });
// uni.setStorage({
// key: 'value',
// data: index
// });
}
if (index == 3) {
uni.switchTab({
url: '/pages/serve/index'
});
}
if (index == 4) {
uni.switchTab({
url: '/pages/my/index'
});
}
};
</script>
<style lang="scss"></style>