uniapp踩坑之项目：简易版不同角色显示不一样的tabbar和页面

意初2024-02-06 17:36

pages下创建三个不同用户身份的"我的"页面。

显示第几个tabbar，0是管理员 1是财务 2是司机

在uni_modules文件夹创建底部导航cc-myTabbar文件夹，在cc-myTabbar文件夹创建components文件夹，在components文件夹创建cc-myTabbar.vue组件

在utils文件夹创建tabBar.js

pages.json里指定路径

在单页面引入底部导航组件

javascript 复制代码 
//cc-myTabbar.vue 底部导航组件
<template>
  <view class="page-total">
    <view class="tab-list">
      <view class="list" v-for="(item,index) in TabBarList" @click="onTabBar(item,index)" :style="{marginTop: (item.name == '') ?  '-88rpx' : '0px'}" :key="item.index">
        <image :src="item.acImg" mode="widthFix" v-show="tabBarShow ===index" :style="{width: (item.name == '') ?  '100rpx' : '54rpx',borderRadius: (item.name == '') ?  '24rpx' : '0rpx'}"></image>
        <image :src="item.img" mode="widthFix" v-show="tabBarShow != index" :style="{width: (item.name == '') ?  '100rpx' : '54rpx',borderRadius: (item.name == '') ?  '24rpx' : '0rpx'}"></image>
        <text :class="{'action':tabBarShow===index}">{{item.name}}</text>
      </view>
    </view>
  </view>
</template>

<script>
import tabBar from "@/utils/tabBar.js"
// 判断当前登陆用户角色
// 0 为管理员
// 1 为财务
// 2 为司机

// 三元表达式判断当前登陆的用户角色
// var user_type = uni.getStorageSync("userType")
var user_type = 0
let type = user_type === 0 ? 'admin' : user_type === 1 ? "finance" : "driver"

const state = {
  list: tabBar[type]
}
// console.log(user_type, 'user_type');
// console.log(type, 'type');
// console.log(state, 'state');
export default {
  data () {
    return {
      TabBarList: state.list,
      codeheight: 0,
      isOverall: 0,
      phoneModel: '',
    };
  },
  props: {
    tabBarShow: {
      type: Number,
      default: 0,
    }
  },
  mounted () {
    try {
      const res = uni.getSystemInfoSync();
      let that = this;
      // 获取系统信息
      uni.getSystemInfo({
        success (res) {
          console.log(res.brand) //手机牌子
          console.log(res.model) //手机型号
          console.log(res.screenWidth) //屏幕宽度
          console.log(res.screenHeight) //屏幕高度
          that.codeheight = Math.round(res.screenHeight);
          that.phoneModel = res.model
          if (res.model.search('iPhone')) {
            that.isOverall = 0;
          } else if (Math.round(res.screenHeight) > 740) {
            that.isOverall = 1;
          }
          console.log(that.isOverall);
        }
      });
    } catch (e) {
      // error
    }
  },
  methods: {
    // 底部导航 跳转
    onTabBar (item, index) {
      // this.tabBarShow = index;
      // console.log(item, 'item');
      // console.log(index, 'index');

      if (user_type == 2) { // 司机
        switch (item.name) {
          case '首页':
            uni.switchTab({
              url: '/pages/homePage/homePage'
            })
            break;
          case '':
            //   uni.switchTab({
            //     url: '/pages/scan/scan'
            //   })
            // 允许从相机和相册扫码
            uni.scanCode({
              success: function (res) {
                console.log('条码类型：' + res.scanType);
                console.log('条码内容：' + res.result);
              }
            });
            break;
          case '我的':
            uni.switchTab({
              url: '/pages/mineDriver/mineDriver'
            })
            break;
        }
      } else if (user_type == 0) { //管理员
        switch (item.name) {
          case '首页':
            uni.switchTab({
              url: '/pages/homePage/homePage'
            })
            break;
          case '':
            //   uni.switchTab({
            //     url: '/pages/scan/scan'
            //   })
            // 允许从相机和相册扫码
            uni.scanCode({
              success: function (res) {
                console.log('条码类型：' + res.scanType);
                console.log('条码内容：' + res.result);
              }
            });
            break;
          case '我的':
            uni.switchTab({
              url: '/pages/mine/mine'
            })
            break;
        }
      } else { // 财务
        switch (item.name) {
          case '首页':
            uni.switchTab({
              url: '/pages/homePage/homePage'
            })
            break;
          case '':
            //   uni.switchTab({
            //     url: '/pages/scan/scan'
            //   })
            // 允许从相机和相册扫码
            uni.scanCode({
              success: function (res) {
                console.log('条码类型：' + res.scanType);
                console.log('条码内容：' + res.result);
              }
            });
            break;
          case '我的':
            uni.switchTab({
              url: '/pages/mineFinance/mineFinance'
            })
            break;
        }
      }

    }
  }
}
</script>

<style scoped lang="scss">
@import 'cc-myTabbar.scss';
</style>

//在components文件夹里创建cc-myTabbar.scss
//cc-myTabbar.scss
/* 主要颜色 */
$base: #508AF1; // 基础颜色

.page-total {
  position: fixed;
  left: 0;
  bottom: 0;
  width: 100%;
  // height: 100rpx;
}

.tab-list {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  height: 140rpx;
  padding-bottom: 20rpx;
  background-color: #FFFFFF;

  // border-top: 1px solid #e8e8e8;
  .list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    width: 38%;
    height: 120rpx;

    image {
      width: 48rpx;
      height: 48rpx;
      background-color: white;


    }

    text {
      color: #707070;
      font-weight: 900;
      font-size: 24rpx;
      margin-top: 10rpx;
    }

    .action {
      color: $base;
    }
  }
}
javascript 复制代码 
//tabBar.js
// 小程序管理者
const admin = [
  {
    pagePath: "/pages/homePage/homePage",
    index: 0,
    name: '首页',
    img: '/static/images/tabBar/tab_01.png',
    acImg: '/static/images/tabBar/tab_02.png'
  },
  // {
  //   index: 2,
  //   name: '',
  //   img: '/static/images/tabBar/tab_03.png',
  //   acImg: '/static/images/tabBar/tab_04.png'
  // },
  {
    pagePath: "/pages/mine/mine",
    index: 1,
    name: '我的',
    img: '/static/images/tabBar/tab_05.png',
    acImg: '/static/images/tabBar/tab_06.png'
  },
]
// 财务
const finance = [
  {
    pagePath: "/pages/homePage/homePage",
    index: 0,
    name: '首页',
    img: '/static/images/tabBar/tab_01.png',
    acImg: '/static/images/tabBar/tab_02.png'
  },
  // {
  //   index: 1,
  //   name: '',
  //   img: '/static/images/tabBar/tab_03.png',
  //   acImg: '/static/images/tabBar/tab_04.png'
  // },
  {
    pagePath: "/pages/mineFinance/mineFinance",
    index: 1,
    name: '我的',
    img: '/static/images/tabBar/tab_05.png',
    acImg: '/static/images/tabBar/tab_06.png'
  },
]

// 司机
const driver = [
  {
    pagePath: "/pages/homePage/homePage",
    index: 0,
    name: '首页',
    img: '/static/images/tabBar/tab_01.png',
    acImg: '/static/images/tabBar/tab_02.png'
  },
  // {
  //   pagePath: "/pages/scan/scan",
  //   index: 1,
  //   name: '',
  //   img: '/static/images/tabBar/tab_03.png',
  //   acImg: '/static/images/tabBar/tab_04.png'
  // },
  {
    pagePath: "/pages/mineDriver/mineDriver",
    index: 1,
    name: '我的',
    img: '/static/images/tabBar/tab_05.png',
    acImg: '/static/images/tabBar/tab_06.png'
  },
]

export default {
  admin,
  finance,
  driver
}
javascript 复制代码 
// pages.json
{
  "pages": [
    {
      "path": "pages/homePage/homePage",
      "style": {
        "navigationBarTitleText": "首页"
        // "navigationStyle": "custom"
      }
    },
    {
      "path": "pages/login",
      "style": {
        "navigationBarTitleText": "登录"
      }
    },
    {
      "path": "pages/register",
      "style": {
        "navigationBarTitleText": "注册"
      }
    },
    {
      "path": "pages/work/work",
      "style": {
        "navigationBarTitleText": "工作台"
      }
    },
    {
      "path": "pages/mine/mine", //管理员
      "style": {
        "navigationBarTitleText": "我的"
      }
    },
    {
      "path": "pages/mineDriver/mineDriver", // 司机
      "style": {
        "navigationBarTitleText": "我的"
      }
    },
    {
      "path": "pages/mineFinance/mineFinance", // 财务
      "style": {
        "navigationBarTitleText": "我的"
      }
    },
    {
      "path": "pages/mine/avatar/index",
      "style": {
        "navigationBarTitleText": "修改头像"
      }
    },
    {
      "path": "pages/mine/info/index",
      "style": {
        "navigationBarTitleText": "个人信息"
      }
    },
    {
      "path": "pages/mine/info/edit",
      "style": {
        "navigationBarTitleText": "编辑资料"
      }
    },
    {
      "path": "pages/mine/pwd/index",
      "style": {
        "navigationBarTitleText": "修改密码"
      }
    },
    {
      "path": "pages/mine/setting/index",
      "style": {
        "navigationBarTitleText": "应用设置"
      }
    },
    {
      "path": "pages/mine/help/index",
      "style": {
        "navigationBarTitleText": "常见问题"
      }
    },
    {
      "path": "pages/mine/about/index",
      "style": {
        "navigationBarTitleText": "关于我们"
      }
    },
  ],
  "tabBar": {
    "custom": true, // 隐藏tabBar
    "color": "#000000",
    "selectedColor": "#508af1", // 选中颜色
    "borderStyle": "white",
    "backgroundColor": "#ffffff",
    "list": [
      {
        "pagePath": "pages/homePage/homePage"
        // "iconPath": "static/images/tabbar/tab_01.png",
        // "selectedIconPath": "static/images/tabbar/tab_02.png",
        // "text": "首页"
      },
      // {
      //   "pagePath": "pages/work/work",
      //   "iconPath": "static/images/tabbar/work.png",
      //   "selectedIconPath": "static/images/tabbar/work_.png",
      //   "text": "工作台"
      // },
      {
        "pagePath": "pages/mine/mine"
        // "iconPath": "static/images/tabbar/tab_09.png",
        // "selectedIconPath": "static/images/tabbar/tab_10.png",
        // "text": "我的"
      },
      {
        "pagePath": "pages/mineDriver/mineDriver"
        // "iconPath": "static/images/tabbar/tab_09.png",
        // "selectedIconPath": "static/images/tabbar/tab_10.png",
        // "text": "我的"
      },
      {
        "pagePath": "pages/mineFinance/mineFinance"
        // "iconPath": "static/images/tabbar/tab_09.png",
        // "selectedIconPath": "static/images/tabbar/tab_10.png",
        // "text": "我的"
      }
    ]
  },
  "globalStyle": {
    "navigationBarTextStyle": "black",
    "navigationBarTitleText": "RuoYi",
    "navigationBarBackgroundColor": "#FFFFFF"
  }
}
javascript 复制代码 
// 单页面 
// mine.vue管理员版"我的"页面 / mineDriver.vue司机版"我的"页面 / mineFinance.vue财务版"我的"页面

<template>
  <view class="page">

    <!-- tabBarShow：显示第几个tabbar 0是管理员 1是财务 2是司机-->
    <cc-myTabbar :tabBarShow="0"></cc-myTabbar> 

  </view>
</template>

<script>
  export default {
    
    data() {
      return {

      };
    },
    onReady() {
      uni.hideTabBar()
    },

    methods: {

    }
  }
</script>

<style scoped lang="scss">
  page {
    padding-bottom: 140rpx;

  }
</style>

上一篇文章，

vue2踩坑之项目：vue2+element实现前端导出_vue2导出 type为text/plain 找不到状态code值-CSDN博客文章浏览阅读392次，点赞8次，收藏9次。vue2踩坑之项目：vue2+element实现前端导出。安装插件依赖 npm i --save xlsx@0.17.0 file-saver@2.0.5，单页面引入 前端导出插件_vue2导出 type为text/plain 找不到状态code值https://blog.csdn.net/weixin_43928112/article/details/135685385

相关推荐
mldong8 小时前
你的 Vue3 项目也能有钉钉同款审批流设计器：npm 装包，10 分钟画出第一条审批流
前端·vue.js
2分钟速写快排9 小时前
什么是 RAG？如何用 RAG 实现一个用户记忆？
前端·后端·ai编程
passerby606110 小时前
如何自己造一个时间处理库
前端·javascript·github
走到天涯海角11 小时前
react里面的长列表渲染优化
前端·react.js·前端框架
小羊没烦恼！11 小时前
Hello Web API系列教程——Web API与国际化
java·服务器·前端·javascript·php
北岛贰11 小时前
迷茫焦虑期，我做了一个带支付带官网的 AI 聊天虚拟恋人 App
前端·人工智能·后端
mayaairi12 小时前
Vue2 组件通讯（三）：全局事件总线、PubSub、插槽与组件实例属性
前端·javascript·vue.js
kyriewen13 小时前
面试官问我：AI 都能写代码了，前端凭什么还值 25K
前端·javascript·人工智能
风骏时光牛马14 小时前
AI源码分析：拆解模型底层实现逻辑
前端
BillKu14 小时前
全局样式变量：CSS 自定义属性（--border-color）和SCSS 变量（$border-color）的说明
javascript·css·scss
热门推荐
01国内可直接用、免费额度/永久免费的大模型API清单（含 SiliconFlow、火山、阿里、智谱、百度、Kimi、DeepSeek、DMXAPI 等）02如何新建文件夹？ 电脑新建文件夹的4种方法03GitHub 镜像站点04历年考研数学一、数学二、数学三真题试卷及答案PDF05蜘蛛磁力 搜索引擎大全，如何使用蜘蛛磁力查找磁力链接062026 国产 AI 大模型横评：DeepSeek、通义千问、Kimi、文心一言、星火、豆包谁更能打？07微信历史版本含下载地址（ Windows PC | 安卓 | MAC ）及设置微信不更新08ZCode 周末送额度活动开启：3 亿 Token 免费领取09AI 编程 IDE 全景解析 2026：Agent 全面接管开发链路10Agnes AI 免费 API 接入指南：文本、生图、生视频，一套接口全免费