修改首页菜单改为动态渲染，优化逻辑，楼盘表优化

Lou

2023-11-23 1f63ea4260b41facaf718d1ec9822d320b46f83a

修改首页菜单改为动态渲染，优化逻辑，楼盘表优化

 common/setting.js

@@ -12,7 +12,7 @@
    // devUrl: 'https://sk.hubeishuiyi.cn',
    // devUrl: 'http://192.168.1.156:9528',
    // devUrl:'http://192.168.1.50:9528',
    devUrl: 'http://192.168.0.100:9528',
    devUrl: 'http://192.168.0.102:9528',
    // devUrl: 'http://192.168.0.102:9528',
    // devUrl: 'https://srgdjczzxtpt.com:2080/api',
    minioBaseUrl: "https://srgdjczzxtpt.com:2080/gminio/jczz/",

 components/caption/caption.vue

New file
@@ -0,0 +1,44 @@
<template>
    <view class="caption flex a-i-c j-c-s-b" @click="navTo()">
        <view class="flex a-i-c">
            <view class="line"></view>
            <text class="f-32 fw">{{title}}</text>
        </view>
        <u-icon name="arrow-right"  v-if="isLink"></u-icon>
    </view>
</template>

<script>
    export default {
        name:"captionRow",
        props:{
            title:String,     //左侧标题
            isLink:{          //是否展示右侧箭头并开启点击反馈
                type:Boolean,
                default:false
            },
            url:String       //点击后跳转的URL地址
        },
        methods:{
            navTo(){
                uni.navigateTo({
                    url:this.url
                })
            }
        }
    }
</script>

<style lang="scss"  scoped>
    .caption {
        width: 100%;
        padding: 30rpx 0 0;
	
        .line {
            width: 6rpx;
            height: 28rpx;
            background-color: #017BFC;
            margin-right: 14rpx;
        }
    }
</style>

 pages.json

@@ -8,7 +8,7 @@
            "path": "pages/home/index",
            "style": {
                "navigationBarTitleText": "首页",
                "enablePullDownRefresh": false,
                "enablePullDownRefresh": true,
                "navigationStyle": "custom"
            }
        },

 pages/home/index.vue

@@ -10,38 +10,24 @@
        </u-navbar>

        <view class="content">

            <view class="swiper mb-30">

                <u-swiper :list="swiperList" height="260rpx"></u-swiper>

                <u-swiper :list="bannerList"    height="260rpx"></u-swiper>

            </view>

            <view class="" v-if="roleType != 1">

            <view class="">

                <u-grid :border="false" :col="liveList.length">

                    <!-- <u-grid-item v-for="(i,k) in cellList" :key="k" @click.native="toPage(i)">

                        <u-icon :name="i.icon" :size="45"></u-icon>

                        <text class="f-26 mt-20">{{i.text}}</text>

                    </u-grid-item>

                    <u-grid-item @click.native="navigatorPage('/subPackage/bs/views/repair')"

                        v-if="curSelectSite.addressType != 2">

                        <u-icon name="/static/icon/nav-02.png" width="90rpx" height="90rpx"></u-icon>

                        <text class="f-26 mt-20">报事报修</text>

                    </u-grid-item>

                    <u-grid-item @click.native="navTo()" v-if="curSelectSite.addressType != 2">

                        <u-icon name="/static/icon/nav-04.png" width="90rpx" height="90rpx"></u-icon>

                        <text class="f-26 mt-20">租客上报</text>

                    </u-grid-item> -->

                    <u-grid-item @click.native="navigatorPage(i.path)" v-for="(i,k) in liveList"   :key="k">

                    <u-grid-item @click.native="navigatorPage(i.path)" v-for="(i,k) in liveList" :key="k">

                        <u-icon :name="i.pictureImg" width="90rpx" height="90rpx"></u-icon>

                        <text class="f-26 mt-20">{{i.name}}</text>

                    </u-grid-item>

					
                </u-grid>



                <view class="section flex j-c-s-b mt-40">

                    <view class="section-item" v-for="(i,k) in navList"  :key="k">

                        <image class="section-item-bg" :src="i.bgImg" mode="aspectFill"></image>

                    <view class="section-item" v-for="(i,k) in contactList" :key="k">

                        <image class="section-item-bg" :src="i.pictureImg" mode="aspectFill"></image>

                        <view class="item-box">

                            <view class="f-28">{{i.title}}</view>

                            <view class="f-28">{{i.name}}</view>

                            <view class="flex j-c-s-b">

                                <text class="f-22">{{i.name}}</text>

                                <u-icon :name="i.icon"></u-icon>

                                <text class="f-22">{{i.remark}}</text>

                                <!-- <u-icon :name="i.icon"></u-icon> -->

                            </view>

                        </view>

                    </view>

@@ -59,7 +45,6 @@
                        </view>

                    </view>

                </view>



                <view class="block-item" @click="navigatorPage('/subPackage/user/clockIn/index')">

                    <image class="block-item-bg" src="/static/icon/nav-bg-05.png" mode="aspectFill" />

                    <view class="block-item-box flex a-i-c">

@@ -72,91 +57,35 @@
                </view>

            </view>



            <view class=""  v-if="houseList.length">

                <view class="caption">

                    <view class="flex a-i-c">

                        <view class="line"></view>

                        <text class="f-32 fw">楼盘表</text>

                    </view>

                </view>

            <view class="" v-if="isShowHouse">

                <caption-row title="楼盘表" />

                <view class="flex flex-wrap">

                    <view class="cell bgc-main flex a-i-c" v-for="(item, index) in houseDataList.slice(0, 6)"

                        @click.native="pushPage(item)"  :key="index">

                        @click.native="pushPage(item)" :key="index">

                        <u-icon name="/static/icon/floor.png" width="32rpx" height="32rpx"></u-icon>

                        <text class="cell-text f-26 c-ff">{{item.title}}</text>

                    </view>

                </view>

            </view>



            <view class="" v-if="roleType == 1 || (roleType == 2 && curSelectSite.addressType == 2)">

                <view class="caption">

                    <view class="flex a-i-c">

                        <view class="line"></view>

                        <text class="f-32 fw">工作台</text>

                    </view>

                </view>

                <u-grid :border="false" col="4" v-if="roleType == 2 && curSelectSite.addressType == 2">

                    <u-grid-item @click="navigatorPage('/subPackage/workbench/views/editExamine')"

                        :customStyle="{paddingTop:20+'rpx'}">

                        <view class="grid-item flex f-d-c a-i-c"

                            style="background:linear-gradient(133deg, #F9FAFE 0%, rgba(249,250,254,0) 100%)">

                            <u-icon name="/static/icon/menu-05.png" width="60rpx" height="60rpx"></u-icon>

                            <text class="grid-text f-24 fw mt-10">场所维护</text>

                        </view>

                    </u-grid-item>

                </u-grid>

                <u-grid :border="false" col="4" v-if="roleType == 1">

            <view class="" v-if="jobList.length">

                <caption-row title="工作台" />

                <u-grid :border="false" col="4">

                    <u-grid-item @click="navigatorPage(item.path)" v-for="(item, index) in jobList" :index="index"

                        :key="index" :customStyle="{paddingTop:20+'rpx'}">

                        <view class="grid-item flex f-d-c a-i-c" :style="{background:item.style.background}">

                            <u-icon :name="item.icon" width="60rpx" height="60rpx"></u-icon>

                            <text class="grid-text f-24 fw mt-10">{{item.text}}</text>

                        <view class="grid-item flex f-d-c a-i-c" :style="{background:item.background}">

                            <u-icon :name="item.pictureImg" width="60rpx" height="60rpx"></u-icon>

                            <text class="grid-text f-24 fw mt-10">{{item.name}}</text>

                        </view>

                    </u-grid-item>

                </u-grid>

            </view>



            <view class="mt-40" v-if="false">

                <view class="caption">

                    <view class="flex a-i-c">

                        <view class="line"></view>

                        <text class="f-32 fw">我的任务</text>

                    </view>

                </view>

                <view class="row flex j-c-s-b">

                    <view class="row-item flex_base" @click="navigatorPage(`/subPackage/workbench/views/audit?type=1`)">

                        <u-icon name="/static/icon/nav-07.png" width="90rpx" height="90rpx"></u-icon>

                        <view class="flex f-d-c fw ml-20">

                            <text class="f-28">一次性</text>

                            <text class="f-36 c-main">{{frequencyNumber.disposable}}</text>

                        </view>

                    </view>

                    <view class="row-item flex_base" @click="navigatorPage(`/subPackage/workbench/views/audit?type=2`)">

                        <u-icon name="/static/icon/nav-08.png" width="90rpx" height="90rpx"></u-icon>

                        <view class="flex f-d-c fw ml-20">

                            <text class="f-28">周期性</text>

                            <text class="f-36" style="color:#FD7F19">{{frequencyNumber.periodicity}}</text>

                        </view>

                    </view>

                </view>



                <u-cell-group>

                    <u-cell :icon="i.icon" :iconStyle="{width:'40rpx',height:'40rpx',marginRight:'18rpx'}"

                        :title="i.title" v-for="i in taskList" :value="i.status"></u-cell>

                </u-cell-group>

            <view class="notic" v-if="isShowNotice">

                <caption-row title="通知公告" :is-link="true" url="/subPackage/article/list" />

                <notice-list :data="notice" />

            </view>



            <view class="notic" v-if="roleType == 2 && curSelectSite.addressType != 2">

                <view class="caption flex a-i-c j-c-s-b" @click="navigatorPage('/subPackage/article/list')">

                    <view class="flex a-i-c">

                        <view class="line"></view>

                        <text class="f-32 fw">通知公告</text>

                    </view>

                    <u-icon name="arrow-right"></u-icon>

                </view>

                <notice-list  :data="notice" />

            </view>

			
            <u-picker :title="roleTypeName" :defaultIndex="selectSiteIndex" :closeOnClickOverlay="true"

                @close="selectBoxShow = false" :show="selectBoxShow" keyName="name" ref="uPicker" :columns="siteColumns"

                @confirm="confirmSite" @change="changeSite" @cancel="selectBoxShow = false"></u-picker>

@@ -175,18 +104,18 @@
        getPage

    } from "@/api/article/article";

    import {

        getCountFrequencyNumber,

        getCountTypeNumber

    } from "@/api/task/task";

	
    import { getBannerList } from "@/api/system/index"

    import { uploadUrl } from "@/common/setting"

    import noticeList from "@/components/noticeList/noticeList";



        getBannerList

    } from "@/api/system/index"

    import {

        uploadUrl

    } from "@/common/setting"

    import noticeList from "@/components/noticeList/noticeList";

    import captionRow from "@/components/caption/caption.vue"



    export default {

        components:{

            noticeList

        components: {

            noticeList,

            captionRow

        },

        data() {

            return {

@@ -195,8 +124,7 @@
                    'http://220.176.210.217:9000/jczz/upload/20231111/cc093afc5e21639ef5b251eb865c24f4.png',

                    'http://220.176.210.217:9000/jczz/upload/20231111/cc093afc5e21639ef5b251eb865c24f4.png'

                ],

                cellList: [

                    {

                cellList: [{

                        icon: "/static/icon/nav-01.png",

                        text: "标签报事",

                        path: '/subPackage/label/index'

@@ -354,12 +282,12 @@
                menuList: [],

                curHouseCode: '',

                notice: [],

                frequencyNumber: {},

                typeNumber: {},

                selectSiteIndex: [0, 0],

                liveList:[],   //生活菜单

                contactList:[],   //便民服务联系方式

                houseList:[]

                liveList: [], //生活菜单

                contactList: [], //便民服务联系方式

                isShowHouse: false, //显示楼盘表

                isShowNotice: false ,//显示通知公告

                bannerList:[]



            }

        },

@@ -372,10 +300,17 @@
                this.init()

            })

        },

		
        onReady() {

            this.$store.dispatch("getMenuList").then(res => {

                this.getMenuList();

            });

        },

		
        computed: {

            hasMenu() {

                return (name) => {

                    let resultArr = this.getMenu(name,this.menuList)

                    let resultArr = this.getMenu(name, this.menuList)

                    if (resultArr.length) {

                        return resultArr

                    } else {

@@ -388,7 +323,6 @@
        watch: {

            'curSelectSite.id': {

                handler(newVal, oldVal) {

                    console.log(newVal)

                    if (newVal) {

                        this.$store.commit("setSiteInfo", this.curSelectSite)

                    }

@@ -396,18 +330,26 @@
                deep: true,

                immediate: true

            },

			
            'curSelectSite.addressType':{   
                handler(newVal,oldVal){

                   if(newVal){

                       this.$store.dispatch("getMenuList").then(res=>{

                            this.getMenuList();

                       });

                   }



            'curSelectSite.addressType': {

                handler(newVal, oldVal) {

                    if (newVal) {

                        this.$store.dispatch("getMenuList").then(res => {

                            this.getMenuList();

                        });

                    }

                },

                deep: true,

                immediate: true

            }

        },

        onPullDownRefresh() {

            this.$store.dispatch("getMenuList").then(res => {

                this.getMenuList();

            });

            setTimeout(()=>{

                uni.stopPullDownRefresh();

            },300)

        },



        methods: {

@@ -415,40 +357,25 @@
            //初始化

            init() {

                this.curSelectSite = {}

				
                this.selectRole = uni.getStorageSync("activeRole")

                this.getMenuList()

                // this.getMenuList()

                this.getSiteList()

                this.getNoticeList()

                // this.getFrequencyNumber()

                // this.getTypeNumber()

                // this.getNoticeList()

            },

			
            getBanner(){



            getBanner() {

                getBannerList({

                    current:1,

                    size:5

                }).then(res=>{

                     let data = res.data.records;

                     if(data.length){

                         for(let i of data){

                             i.url = `${uploadUrl}${i.url}`

                         }

                         this.bannerList = data;

                     }

                    current: 1,

                    size: 5

                }).then(res => {

                    let data = res.data.records;

                    if (data.length) {

                        for (let i of data) {

                            i.url = `${uploadUrl}${i.url}`

                        }

                        this.bannerList = data;

                    }

                })

            },

			
            async getFrequencyNumber() {

                const res = await getCountFrequencyNumber()

                this.frequencyNumber = res.data



            },



            async getTypeNumber() {

                const res = await getCountTypeNumber()

                this.notypeNumber = res.data



            },



            async getNoticeList() {

@@ -462,10 +389,8 @@


            //获取场所列表

            async getSiteList() {

                console.log(this.selectRole)

                let type = null

                let roleName = this.selectRole.roleName

                console.log("roleName", roleName)

                if (roleName == '网格员' || roleName == '系统管理员') {

                    type = 1

                    this.roleType = 1;

@@ -477,7 +402,6 @@
                }

                const res = await getFuncList(type, roleName)

                this.columnData = res.data;

                console.log(res, "-----------")

                let data = res.data

                this.siteColumns = []

                this.buildSiteColumn(data, 0)

@@ -518,7 +442,6 @@
                }]

            },





            changeSite(e) {

                const {

                    columnIndex,

@@ -547,118 +470,58 @@
                console.log("curSite=>", this.curSelectSite);

            },

            getMenu(menuName) {

                // console.log(menuList, menuName)

                // for (var i = 0; i < menuList.length; i++) {

                //     if (menuList[i].name == menuName) {

                //         resultArr.push(menuList[i])

                //     } else {

                //         if (menuList[i].children && menuList[i].children.length) {

                //             this.getMenu(menuName, menuList[i].children, resultArr);

                //         }

                //     }

                // }

                let list = [];

                for(let i of this.menuList){

                    if(i.name == menuName){

                        if(i.children && i.children.length){

                             list = i.children;

                for (let i of this.menuList) {

                    if (i.name == menuName) {

                        if (i.children && i.children.length) {

                            list = i.children;

                            break;

                         }

                        }

                    }

                }

                return list;

            },

			


            //获取首页菜单

            getMenuList() {

                // console.log("当前角色菜单", this.menuList)

                // this.getPhoneList()

                // this.getLiveList()

                this.menuList = uni.getStorageSync("menu")

                this.liveList = this.hasMenu('生活')

                this.contactList = this.hasMenu('快捷拨号');

                // console.log(this.menuList.filter(item=>item.name == "楼盘表"))

                if(this.menuList.length){

                    this.houseList = this.menuList.filter(item=>item.name == "楼盘表")

                this.jobList = this.hasMenu('工作台')

                if (this.menuList.length) {

                    this.getHouseMenu();

                    this.getNoticeMenu();

                }

				
                // this.jobList = this.hasMenu('工作台')

                // this.getWorkbenchList()

            },

			
			
            getPhoneList() {

                const resultArr = this.hasMenu('快捷拨号');

                if (resultArr.length) {

                    this.contactList = resultArr;

                }



                // const topMenu = resultArr[0]

                // topMenu.children.forEach(menu => {

                //     this.gridDataList.push({

                //         title: menu.name,

                //         data: "无数据",

                //         phone: "无"

                //     })

                // })

            },



            //获取生活菜单

            getLiveList() {

                this.liveList = []

                const resultArr = this.hasMenu('生活')

                console.log(resultArr);

                if (resultArr.length) {

                    this.liveList = resultArr;

                }

                // const topMenu = resultArr[0];

                // console.log("topMenu====>",topMenu);

                // this.liveList = topMenu.children;

                // topMenu.children.forEach(menu => {

                //     this.liveList.push({

                //         imgUrl: menu.source,

                //         title: menu.name,

                //     })

                // })

            getHouseMenu() {

                let list = [];

                list = this.menuList.filter(item => item.name == "楼盘表")

                this.isShowHouse = list.length ? true : false;

            },



            //获取工作台菜单

            getWorkbenchList() {

                // this.jobList = []

                const jobList = this.hasMenu('工作台')

				
                // const topMenu = resultArr[0]

                // topMenu.children.forEach(menu => {

                //     this.jobList.push({

                //         imgUrl: menu.source,

                //         title: menu.name,

                //     })

                // })

            getNoticeMenu() {

                let list = [];

                list = this.menuList.filter(item => item.name == "通知公告")

                this.isShowNotice = list.length ? true : false;

                if (list.length) {

                    this.getNoticeList()

                }

            },



            // 页面跳转

            pushPage(item) {

                console.log(item,8888)

                const {id,title,addressType} = item;

                console.log(item, 8888)

                const {

                    id,

                    title,

                    addressType

                } = item;

                if (id !== void 0) {

                    let url = `/subPackage/house/list/index?id=${id}&title=${title}&addressType=${addressType}`

                    this.$u.func.globalNavigator(url, "navTo")

                }

            },



            // 页面跳转

            toPage({

                id,

                title,

                path

            }) {

                let url = `${path}`

                this.$u.func.globalNavigator(url, "navTo")

                if (id !== void 0) {



                }

            },





            navTo() {

                if (this.curHouseCode === '') {

@@ -684,26 +547,19 @@
                }

            },



            //扫一扫

            //扫一扫

            scan() {

                const that = this

                uni.scanCode({

                    success: function(res) {

                        console.log(res)





                        console.log('条码类型：' + res.scanType);

                        console.log('条码内容：' + res.result);





                        let obj = that.getUrlParams(res.result)

                        console.log(obj)



                        // let url = "/subPackage/workbench/views/cscj?stdId=" + obj.stdId

                        let url = "/subPackage/workbench/views/cscj?houseCode=" + obj.stdId

                        that.$u.func.globalNavigator(url, "navTo")





                    }

                });

            },

@@ -763,6 +619,7 @@
            width: 216rpx;

            height: 120rpx;

        }



        .item-box {

            width: 216rpx;

            height: 120rpx;

@@ -773,20 +630,9 @@
            box-sizing: border-box;

        }

    }



    .notic {

        width: 100%;

    }



    .caption {

        width: 100%;

        padding: 30rpx 0 0;



        .line {

            width: 6rpx;

            height: 28rpx;

            background-color: #017BFC;

            margin-right: 14rpx;

        }

    }



    .block {


 pages/home/index2.vue

@@ -1,196 +1,466 @@
<template>
    <view class="container">
        <u-navbar height="48" bgColor="#5887f9" :autoBack="false" safeAreaInsetTop placeholder>
            <view slot="left">
                <u--text color="#ffffff" text="基层智治" size="18" />
    <view class="">
        <u-navbar height="48" :autoBack="false" safeAreaInsetTop placeholder
            @leftClick="selectBoxShow = !selectBoxShow">
            <view slot="left" class="top flex">
                <view class="top-text f-30 fw">{{curSelectSite.name?curSelectSite.name:'暂无绑定' +roleTypeName+'信息'}}
                </view>
                <u-icon name="/static/icon/change-icon.png"></u-icon>
            </view>
        </u-navbar>

        <view class="main">
            <view class="main-bg">

        <view class="content">
            <view class="swiper mb-30">
                <u-swiper :list="swiperList" height="260rpx"></u-swiper>
            </view>
            <view class="" v-if="roleType != 1">
                <u-grid :border="false" :col="liveList.length">
                    <!-- <u-grid-item v-for="(i,k) in cellList" :key="k" @click.native="toPage(i)">
                        <u-icon :name="i.icon" :size="45"></u-icon>
                        <text class="f-26 mt-20">{{i.text}}</text>
                    </u-grid-item>
                    <u-grid-item @click.native="navigatorPage('/subPackage/bs/views/repair')"
                        v-if="curSelectSite.addressType != 2">
                        <u-icon name="/static/icon/nav-02.png" width="90rpx" height="90rpx"></u-icon>
                        <text class="f-26 mt-20">报事报修</text>
                    </u-grid-item>
                    <u-grid-item @click.native="navTo()" v-if="curSelectSite.addressType != 2">
                        <u-icon name="/static/icon/nav-04.png" width="90rpx" height="90rpx"></u-icon>
                        <text class="f-26 mt-20">租客上报</text>
                    </u-grid-item> -->
                    <u-grid-item @click.native="navigatorPage(i.path)" v-for="(i,k) in liveList"   :key="k">
                        <u-icon :name="i.pictureImg" width="90rpx" height="90rpx"></u-icon>
                        <text class="f-26 mt-20">{{i.name}}</text>
                    </u-grid-item>
					
                </u-grid>

            <view class="main-select" @click="selectBoxShow = !selectBoxShow">
                <u-icon name="map" color="#fff"></u-icon>
                <view>
                    当前场所：{{curSelectSite.name?curSelectSite.name:'暂无绑定场所信息'}}
                </view>

                <u-picker title="场所" :show="selectBoxShow" keyName="name" ref="uPicker" :columns="siteColumns"
                    @confirm="confirm" @change="changeHandler"></u-picker>
            </view>

            <view class="main-btn">
                <menu-list :menuData="btnList"></menu-list>
            </view>

            <view class="main-phone-house">
                <view v-if="gridDataList.length>0" class="phone-box">
                    <grid-menu :gridData='item' v-for="(item, index) in gridDataList" :key='index'></grid-menu>
                </view>

                <view v-if="hasMenu('楼盘表').length>0" class="house-box">
                    <box-title :title="'楼盘表'"></box-title>
                    <view class="content">
                        <grid-menu :gridData='item' v-for="(item, index) in houseDataList.slice(0, 6)" :key='index'
                            @click.native="pushPage(item)"></grid-menu>
                    </view>
                </view>
            </view>

            <view class="main-bt pb-40">
                <view v-if="liveList.length>0" class="mt-20">
                    <box-title :title="'生活'">
                        <template slot="titleMore">
                            <view style="color: red;">titleMore</view>
                        </template>
                    </box-title>
                    <view class="mt-20">
                        <view class="mt-20 b-c-w">
                            <menu-list :menuData="liveList"></menu-list>
                        </view>
                    </view>
                </view>

                <view v-if="jobList.length>0" class="mt-20">
                    <box-title :title="'工作台'"></box-title>

                    <view class="mt-20 b-c-w">
                        <menu-list :border='true' :menuData="jobList"></menu-list>
                    </view>
                </view>

                <view class="mt-20 main-taska">
                    <box-title :title="'我的任务'"></box-title>

                    <view class="mt-20 b-c-w">
                        <view class="flex">
                            <view class="flex-1" v-for="(item, index) in taskTypeList" :key='index'>
                                <cur-menu class='boder-f7f8f9-1 p-all-16' :curMenu="item" :imgShow="false"
                                    :textShow="true"></cur-menu>
                <view class="section flex j-c-s-b mt-40">
                    <view class="section-item" v-for="(i,k) in navList"  :key="k">
                        <image class="section-item-bg" :src="i.bgImg" mode="aspectFill"></image>
                        <view class="item-box">
                            <view class="f-28">{{i.title}}</view>
                            <view class="flex j-c-s-b">
                                <text class="f-22">{{i.name}}</text>
                                <u-icon :name="i.icon"></u-icon>
                            </view>
                        </view>
                        <u-cell-group :border='false'>
                            <u-cell class="boder-f7f8f9-1" :border='false' :title="item.title"
                                v-for="(item, index) in taskList" :key="index">
                                <view slot="right-icon">待处理 {{item.num}}</view>
                            </u-cell>
                        </u-cell-group>
                    </view>

                </view>
            </view>

            <view class="block flex a-i-c j-c-s-b" v-if="roleType == 1">
                <view @click="scan" class="block-item">
                    <image class="block-item-bg" src="/static/icon/nav-bg-04.png" mode="aspectFill" />
                    <view class="block-item-box flex a-i-c ">
                        <u-icon name="/static/icon/nav-05.png" width="90rpx" height="90rpx"></u-icon>
                        <view class="item-text flex f-d-c j-c-s-b">
                            <text class="f-32 fw">扫一扫</text>
                            <text class="f-26 opacity">场所采集</text>
                        </view>
                    </view>
                </view>

                <view class="block-item" @click="navigatorPage('/subPackage/user/clockIn/index')">
                    <image class="block-item-bg" src="/static/icon/nav-bg-05.png" mode="aspectFill" />
                    <view class="block-item-box flex a-i-c">
                        <u-icon name="/static/icon/nav-06.png" width="90rpx" height="90rpx"></u-icon>
                        <view class="item-text flex f-d-c j-c-s-b">
                            <text class="f-32 fw">打卡登记</text>
                            <text class="f-26 opacity">在线打卡</text>
                        </view>
                    </view>
                </view>
            </view>

            <view class=""  v-if="isShowHouse">
                <view class="caption">
                    <view class="flex a-i-c">
                        <view class="line"></view>
                        <text class="f-32 fw">楼盘表</text>
                    </view>
                </view>
                <view class="flex flex-wrap">
                    <view class="cell bgc-main flex a-i-c" v-for="(item, index) in houseDataList.slice(0, 6)"
                        @click.native="pushPage(item)"  :key="index">
                        <u-icon name="/static/icon/floor.png" width="32rpx" height="32rpx"></u-icon>
                        <text class="cell-text f-26 c-ff">{{item.title}}</text>
                    </view>
                </view>
            </view>

            <view class="" v-if="roleType == 1 || (roleType == 2 && curSelectSite.addressType == 2)">
                <view class="caption">
                    <view class="flex a-i-c">
                        <view class="line"></view>
                        <text class="f-32 fw">工作台</text>
                    </view>
                </view>
                <u-grid :border="false" col="4" v-if="roleType == 2 && curSelectSite.addressType == 2">
                    <u-grid-item @click="navigatorPage('/subPackage/workbench/views/editExamine')"
                        :customStyle="{paddingTop:20+'rpx'}">
                        <view class="grid-item flex f-d-c a-i-c"
                            style="background:linear-gradient(133deg, #F9FAFE 0%, rgba(249,250,254,0) 100%)">
                            <u-icon name="/static/icon/menu-05.png" width="60rpx" height="60rpx"></u-icon>
                            <text class="grid-text f-24 fw mt-10">场所维护</text>
                        </view>
                    </u-grid-item>
                </u-grid>
                <u-grid :border="false" col="4" v-if="roleType == 1">
                    <u-grid-item @click="navigatorPage(item.path)" v-for="(item, index) in jobList" :index="index"
                        :key="index" :customStyle="{paddingTop:20+'rpx'}">
                        <view class="grid-item flex f-d-c a-i-c" :style="{background:item.style.background}">
                            <u-icon :name="item.icon" width="60rpx" height="60rpx"></u-icon>
                            <text class="grid-text f-24 fw mt-10">{{item.text}}</text>
                        </view>
                    </u-grid-item>
                </u-grid>
            </view>

            <view class="mt-40" v-if="false">
                <view class="caption">
                    <view class="flex a-i-c">
                        <view class="line"></view>
                        <text class="f-32 fw">我的任务</text>
                    </view>
                </view>
                <view class="row flex j-c-s-b">
                    <view class="row-item flex_base" @click="navigatorPage(`/subPackage/workbench/views/audit?type=1`)">
                        <u-icon name="/static/icon/nav-07.png" width="90rpx" height="90rpx"></u-icon>
                        <view class="flex f-d-c fw ml-20">
                            <text class="f-28">一次性</text>
                            <text class="f-36 c-main">{{frequencyNumber.disposable}}</text>
                        </view>
                    </view>
                    <view class="row-item flex_base" @click="navigatorPage(`/subPackage/workbench/views/audit?type=2`)">
                        <u-icon name="/static/icon/nav-08.png" width="90rpx" height="90rpx"></u-icon>
                        <view class="flex f-d-c fw ml-20">
                            <text class="f-28">周期性</text>
                            <text class="f-36" style="color:#FD7F19">{{frequencyNumber.periodicity}}</text>
                        </view>
                    </view>
                </view>

                <u-cell-group>
                    <u-cell :icon="i.icon" :iconStyle="{width:'40rpx',height:'40rpx',marginRight:'18rpx'}"
                        :title="i.title" v-for="i in taskList" :value="i.status"></u-cell>
                </u-cell-group>
            </view>

            <view class="notic" v-if="roleType == 2 && curSelectSite.addressType != 2">
                <view class="caption flex a-i-c j-c-s-b" @click="navigatorPage('/subPackage/article/list')">
                    <view class="flex a-i-c">
                        <view class="line"></view>
                        <text class="f-32 fw">通知公告</text>
                    </view>
                    <u-icon name="arrow-right"></u-icon>
                </view>
                <notice-list  :data="notice" />
            </view>
			
            <u-picker :title="roleTypeName" :defaultIndex="selectSiteIndex" :closeOnClickOverlay="true"
                @close="selectBoxShow = false" :show="selectBoxShow" keyName="name" ref="uPicker" :columns="siteColumns"
                @confirm="confirmSite" @change="changeSite" @cancel="selectBoxShow = false"></u-picker>
        </view>

        <tabBar @change='change' :currentTab="0"></tabBar>
    </view>
</template>

<script>
    import tabBar from "@/components/tabBar/tabBar.vue";
    import curMenu from "@/components/curMenu/index.vue";
    import menuList from "@/components/menuList/index.vue";
    import gridMenu from "@/components/gridMenu/index.vue";
    import {
        getFuncList,
        getHouseList
    } from "@/api/doorplateAddress/doorplateAddress";

    export default {
        components: {
            tabBar,
            curMenu,
            menuList,
            gridMenu
        },
    import {
        getPage
    } from "@/api/article/article";
    import {
        getCountFrequencyNumber,
        getCountTypeNumber
    } from "@/api/task/task";
	
    import { getBannerList } from "@/api/system/index"
    import { uploadUrl } from "@/common/setting"
    import noticeList from "@/components/noticeList/noticeList";


    export default {
        components:{
            noticeList
        },
        data() {
            return {
                menuList: [],
                selectRole: {},
                swiperList: [
                    'http://220.176.210.217:9000/jczz/upload/20231111/cc093afc5e21639ef5b251eb865c24f4.png',
                    'http://220.176.210.217:9000/jczz/upload/20231111/cc093afc5e21639ef5b251eb865c24f4.png',
                    'http://220.176.210.217:9000/jczz/upload/20231111/cc093afc5e21639ef5b251eb865c24f4.png'
                ],
                cellList: [
                    {
                        icon: "/static/icon/nav-01.png",
                        text: "标签报事",
                        path: '/subPackage/label/index'
                    },
                    {
                        icon: "/static/icon/nav-02.png",
                        text: "报事报修",
                        path: '/subPackage/bs/views/repair'
                    },
                    {
                        icon: "/static/icon/nav-03.png",
                        text: "便民热线",
                        path: '/subPackage/hotLine/index'
                    },
                ],
                navList: [{
                        title: "物业",
                        name: "张三",
                        icon: "/static/icon/tel-green.png",
                        bgImg: "/static/icon/nav-bg-01.png"
                    },
                    {
                        title: "综治网格",
                        name: "张三",
                        icon: "/static/icon/tel-orange.png",
                        bgImg: "/static/icon/nav-bg-02.png"
                    },
                    {
                        title: "公安网格",
                        name: "张三",
                        icon: "/static/icon/tel-blue.png",
                        bgImg: "/static/icon/nav-bg-03.png"
                    },
                ],
                jobList: [{
                        icon: "/static/icon/menu-01.png",
                        text: "场所记录",
                        style: {
                            background: 'linear-gradient(133deg, #FFFCF9 0%, rgba(255,252,249,0) 100%)',
                        },
                        path: "/subPackage/workbench/views/csjl"
                    },
                    {
                        icon: "/static/icon/menu-02.png",
                        text: "场所采集",
                        style: {
                            background: 'linear-gradient(133deg, #F9FAFE 0%, rgba(249,250,254,0) 100%)',
                        },
                        path: "/subPackage/workbench/views/cscj"
                    },
                    {
                        icon: "/static/icon/menu-03.png",
                        text: "出租房管理",
                        style: {
                            background: 'linear-gradient(131deg, #FCF8FF 0%, rgba(252,248,255,0) 100%)',
                        },
                        path: "/subPackage/workbench/views/rental"
                    },
                    {
                        icon: "/static/icon/menu-04.png",
                        text: "标签事件",
                        style: {
                            background: 'linear-gradient(133deg, #F9FAFE 0%, rgba(249,250,254,0) 100%)',
                        },
                        path: "/subPackage/workbench/views/audit"
                    },
                    {
                        icon: "/static/icon/menu-05.png",
                        text: "场所维护",
                        style: {
                            background: 'linear-gradient(133deg, #F9FAFE 0%, rgba(249,250,254,0) 100%)',
                        },
                        path: "/subPackage/workbench/views/cshw"
                    },
                    {
                        icon: "/static/icon/menu-06.png",
                        text: "报事审核",
                        style: {
                            background: 'linear-gradient(137deg, #FFF4F3 0%, rgba(255,244,243,0) 100%)',
                        },
                        path: "/subPackage/workbench/views/report"
                    },
                    {
                        icon: "/static/icon/menu-10.png",
                        text: "我的任务",
                        style: {
                            background: 'linear-gradient(133deg, #F9FAFE 0%, rgba(249,250,254,0) 100%)'
                        },
                        path: "/subPackage/task/index"
                    },
                    {
                        icon: "/static/icon/menu-02.png",
                        text: "工作日志",
                        style: {
                            background: 'linear-gradient(131deg, #FCF8FF 0%, rgba(252,248,255,0) 100%)'
                        },
                        path: "/subPackage/workbench/views/workLog"
                    },
                    {
                        icon: "/static/icon/menu-02.png",
                        text: "网格巡查",
                        style: {
                            background: 'linear-gradient(133deg, #F9FAFE 0%, rgba(249,250,254,0) 100%)'
                        },
                        path: "/subPackage/workbench/views/patrol"
                    },
                    // {
                    //     icon: "/static/icon/menu-07.png",
                    //     text: "校园安全",
                    //     style: {
                    //         background: 'linear-gradient(133deg, #F9FAFE 0%, rgba(249,250,254,0) 100%)',
                    //     }
                    // },
                    // {
                    //     icon: "/static/icon/menu-08.png",
                    //     text: "旅馆安全",
                    //     style: {
                    //         background: 'linear-gradient(131deg, #FCF8FF 0%, rgba(252,248,255,0) 100%)',
                    //     }
                    // },
                    // {
                    //     icon: "/static/icon/menu-09.png",
                    //     text: "取保候审",
                    //     style: {
                    //         background: 'linear-gradient(137deg, #FFF4F3 0%, rgba(255,244,243,0) 100%)',
                    //     }
                    // }
                ],
                taskList: [{
                        icon: "/static/icon/cell-01.png",
                        title: "综治任务",
                        status: "待处理0"
                    },
                    {
                        icon: "/static/icon/cell-02.png",
                        title: "住建任务",
                        status: "待处理0"
                    },
                    {
                        icon: "/static/icon/cell-03.png",
                        title: "公安任务",
                        status: "待处理0"
                    }
                ],
                roleType: 2, // 1网格员/系统管理员 、  2居民
                roleTypeName: "街道社区网格",
                selectBoxShow: false,
                siteColumns: [],
                curSelectSite: {},
                columnData: [],
                btnList: [{
                        imgUrl: '/static/img/sys.png',
                        title: '扫一扫',
                        imgWidth: 54,
                        imgHeight: 54
                    },
                    {
                        imgUrl: '/static/img/bs.png',
                        title: '报事',
                        imgWidth: 54,
                        imgHeight: 54
                    }
                ],
                gridDataList: [],
                houseDataList: [{
                    title: '-',
                    useSlot: true
                }],
                menuList: [],
                curHouseCode: '',
                notice: [],
                frequencyNumber: {},
                typeNumber: {},
                selectSiteIndex: [0, 0],
                liveList:[],   //生活菜单
                contactList:[],   //便民服务联系方式
                isShowHouse:false,    //显示楼盘表
                isShowNotice:false    //显示通知公告

                liveList: [],

                jobList: [],

                taskTypeList: [{
                        title: '一次性',
                        num: 1,
                    },
                    {
                        title: '周期性',
                        num: 0,
                    }
                ],

                taskList: [{
                        title: '综治任务',
                        num: 0
                    },
                    {
                        title: '住建任务',
                        num: 0
                    },
                    {
                        title: '公安任务',
                        num: 0
                    },
                ],
            }
        },

        onShow() {
        onLoad() {
            this.getBanner();
            this.init()
            uni.$on('refresh', () => {
                this.selectSiteIndex = [0, 0]
                this.init()
            })
        },

        computed: {
            hasMenu() {
                return (name) => {
                    let resultArr = []
                    resultArr = this.getMenu(name, this.menuList, resultArr)
                    if (resultArr.length > 0) {
                    let resultArr = this.getMenu(name,this.menuList)
                    if (resultArr.length) {
                        return resultArr
                    } else {
                        return []
                    }

                }
            }
        },

        watch: {
            'curSelectSite.id': {
                handler(newVal, oldVal) {
                    console.log(newVal)
                    if (newVal) {
                        this.$store.commit("setSiteInfo", this.curSelectSite)
                    }
                },
                deep: true,
                immediate: true
            },
			
            'curSelectSite.addressType':{   
                handler(newVal,oldVal){
                   if(newVal){
                       this.$store.dispatch("getMenuList").then(res=>{
                            this.getMenuList();
                       });
                   }
                },
                deep: true,
                immediate: true
            }
        },

        methods: {

            //初始化
            init() {
                this.curSelectSite = {}
                this.menuList = uni.getStorageSync("menu")
				
                this.selectRole = uni.getStorageSync("activeRole")
                this.getMenuList()
                this.getSiteList()
                uni.hideTabBar()
                this.getNoticeList()
                // this.getFrequencyNumber()
                // this.getTypeNumber()
            },
			
            getBanner(){
                getBannerList({
                    current:1,
                    size:5
                }).then(res=>{
                     let data = res.data.records;
                     if(data.length){
                         for(let i of data){
                             i.url = `${uploadUrl}${i.url}`
                         }
                         this.bannerList = data;
                     }
                })
            },
			
            async getFrequencyNumber() {
                const res = await getCountFrequencyNumber()
                this.frequencyNumber = res.data

            },

            async getTypeNumber() {
                const res = await getCountTypeNumber()
                this.notypeNumber = res.data

            },

            async getNoticeList() {
                const param = {
                    size: 10,
                    current: 1
                }
                const res = await getPage(param)
                this.notice = res.data.records
            },

            //获取场所列表
            async getSiteList() {
                console.log(this.selectRole)
@@ -199,96 +469,45 @@
                console.log("roleName", roleName)
                if (roleName == '网格员' || roleName == '系统管理员') {
                    type = 1
                } else if (roleName == '场所负责人') {
                    type = 2
                    this.roleType = 1;
                    this.roleTypeName = "街道社区网格"
                } else if (roleName == '居民') {
                    type = 3
                    type = 2
                    this.roleType = 2
                    this.roleTypeName = "居民"
                }

                const res = await getFuncList(type, roleName)
                this.columnData = res.data;
                console.log(res, "-----------")
                let data = res.data
                this.siteColumns = []

                this.buildSiteColumn(data, 0)
                console.log(this.siteColumns)

            },

            buildSiteColumn(dataList, index) {
                if (dataList.length > 0) {
                    this.siteColumns[index] = dataList
                    if (dataList[0].children && dataList[0].children.length > 0) {
                        this.curSelectSite = dataList[0].children[0];
                        this.getHouseDataList(dataList[0].children[0].id)
                        this.buildSiteColumn(dataList[0].children, index + 1)
                    } else {
                        this.curSelectSite = dataList[0];
                    }
                    this.curHouseCode = this.curSelectSite.id
                    uni.setStorageSync('curSelectSite', this.curSelectSite)
                }
            },

            //获取首页菜单
            getMenuList() {
                console.log("当前角色菜单", this.menuList)
                this.getPhoneList()
                this.getLiveList()
                this.getWorkbenchList()
            },
            getPhoneList() {
                this.gridDataList = []
                const resultArr = this.hasMenu('快捷拨号')
                if (resultArr.length == 0) {
                    return

            // 获取楼盘
            async getHouseDataList(code) {
                const param = {
                    type: 1,
                    code: code,
                    roleName: uni.getStorageSync('activeRole').roleName
                }

                const topMenu = resultArr[0]

                topMenu.children.forEach(menu => {
                    this.gridDataList.push({
                        title: menu.name,
                        data: "无数据",
                        phone: "无"
                    })
                })
            },

            //获取生活菜单
            getLiveList() {
                this.liveList = []
                const resultArr = this.hasMenu('生活')
                if (resultArr.length == 0) {
                    return
                }

                const topMenu = resultArr[0]

                topMenu.children.forEach(menu => {
                    this.liveList.push({
                        imgUrl: menu.source,
                        title: menu.name,
                    })
                })
            },

            //获取工作台菜单
            getWorkbenchList() {
                this.jobList = []
                const resultArr = this.hasMenu('工作台')
                if (resultArr.length == 0) {
                    return
                }

                const topMenu = resultArr[0]

                topMenu.children.forEach(menu => {
                    this.jobList.push({
                        imgUrl: menu.source,
                        title: menu.name,
                    })
                })
            },

            // 获取楼盘表
            async getHouseDataList(name) {
                const res = await getHouseList(1, name)
                // 数据处理
                const res = await getHouseList(param)
                res.data.forEach(item => {
                    item.title = item.name
                    item.useSlot = true
@@ -301,28 +520,7 @@
            },



            getMenu(menuName, menuList, resultArr) {
                // console.log(menuList, menuName)
                for (var i = 0; i < menuList.length; i++) {
                    if (menuList[i].name == menuName) {
                        resultArr.push(menuList[i])
                    } else {
                        if (menuList[i].children && menuList[i].children.length) {
                            this.getMenu(menuName, menuList[i].children, resultArr);
                        }
                    }
                }

                return resultArr

            },

            change(index) {
                let url = index
                this.$u.func.globalNavigator(url, "switchTab")
            },
            changeHandler(e) {
            changeSite(e) {
                const {
                    columnIndex,
                    value,
@@ -335,106 +533,323 @@
                if (columnIndex === 0 && this.columnData.length > 0) {
                    // picker为选择器this实例，变化第二列对应的选项
                    picker.setColumnValues(1, this.columnData[index])
                }
                    // this.siteColumns[1] = this.columnData[index].children
                    this.$set(this.siteColumns, 1, this.columnData[index].children)
                };
            },
            // 回调参数为包含columnIndex、value、values
            confirm(e) {
            confirmSite(e) {
                console.log('confirm', e)
                this.selectSiteIndex = e.indexs;
                this.curSelectSite = e.value[e.value.length - 1]
                this.selectBoxShow = false
                this.getHouseDataList(e.value[1].name)
                this.getHouseDataList(e.value[1]?.id)
                this.curHouseCode = e.value[0].id
                console.log("curSite=>", this.curSelectSite);
            },
            getMenu(menuName) {
                // console.log(menuList, menuName)
                // for (var i = 0; i < menuList.length; i++) {
                //     if (menuList[i].name == menuName) {
                //         resultArr.push(menuList[i])
                //     } else {
                //         if (menuList[i].children && menuList[i].children.length) {
                //             this.getMenu(menuName, menuList[i].children, resultArr);
                //         }
                //     }
                // }
                let list = [];
                for(let i of this.menuList){
                    if(i.name == menuName){
                        if(i.children && i.children.length){
                             list = i.children;
                            break;
                         }
                    }
                }
                return list;
            },
			
            //获取首页菜单
            getMenuList() {
                // console.log("当前角色菜单", this.menuList)
                // this.getPhoneList()
                // this.getLiveList()
                this.menuList = uni.getStorageSync("menu")
                this.liveList = this.hasMenu('生活')
                this.contactList = this.hasMenu('快捷拨号');
                // console.log(this.menuList.filter(item=>item.name == "楼盘表"))
                if(this.menuList.length){
                    this.isShowHouse = this.menuList.filter(item=>item.name == "楼盘表")
                    this.isShowNotice = this.menuList.filter(item=>item.name == "通知公告" )
                }
				
                // this.jobList = this.hasMenu('工作台')
                // this.getWorkbenchList()
            },
			
			
            getPhoneList() {
                const resultArr = this.hasMenu('快捷拨号');
                if (resultArr.length) {
                    this.contactList = resultArr;
                }

                // const topMenu = resultArr[0]
                // topMenu.children.forEach(menu => {
                //     this.gridDataList.push({
                //         title: menu.name,
                //         data: "无数据",
                //         phone: "无"
                //     })
                // })
            },

            //获取生活菜单
            getLiveList() {
                this.liveList = []
                const resultArr = this.hasMenu('生活')
                console.log(resultArr);
                if (resultArr.length) {
                    this.liveList = resultArr;
                }
                // const topMenu = resultArr[0];
                // console.log("topMenu====>",topMenu);
                // this.liveList = topMenu.children;
                // topMenu.children.forEach(menu => {
                //     this.liveList.push({
                //         imgUrl: menu.source,
                //         title: menu.name,
                //     })
                // })
            },

            //获取工作台菜单
            getWorkbenchList() {
                // this.jobList = []
                const jobList = this.hasMenu('工作台')
				
                // const topMenu = resultArr[0]
                // topMenu.children.forEach(menu => {
                //     this.jobList.push({
                //         imgUrl: menu.source,
                //         title: menu.name,
                //     })
                // })
            },

            // 页面跳转
            pushPage({id, title}) {
            pushPage(item) {
                console.log(item,8888)
                const {id,title,addressType} = item;
                if (id !== void 0) {
                    let url = `/subPackage/house/list/index?id=${id}&title=${title}`
                    let url = `/subPackage/house/list/index?id=${id}&title=${title}&addressType=${addressType}`
                    this.$u.func.globalNavigator(url, "navTo")
                }
            }
            },

            // 页面跳转
            toPage({
                id,
                title,
                path
            }) {
                let url = `${path}`
                this.$u.func.globalNavigator(url, "navTo")
                if (id !== void 0) {

                }
            },


            navTo() {
                if (this.curHouseCode === '') {
                    uni.showToast({
                        title: "请选择地址",
                        icon: "error"
                    })
                    return
                }
                this.$u.func.globalNavigator(`/subPackage/bs/views/zhsb?houseCode=${this.curHouseCode}`, "navTo")
            },

            navigatorPage(path) {
                if (path) {
                    if (path == '/subPackage/bs/views/zhsb' && this.curHouseCode === '') {
                        uni.showToast({
                            title: "请选择地址",
                            icon: "error"
                        })
                        return
                    }
                    this.$u.func.globalNavigator(`${path}?houseCode=${this.curHouseCode}`, "navTo")
                }
            },

            //扫一扫
            scan() {
                const that = this
                uni.scanCode({
                    success: function(res) {
                        console.log(res)


                        console.log('条码类型：' + res.scanType);
                        console.log('条码内容：' + res.result);


                        let obj = that.getUrlParams(res.result)
                        console.log(obj)

                        // let url = "/subPackage/workbench/views/cscj?stdId=" + obj.stdId
                        let url = "/subPackage/workbench/views/cscj?houseCode=" + obj.stdId
                        that.$u.func.globalNavigator(url, "navTo")


                    }
                });
            },

            getUrlParams(url) {
                // 通过 ? 分割获取后面的参数字符串
                let urlStr = url.split('?')[1]
                // 创建空对象存储参数
                let obj = {};
                // 再通过 & 将每一个参数单独分割出来
                let paramsArr = urlStr.split('&')
                for (let i = 0, len = paramsArr.length; i < len; i++) {
                    // 再通过 = 将每一个参数分割为 key:value 的形式
                    let arr = paramsArr[i].split('=')
                    obj[arr[0]] = arr[1];
                }
                return obj
            },
        }
    }
</script>

<style lang="scss" scoped>
    .container {
    page {
        color: #333;
    }

    .top {
        width: 530rpx;

        .top-text {
            max-width: 85%;
            margin-right: 20rpx;
            white-space: nowrap;
            overflow: hidden;
            text-overflow: ellipsis;
        }
    }

    .swiper {
        width: 100%;
        height: 100%;
        height: 260rpx;
    }

        display: flex;
        flex-direction: column;
        background: #F9F9FA;
        color: #fff;
        font-size: 32rpx;
    .content {
        padding: 0 30rpx;
    }

        .main {
    .section {
        .section-item {
            width: 216rpx;
            height: 120rpx;
            position: relative;
            height: 0;
            flex: 1;
            overflow-y: auto;
        }

            .main-bg {
                height: 36%;
                background: royalblue;
            }
        .section-item-bg {
            width: 216rpx;
            height: 120rpx;
        }
        .item-box {
            width: 216rpx;
            height: 120rpx;
            position: absolute;
            top: 0;
            left: 0;
            padding: 20rpx 20rpx 0;
            box-sizing: border-box;
        }
    }
    .notic {
        width: 100%;
    }

            .main-select {
                margin: 0 6%;
                position: absolute;
                bottom: 74%;
                display: flex;
                align-items: center;
            }
    .caption {
        width: 100%;
        padding: 30rpx 0 0;

            .main-btn {
                margin: 0 6%;
                position: absolute;
                top: 28%;
                width: 88%;
                height: 20%;
                background: #fff;
                border-radius: 10rpx;
                color: #000;
            }
        .line {
            width: 6rpx;
            height: 28rpx;
            background-color: #017BFC;
            margin-right: 14rpx;
        }
    }

            .main-phone-house {
                margin-top: 180rpx;
                width: 100%;
    .block {
        .block-item {
            position: relative;
        }

                .phone-box {
                    display: flex;
        .block-item,
        .block-item-bg,
        .block-item-box {
            width: 334rpx;
            height: 170rpx;
        }

                    &>view {
                        margin: 0 16rpx;
                        height: 116rpx;
                        flex: 1;
                        background: linear-gradient(to right, #407BE9, #73A2F9);
                        border-radius: 10rpx;
                    }
                }
        .block-item-box {
            padding: 0 30rpx;
            box-sizing: border-box;
            position: absolute;
            top: 0;
            left: 0;
        }

                .house-box {
                    .content {
                        display: flex;
                        flex-wrap: wrap;
        .item-text {
            height: 90rpx;
            margin-left: 22rpx;
            color: #fff;
        }

                        &>view {
                            margin: 0 16rpx;
                            margin-top: 20rpx;
                            min-width: calc((100% - 16rpx * 6) / 3);
                            height: 66rpx;
                            background: linear-gradient(to right, #407BE9, #73A2F9);
                            border-radius: 33rpx;
                        }
                    }
                }
            }
        .opacity {
            opacity: .4;
        }
    }

            .main-bt {
                margin-top: 2%;
                width: 100%;
                color: #000;
            }
    .cell {
        padding: 0 16rpx;
        height: 64rpx;
        border-radius: 8rpx;
        margin-right: 20rpx;
        margin-top: 30rpx;

        .cell-text {
            margin-left: 16rpx;
        }
    }

    .grid-item {
        width: 153rpx;
        height: 153rpx;
        border-radius: 16rpx 16rpx 16rpx 16rpx;
        justify-content: center;
    }

    .row {
        width: 100%;
        margin: 30rpx 0;

        .row-item {
            width: 330rpx;
            height: 134rpx;
            box-shadow: 0rpx 10rpx 10rpx 0rpx rgba(0, 0, 0, 0.02);
            border-radius: 16rpx 16rpx 16rpx 16rpx;
        }
    }
</style>

 pages/user/center.vue

@@ -7,13 +7,13 @@
                <text class="f-36 mb-20 fw" v-else>{{userInfo.user_name}}</text>
                <!-- <text class="f-28 c-99">您好业主，欢迎回家</text> -->
            </view>
            <view class="flex f-d-c ml-20" v-if="!isLogin">
            <view class="flex f-d-c ml-20" v-if="!isLogin"    @click="navToLogin()">
                <text class="f-36 mb-20 fw">未登录</text>
                <!-- <text class="f-28 c-99">您好业主，欢迎回家</text> -->
            </view>
        </view>

        <view class="main">
        <view class="main"  v-if="isLogin">
            <view class="nav bgc-ff flex j-c-s-a a-i-c">
                <view v-for="(item,index) in navList" :key="index" class="flex f-d-c a-i-c" @click="navigator(item)">
                    <u-icon :customStyle="{paddingTop:20+'rpx'}" :name="item.icon" width="90rpx"
@@ -109,6 +109,12 @@
                    this.$u.func.globalNavigator(item.url)
                }
            },
			
            navToLogin(){
                uni.redirectTo({
                    url: "/pages/login/login-account"
                })
            },

            logOut() {
                uni.setStorageSync("responIndex", 0)

 subPackage/house/family/index.vue

@@ -6,7 +6,7 @@
                <view>{{ curSelectSite.name }}/{{housingName}}{{buildingName}}</view>

            </view>

            <view class="h0 flex-1 build-list-box content">

                <u-collapse>

                <u-collapse  :value="buildingList.length == 1?['0']:''">

                    <u-collapse-item v-if="isShowBuild" style="border: none;" :name="index" :title="item.unitName"

                        :icon="'/static/icon/group.png'" v-for="(item, index) in buildingList" :key="index">

                        <!-- :title="item.unitName" -->