PropertyApp/pages/index/index.vue

<template>
	<view class="">
		<view class="bg-white">
			<image @error="imgError" style="width: 100%;height: 340rpx;" :src="imgUrl('banner',banner)" ></image>
		</view>
		<view style="padding:40rpx 40rpx 10px"  class="  flex bg-white">
			<u-icon name="xiaoqu" custom-prefix="custom-icon" size="36" color="#7dc7ae"></u-icon>
			<view style="font-size: 30rpx;" class="flex  justify-center align-center text-bold padding-left-10">
				<text>社区管理</text>
			</view>
		</view>
		<view style="padding: 30rpx 10rpx 0rpx;" class="cu-list grid col-4 no-border" >
			<view class="cu-item "  @click="jump(item.title)" v-for="(item,index) in gridList" :key="index">
				<view class="grid-icon" >
					<u-icon :name="item.name" custom-prefix="custom-icon" size="80" :color="item.color"></u-icon>
				</view>
				<text  style="color: #333333;font-size: 26rpx;padding-top: 6rpx;padding-bottom: 20rpx;" >{{item.title}}</text>
				<view class="cu-tag  bg-red badge" v-if="item.badge>0">{{item.badge}}</view>
			</view>
		</view>	
		<view style="padding: 20rpx 0  20rpx 40rpx;"  class="  flex bg-white">
			<u-icon size="40" name="daibanshixiang1" custom-prefix="custom-icon"  color="#7dc7ae"></u-icon>
			<view style="font-size: 30rpx;" class="flex  justify-center align-center text-bold padding-left-10">
				<text>物业服务</text>
			</view>
		</view>
		<view class="bg-white " style="padding: 0rpx 0 20rpx 0">
			<u-tabs  bar-height="8" bar-width="80" active-color="#7dc7ae" :list="list" :is-scroll="false" :current="subsectionCurrent" @change="subsectionChange"></u-tabs>
		</view>
		<!-- 住户认证 -->
		<repair v-if="subsectionCurrent==0" @handelRepair="handelRepair" :list="repairList"></repair>
		<feedback v-else :list="feedbackList"></feedback>
		<view class="flex justify-center " style="padding:30rpx 0 ">
			<view @click="more" class="cu-btn radius sm" style="border: 1rpx solid #7fc6ac;color: #7fc6ac;padding: 10rpx 40rpx;">
				查看更多
			</view>
		</view>
	</view>
</template>

<script>
	import repair from "@/components/repair/repair" 
	import feedback from "@/components/feedback/feedback"
	export default {
		components:{
			repair,feedback
		},
		data() {
			return {
				banner:'http://139.9.103.171:1888/miniofile/estate/banner.png',
				isError:false,
				
				feedbackList:[],
				repairList:[],
				list:[
					{
						name:'物业报修'
					},
					{
						name:'用户反馈'
					},
				],
				subsectionCurrent:0,
				
				gridList:[
					{
						color:'#a1cece',
						title:"小区管理",
						badge:0,
						name:'shequ'
					},
					{
						color:'#3dc159',
						title:"楼栋管理",
						badge:0,
						name:'loudong1'
					},
					{
						color:'#3dc159',
						title:"单元管理",
						badge:0,
						name:'tesecanyin'
					},
					{
						color:'#77b0cb',
						title:"房间管理",
						badge:0,
						name:'fangjianxinxi-'
					},
					{
						color:'#de9964',
						title:"住户管理",
						badge:0,
						name:'zhuhu'
					},
					{
						color:'#d2837d',
						title:"住户审核",
						badge:0,
						name:'zheng'
					},
					{
						color:'#7156bf',
						title:"车辆管理",
						badge:0,
						name:'cheliang1'
					},
				]
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.fetchUserFeedback()
			this.fetchRepairList()
		},
		computed:{
			imgUrl(){
				return (id,url)=>{
					return 	this.$cache.cacheImg(id,url,this.isError)
				}
			}
		},
		methods: {
			/**
			 * 缓存的图片是否出现错误
			 */
			imgError(){
				this.isError=true
			},
			/**
			 * 处理工单
			 */
			handelRepair(item){
				//已完成，待评价
				item.handleStatus=1
				item.estimateStatus=0
				this.$dialog.showModal('确定把该工单置为已处理状态？').then(res=>{
					this.$api.estateRepair.submit(item).then(res=>{
						this.$u.toast('操作成功')
						this.fetchRepairList()
					})
				})
			},
			more(){
				if (this.subsectionCurrent==0) {
					uni.navigateTo({
						url:'../repair/list'
					})
				}else if (this.subsectionCurrent==1) {
					uni.navigateTo({
						url:'../feedback/list'
					})
				}
			},
			fetchUserFeedback(){
				let params={
					current:1,
					size:5
				}
				this.$api.userFeedBack.page(params).then(res=>{
					this.feedbackList=res.data.records
				})
			},
			fetchRepairList(){
				let params={
					current:1,
					size:20
				}
				this.$api.estateRepair.page(params).then(res=>{
					this.repairList=res.data.records
				})
			},
			subsectionChange(index){
				this.subsectionCurrent=index
			},
			jump(title){
				let url=''
				if (title=='小区管理') {
					url='/pages/residential/residential'
				}else if(title=='楼栋管理'){
					url='/pages/building/building'
				}else if (title=='单元管理') {
					url='/pages/unit/unit'
				}else if (title=='房间管理') {
					url='/pages/room/room'
				}else if (title=='住户管理') {
					url='/pages/user/user'
				}else if (title=='住户审核') {
					url='/pages/user-auth/user-auth'
				}else if (title=='车辆管理') {
					url='/pages/car/car'
				}
				
				if (!this.$isEmpty(url)) {
					uni.navigateTo({
						url:url,
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.nav-checked{
		background-color: #7fc6ac;
		color: #FFFFFF;
		font-weight: 800;
	}
	.nav-unchecked{
		background-color: #FFFFFF;
		color: #7fc6ac;
	}
	
</style>