devbox
2023面试高手
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

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

作者：2023面试高手 | 2024-02-06 17:44:27

赞

踩

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

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.

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

 

  1. //cc-myTabbar.vue 底部导航组件
  2. <template>
  3.   <view class="page-total">
  4.     <view class="tab-list">
  5.       <view class="list" v-for="(item,index) in TabBarList" @click="onTabBar(item,index)" :style="{marginTop: (item.name == '') ?  '-88rpx' : '0px'}" :key="item.index">
  6.         <image :src="item.acImg" mode="widthFix" v-show="tabBarShow ===index" :style="{width: (item.name == '') ?  '100rpx' : '54rpx',borderRadius: (item.name == '') ?  '24rpx' : '0rpx'}"></image>
  7.         <image :src="item.img" mode="widthFix" v-show="tabBarShow != index" :style="{width: (item.name == '') ?  '100rpx' : '54rpx',borderRadius: (item.name == '') ?  '24rpx' : '0rpx'}"></image>
  8.         <text :class="{'action':tabBarShow===index}">{{item.name}}</text>
  9.       </view>
  10.     </view>
  11.   </view>
  12. </template>
  13.  
  14. <script>
  15. import tabBar from "@/utils/tabBar.js"
  16. // 判断当前登陆用户角色
  17. // 0 为管理员
  18. // 1 为财务
  19. // 2 为司机
  20.  
  21. // 三元表达式判断当前登陆的用户角色
  22. // var user_type = uni.getStorageSync("userType")
  23. var user_type = 0
  24. let type = user_type === 0 ? 'admin' : user_type === 1 ? "finance" : "driver"
  25.  
  26. const state = {
  27.   list: tabBar[type]
  28. }
  29. // console.log(user_type, 'user_type');
  30. // console.log(type, 'type');
  31. // console.log(state, 'state');
  32. export default {
  33.   data () {
  34.     return {
  35.       TabBarList: state.list,
  36.       codeheight: 0,
  37.       isOverall: 0,
  38.       phoneModel: '',
  39.     };
  40.   },
  41.   props: {
  42.     tabBarShow: {
  43.       type: Number,
  44.       default: 0,
  45.     }
  46.   },
  47.   mounted () {
  48.     try {
  49.       const res = uni.getSystemInfoSync();
  50.       let that = this;
  51.       // 获取系统信息
  52.       uni.getSystemInfo({
  53.         success (res) {
  54.           console.log(res.brand) //手机牌子
  55.           console.log(res.model) //手机型号
  56.           console.log(res.screenWidth) //屏幕宽度
  57.           console.log(res.screenHeight) //屏幕高度
  58.           that.codeheight = Math.round(res.screenHeight);
  59.           that.phoneModel = res.model
  60.           if (res.model.search('iPhone')) {
  61.             that.isOverall = 0;
  62.           } else if (Math.round(res.screenHeight) > 740) {
  63.             that.isOverall = 1;
  64.           }
  65.           console.log(that.isOverall);
  66.         }
  67.       });
  68.     } catch (e) {
  69.       // error
  70.     }
  71.   },
  72.   methods: {
  73.     // 底部导航 跳转
  74.     onTabBar (item, index) {
  75.       // this.tabBarShow = index;
  76.       // console.log(item, 'item');
  77.       // console.log(index, 'index');
  78.  
  79.       if (user_type == 2) { // 司机
  80.         switch (item.name) {
  81.           case '首页':
  82.             uni.switchTab({
  83.               url: '/pages/homePage/homePage'
  84.             })
  85.             break;
  86.           case '':
  87.             //   uni.switchTab({
  88.             //     url: '/pages/scan/scan'
  89.             //   })
  90.             // 允许从相机和相册扫码
  91.             uni.scanCode({
  92.               success: function (res) {
  93.                 console.log('条码类型：' + res.scanType);
  94.                 console.log('条码内容：' + res.result);
  95.               }
  96.             });
  97.             break;
  98.           case '我的':
  99.             uni.switchTab({
  100.               url: '/pages/mineDriver/mineDriver'
  101.             })
  102.             break;
  103.         }
  104.       } else if (user_type == 0) { //管理员
  105.         switch (item.name) {
  106.           case '首页':
  107.             uni.switchTab({
  108.               url: '/pages/homePage/homePage'
  109.             })
  110.             break;
  111.           case '':
  112.             //   uni.switchTab({
  113.             //     url: '/pages/scan/scan'
  114.             //   })
  115.             // 允许从相机和相册扫码
  116.             uni.scanCode({
  117.               success: function (res) {
  118.                 console.log('条码类型：' + res.scanType);
  119.                 console.log('条码内容：' + res.result);
  120.               }
  121.             });
  122.             break;
  123.           case '我的':
  124.             uni.switchTab({
  125.               url: '/pages/mine/mine'
  126.             })
  127.             break;
  128.         }
  129.       } else { // 财务
  130.         switch (item.name) {
  131.           case '首页':
  132.             uni.switchTab({
  133.               url: '/pages/homePage/homePage'
  134.             })
  135.             break;
  136.           case '':
  137.             //   uni.switchTab({
  138.             //     url: '/pages/scan/scan'
  139.             //   })
  140.             // 允许从相机和相册扫码
  141.             uni.scanCode({
  142.               success: function (res) {
  143.                 console.log('条码类型：' + res.scanType);
  144.                 console.log('条码内容：' + res.result);
  145.               }
  146.             });
  147.             break;
  148.           case '我的':
  149.             uni.switchTab({
  150.               url: '/pages/mineFinance/mineFinance'
  151.             })
  152.             break;
  153.         }
  154.       }
  155.  
  156.     }
  157.   }
  158. }
  159. </script>
  160.  
  161. <style scoped lang="scss">
  162. @import 'cc-myTabbar.scss';
  163. </style>
  164.  
  165. //在components文件夹里创建cc-myTabbar.scss
  166. //cc-myTabbar.scss
  167. /* 主要颜色 */
  168. $base: #508AF1; // 基础颜色
  169.  
  170. .page-total {
  171.   position: fixed;
  172.   left: 0;
  173.   bottom: 0;
  174.   width: 100%;
  175.   // height: 100rpx;
  176. }
  177.  
  178. .tab-list {
  179.   display: flex;
  180.   justify-content: space-between;
  181.   align-items: center;
  182.   width: 100%;
  183.   height: 140rpx;
  184.   padding-bottom: 20rpx;
  185.   background-color: #FFFFFF;
  186.  
  187.   // border-top: 1px solid #e8e8e8;
  188.   .list {
  189.     display: flex;
  190.     flex-direction: column;
  191.     align-items: center;
  192.     justify-content: center;
  193.     width: 38%;
  194.     height: 120rpx;
  195.  
  196.     image {
  197.       width: 48rpx;
  198.       height: 48rpx;
  199.       background-color: white;
  200.  
  201.  
  202.     }
  203.  
  204.     text {
  205.       color: #707070;
  206.       font-weight: 900;
  207.       font-size: 24rpx;
  208.       margin-top: 10rpx;
  209.     }
  210.  
  211.     .action {
  212.       color: $base;
  213.     }
  214.   }
  215. }
  1. //tabBar.js
  2. // 小程序管理者
  3. const admin = [
  4.   {
  5.     pagePath: "/pages/homePage/homePage",
  6.     index: 0,
  7.     name: '首页',
  8.     img: '/static/images/tabBar/tab_01.png',
  9.     acImg: '/static/images/tabBar/tab_02.png'
  10.   },
  11.   // {
  12.   //   index: 2,
  13.   //   name: '',
  14.   //   img: '/static/images/tabBar/tab_03.png',
  15.   //   acImg: '/static/images/tabBar/tab_04.png'
  16.   // },
  17.   {
  18.     pagePath: "/pages/mine/mine",
  19.     index: 1,
  20.     name: '我的',
  21.     img: '/static/images/tabBar/tab_05.png',
  22.     acImg: '/static/images/tabBar/tab_06.png'
  23.   },
  24. ]
  25. // 财务
  26. const finance = [
  27.   {
  28.     pagePath: "/pages/homePage/homePage",
  29.     index: 0,
  30.     name: '首页',
  31.     img: '/static/images/tabBar/tab_01.png',
  32.     acImg: '/static/images/tabBar/tab_02.png'
  33.   },
  34.   // {
  35.   //   index: 1,
  36.   //   name: '',
  37.   //   img: '/static/images/tabBar/tab_03.png',
  38.   //   acImg: '/static/images/tabBar/tab_04.png'
  39.   // },
  40.   {
  41.     pagePath: "/pages/mineFinance/mineFinance",
  42.     index: 1,
  43.     name: '我的',
  44.     img: '/static/images/tabBar/tab_05.png',
  45.     acImg: '/static/images/tabBar/tab_06.png'
  46.   },
  47. ]
  48.  
  49. // 司机
  50. const driver = [
  51.   {
  52.     pagePath: "/pages/homePage/homePage",
  53.     index: 0,
  54.     name: '首页',
  55.     img: '/static/images/tabBar/tab_01.png',
  56.     acImg: '/static/images/tabBar/tab_02.png'
  57.   },
  58.   // {
  59.   //   pagePath: "/pages/scan/scan",
  60.   //   index: 1,
  61.   //   name: '',
  62.   //   img: '/static/images/tabBar/tab_03.png',
  63.   //   acImg: '/static/images/tabBar/tab_04.png'
  64.   // },
  65.   {
  66.     pagePath: "/pages/mineDriver/mineDriver",
  67.     index: 1,
  68.     name: '我的',
  69.     img: '/static/images/tabBar/tab_05.png',
  70.     acImg: '/static/images/tabBar/tab_06.png'
  71.   },
  72. ]
  73.  
  74. export default {
  75.   admin,
  76.   finance,
  77.   driver
  78. }
  1. // pages.json
  2. {
  3.   "pages": [
  4.     {
  5.       "path": "pages/homePage/homePage",
  6.       "style": {
  7.         "navigationBarTitleText": "首页"
  8.         // "navigationStyle": "custom"
  9.       }
  10.     },
  11.     {
  12.       "path": "pages/login",
  13.       "style": {
  14.         "navigationBarTitleText": "登录"
  15.       }
  16.     },
  17.     {
  18.       "path": "pages/register",
  19.       "style": {
  20.         "navigationBarTitleText": "注册"
  21.       }
  22.     },
  23.     {
  24.       "path": "pages/work/work",
  25.       "style": {
  26.         "navigationBarTitleText": "工作台"
  27.       }
  28.     },
  29.     {
  30.       "path": "pages/mine/mine", //管理员
  31.       "style": {
  32.         "navigationBarTitleText": "我的"
  33.       }
  34.     },
  35.     {
  36.       "path": "pages/mineDriver/mineDriver", // 司机
  37.       "style": {
  38.         "navigationBarTitleText": "我的"
  39.       }
  40.     },
  41.     {
  42.       "path": "pages/mineFinance/mineFinance", // 财务
  43.       "style": {
  44.         "navigationBarTitleText": "我的"
  45.       }
  46.     },
  47.     {
  48.       "path": "pages/mine/avatar/index",
  49.       "style": {
  50.         "navigationBarTitleText": "修改头像"
  51.       }
  52.     },
  53.     {
  54.       "path": "pages/mine/info/index",
  55.       "style": {
  56.         "navigationBarTitleText": "个人信息"
  57.       }
  58.     },
  59.     {
  60.       "path": "pages/mine/info/edit",
  61.       "style": {
  62.         "navigationBarTitleText": "编辑资料"
  63.       }
  64.     },
  65.     {
  66.       "path": "pages/mine/pwd/index",
  67.       "style": {
  68.         "navigationBarTitleText": "修改密码"
  69.       }
  70.     },
  71.     {
  72.       "path": "pages/mine/setting/index",
  73.       "style": {
  74.         "navigationBarTitleText": "应用设置"
  75.       }
  76.     },
  77.     {
  78.       "path": "pages/mine/help/index",
  79.       "style": {
  80.         "navigationBarTitleText": "常见问题"
  81.       }
  82.     },
  83.     {
  84.       "path": "pages/mine/about/index",
  85.       "style": {
  86.         "navigationBarTitleText": "关于我们"
  87.       }
  88.     },
  89.   ],
  90.   "tabBar": {
  91.     "custom": true, // 隐藏tabBar
  92.     "color": "#000000",
  93.     "selectedColor": "#508af1", // 选中颜色
  94.     "borderStyle": "white",
  95.     "backgroundColor": "#ffffff",
  96.     "list": [
  97.       {
  98.         "pagePath": "pages/homePage/homePage"
  99.         // "iconPath": "static/images/tabbar/tab_01.png",
  100.         // "selectedIconPath": "static/images/tabbar/tab_02.png",
  101.         // "text": "首页"
  102.       },
  103.       // {
  104.       //   "pagePath": "pages/work/work",
  105.       //   "iconPath": "static/images/tabbar/work.png",
  106.       //   "selectedIconPath": "static/images/tabbar/work_.png",
  107.       //   "text": "工作台"
  108.       // },
  109.       {
  110.         "pagePath": "pages/mine/mine"
  111.         // "iconPath": "static/images/tabbar/tab_09.png",
  112.         // "selectedIconPath": "static/images/tabbar/tab_10.png",
  113.         // "text": "我的"
  114.       },
  115.       {
  116.         "pagePath": "pages/mineDriver/mineDriver"
  117.         // "iconPath": "static/images/tabbar/tab_09.png",
  118.         // "selectedIconPath": "static/images/tabbar/tab_10.png",
  119.         // "text": "我的"
  120.       },
  121.       {
  122.         "pagePath": "pages/mineFinance/mineFinance"
  123.         // "iconPath": "static/images/tabbar/tab_09.png",
  124.         // "selectedIconPath": "static/images/tabbar/tab_10.png",
  125.         // "text": "我的"
  126.       }
  127.     ]
  128.   },
  129.   "globalStyle": {
  130.     "navigationBarTextStyle": "black",
  131.     "navigationBarTitleText": "RuoYi",
  132.     "navigationBarBackgroundColor": "#FFFFFF"
  133.   }
  134. }
  1. // 单页面 
  2. // mine.vue管理员版"我的"页面 / mineDriver.vue司机版"我的"页面 / mineFinance.vue财务版"我的"页面
  3.  
  4. <template>
  5.   <view class="page">
  6.  
  7.     <!-- tabBarShow：显示第几个tabbar 0是管理员 1是财务 2是司机-->
  8.     <cc-myTabbar :tabBarShow="0"></cc-myTabbar> 
  9.  
  10.   </view>
  11. </template>
  12.  
  13. <script>
  14.   export default {
  15.     
  16.     data() {
  17.       return {
  18.  
  19.       };
  20.     },
  21.     onReady() {
  22.       uni.hideTabBar()
  23.     },
  24.  
  25.     methods: {
  26.  
  27.     }
  28.   }
  29. </script>
  30.  
  31. <style scoped lang="scss">
  32.   page {
  33.     padding-bottom: 140rpx;
  34.  
  35.   }
  36. </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

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/2023面试高手/article/detail/63722
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号