devbox
秋刀鱼在做梦
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uni-app微信小程序动态切换tabBar，根据不同用户角色展示不同的tabBar_微信小程序动态tabbar

作者：秋刀鱼在做梦 | 2024-06-28 05:38:39

赞

踩

微信小程序动态tabbar

前言

在UniApp的开发小程序过程中，为了针对不同角色用户登录后的个性化需求。通过动态权限配置机制，能够根据用户的角色展示不同的TabBar。此项目是通过Uni-App命令行的方式搭建的Vue3+Vite+Ts+Pinia+Uni-ui的小程序项目

最终效果

  • 1、司机角色：
    在这里插入图片描述

  • 2、供应商角色：
    在这里插入图片描述

  • 3、司机且供应商角色：
    在这里插入图片描述

目前常规的实现方式，大多数都是封装一个tabbar组件，在需要显示tabbar的页面添加这个组件，在根据一个选中的index值来切换选中效果。

而我的实现方式：把所有有tabbar的页面全部引入在一个tabbarPage页面，根据角色userType，来动态显示页面

实现思路

1、常规登录：通过微信登录获取code
2、根据code获取openId
3、根据openId获取token，若token存在表：此用户已经登陆/绑定过，则根据token获取用户信息，根据角色直接进入项目页面；若token不存在，则跳转到登录页面
4、登录成功后，调用用户信息接口，根据角色直接进入项目页面

1、以下是封装了一个useLogin的hooks


export const useLogin = () => {
  const { proxy } = getCurrentInstance() as any
  //常规登录
  const judgmentLogin = () => {
    uni.login({
      provider: 'weixin', //使用微信登录
      success: async (loginRes) => {
        // 根据微信登录的code获取openid
        const res = await proxy.$api.getOpenid({ code: loginRes.code })
        if (res.success) {
          // console.log('res.data.openid----', res.data.openId)
          // 根据openid获取token
          openidLogin(res.data.openId)
          // 存储openid
          uni.setStorageSync('openId', res.data.openId)
        }
      }
    });
  }
  // 登录过的用户再次进入根据openid获取token,有token则直接进入当前用户的页面，没有则进入登录页面
  const openidLogin = (async (openId: string) => {
    // console.log('openId----', openId)
    const res = await proxy.$api.openIdLogin({ openId })
    if (res.success) {
      if (res.data) {
        // 存储token
        uni.setStorageSync('token', res.data)
        userInfo(openId)
      } else {
        uni.navigateTo({
          url: '/pages/login/login'
        })
      }
    }
  })
// 登录成功后(有token后)根据openid获取用户信息
  const userInfo = (async (openId: any) => {
    const res = await proxy.$api.getUserInfo({ openId })
    if (res.success) {
      console.log('获取登陆用户信息', res.data)
      uni.setStorageSync('userInfo', JSON.stringify(res.data))
      const userTypeList = ['scm_driver', 'scm_supplier', 'supplier_and_driver']
      // 遍历角色数组来存储当前用户的角色。此角色为userTypeList中的某一个并且此数组只能存在一个userTypeList里面的角色，不会同时存在两个
      res.data.roles.map((item: any) => {
        if (userTypeList.includes(item.roleKey)) {
          uni.setStorageSync('userType', item.roleKey)
        }
      })
      // 判断角色数组中只要有一个角色在userTypeList中，则进入当前用户的角色页面，否则进入无权限页面
      const flag = res.data.roles.some((item: any) => {
        return userTypeList.includes(item.roleKey)
      })
      // console.log('flag----', flag)
      if (flag && userTypeList.includes(uni.getStorageSync('userType'))) {
        setTimeout(() => {
          uni.reLaunch({
            url: '/pages/tabbarPage/tabbarPage'
          })
        }, 500)
      } else {
        uni.showToast({
          icon: 'none',
          title: '当前用户角色没有权限！'
        })
      }
    }
  })
  return {
    judgmentLogin,
    userInfo
  }
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73

2、修改page.json中的tabBar

"tabBar": {
		"color": "#a6b9cb",
		"selectedColor": "#355db4",
		"list": [
			{
				"pagePath": "pages/supplierMyorder/supplierMyorder"
			},
			{
				"pagePath": "pages/driverMyorder/driverMyorder"
			},
			{
				"pagePath": "pages/mycar/mycar"
			},
			{
				"pagePath": "pages/driverPersonal/driverPersonal"
			}
		]
	},

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18

3、关键页面tabbarPage.vue

<template>
  <div class="tabbar_page flex-box flex-col">
    <div
      class="page_wrap"
      v-if="userType === 'scm_supplier'"
      v-show="active === 'supplierMyorder'"
    >
      <supplier-myorder
        ref="supplierMyorder"
        :show="active === 'supplierMyorder'"
      />
    </div>
    <div
      class="page_wrap"
      v-if="userType === 'scm_supplier'"
      v-show="active === 'supplierPersonal'"
    >
      <supplier-personal
        ref="supplierPersonal"
        :show="active === 'supplierPersonal'"
      />
    </div>
    <div
      class="page_wrap"
      v-if="userType === 'scm_driver'"
      v-show="active === 'driverMyorder'"
    >
      <driver-myorder ref="driverMyorder" :show="active === 'driverMyorder'" />
    </div>
    <div
      class="page_wrap"
      v-if="userType === 'scm_driver'"
      v-show="active === 'mycar'"
    >
      <mycar ref="mycar" :show="active === 'mycar'" />
    </div>
    <div
      class="page_wrap"
      v-if="userType === 'scm_driver'"
      v-show="active === 'driverPersonal'"
    >
      <driver-personal
        ref="driverPersonal"
        :show="active === 'driverPersonal'"
      />
    </div>
    <div
      class="page_wrap"
      v-if="userType === 'supplier_and_driver'"
      v-show="active === 'supplierMyorder'"
    >
      <supplier-myorder
        ref="supplierMyorder"
        :show="active === 'supplierMyorder'"
      />
    </div>
    <div
      class="page_wrap"
      v-if="userType === 'supplier_and_driver'"
      v-show="active === 'driverMyorder'"
    >
      <driver-myorder ref="driverMyorder" :show="active === 'driverMyorder'" />
    </div>
    <div
      class="page_wrap"
      v-if="userType === 'supplier_and_driver'"
      v-show="active === 'mycar'"
    >
      <mycar ref="mycar" :show="active === 'mycar'" />
    </div>
    <div
      class="page_wrap"
      v-if="userType === 'supplier_and_driver'"
      v-show="active === 'supplierPersonal'"
    >
      <supplier-personal
        ref="supplierPersonal"
        :show="active === 'supplierPersonal'"
      />
    </div>
    <view class="tab">
      <view
        v-for="(item, index) in tabbarOptions"
        :key="index"
        class="tab-item"
        @click="switchTab(item, index)"
      >
        <image
          class="tab_img"
          :src="currentIndex == index ? item.selectedIconPath : item.iconPath"
        ></image>
        <view
          class="tab_text"
          :style="{ color: currentIndex == index ? selectedColor : color }"
          >{{ item.text }}</view
        >
      </view>
    </view>
  </div>
</template>

<script lang="ts" setup>
import supplierMyorder from '@/pages/supplierMyorder/supplierMyorder.vue'
import supplierPersonal from '@/pages/supplierPersonal/supplierPersonal.vue'
import driverMyorder from '@/pages/driverMyorder/driverMyorder.vue'
import mycar from '@/pages/mycar/mycar.vue'
import driverPersonal from '@/pages/driverPersonal/driverPersonal.vue'
let color = ref('#666666')
let selectedColor = ref('#355db4')
let currentIndex = ref(0)

const active = ref('')
const switchTab = (item: any, index: any) => {
  // console.log('tabbar----switchTab-----list', item, index)
  currentIndex.value = index
  active.value = item.name
}

onLoad((option: any) => {
  currentIndex.value = option.index || 0
  active.value = option.name || tabbarOptions.value[0].name
})
onShow(() => {
  active.value = active.value || tabbarOptions.value[0].name
  currentIndex.value = currentIndex.value || 0
})
const userType = computed(() => {
  return uni.getStorageSync('userType')
})
const tabbarOptions = computed(() => {
  return {
    scm_supplier: [
      {
        name: 'supplierMyorder',
        pagePath: '/pages/supplierMyorder/supplierMyorder',
        iconPath: '/static/tabbar/order.png',
        selectedIconPath: '/static/tabbar/order_active.png',
        text: '我的订单'
      },
      {
        name: 'supplierPersonal',
        pagePath: '/pages/supplierPersonal/supplierPersonal',
        iconPath: '/static/tabbar/my.png',
        selectedIconPath: '/static/tabbar/my_active.png',
        text: '个人中心'
      }
    ],
    scm_driver: [
      {
        name: 'driverMyorder',
        pagePath: '/pages/driverMyorder/driverMyorder',
        iconPath: '/static/tabbar/waybill.png',
        selectedIconPath: '/static/tabbar/waybill_active.png',
        text: '我的运单'
      },
      {
        name: 'mycar',
        pagePath: '/pages/mycar/mycar',
        iconPath: '/static/tabbar/car.png',
        selectedIconPath: '/static/tabbar/car_active.png',
        text: '我的车辆'
      },
      {
        name: 'driverPersonal',
        pagePath: '/pages/driverPersonal/driverPersonal',
        iconPath: '/static/tabbar/my.png',
        selectedIconPath: '/static/tabbar/my_active.png',
        text: '个人中心'
      }
    ],
    supplier_and_driver: [
      {
        name: 'supplierMyorder',
        pagePath: '/pages/supplierMyorder/supplierMyorder',
        iconPath: '/static/tabbar/order.png',
        selectedIconPath: '/static/tabbar/order_active.png',
        text: '我的订单'
      },
      {
        name: 'driverMyorder',
        pagePath: '/pages/driverMyorder/driverMyorder',
        iconPath: '/static/tabbar/order.png',
        selectedIconPath: '/static/tabbar/order_active.png',
        text: '我的运单'
      },
      {
        name: 'mycar',
        pagePath: '/pages/mycar/mycar',
        iconPath: '/static/tabbar/car.png',
        selectedIconPath: '/static/tabbar/car_active.png',
        text: '我的车辆'
      },
      {
        name: 'supplierPersonal',
        pagePath: '/pages/supplierPersonal/supplierPersonal',
        iconPath: '/static/tabbar/my.png',
        selectedIconPath: '/static/tabbar/my_active.png',
        text: '个人中心'
      }
    ]
  }[userType.value]
})
</script>

<style lang="scss" scoped>
.tabbar_page {
  height: 100%;
  .page_wrap {
    height: calc(100% - 84px);
    &.hidden {
      display: none;
    }
  }
  .tab {
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    height: 100rpx;
    background: white;
    display: flex;
    justify-content: center;
    align-items: center;
    padding-bottom: env(safe-area-inset-bottom); // 适配iphoneX的底部

    .tab-item {
      flex: 1;
      text-align: center;
      display: flex;
      justify-content: center;
      align-items: center;
      flex-direction: column;

      .tab_img {
        width: 45rpx;
        height: 45rpx;
      }

      .tab_text {
        font-size: 25rpx;
        margin: 9rpx 0;
      }
    }
  }
}
.flex-box {
  display: -webkit-box;
  display: -webkit-flex;
  display: flex;
}
.flex-col {
  flex-direction: column
}
</style>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255

相关文章

基于ElementUi再次封装基础组件文档

Vue3+Vite+Ts+Pinia+Qiankun后台管理系统

vue3+ts基于Element-plus再次封装基础组件文档

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

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

  

闽ICP备14008679号