<template> <view class="home" :style="'padding-top:'+nvaHeight+'px;'"> <view class="navbox"> <uni-nav-bar color="#ffffff" leftWidth='400rpx' :background-color="backgroundColor" :border="false" statusBar='true' fixed="true"> <block slot="left"> <view class="topl flexc"> <image :src="adrimg" ></image> <view class="over">{{city}}</view> </view> </block> </uni-nav-bar> </view> <!-- 主体 --> <!-- <image :src="navbg" class="navbg"></image> --> <view class="wymain"> <view class="adrbox"> <view class="flexc mb14"> <image :src="adraimg" class="adr"></image> <view class="adrtit">智慧<text>社区</text></view> </view> <view class="adrtxt flexc mb4"> <view class="over">嗨~{{nickName}}!</view><text>业主</text> </view> <view class="adrtip" v-if="houselist&&houselist.length">{{houselist[0].communityName}}{{houselist[0].detailedAddress}}</view> <image :src="adrbgimg" class="adrbgimg"></image> </view> <!-- 轮播图 --> <swiper class="swiper mb12" circular :indicator-color="incolorh" :indicator-active-color="activecolorh" :indicator-dots="indicatorDotsh" :autoplay="autoplayh"> <!-- v-if="checkPermi(['system:application:list'])" --> <swiper-item> <view class="grid"> <view class="grid-item-box" @click="getClearFn" > <view class="img"><image :src="htaba" class="imga"></image></view> <view>家政服务</view> </view> <view class="grid-item-box" @click="getWarrantyFn" > <view class="img"><image :src="htabb" class="imga"></image></view> <view>物业报修 <view class="cir">2</view> </view> </view> <view class="grid-item-box" @click="getBusListFn(1)" > <view class="img"><image :src="htabc" class="imgb"></image></view> <view>供求资讯</view> </view> <view class="grid-item-box" @click="getNewsFn" > <view class="img"><image :src="htabd" class="imgb"></image></view> <view>社区资讯<view class="cir">2</view></view> <!-- <view class="flexcw"> <view class="txt">点赞<text class="co05 mr2">(5)</text></view> <view class="txt">评论<text class="co05">(12)</text></view> </view> --> <view class="txt">点赞<text class="co05 mr2">(5)</text>评论<text class="co05">(12)</text></view> </view> <view class="grid-item-box" @click="getNewsDjFn" > <view class="img"><image :src="htabe" class="imgc"></image></view> <view>党建资讯</view> </view> <view class="grid-item-box" @click="getComplaintFn" > <view class="img"><image :src="htabf" class="imgd"></image></view> <view>投诉建议<view class="cir">2</view></view> </view> <view class="grid-item-box" @click="getVisitorFn" > <view class="img"><image :src="htabg" class="imge"></image></view> <view>访客邀请</view> </view> <view class="grid-item-box" @click="getWygjFn" > <view class="img"><image :src="htabh" class="imga"></image></view> <view>联系管家</view> </view> </view> </swiper-item> <swiper-item> <view class="grid"> <view class="grid-item-box" @click="getHouseFn" > <view class="img"><image :src="htabi" class="imgf"></image></view> <view>我的房屋<text class="co05">(1)</text></view> </view> <view class="grid-item-box" @click="getCarFn" > <view class="img"><image :src="htabj" class="imgg"></image></view> <view>我的车辆<text class="co05">(1)</text></view> </view> <view class="grid-item-box" @click="getMoneyFn" > <view class="img"><image :src="htabk" class="imgh"></image></view> <view>物业缴费</view> </view> <view class="grid-item-box" @click="getBusListFn(1)" > <view class="img"><image :src="htabl" class="imga"></image></view> <view>敬请期待</view> </view> </view> </swiper-item> </swiper> <!-- 消息 --> <view class="mb12"> <notice :noticelist='noticelist' :activeColor="activeColor" :nactiveColor="nactiveColor"></notice> </view> <view class="mb18 flexc"> <view class="cbgs mr12"> <image :src="cbga"></image> <view class="cbga"> <view class="tit">空闲充电桩</view> <view class="txt">37</view> </view> </view> <view class="cbgs"> <image :src="cbgb"></image> <view class="cbga"> <view class="tita">剩余停车位</view> <view class="txta">37</view> </view> </view> </view> <!-- 我的快递 --> <view class="hlist"> <view class="hlista flexc mb6"> <image :src="lista" class="limg flex0"></image> <view class="tit flex1">我的快递</view> <view class="more flex0 flexc" @click="getKdFn">更多<image :src="more"></image></view> </view> <box-list :datainfo="list" type="delivery"></box-list> </view> </view> <!-- 今日优惠 --> <view class="hlist plr12"> <view class="hlista flexc mb10 "> <image :src="listb" class="limg flex0"></image> <view class="tit flex1">今日优惠</view> <view class="more flex0 flexc">更多<image :src="more"></image></view> </view> </view> <view class="mb4"> <box-list type='coupon' :datainfo="list"></box-list> </view> <view class="wymain"> <!-- 本地资讯 --> <view class="hlist"> <view class="hlista flexc" style="padding-bottom: 0;"> <image :src="listc" class="limg flex0"></image> <view class="htabs flexc"> <view :class="tabval==ite.val?'act':''" v-for="(ite,idx) in tablist" :key="idx">{{ite.tit}}</view> </view> <view class="more flex0 flexc">更多<image :src="more"></image></view> </view> <box-list :datainfo="list" :wtdt="wtdt" type="news"></box-list> </view> </view> <loading></loading> <pop-up :type="type" @getClose="getClose" :phoneList="phoneList"></pop-up> <footers v-if="isfootflag" :footerindex="footerindex"></footers> </view> </template> <script> import footers from '@/components/footer/footer.vue' import notice from '@/components/swiper/notice.vue' import boxList from "@/components/box/list.vue" import popUp from "@/components/box/popup.vue" import {houseInfoList} from "@/api/work/work.js" import {gesettingsList} from "@/api/work/index.js" export default { components:{footers,notice,boxList,popUp}, data(){ return{ footerindex:'home', isfootflag:true, nvaHeight:44, activeColor:'#A7A7A7', nactiveColor:'#E6E6E6', backgroundColor: "transparent", navbg:require("@/static/images/navbg.png"), adrimg:require("@/static/images/home/adr.png"), adraimg:require("@/static/images/home/adra.png"), adrbgimg:require("@/static/images/home/adrbg.png"), htaba:require("@/static/images/home/htaba.png"), htabb:require("@/static/images/home/htabb.png"), htabc:require("@/static/images/home/htabc.png"), htabd:require("@/static/images/home/htabd.png"), htabe:require("@/static/images/home/htabe.png"), htabf:require("@/static/images/home/htabf.png"), htabg:require("@/static/images/home/htabg.png"), htabh:require("@/static/images/home/htabh.png"), htabi:require("@/static/images/home/htabi.png"), htabj:require("@/static/images/home/htabj.png"), htabk:require("@/static/images/home/htabk.png"), htabl:require("@/static/images/home/htabl.png"), cbga:require("@/static/images/home/cbga.png"), cbgb:require("@/static/images/home/cbgb.png"), lista:require("@/static/images/home/lista.png"), listb:require("@/static/images/home/listb.png"), listc:require("@/static/images/home/listc.png"), more:require("@/static/images/home/more.png"), type:'',//wygj wtdt:"加载更多", yhbg:require("@/static/images/home/yhbg.png"), eye:require("@/static/images/home/eye.png"), autoplay:false, autoplayh:false, incolorh:'#E6E6E6', activecolorh:'#A7A7A7', indicatorDotsh: true, city:'幸福大街', list:[{tit:'123'},{tit:'123'},{tit:'123'}], userId:this.$store.state.user.userId, nickName:this.$store.state.user.nickName, // avatar:this.$store.state.user.avatar, tabval:0, houselist:[], phoneList:[], tablist:[{tit:'本地资讯',val:"0"},{tit:'供求资讯',val:"1"},{tit:'热门资讯',val:"2"}], noticelist:[{noticeTitle:"您有1条报修信息,请及时查看处理!",num:'11-14'},{noticeTitle:"您有1条报修信息,请及时查看处理!",num:'11-14'}] } }, onPageScroll(e) { var scrollTop = Number(e.scrollTop); if (scrollTop > 0) { this.backgroundColor = '#FFF7E1' } else { this.backgroundColor = 'transparent' } }, onLoad: function() { uni.getSystemInfo({ success: (e) => { this.nvaHeight = Number(e.statusBarHeight)+44; } }) // 获取房子 this.getDataFn() this.gesettingsList() }, methods:{ getDataFn(){ var params={ userId:this.userId } houseInfoList(params).then(res=>{ if(res.code==200){ this.houselist = JSON.parse(JSON.stringify(res.rows)); }else{ this.$toast(res.msg) } }) }, gesettingsList(){ gesettingsList().then(res=>{ if(res.code==200){ this.phoneList=res.rows } }) }, getClose(){ this.type='' }, getNoticeDet(){ }, getZhanFn(){ this.zhanflag=!this.zhanflag }, getClearFn(){//家政服务 this.$tab.navigateTo(`/work/pages/clean/index`) }, getWarrantyFn(){//物业报修 this.$tab.navigateTo(`/work/pages/service/warranty`) }, getHouseFn(){//我的房屋 this.$tab.navigateTo(`/mine/pages/house/index`) }, getCarFn(){//我的车辆 this.$tab.navigateTo(`/mine/pages/car/index`) }, getMoneyFn(){//物业缴费 this.$tab.navigateTo(`/work/pages/manage/index`) }, getVisitorFn(){//访客邀请 this.$tab.navigateTo(`/work/pages/visitor/index`) }, getNewsFn(){//社区资讯 this.$tab.navigateTo(`/news/pages/news/newssq`) }, getNewsDjFn(){//党建资讯 this.$tab.navigateTo(`/news/pages/news/newsdj`) }, getComplaintFn(){//投诉建议 this.$tab.navigateTo(`/news/pages/complaint/index`) }, getKdFn(){//我的快递 this.$tab.navigateTo(`/mine/pages/delivery/index`) }, getWygjFn(){//物业管家 this.type='wygj' } } } </script> <style lang="scss" scoped> .home{min-height: 100vh;background: linear-gradient(180deg, #FFF7E1 0%, rgba(255,255,255,0) 100%) no-repeat;background-size: 100% 782rpx;} .navbox{position: fixed;left: 0;right: 0;top: 0;z-index: 4; } .navbg{width: 100%;height: 782rpx;} .wymain{z-index: 2;position: relative;padding: 0 24rpx;} .topl{overflow: hidden;padding-left: 16rpx; image{width: 18rpx;height: 22rpx;margin-right: 14rpx;flex: 0 0 auto;} view{font-weight: bold;font-size: 26rpx;color: #272727;} } .adrbox{position: relative;padding:8rpx 260rpx 16rpx 36rpx;margin-bottom: 28rpx; .adr{width: 36rpx;height: 34rpx;margin-right: 14rpx;} .adrtit{font-size: 17px;color: #272727;font-weight: bold; text{color: #E99D4F;} } .adrtxt{font-size: 16px;color: #272727;font-weight: bold; text{font-size: 10px;color: #E99D4F;display: inline-flex;background: rgba(233, 157, 79, 0.3);margin-left: 22rpx;min-width: 66rpx;height: 30rpx;padding: 0 14rpx;box-sizing: border-box;flex: 0 0 auto;border-radius: 8px;align-items: center;justify-content: center;} } .adrtip{font-weight: 500;font-size: 24rpx;color: #828282;} .adrbgimg{width: 262rpx;height: 242rpx;position: absolute;right: 0rpx;top: -54rpx;} } // tab栏 .grid{ display: flex;align-items: center;flex-wrap: wrap; .grid-item-box {display: flex;flex-direction: column;align-items: center;width: 25%;box-sizing: border-box;height: 152rpx; .img{width: 50rpx;height: 50rpx;display: flex;align-items: center;justify-content: center;margin-bottom: 20rpx; .imga{width: 48rpx;height: 44rpx;} .imgb{width: 42rpx;height: 42rpx;} .imgc{width: 44rpx;height: 48rpx;} .imgd{width: 46rpx;height: 38rpx;} .imge{width: 40rpx;height: 50rpx;} .imgf{width: 48rpx;height: 50rpx;} .imgg{width: 48rpx;height: 40rpx;} .imgh{width: 44rpx;height: 46rpx;} } view{font-weight: bold;font-size: 26rpx;color: #272727;position: relative; .cir{width: 20rpx;height: 20rpx;background: #D32C26;border-radius: 10rpx;font-weight: bold;font-size: 16rpx;color: #FCF9F1;position: absolute;display: flex;align-items: center;justify-content: center;padding: 0 2rpx;box-sizing: border-box;right: -10rpx;top: -10rpx; } } .txt{font-size: 20rpx;color: #666666;} } } .cbgs{width: 340rpx;height: 152rpx;position: relative; image{width: 340rpx;height: 152rpx;position: absolute;left: 0;top: 0;z-index: 0;} .cbga{z-index: 1;position: relative;padding: 30rpx 0 0 36rpx; .tit{font-weight: bold;font-size: 28rpx;color: #FFFFFF;text-shadow: 0px 4rpx 6rpx #13A97A;margin-bottom: 10rpx;} .txt{font-size: 40rpx;color: #FFFFFF;text-shadow: 0px 4rpx 6rpx #13A97A;} .tita{font-weight: bold;font-size: 28rpx;color: #FFFFFF;text-shadow: 0px 4rpx 6rpx #E89D00;;margin-bottom: 10rpx;} .txta{font-size: 40rpx;color: #FFFFFF;text-shadow: 0px 4rpx 6rpx #E89D00;} } } .hlist{ .hlista{padding: 8rpx 0; .limg{width: 32rpx;height: 32rpx;margin-right: 18rpx;} .tit{font-weight: bold;font-size: 30rpx;color: #272727;} .more{font-weight: 500;font-size: 24rpx;color: #AAAAAA; image{width: 18rpx;height: 16rpx;margin-left: 16rpx;} } .htabs{flex: 1;overflow: auto;padding: 10rpx 0; view{font-weight: 500;font-size: 28rpx;color: #666666;position: relative;height: 56rpx;line-height: 56rpx;margin-right: 48rpx;flex: 0 0 auto; &.act{font-size: 15px;font-weight: bold;color: #272727; &:after{width: 36rpx;height: 10rpx;background: linear-gradient(150deg, rgba(177,240,216,0.97), rgba(3,218,138,0.97));border-radius: 6rpx;content: '';position: absolute;bottom: -10rpx;left: 50%;margin-left: -18rpx;} } } } } } </style>