Initial commit

components/tabBar/tabBar.vue

@@ -0,0 +1,163 @@
+<template>
+  <view>
+    <u-tabbar
+      :value="current"
+      @change="tabbarChange"
+      z-index="999"
+      activeColor="#2F6D47"
+      inactiveColor="#687379"
+      :fixed="true"
+      :placeholder="true"
+      :safeAreaInsetBottom="true"
+    >
+      <u-tabbar-item name="index" text="首页" v-if="!_isGjt">
+        <u-icon
+          name="home-fill"
+          size="45"
+          slot="active-icon"
+          color="#2F6D47"
+        ></u-icon>
+        <u-icon
+          name="home-fill"
+          size="45"
+          slot="inactive-icon"
+          color="#687379"
+        ></u-icon>
+      </u-tabbar-item>
+      <u-tabbar-item name="map" text="地图" v-if="_isShowMap">
+        <u-icon
+          name="map-fill"
+          size="45"
+          slot="active-icon"
+          color="#2F6D47"
+        ></u-icon>
+        <u-icon
+          name="map-fill"
+          size="45"
+          slot="inactive-icon"
+          color="#687379"
+        ></u-icon>
+      </u-tabbar-item>
+      <u-tabbar-item name="my" text="我的">
+        <u-icon
+          name="account-fill"
+          size="45"
+          slot="active-icon"
+          color="#2F6D47"
+        ></u-icon>
+        <u-icon
+          name="account-fill"
+          size="45"
+          slot="inactive-icon"
+          color="#687379"
+        ></u-icon>
+      </u-tabbar-item>
+    </u-tabbar>
+  </view>
+</template>
+
+<script>
+import { getUser } from "@/utils/auth.js";
+import { checkButtonPermission } from "@/utils/permission.js";
+export default {
+  options: {
+    styleIsolation: "shared", // 解除样式隔离
+  },
+  data() {
+    return {
+      //   userInfo: {}, // 用户信息
+      //   list: [],
+    };
+  },
+  computed: {
+    current() {
+      return this.$store.state.current || "index";
+    },
+    _userInfo() {
+      console.log("---------------------");
+      console.log(getUser());
+      return getUser() || {};
+    },
+    _isGjt() {
+      console.log(123123123);
+      console.log(this._userInfo.id);
+      return this._userInfo.id == "1131365259079106560";
+    },
+    _isShowMap() {
+      return checkButtonPermission(
+        "weappMap",
+        "vehicle" //按钮在基础信息菜单的车辆信息下面
+      );
+      //   const ids = this._userInfo?.roles?.map((item) => item.roleName) || [];
+      //   if (ids.includes("地图查看")) {
+      //     //  if (ids.includes("1120244873740435456"))   ID切库会变 改成中文吧
+      //     return true; //统一改成地图查看权限配置
+      //   } else {
+      //     return false; //其他
+      //   }
+    },
+    // _list() {
+    //   return this._isShowMap
+    //     ? [
+    //         {
+    //           path: "pages/index/index",
+    //         },
+    //         {
+    //           path: "pages/map/index",
+    //         },
+    //         {
+    //           path: "pages/my/my",
+    //         },
+    //       ]
+    //     : [
+    //         {
+    //           path: "pages/index/index",
+    //         },
+    //         {
+    //           path: "pages/my/my",
+    //         },
+    //       ];
+    // },
+  },
+  //   watch: {
+  //     _userInfo: {
+  //       handler(newVal) {
+  //         this.userInfo = newVal;
+  //       },
+  //       immediate: true,
+  //       deep: true,
+  //     },
+  //   },
+  mounted() {
+    console.log("tabBar mounted");
+    console.log(this._userInfo);
+  },
+  methods: {
+    tabbarChange(e) {
+      console.log(e);
+      this.$store.state.current = e;
+      let arr = [
+        {
+          name: "index",
+          path: "pages/index/index",
+        },
+        {
+          name: "map",
+          path: "pages/map/index",
+        },
+        {
+          name: "my",
+          path: "pages/my/my",
+        },
+      ];
+      let path =
+        arr.find((item) => item.name == e)?.path || "pages/index/index";
+      uni.switchTab({
+        url: "/" + path,
+      });
+    },
+  },
+};
+</script>
+
+<style scoped></style>