yinchuan-community-all/mini-program/garden-wxapp/pages/index/index.vue

<template>
    <view class="content">
        <view class="">
            <!-- 头部 -->
            <u-navbar :border-bottom="false" :background="background" :is-back="false" title=" ">
                <view class="slot-wrap">
                    <view class="padding-left-20 flex">
                        <u-icon size="34" name="map-fill" color="#FFFFFF"></u-icon>
                        <text class="text-cut-1 text-white" style="font-size: 32rpx;padding: 0 10rpx;">
                            {{gander?gander:'暂无园区信息'}}
                        </text>
                    </view>
                </view>
            </u-navbar>
            <!-- banner -->
            <swiper class="screen-swiper square-dot " :indicator-dots="true" :circular="true"
                    :autoplay="true" interval="5000" duration="500">
                <swiper-item v-for="(item,index) in bannerList" :key="index">
                    <image :src="item.banners" mode="aspectFill"></image>
                </swiper-item>
            </swiper>
            <!-- 公告 -->
            <view v-if="!$isEmpty(noticeList)" class="">
                <view class="bg-white" style="height: 10rpx;"></view>
                <hotConsult @onTap="jump('/pages/index/notice/notice')" @detailTap="goNoticeDetail"
                            :swiperTexts="noticeList"></hotConsult>
            </view>

            <!-- 园区信息 -->
            <view class="bg-white" v-if="loginType=='agency'">
                <view class="flex" style="padding: 30rpx; ">
                    <image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;"
                           src="../../static/icon/tag1.png" mode=""></image>
                    <text class="text-lg text-black">园区信息</text>
                </view>

                <view class="cu-list grid col-4 no-border" :key="index">
                    <view class="cu-item" @click="jump(item.url)" v-for="(item,index) in statistical" :key="index">
                        <view class="grid-icon">
                            <image style="width: 70rpx;height: 70rpx;" :src="item.icon"/>
                        </view>
                        <text style="color: #333333;font-size: 26rpx;">{{item.title}}</text>
                        <view class="cu-tag bg-red badge" v-if="item.count>0">{{item.count}}</view>
                    </view>
                </view>
            </view>


            <!-- 园区服务 -->
            <view class="bg-white">
                <view class="flex" style="padding: 30rpx; ">
                    <image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;"
                           src="../../static/icon/tag1.png" mode=""></image>
                    <text class="text-lg text-black">园区服务</text>
                </view>

                <view class="cu-list grid col-4 no-border">
                    <view class="cu-item" v-if="item.show" @click="jump(item.url)" v-for="(item,index) in elements"
                          :key="index">
                        <view class="grid-icon">
                            <image style="width: 70rpx;height: 70rpx;" :src="item.icon"/>
                        </view>
                        <text style="color: #333333;font-size: 26rpx;">{{item.title}}</text>
                        <view class="cu-tag bg-red badge" v-if="item.count>0">{{item.count}}</view>
                    </view>
                </view>


                <!-- <view class="nav-list  padding-top-30" >
                    <view
                        v-if="item.show"
                        hover-class="none"
                        @click="jump(item.url)"
                        class="nav-li light"  :style="{backgroundColor:item.color}"
                        v-for="(item,index) in elements" :key="index">
                        <view class="nav-title" style="color: #000000;font-size: 28rpx;">{{item.title}}</view>
                        <view class="" style="padding-top: 10rpx;font-size: 24rpx;color: #acacac;">{{item.name}}{{item.show}}</view>
                        <image :src="item.icon" mode=""></image>
                        <u-badge  :is-center="true" type="error" :count="item.count"></u-badge>
                    </view>
                </view> -->
            </view>
            <view class="bg-white" v-if="loginType!='staff'">
                <view class="flex" style="padding: 30rpx; ">
                    <image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;"
                           src="../../static/icon/tag1.png" mode=""></image>
                    <text class="text-lg">消防服务</text>
                </view>
                <view class="cu-list grid col-4 no-border">
                    <view class="cu-item" @click="jump(item.url)" v-for="(item,index) in fireList" :key="index">
                        <view class="grid-icon">
                            <image style="width: 70rpx;height: 70rpx;" :src="item.icon"/>
                        </view>
                        <text style="color: #333333;font-size: 26rpx;">{{item.title}}</text>
                        <view class="cu-tag bg-red badge" v-if="item.count>0">{{item.count}}</view>
                    </view>
                </view>

                <!-- <view class="nav-list  padding-top-30" >
                    <view hover-class="none"
                        @click="jump(item.url)"
                        class="nav-li light"  :style="{backgroundColor:item.color}"
                        v-for="(item,index) in fireList" :key="index">
                        <view class="nav-title" style="color: #000000;font-size: 28rpx;">{{item.title}}</view>
                        <view class="" style="padding-top: 10rpx;font-size: 24rpx;color: #acacac;">{{item.name}}</view>
                        <image :src="item.icon" mode=""></image>
                    </view>
                </view> -->
            </view>
            <view class="bg-white padding-bottom-20" v-if="newsList.length>0">
                <view class="flex justify-between" style="padding: 30rpx;">
                    <view class="flex">
                        <image style="width: 35rpx;height: 35rpx;display: block;padding-top: 6rpx;padding-right: 10rpx;"
                               src="../../static/icon/tag1.png" mode=""></image>
                        <text class="text-lg text-black">园区动态</text>
                    </view>
                    <view @click="jump('/pages/news/list')" style="padding-top: 6rpx;font-size: 26rpx;color: #676767;">
                        <text style="font-size: 24rpx;color: #676767;margin-top: 5rpx;">查看更多</text>
                        <text class="cuIcon-right "></text>
                    </view>
                </view>
                <infomation :newList="newsList"></infomation>
            </view>
            <u-action-sheet @click="ganderChange" :list="ganderArray" v-model="ganderShow"></u-action-sheet>
        </view>
        <u-tabbar v-model="tabbarCurr"
                  :icon-size="tabbar.iconSize"
                  :active-color="tabbar.activeColor"
                  :mid-button-size="tabbar.MinButtonSize"
                  :list="tabbar.list" :mid-button="true">
        </u-tabbar>
    </view>
</template>

<script>
    import {tabbar} from "@/assets/js/tabbar.js"
    import hotConsult from "@/components/hot-consult/hot-consult.vue"
    import infomation from "@/components/infomation/infomation.vue"

    let plugin = requirePlugin("subway");
    export default {
        components: {
            hotConsult, infomation
        },
        data() {
            return {
                background: {
                    backgroundColor: '#5064eb'
                },

                //登陆类型
                loginType: this.$cache.get('loginType') || '',
                //tabbar
                tabbarCurr: 0,
                tabbar: tabbar,
                //园区 label

                ganderShow: false,
                //园区列表
                ganderArray: [],
                gander: '',

                //banner
                bannerList: [
                    {
                        'banners': "https://park.nxzhsq.cn/park/miniofile/xlyq/banner.jpg"
                    },
                ],
                // 公告
                noticeList: [],
                //消防服务
                fireList: [],
                //园区服务
                elements: [],
                //园区统计
                statistical: [],
                //园区动态
                newsList: [],
                //是否为党员
                isPartMember: false,
                //该人员是否能打卡
                canPunch: false
            };
        },
        onShow() {
            if (this.loginType != this.$loginType.STAFF) {
                this.fetchWaitAuditNum()
                this.fetchWaitAuditGuestNum()
            }
        },
        // onReady() {
        // 	if (this.$cache.get('loginType')!=this.$loginType.STAFF) {
        // 		let tmp=this.$u.deepClone(tabbar)
        // 		tmp.list.splice(1,1)
        // 		this.tabbar=tmp
        // 	}else{
        // 		this.tabbar=tabbar
        // 	}
        // },
        onLoad() {
            //判断员工是否为党员
            this.checkIsPartMember()
            //加载静态数据
            this.fetchStaticData()
            //加载用户数据
            this.fetchUserInfo()
            //加载园区动态
            this.fetchNewsList()
            //加载通知公告
            this.fetchNoticeList()
            //缓存字段值
            // this.cacheDict()
            //获取该员工的打卡规则
            if (this.$cache.get('loginType') == this.$loginType.STAFF) {
                this.getRules()
            }
        },
        methods: {
            getRules() {
                let params = {
                    personType: 0,
                    personId: this.$cache.get('userId')
                }
                this.$api.punch.getRule(params).then(res => {
                    if (res.data) {
                        this.$u.vuex('vuex_punch_rules', res.data)
                        this.canPunch = true
                    } else {
                        this.canPunch = false
                    }
                }).catch(err => {
                    this.canPunch = false
                })
            },
            async checkIsPartMember() {
                if (this.$cache.get('loginType') == this.$loginType.STAFF) {
                    let id = this.$cache.get('userId')
                    let res = await this.$api.party.isPartyMember({id})
                    this.isPartMember = !this.$isEmpty(res.data)
                    this.$u.vuex('vuex_party_person', res.data)
                }
            },
            fetchBanner() {
                let params = {
                    tenantId: this.$cache.get('agencyTenantId')
                }
                this.$api.banner.page(params).then(res => {
                    if (!this.$isEmpty(res.data.records)) {
                        this.bannerList = res.data.records
                    }
                })
            },
            /**
             * 获取园区动态
             */
            fetchNewsList() {
                let params = {
                    size: 5,
                    agencyId: this.$cache.get('agencyId').toString()
                }
                this.$api.CMS.page(params).then(res => {
                    this.newsList = res.data.records
                })
            },
            /**
             * 加载用户数据
             */
            fetchUserInfo() {
                if (this.loginType == this.$loginType.STAFF) {
                    //员工
                    let phone = this.$cache.get('phone')
                    this.$api.enterprisestaff.page({phone: phone, examine: 1}).then(res => {
                        let userInfo = res.data.records[0]
                        getApp().globalData.userInfo = userInfo
                        this.$u.vuex('vuex_userInfo', userInfo)
                        this.$cache.put("residentialId", userInfo.residentialId)
                        this.gander = userInfo.enterpriseName
                    })
                } else if (this.loginType == this.$loginType.ENTERPRISE) {
                    let creditCode = this.$cache.get('creditCode')
                    this.$api.enterprise.detail({creditCode: creditCode}).then(res => {
                        this.gander = res.data.enterpriseName
                        getApp().globalData.userInfo = res.data
                        this.$u.vuex('vuex_userInfo', userInfo)
                        this.$cache.put('enterpriseName', res.data.enterpriseName)
                        this.$cache.put("residentialId", res.data.residentialId)
                    })
                } else if (this.loginType == this.$loginType.AGENCY) {
                    this.gander = this.$cache.get('agency')
                }
            },
            /**
             * 加载待审核员工的数量
             */
            fetchWaitAuditNum() {
                let that = this
                let params = {
                    size: 200,
                    examine: 0
                }
                if (this.loginType == this.$loginType.ENTERPRISE) {
                    params.enterpriseId = this.$cache.get('enterpriseId')
                }
                if (this.loginType == this.$loginType.AGENCY) {
                    params.agencyId = this.$cache.get('agencyId')
                }

                this.$api.enterprisestaff.page(params).then(res => {
                    this.elements.forEach(item => {
                        if (item.url == '/pages/index/staffAudit/list') {
                            item.count = res.data.total
                        }
                    })
                })
            },
            fetchWaitAuditGuestNum() {
                let params = {
                    checkState: 0
                }
                //企业
                if (this.loginType == this.$loginType.ENTERPRISE) {
                    params.enterpriseId = this.$cache.get('enterpriseId')
                }
                //园区
                if (this.loginType == this.$loginType.AGENCY) {
                    params.agencyId = this.$cache.get('agencyId')
                }
                this.$api.guest.page(params).then(res => {
                    this.elements.forEach(item => {
                        if (item.url == '/pages/guest/records/records') {
                            item.count = res.data.total
                        }
                    })
                })
            },
            /**
             * @param {Object} index更改园区
             */
            ganderChange(index) {
                this.gander = this.ganderArray[index].text
            },
            /**
             * 跳转
             * @param {Object} url
             */
            jump(url) {
                if (url == '/party/pages/home/home') {
                    //智慧党建
                    if (!this.isPartMember) {
                        url = '/party/pages/empty/empty'
                    }
                }
                //打卡
                if (url == '/punch/pages/index/index') {
                    if (this.canPunch) {
                        uni.navigateTo({
                            url
                        })
                        return
                    }
                    this.$dialog.showModal('您还未绑定打卡规则，请联系企业负责人', false)
                    return
                }

                //地铁图
                if (url == 'subway') {
                    let key = 'WAGBZ-EFIKU-2W2VF-4UX5F-ATB3F-HKBFU'
                    let referer = '新邻园区'
                    uni.navigateTo({
                        url: 'plugin://subway/index?key=' + key + '&referer=' + referer
                    })
                    return
                }

                if (!this.$isEmpty(url)) {
                    uni.navigateTo({
                        url: url,
                        fail(err) {
                            console.log(err);
                        }
                    })
                }
            },
            /**
             * 加载通知列表
             */
            fetchNoticeList() {
                let params = {
                    agencyId: this.$cache.get('agencyId')
                }
                this.$api.notice.page(params).then(res => {
                    this.noticeList = res.data.records
                })
            },
            /**
             * 跳转到通知详情
             */
            goNoticeDetail(item) {
                console.log(item);
                getApp().globalData.noticeDetail = item
                uni.navigateTo({
                    url: "/pages/index/notice/detail",
                })
            },
            //缓存字典的值
            async cacheDict() {
                let dictCacheData = this.$cache.get('dict')
                if (dictCacheData &&
                    dictCacheData.carTypeList &&
                    dictCacheData.carPropertiesList &&
                    dictCacheData.fuelCategoryList &&
                    dictCacheData.partyMeetingClass &&
                    dictCacheData.partyInfoClass) {
                    return
                }
                //有效时间
                let validTime = 1 * 24 * 60 * 60 * 3

                //车辆类型
                let carTypeList = []
                //车辆性质
                let carPropertiesList = []
                //燃油类别
                let fuelCategoryList = []
                //三会一课
                let partyMeetingClass = []
                //党内资讯
                let partyInfoClass = []

                // 请求字典begin
                let res1 = await this.$api.dict({code: 'car_type'})
                res1.data.forEach((item) => {
                    let tmp = {
                        value: item.dictKey,
                        label: item.dictValue
                    }
                    carTypeList.push(tmp)
                })

                let res2 = await this.$api.dict({code: 'car_properties'})
                res2.data.forEach((item) => {
                    let tmp = {
                        value: item.dictKey,
                        label: item.dictValue
                    }
                    carPropertiesList.push(tmp)
                })

                let res3 = await this.$api.dict({code: 'fuel_category'})
                res3.data.forEach((item) => {
                    let tmp = {
                        value: item.dictKey,
                        label: item.dictValue
                    }
                    fuelCategoryList.push(tmp)
                })

                //三会一课分类
                let res4 = await this.$api.dict({code: 'party_meeting_class'})
                res4.data.forEach((item) => {
                    let tmp = {
                        value: item.dictKey,
                        label: item.dictValue
                    }
                    partyMeetingClass.push(tmp)
                })

                //党内资讯
                let res5 = await this.$api.dict({code: 'party_new_class'})
                res5.data.forEach((item) => {
                    let tmp = {
                        value: item.dictKey,
                        label: item.dictValue
                    }
                    partyInfoClass.push(tmp)
                })

                // 请求字典end

                //缓存字典的值begin
                let dict = {
                    carTypeList,
                    carPropertiesList,
                    fuelCategoryList,
                    partyMeetingClass,
                    partyInfoClass
                }
                this.$cache.put('dict', dict, validTime)
                //缓存字典的值end
            },
            /**
             * 加载静态数据
             */
            fetchStaticData() {
                this.statistical = [
                    {
                        title: '园区信息',
                        name: 'Campus information',
                        color: '#e3f5ff',
                        icon: '../../static/icon/yuanqu.png',
                        url: '/pages/agency/agency',
                        count: 0,
                    },
                    {
                        title: '数据统计',
                        icon: '../../static/icon/data-service.png',
                        url: '/pages/agency/agency?current=1',
                    },
                    {
                        title: '消防统计',
                        icon: '../../static/icon/fire-service.png',
                        url: '/pages/agency/agency?current=2',
                    },
                ]

                this.elements = [
                    {
                        title: '园区企业',
                        name: 'My business',
                        color: '#e3f5ff',
                        icon: '../../static/icon/qiyegl.png',
                        url: '/pages/enterprise/enterprise',
                        count: 0,
                        show: this.loginType == this.$loginType.AGENCY
                    },
                    {
                        title: '我的企业',
                        name: 'My business',
                        color: '#e3f5ff',
                        icon: '../../static/icon/yuanqu.png',
                        url: '/pages/company/company',
                        count: 0,
                        show: this.loginType != this.$loginType.AGENCY
                    },
                    {
                        title: '我的资料',
                        name: 'My profile',
                        color: '#ecf3f9',
                        icon: '../../static/icon/info.png',
                        url: '/pages/index/myinfo/myinfo',
                        count: 0,
                        show: this.loginType == this.$loginType.STAFF
                    },
                    {
                        title: '员工审核',
                        name: 'Staff certification',
                        color: '#eaebf9',
                        icon: '../../static/icon/info.png',
                        url: '/pages/index/staffAudit/list',
                        count: 0,
                        show: this.loginType != this.$loginType.STAFF
                    },
                    {
                        title: '访客审核',
                        icon: '../../static/icon/guest-gl.png',
                        url: '/pages/guest/records/records',
                        count: 0,
                        show: this.loginType != this.$loginType.STAFF
                    },
                    {
                        title: '我的测温',
                        name: 'My temperature',
                        color: '#e5eef9',
                        icon: '../../static/icon/cewen.png',
                        url: '/pages/index/staff-temperature/list',
                        count: 0,
                        show: this.loginType == this.$loginType.STAFF
                    },
                    {
                        title: '测温记录',
                        name: 'Staff temperature',
                        color: '#e5eef9',
                        icon: '../../static/icon/cewen.png',
                        url: '/pages/index/staff-temperature/list',
                        count: 0,
                        show: this.loginType != this.$loginType.STAFF
                    },
                    {
                        title: '通行记录',
                        name: 'Access records',
                        color: '#e9f9f3',
                        icon: '../../static/icon/jilu.png',
                        url: '/pages/index/access-record/access-record',
                        count: 0,
                        show: true
                    },
                    {
                        title: this.loginType == this.$loginType.STAFF ? '我的车辆' : '车辆管理',
                        name: 'Notice managerment',
                        color: '#eaebf9',
                        icon: '../../static/icon/car.png',
                        url: this.loginType == this.$loginType.STAFF ? '/pages/index/car/my-car/my-car' : '/pages/index/car/car-manager/car-manager',
                        count: 0,
                        show: true
                    },
                    {
                        title: '车辆记录',
                        name: 'The vehicle record',
                        color: '#fcf5f3',
                        icon: '../../static/icon/car-records.png',
                        url: '/pages/index/car/list',
                        count: 0,
                        show: this.loginType == this.$loginType.AGENCY
                    },
                    {
                        title: '企业项目',
                        icon: '../../static/icon/project1.png',
                        url: '/pages/management/product/product',
                        count: 0,
                        show: this.loginType == this.$loginType.ENTERPRISE
                    },
                    {
                        title: '打卡',
                        icon: '../../static/icon/dk1.png',
                        url: '/punch/pages/index/index',
                        count: 0,
                        show: this.loginType == this.$loginType.STAFF
                    },
                    {
                        title: '智慧党建',
                        icon: '../../static/icon/dang.png',
                        url: '/party/pages/home/home',
                        count: 0,
                        show: this.loginType == this.$loginType.STAFF
                    },
                    {
                        title: '视频监控',
                        icon: '../../static/icon/live.png',
                        url: '/pages/live/live',
                        count: 0,
                        show: false
                        // show:this.loginType==this.$loginType.AGENCY
                    },
                    {
                        title: '地铁图',
                        icon: '../../static/icon/subway.png',
                        url: 'subway',
                        count: 0,
                        show: this.loginType == this.$loginType.STAFF
                    },
                    {
                        title: '公告管理',
                        name: 'Notice managerment',
                        color: '#eaebf9',
                        icon: '../../static/icon/tongzhi.png',
                        url: '/pages/index/notice/list',
                        count: 0,
                        show: this.loginType == this.$loginType.AGENCY
                    },
                ]
                this.fireList = [
                    {
                        title: '烟感报警',
                        name: 'Smoke alarm',
                        color: '#e5eef9',
                        icon: '../../static/icon/yangan.png',
                        url: "/pages/index/fire/list/list?fireType=0"
                    },
                    {
                        title: '消防水压',
                        name: 'Fire water pressure',
                        color: '#e9f9f3',
                        icon: '../../static/icon/xiaofang.png',
                        url: "/pages/index/fire/list/list?fireType=2"
                    },
                    {
                        title: '燃气告警',
                        name: 'Gas alarm',
                        color: '#ffefef',
                        icon: '../../static/icon/ranqi.png',
                        url: "/pages/index/fire/list/list?fireType=1"
                    },

                    {
                        title: '电表设备',
                        name: 'Metering equipment',
                        color: '#e3f5ff',
                        icon: '../../static/icon/dianbiao.png',
                        // icon: '../../static/index/fire/dianbiao.png',
                        url: "/pages/index/fire/list/list?fireType=3"
                    },

                ]
            }
        }
    };
</script>

<style lang="scss" scoped>
    page, .content {
        background-color: #FFFFFF;
        min-height: 100vh;
    }

    //四宫格 begin
    .nav-list {
        display: flex;
        flex-wrap: wrap;
        justify-content: flex-start;
    }

    .nav-li {
        padding: 30 upx 30 rpx;
        border-radius: 12 upx;
        width: 44%;
        margin: 10 rpx 2% 10 upx;
        background-size: cover;
        background-position: center;
        position: relative;
        z-index: 1;
    }

    .nav-li::after {
        content: "";
        position: absolute;
        z-index: -1;
        background-color: inherit;
        width: 100%;
        height: 100%;
        left: 0;
        bottom: -10%;
        border-radius: 10 upx;
        opacity: 0.2;
        transform: scale(0.9, 0.9);
    }

    .nav-li.cur {
        color: #fff;
        background: rgb(94, 185, 94);
        box-shadow: 4 upx 4 upx 6 upx rgba(94, 185, 94, 0.4);
    }

    .nav-title {
        font-size: 32 upx;
        font-weight: 300;
    }

    .nav-title::first-letter {
        font-size: 40 upx;
        margin-right: 4 upx;
    }

    .nav-name {
        font-size: 28 upx;
        text-transform: Capitalize;
        margin-top: 20 upx;
        position: relative;
    }

    .nav-name::before {
        content: "";
        position: absolute;
        display: block;
        width: 40 upx;
        height: 6 upx;
        background: #fff;
        bottom: 0;
        right: 0;
        opacity: 0.5;
    }

    .nav-name::after {
        content: "";
        position: absolute;
        display: block;
        width: 100 upx;
        height: 1px;
        background: #fff;
        bottom: 0;
        right: 40 upx;
        opacity: 0.3;
    }

    .nav-name::first-letter {
        font-weight: bold;
        font-size: 36 upx;
        margin-right: 1px;
    }

    .nav-li image {
        position: absolute;
        right: 30 upx;
        top: 22 upx;
        width: 66 upx;
        height: 66 upx;
    }

    //四宫格 end

</style>