思路:
1.第一种是根据登录时获取的不同角色信息,来进行 跳转到不同的页面,在这些页面中使用自定义tabbar
2.第二种思路是封装一个自定义tabbar组件,然后在所有要展示tabbar的页面中引入使用
1.根据手机号码一键登录,在回调中获取用户信息进行跳转
/**
* @param {object} e 获取手机号码组件回调参数
* @description 家政人员一键登录组件回调
*/
async getPhoneNumber(e) {
if (e.detail.errMsg == "getPhoneNumber:ok") {
this.phoneCode = e.detail.code;
if (this.loginCode == "") {
await this.getCode();
}
this.loginForm = {
loginCode: this.loginCode,
phoneCode: this.phoneCode,
};
this.$http.staffWxLogin(this.loginForm).then(res => {
if (res.code == 200) {
console.log(res, 'res')
uni.setStorageSync("token", res.data.token);
uni.setStorageSync("employeeStaffId", res.data.userId);
uni.setStorageSync('userType', 1);
/**
* 家政端
*/
// uni.reLaunch({
// url: '/pages/bottomPage/index'
// })
/**
* 司机端
*/
uni.reLaunch({
url: "/page-diver/diver/tabBar/tabBar"
})
}
})
}
},
2.在tabbar页面中完成自定义tabbar,并完成根据激活的tabbar展示不同页面的逻辑
其实就是调用v-if来控制不同页面的显示
<template>
<view style="height: 100vh; overflow-y: hidden;display: flex;flex-direction: column;">
<view style="overflow-y: hidden;flex-grow: 10;">
<!-- 首页 -->
<scroll-view style="height: 100%;" v-if="currentTab === 'index'" scroll-y>
<index-com></index-com>
</scroll-view>
<!-- 客户 -->
<scroll-view style="height: 100%;" v-if="currentTab === 'customer'">
<index-com></index-com>
</scroll-view>
<!-- 人员 -->
<view style="height: 100%;" v-if="currentTab === 'person'" >
<index-com></index-com>
</view>
<!-- 合同 -->
<view style="height: 100%;" v-if="currentTab === 'contract'">
<index-com></index-com>
</view>
<!-- 工具 -->
<view style="height: 100%;" v-if="currentTab === 'tool'" scroll-y>
<index-com></index-com>
</view>
</view>
<!-- tabBar -->
<u-tabbar :value="currentTab" :fixed="true" :placeholder="true" :safeAreaInsetBottom="true"
activeColor="#FF7993" inactiveColor="#A7A7A7" style="flex: 0">
<u-tabbar-item v-for="(item,index) in iconList" :text="item.label" :key="index" :icon="item.isActive?item.active:item.path"
@click="barClick"></u-tabbar-item>
</u-tabbar>
</view>
</template>
<script>
import indexCom from '../index/index.vue'
export default {
components: {
indexCom,
},
data() {
return {
currentTab: 'index',
iconList: [
{
path:'/static/tabBar/diver-home.png',
active:'/static/tabBar/diver-achome.png',
name:'index',
isActive:true,
label:'首页'
},
{
path:'/static/tabBar/diver-car.png',
active:'/static/tabBar/diver-accar.png',
name:'tool',
isActive:false,
label:'我的车队'
},
{
path:'/static/tabBar/diver-my.png',
active:'/static/tabBar/diver-acmy.png',
name:'my',
isActive:false,
label:'我的'
}
]
}
},
methods: {
barClick(e,name){
for(let i =0;i<this.iconList.length;i++){
if(i === e){
if(!this.iconList[i].isActive){
this.iconList[i].isActive = true
this.currentTab =i
console.log(this.currentTab,'currentTab')
}
}else{
this.iconList[i].isActive = false
}
}
}
}
}
</script>
<style>
</style>
第二张思路就不赘述了,直接用上面的tabbar封装成组件引用即可,主要在pages.json中将tabbarlist设为空数组。