property/user_ui/pages/index/index.vue

<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="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="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="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="getClearFn" >
							<view class="img"><image :src="htaba" class="imga"></image></view>
							<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="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" @getNoticeDet="getNoticeDet"></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"
import {newsList} from "@/api/work/manage.js"
import self from '@/utils/location.js';
import store from "@/store"
  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:[]
		}
	},
	onPageScroll(e) {
		var scrollTop = Number(e.scrollTop);
		if (scrollTop > 0) {
			this.backgroundColor = '#FFF7E1'
		} else {
			this.backgroundColor = 'transparent'
		}
	},
    onLoad: function() {
		var that=this;
		uni.getSystemInfo({
			success: (e) => {
				this.nvaHeight = Number(e.statusBarHeight)+44;
			}
		})
		// 获取房子
		this.getDataFn()
		this.gesettingsList()
		this.newsList();
		// #ifndef H5
		self.getLocation(function(res){
			if(res==-1){
				
			}else{
				that.city=res.city;
			}			
		})
		// #endif
    },
	methods:{
		getDataFn(){
			var params={
				userId:this.userId,
				pageSize:5,
				pageNum: 1,
			}
			houseInfoList(params).then(res=>{
				if(res.code==200){
					this.houselist = JSON.parse(JSON.stringify(res.rows));
					if(res.rows&&res.rows.length){
						var info=res.rows[0];
						var obj={
							houseId:info.houseId,
							communityName:info.communityName,
							detailedAddress:info.detailedAddress,
						}
						store.commit('SET_HOUSE', obj)
					}
				}else{
					this.$toast(res.msg)
				}
			})	
		},
		newsList(){
			var params={
				pageSize:10,
				pageNum: 1,
				status:1,
			}
			newsList(params).then(res=>{
				if(res.code==200){
					this.noticelist = res.rows;
				}else{
					this.$toast(res.msg)
				}
			})
		},
		getBusListFn(){
			
		},
		gesettingsList(){
			gesettingsList().then(res=>{
				if(res.code==200){
					this.phoneList=res.rows
				}
			})
		},
		getClose(){
			this.type=''
		},
		getNoticeDet(id){
			this.$tab.navigateTo(`/news/pages/news/detail?id=`+id) 
		},
		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>