底部自定义导航

Lou

2024-03-19 6452a29d1809b92ecb64b8f7bb6798db4503ffa0

底部自定义导航

 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'
            }
        ]
    }
}

 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>

 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",

 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}`
            },


 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 = "街道社区"


 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();

 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;

 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
        }) {