From 6452a29d1809b92ecb64b8f7bb6798db4503ffa0 Mon Sep 17 00:00:00 2001
From: Lou <luzhiping@qqyjz.com>
Date: Tue, 19 Mar 2024 10:33:52 +0800
Subject: [PATCH] 底部自定义导航
---
pages/user/center.vue | 10 +
common/common.js | 51 ++++++++++
pages/statistics/index.vue | 36 +++++--
pages/circle/index.vue | 27 ++++-
pages/home/index.vue | 12 +
pages.json | 14 +-
components/tabBar/tabBar.vue | 125 ++++--------------------
store/index.js | 3
8 files changed, 145 insertions(+), 133 deletions(-)
diff --git a/common/common.js b/common/common.js
index c0447f7..c166237 100644
--- a/common/common.js
+++ b/common/common.js
@@ -93,4 +93,55 @@
return obj[i]
}
}
+}
+
+
+export const getTabbarList = (roleType) => {
+ if (roleType == 2) {
+ return [{
+ name: '首页',
+ iconPathSelected: '/static/img/tabbar-01-selected.png',
+ iconPath: '/static/img/tabbar-01.png',
+ url: '/pages/home/index'
+ },
+
+ {
+ name: '驾驶舱',
+ iconPathSelected: '/static/img/tabbar-02-selected.png',
+ iconPath: '/static/img/tabbar-02.png',
+
+ url: '/pages/statistics/index'
+ },
+
+
+ {
+ name: '个人中心',
+ iconPathSelected: '/static/img/tabbar-03-selected.png',
+ iconPath: '/static/img/tabbar-03.png',
+
+ url: '/pages/user/center'
+ }
+ ]
+ } else {
+ return [{
+ name: '首页',
+ iconPathSelected: '/static/img/tabbar-01-selected.png',
+ iconPath: '/static/img/tabbar-01.png',
+ url: '/pages/home/index'
+ },
+
+ {
+ name: '圈子',
+ iconPathSelected: '/static/img/tabbar-02-selected.png',
+ iconPath: '/static/img/tabbar-02.png',
+ url: '/pages/circle/index'
+ },
+ {
+ name: '个人中心',
+ iconPathSelected: '/static/img/tabbar-03-selected.png',
+ iconPath: '/static/img/tabbar-03.png',
+ url: '/pages/user/center'
+ }
+ ]
+ }
}
\ No newline at end of file
diff --git a/components/tabBar/tabBar.vue b/components/tabBar/tabBar.vue
index 1c20505..0690421 100644
--- a/components/tabBar/tabBar.vue
+++ b/components/tabBar/tabBar.vue
@@ -2,21 +2,10 @@
<view>
<u-tabbar class="custom-tabbar" zIndex="100" :value="current" :fixed="true" :active-color="activeColor"
:inactive-color="inactiveColor">
- <u-tabbar-item text="首页" @click="changeTabbar('/pages/home/index')">
- <image class="tabbar-icon" slot="active-icon" src="/static/img/tabbar-01-selected.png"></image>
- <image class="tabbar-icon" slot="inactive-icon" src="/static/img/tabbar-01.png"></image>
- </u-tabbar-item>
- <!-- <u-tabbar-item text="圈子">
- <image class="tabbar-icon" slot="active-icon" src="/static/img/tabbar-02-selected.png"></image>
- <image class="tabbar-icon" slot="inactive-icon" src="/static/img/tabbar-02.png"></image>
- </u-tabbar-item> -->
- <u-tabbar-item text="驾驶舱" v-if="roleType == 2" @click="changeTabbar('/pages/statistics/index')">
- <image class="tabbar-icon" slot="active-icon" src="/static/img/tabbar-02-selected.png"></image>
- <image class="tabbar-icon" slot="inactive-icon" src="/static/img/tabbar-02.png"></image>
- </u-tabbar-item>
- <u-tabbar-item text="个人中心" @click="changeTabbar('/pages/user/center')">
- <image class="tabbar-icon" slot="active-icon" src="/static/img/tabbar-03-selected.png"></image>
- <image class="tabbar-icon" slot="inactive-icon" src="/static/img/tabbar-03.png"></image>
+ <u-tabbar-item :text="item.name" @click="changeTabbar(item.url,index)" v-for="(item,index) in tabbarList"
+ :key="index">
+ <image class="tabbar-icon" slot="active-icon" :src="item.iconPathSelected"></image>
+ <image class="tabbar-icon" slot="inactive-icon" :src="item.iconPath"></image>
</u-tabbar-item>
</u-tabbar>
</view>
@@ -26,117 +15,45 @@
export default {
props: {
current: Number,
- isShowTabbarItem: false
+ list: {
+ type: Array,
+ default: () => []
+ }
},
data() {
return {
-
- roleType: "",
- curRole: {},
- inactiveColor: '#909399',
- activeColor: '#328CFA',
-
- curTabList: [{
- name: '首页',
- iconPathSelected: '/static/img/tabbar-01-selected.png',
- iconPath: '/static/img/tabbar-01.png',
- // icon: "home",
- url: '/pages/home/index'
- },
-
- {
- name: '圈子',
- iconPathSelected: '/static/img/tabbar-02-selected.png',
- iconPath: '/static/img/tabbar-02.png',
- // icon: "home",
- url: '/pages/home/index'
- },
- {
- name: '驾驶舱',
- iconPathSelected: '/static/img/tabbar-02-selected.png',
- iconPath: '/static/img/tabbar-02.png',
- // icon: "home",
- url: '/pages/statistics/index'
- },
-
-
- {
- name: '个人中心',
- iconPathSelected: '/static/img/tabbar-03-selected.png',
- iconPath: '/static/img/tabbar-03.png',
- // icon: "account-fill",
- url: '/pages/user/center'
- }
- ]
+ tabbarList: [],
+ inactiveColor: '#AFB8C3',
+ activeColor: '#5086FA',
}
},
watch: {
- 'curRole.roleName': {
- handler(newVal) {
- if (newVal == "民警") {
- this.roleType = 2
- }
- },
- deep: true,
- immediate: true
- },
-
-
- tabList: {
+ list: {
handler(newVal) {
if (newVal && newVal.length > 0) {
- this.tabList = newVal
+ this.tabbarList = newVal
}
},
deep: true,
immediate: true
- },
- currentTab: {
- handler(newVal) {
- this.currentTab = newVal
- },
- deep: true,
- immediate: true
- },
-
+ }
},
- mounted() {
- this.curRole = uni.getStorageSync("activeRole");
-
- // this.getMessage()
- },
- destroyed() {
-
- },
methods: {
-
-
- changeTabbar(url) {
- uni.reLaunch({
+ changeTabbar(url, index) {
+ if (this.current == index) return
+ uni.switchTab({
url
})
- },
-
-
- change(e) {
- console.log(e);
- uni.reLaunch({
- url: this.curTabList[e].url,
- complete: (res) => {
- console.log("===>", res);
- }
- })
- // this.$emit("change", this.curTabList[e].url)
- },
-
+ this.$emit("change", index)
+ }
}
}
</script>
<style lang="scss" scoped>
.tabbar-icon {
- width: 45rpx;
- height: 45rpx;
+ width: 56rpx;
+ height: 56rpx;
}
</style>
\ No newline at end of file
diff --git a/pages.json b/pages.json
index d58ab73..de67526 100644
--- a/pages.json
+++ b/pages.json
@@ -931,7 +931,7 @@
"backgroundColor": "#4586FE"
},
"tabBar": {
- // "custom": true,
+ "custom": true,
"color": "#AFB8C3",
"selectedColor": "#5086FA",
"borderStyle": "white",
@@ -942,12 +942,12 @@
"iconPath": "static/img/tabbar-01.png",
"text": "首页"
},
- // {
- // "pagePath": "pages/circle/index",
- // "iconPath": "static/img/tabbar-02.png",
- // "selectedIconPath": "static/img/tabbar-02-selected.png",
- // "text": "圈子"
- // },
+ {
+ "pagePath": "pages/circle/index",
+ "iconPath": "static/img/tabbar-02.png",
+ "selectedIconPath": "static/img/tabbar-02-selected.png",
+ "text": "圈子"
+ },
{
"pagePath": "pages/statistics/index",
"iconPath": "static/img/tabbar-02.png",
diff --git a/pages/circle/index.vue b/pages/circle/index.vue
index 21fb455..114c481 100644
--- a/pages/circle/index.vue
+++ b/pages/circle/index.vue
@@ -81,11 +81,15 @@
</view>
</view>
</z-paging>
+
+ <tabBar :current="1" :list="tabList" />
+
</view>
</template>
<script>
+ import tabBar from "@/components/tabBar/tabBar.vue"
import {
getList,
handleLike,
@@ -95,7 +99,13 @@
import {
minioBaseUrl
} from "@/common/setting.js"
+ import {
+ getTabbarList
+ } from "@/common/common.js"
export default {
+ components: {
+ tabBar
+ },
data() {
return {
keyword: "",
@@ -110,15 +120,18 @@
page: 1,
isSearch: false,
commentList: [],
- envVersion:""
+ envVersion: "",
+ tabList: []
}
},
onLoad() {
+ this.tabList = getTabbarList(1);
let role = uni.getStorageSync('activeRole')
if (role.roleAlias == "inhabitant") {
this.roleType = 0
} else {
+
this.roleType = 1;
}
// this.getCircleList()
@@ -127,9 +140,9 @@
this.$refs.paging.reload();
})
},
-
-
- onShow(){
+
+
+ onShow() {
let accountInfo = wx.getAccountInfoSync();
this.envVersion = accountInfo.miniProgram.envVersion;
},
@@ -142,9 +155,9 @@
// },
methods: {
-
-
- showAvatar(src){
+
+
+ showAvatar(src) {
return `${minioBaseUrl}${src}`
},
diff --git a/pages/home/index.vue b/pages/home/index.vue
index cb36b1a..6e8b27c 100644
--- a/pages/home/index.vue
+++ b/pages/home/index.vue
@@ -263,7 +263,7 @@
@close="selectBoxShow = false" :show="selectBoxShow" keyName="name" ref="uPicker" :columns="siteColumns"
@confirm="confirmSite" @change="changeSite" @cancel="selectBoxShow = false"></u-picker>
</view>
- <!-- <tabBar :current="0" /> -->
+ <tabBar :current="0" :list="tabList" />
</view>
</template>
@@ -295,7 +295,9 @@
} from "@/api/task/task.js"
import tabBar from "@/components/tabBar/tabBar.vue"
-
+ import {
+ getTabbarList
+ } from "@/common/common.js"
export default {
components: {
noticeList,
@@ -514,7 +516,8 @@
background: {
top: "#017BFC",
banner: "linear-gradient(180deg, #017BFC 0%, rgba(1, 123, 252, 0) 100%)"
- }
+ },
+ tabList: []
}
},
@@ -730,6 +733,7 @@
let type = null
let roleName = this.selectRole.roleName
if (roleName == '网格员' || roleName == '系统管理员') {
+ this.tabList = getTabbarList(1);
type = 1
this.roleType = 1;
this.roleTypeName = "街道社区网格"
@@ -739,6 +743,7 @@
"linear-gradient(180deg, #017BFC 0%, rgba(1, 123, 252, 0) 100%)");
} else if (roleName == '居民') {
+ this.tabList = getTabbarList(1);
type = 2
this.roleType = 2
this.roleTypeName = "居民"
@@ -749,6 +754,7 @@
"linear-gradient(180deg, #017BFC 0%, rgba(1, 123, 252, 0) 100%)");
} else if (roleName == '民警') {
+ this.tabList = getTabbarList(2);
type = 1
this.roleType = 3
this.roleTypeName = "街道社区"
diff --git a/pages/statistics/index.vue b/pages/statistics/index.vue
index ba01571..3d726bc 100644
--- a/pages/statistics/index.vue
+++ b/pages/statistics/index.vue
@@ -163,7 +163,7 @@
</view>
</view>
- <!-- <tabBar :current="1" /> -->
+ <tabBar :current="1" :list="tabList" @change="changeTabbar" />
</view>
</template>
@@ -171,6 +171,9 @@
import captionRow from "@/components/caption/caption.vue"
import * as statisticsModal from "@/api/statistics/statistics.js"
import tabBar from "@/components/tabBar/tabBar.vue"
+ import {
+ getTabbarList
+ } from "@/common/common.js"
export default {
components: {
captionRow,
@@ -253,19 +256,32 @@
},
gridData: {},
houseLabelData: [],
- sexData: []
+ sexData: [],
+ tabList: []
}
},
- onTabItemTap(e) {
- // tab 点击时执行，此处直接接收单击事件
- console.log(e)
- this.refreshData();
- },
- // onLoad() {
-
+ // onTabItemTap(e) {
+ // // tab 点击时执行，此处直接接收单击事件
+ // console.log(e)
+ // this.refreshData();
// },
+ onLoad() {
+ this.tabList = getTabbarList(2);
+ },
+
+
+ onShow() {
+ this.refreshData();
+ },
+
methods: {
- refreshData(){
+
+ changeTabbar(e) {
+ console.log("==>", e)
+ // this.refreshData();
+ },
+
+ refreshData() {
this.getHouseHoldData();
this.getHouseData();
this.getHouseLabelData();
diff --git a/pages/user/center.vue b/pages/user/center.vue
index a0f0fb8..dd59f5e 100644
--- a/pages/user/center.vue
+++ b/pages/user/center.vue
@@ -67,7 +67,7 @@
</u-cell>
</u-cell-group>
</view>
- <!-- <tabBar :current="2" /> -->
+ <tabBar :current="2" :list="tabList" />
</view>
</template>
@@ -79,6 +79,9 @@
minioBaseUrl
} from "@/common/setting.js"
import tabBar from "@/components/tabBar/tabBar.vue"
+ import {
+ getTabbarList
+ } from "@/common/common.js"
export default {
components: {
tabBar
@@ -99,7 +102,8 @@
],
roleType: 1,
addressType: 1,
- user_info: {}
+ user_info: {},
+ tabList: []
};
},
@@ -107,8 +111,10 @@
// this.getUserInfo();
let role = uni.getStorageSync('activeRole')
if (role.roleAlias == "inhabitant") {
+ this.tabList = getTabbarList(1);
this.roleType = 1
} else {
+ this.tabList = getTabbarList(2);
this.roleType = 2;
}
this.addressType = uni.getStorageSync("siteInfo").addressType;
diff --git a/store/index.js b/store/index.js
index 41fe799..b666364 100644
--- a/store/index.js
+++ b/store/index.js
@@ -97,6 +97,7 @@
// },
//设置当前激活的角色
setActiveRole(state, role) {
+ console.log("role===>", role);
state.activeRole = role
uni.setStorageSync('activeRole', role)
},
@@ -132,6 +133,8 @@
},
actions: {
+
+
getMenuList({
commit
}) {
--
Gitblit v1.9.3