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

news/2024/7/11 1:56:35 标签: uni-app, 前端, vue.js, javascript, es6

1.

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

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

2.

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

3.

在utils文件夹创建tabBar.js

4.

pages.json里指定路径

5.

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

 

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


http://www.niftyadmin.cn/n/5366204.html

相关文章

论文阅读——MP-Former

论文阅读——MP-Former

MP-Former: Mask-Piloted Transformer for Image Segmentation https://arxiv.org/abs/2303.07336 mask2former问题是&#xff1a;相邻层得到的掩码不连续&#xff0c;差别很大 denoising training非常有效地稳定训练时期之间的二分匹配。去噪训练的关键思想是将带噪声的GT坐标…
阅读更多...
DevOps落地笔记-15|混沌工程：通过问题注入提高系统可靠性

DevOps落地笔记-15|混沌工程：通过问题注入提高系统可靠性

上一课时介绍了通过搭建一套部署流水线&#xff0c;高效、可靠的将软件部署到测试环境以及生产环境。到目前为止&#xff0c;我们学习了从用户需求到软件部署到生产环境交付给用户的全过程。随着软件工程不断发展&#xff0c;近几年&#xff0c;出现了一种新的实践&#xff0c;…
阅读更多...
Android：Android Studio安装及环境配置

Android：Android Studio安装及环境配置

1开发环境搭建 Android开发需要使用java的jdk环境，所以需要下载JAVA JDK。 1.1安装配置JAVA JDK Java的JDK下载: https://www.oracle.com/technetwork/java/javase/downloads/index.html 配置java的环境变量： JAVA_HOME:java安装路径。 新增环境变量CLASSPATH 在Path环境…
阅读更多...
Could not connect to Redis at 127.0.0.1:6379:由于目标计算机积极拒绝，无法连接...问题解决方法之一

Could not connect to Redis at 127.0.0.1:6379:由于目标计算机积极拒绝，无法连接...问题解决方法之一

一、问题描述 将Redis压缩包解压后&#xff0c;安装Redis过程中出现问题Could not connect to Redis at 127.0.0.1:6379:由于目标计算机积极拒绝&#xff0c;无法连接... 官网windows下redis开机自启动的指令如下&#xff1a; 1、在redis目录下执行 redis-server --service-in…
阅读更多...
Days 20 ElfBoard 板 FFmpeg移植

Days 20 ElfBoard 板 FFmpeg移植

FFmpeg是一套可以用来记录、转换数字音频、视频&#xff0c;并能将其转化为流的开源计算机程序。采用LGPL或GPL许可证。它提供了录制、转换以及流化音视频的完整解决方案。因此&#xff0c;对于从事多媒体技术开发的工程师来说&#xff0c;深入研究FFMPEG成为一门必不可少的工作…
阅读更多...
2024/2/5总结

2024/2/5总结

微信小程序 监听对象中所有属性的变化 如果某个对象中需要被监听的属性太多&#xff0c;为了方便&#xff0c;可以使用 通配符 ** 来监听 对象中所有属性的变化 什么是纯数字字段 概念&#xff1a;纯数字字段指的是那些不用于界面渲染的 data 字段。 好处&#xff1a;提升界面…
阅读更多...
LRU缓存

LRU缓存

有人从网络读数据&#xff0c;有人从磁盘读数据&#xff0c;机智的人懂得合理利用缓存加速数据的读取效率&#xff0c;提升程序的性能&#xff0c;搏得上司的赏识&#xff0c;赢得白富美的青睐&#xff0c;进一步走向人生巅峰~ LRU假说 LRU缓存&#xff08;Least Recently Used…
阅读更多...
1、将 ChatGPT 集成到数据科学工作流程中：提示和最佳实践

1、将 ChatGPT 集成到数据科学工作流程中：提示和最佳实践

将 ChatGPT 集成到数据科学工作流程中：提示和最佳实践 希望将 ChatGPT 集成到您的数据科学工作流程中吗？这是一个利用 ChatGPT 进行数据科学的提示的实践。 ChatGPT、其继任者 GPT-4 及其开源替代品非常成功。开发人员和数据科学家都希望提高工作效率，并使用 ChatGPT 来简…
阅读更多...
最新文章

Copyright @ 2022~2023