dykj-outsource-12123/components/tabBar/index.vue

<template>
  <up-tabbar :value="value4" @change="toRoute" :fixed="true" :placeholder="true" activeColor="#4a7bb5" :safeAreaInsetBottom="true" :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';
const value4 = ref(0);
uni.getStorage({
  key: 'value',
  success(data) {
    value4.value = data.data;
  }
});
const toRoute = (index) => {
  if (index == 0) {
    uni.navigateTo({
      url: '/pages/index/index'
    });
    uni.setStorage({
      key: 'value',
      data: index
    });
  }
  if (index == 1) {
    uni.navigateTo({
      url: '/pages/schedule/index'
    });
    uni.setStorage({
      key: 'value',
      data: index
    });
  }
  if (index == 2) {
    // uni.navigateTo({
    //   url: '/pages/index/index'
    // });
    // uni.setStorage({
    //   key: 'value',
    //   data: index
    // });
  }
  if (index == 3) {
    uni.navigateTo({
      url: '/pages/serve/index'
    });
    uni.setStorage({
      key: 'value',
      data: index
    });
  }
  if (index == 4) {
    uni.navigateTo({
      url: '/pages/my/index'
    });
    uni.setStorage({
      key: 'value',
      data: index
    });
  }
};
</script>

<style lang="scss"></style>