Browse Source

feat(components): 底部 tabber 功能完善及页面跳转逻辑优化

- 修复 tabber点击跳转逻辑,使用 uni.navigateTo 替代原生跳转
- 添加用户类型和 tabber 索引的本地存储支持
- 优化 tabber 数据初始化,根据用户类型动态生成
- 在学员的个人中心页面集成底部 tabber 组件
master
liutong 1 year ago
parent
commit
36eaed419e
  1. 46
      components/AQ/AQTabber.vue
  2. 7
      pages/student/my/my.vue

46
components/AQ/AQTabber.vue

@ -1,7 +1,7 @@
<!--底部Tabber组件-->
<template>
<view class="main_box">
<fui-tabbar :tabBar="tabBar" :current="current" @click="openView"></fui-tabbar>
<fui-tabbar :tabBar="tabBar" :current="tabBerIndex" @click="openView"></fui-tabbar>
</view>
</template>
@ -15,7 +15,7 @@
data() {
return {
userType:'1',//|1=,2=,3=
current:'0',
tabBerIndex:'0',
tabBar: []
};
},
@ -27,30 +27,41 @@
methods: {
async init(){
uni.setStorageSync('userType','1')
let userType = uni.getStorageSync('userType')
let tabBerIndex = uni.getStorageSync('tabBerIndex')
if(tabBerIndex){
this.tabBerIndex = String(tabBerIndex)
}else{
this.tabBerIndex = '0'
}
switch (String(this.userType)){
case "1"://
this.tabBar = [
{
text: "首页",
urlPath:'pages/student/index/index',//
urlPath:'/pages/student/index/index',//
iconPath: "/static/images/tabbar/home.png",
selectedIconPath: "/static/images/tabbar/home_selected.png"
},
{
text: "课表",
urlPath:'pages/student/timetable/index',//
urlPath:'/pages/student/timetable/index',//
iconPath: "/static/images/tabbar/my.png",
selectedIconPath: "/static/images/tabbar/my.png"
},
{
text: "班级",
urlPath:'pages/student/my/my',//
urlPath:'/pages/student/my/my',//
iconPath: "/static/images/tabbar/my.png",
selectedIconPath: "/static/images/tabbar/my.png"
},
{
text: "我的",
urlPath:'pages/student/my/my',//
urlPath:'/pages/student/my/my',//
iconPath: "/static/images/tabbar/my.png",
selectedIconPath: "/static/images/tabbar/my.png"
}
@ -60,19 +71,19 @@
this.tabBar = [
{
text: "首页",
urlPath:'pages/student/index/index',//
urlPath:'/pages/student/index/index',//
iconPath: "/static/images/tabbar/my.png",
selectedIconPath: "/static/images/tabbar/my.png"
},
{
text: "线索",
urlPath:'pages/student/my/my',//
urlPath:'/pages/student/my/my',//
iconPath: "/static/images/tabbar/my.png",
selectedIconPath: "/static/images/tabbar/my.png"
},
{
text: "添加",
urlPath:'pages/student/my/my',//
urlPath:'/pages/student/my/my',//
iconPath: "/static/images/tabbar/my.png",
selectedIconPath: "/static/images/tabbar/my.png",
midButton: true,
@ -81,13 +92,13 @@
},
{
text: "数据",
urlPath:'pages/student/my/my',//
urlPath:'/pages/student/my/my',//
iconPath: "/static/images/tabbar/my.png",
selectedIconPath: "/static/images/tabbar/my.png"
},
{
text: "我的",
urlPath:'pages/student/my/my',//
urlPath:'/pages/student/my/my',//
iconPath: "/static/images/tabbar/my.png",
selectedIconPath: "/static/images/tabbar/my.png"
}
@ -97,19 +108,19 @@
this.tabBar = [
{
text: "首页",
urlPath:'pages/student/index/index',//
urlPath:'/pages/student/index/index',//
iconPath: "/static/images/tabbar/my.png",
selectedIconPath: "/static/images/tabbar/my.png"
},
{
text: "课表",
urlPath:'pages/student/timetable/index',//
urlPath:'/pages/student/timetable/index',//
iconPath: "/static/images/tabbar/my.png",
selectedIconPath: "/static/images/tabbar/my.png"
},
{
text: "我的",
urlPath:'pages/student/my/my',//
urlPath:'/pages/student/my/my',//
iconPath: "/static/images/tabbar/my.png",
selectedIconPath: "/static/images/tabbar/my.png"
}
@ -120,6 +131,13 @@
openView(e){
console.log('点击跳转',e)
//tabBar
uni.setStorageSync('tabBerIndex',e.index)
console.log('qqq',e.urlPath)
uni.navigateTo({
url:e.urlPath
})
},
}
}

7
pages/student/my/my.vue

@ -105,10 +105,14 @@
</fui-list-cell>
<view style="height: 27rpx;width: 100%;"></view>
</view>
<AQTabber/>
</view>
</template>
<script>
import AQTabber from "@/components/AQ/AQTabber.vue"
import user1 from '@/api/user.js';
import medication from '@/api/medication.js';
import fuiIcon from "@/components/firstui/fui-icon/fui-icon.vue"
@ -124,7 +128,8 @@
fuiCol,
fuiList,
fuiListCell,
fuiActionsheet
fuiActionsheet,
AQTabber,
},
data() {
return {

Loading…
Cancel
Save