三色任务与自查任务

linwe

2024-08-08 3c738f4fe2762bba8087e5a22fc0dc06560eab0e

 components/tabBar/tabBar.vue

@@ -1,22 +1,11 @@
<template>
   <view>
      <u-tabbar class="custom-tabbar" zIndex="100" :value="current" :fixed="true" :active-color="activeColor"
      <u-tabbar class="custom-tabbar" zIndex="9999" :value="current" :fixed="true" :active-color="activeColor"
         :inactive-color="inactiveColor">
         <u-tabbar-item text="首页" @click="changeTabbar('/pages/home/index')">
            <image class="tabbar-icon" slot="active-icon" src="/static/img/tabbar-01-selected.png"></image>
            <image class="tabbar-icon" slot="inactive-icon" src="/static/img/tabbar-01.png"></image>
         </u-tabbar-item>
         <!--          <u-tabbar-item text="圈子">
            <image class="tabbar-icon" slot="active-icon" src="/static/img/tabbar-02-selected.png"></image>
            <image class="tabbar-icon" slot="inactive-icon" src="/static/img/tabbar-02.png"></image>
         </u-tabbar-item> -->
         <u-tabbar-item text="驾驶舱" v-if="roleType == 2" @click="changeTabbar('/pages/statistics/index')">
            <image class="tabbar-icon" slot="active-icon" src="/static/img/tabbar-02-selected.png"></image>
            <image class="tabbar-icon" slot="inactive-icon" src="/static/img/tabbar-02.png"></image>
         </u-tabbar-item>
         <u-tabbar-item text="个人中心" @click="changeTabbar('/pages/user/center')">
            <image class="tabbar-icon" slot="active-icon" src="/static/img/tabbar-03-selected.png"></image>
            <image class="tabbar-icon" slot="inactive-icon" src="/static/img/tabbar-03.png"></image>
         <u-tabbar-item :text="item.name" @click="changeTabbar(item.url,index,item.name)"
            v-for="(item,index) in tabbarList" :key="index">
            <image class="tabbar-icon" slot="active-icon" :src="item.iconPathSelected"></image>
            <image class="tabbar-icon" slot="inactive-icon" :src="item.iconPath"></image>
         </u-tabbar-item>
      </u-tabbar>
   </view>
@@ -26,117 +15,57 @@
   export default {
      props: {
         current: Number,
         isShowTabbarItem: false
         list: {
            type: Array,
            default: () => []
         }
      },
      data() {
         return {

            roleType: "",
            curRole: {},
            inactiveColor: '#909399',
            activeColor: '#328CFA',

            curTabList: [{
                  name: '首页',
                  iconPathSelected: '/static/img/tabbar-01-selected.png',
                  iconPath: '/static/img/tabbar-01.png',
                  // icon: "home",
                  url: '/pages/home/index'
               },

               {
                  name: '圈子',
                  iconPathSelected: '/static/img/tabbar-02-selected.png',
                  iconPath: '/static/img/tabbar-02.png',
                  // icon: "home",
                  url: '/pages/home/index'
               },
               {
                  name: '驾驶舱',
                  iconPathSelected: '/static/img/tabbar-02-selected.png',
                  iconPath: '/static/img/tabbar-02.png',
                  // icon: "home",
                  url: '/pages/statistics/index'
               },


               {
                  name: '个人中心',
                  iconPathSelected: '/static/img/tabbar-03-selected.png',
                  iconPath: '/static/img/tabbar-03.png',
                  // icon: "account-fill",
                  url: '/pages/user/center'
               }
            ]
            tabbarList: [],
            inactiveColor: '#C7CED7',
            activeColor: '#017BFC',
            // activeColor: '#003399'
         }
      },
      watch: {
         'curRole.roleName': {
            handler(newVal) {
               if (newVal == "民警") {
                  this.roleType = 2
               }
            },
            deep: true,
            immediate: true
         },


         tabList: {
         list: {
            handler(newVal) {
               if (newVal && newVal.length > 0) {
                  this.tabList = newVal
                  this.tabbarList = newVal;
                  if (uni.getStorageSync("activeRole").roleName == "民警") {
                     this.inactiveColor = "#AFB8C3";
                     this.activeColor = "#003399";
                  } else {
                     this.inactiveColor = "#C7CED7"
                     this.activeColor = "#017BFC";
                  }
               }
            },
            deep: true,
            immediate: true
         },
         currentTab: {
            handler(newVal) {
               this.currentTab = newVal
            },
            deep: true,
            immediate: true
         },

         }
      },
      mounted() {

         this.curRole = uni.getStorageSync("activeRole");

         // this.getMessage()
      },
      destroyed() {

      },
      methods: {


         changeTabbar(url) {
            uni.reLaunch({
         changeTabbar(url, index) {
            if (this.current == index) return
            uni.switchTab({
               url
            })
         },


         change(e) {
            console.log(e);
            uni.reLaunch({
               url: this.curTabList[e].url,
               complete: (res) => {
                  console.log("===>", res);
               }
            })
            // this.$emit("change", this.curTabList[e].url)
         },

            this.$emit("change", index)
         }
      }
   }
</script>

<style lang="scss" scoped>
   .tabbar-icon {
      width: 45rpx;
      height: 45rpx;
      width: 56rpx;
      height: 56rpx;
   }

   /deep/.u-tabbar {
      box-shadow: 0rpx 0rpx 14rpx 0rpx rgba(107, 134, 159, 0.2);
   }
</style>