PropertyApp/pages/index/index.vue

<template>
	<view class="">
		<view class="bg-white">
			<image  style="width: 100%;height: 340rpx;" src="/static/banner.jpg" ></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>
		
		<swiper style="height: 400rpx;background-color: #FFFFFF;" :indicator-dots="true"  indicator-active-color="#7fc6ac">
			<swiper-item style="height:100%">
				<view  class="cu-list grid col-4 no-border" >
					<view class="cu-item "  @click="jump(item.url)" v-for="(item,index) in gridList1" :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>
			</swiper-item>
			<swiper-item style="height:100%">
				<view  class="cu-list grid col-4 no-border" >
					<view class="cu-item "  @click="jump(item.url)" v-for="(item,index) in gridList2" :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>
			</swiper-item>
		</swiper>
		
		<!-- 物业服务 -->
		<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>
		
		
		<!-- 物业报修 -->
		<card v-if="subsectionCurrent==1" @handleRepair="handleRepair" :list="repairList"></card>
		<!-- 用户反馈 -->
		<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>
		
		
		<!-- 详情 -->
		<u-popup v-model="popupShow" mode="center" width="650" :closeable="true" border-radius="10">
			<view style="padding: 60rpx 40rpx 10rpx;">
				<u-form label-width="150" :model="form" label-position="top">
					<u-form-item label="照片上传" >
						<view class="cu-form-group">
							<view class="grid col-4 grid-square flex-sub">
								<view class="bg-img" v-for="(item,index) in imgList" :key="index" @tap="ViewImage" :data-url="imgList[index]">
									<image :src="imgList[index]" mode="aspectFill"></image>
									<view class="cu-tag bg-red" @tap.stop="DelImg" :data-index="index">
										<text class='cuIcon-close'></text>
									</view>
								</view>
								<view class="solids" @tap="ChooseImage" v-if="imgList.length<4">
									<text class='cuIcon-cameraadd'></text>
								</view>
							</view>
						</view>
					</u-form-item>
					<u-form-item label="处理情况" required=true><u-input v-model="detail"/></u-form-item>
				</u-form>
				<view @click="submit()" class="flex cu-btn bg-blue" style="margin: 60rpx 0 10rpx;padding: 40rpx;">
					确定
				</view>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import card from "@/components/repair/repair" 
	import feedback from "@/components/feedback/feedback"
	var _this = this;
	export default {
		components:{
			card,feedback
		},
		data() {
			return {
				//照片上传及处理情况
				imgList: [],
				imgMaxNum: 4,
				detail:'',
				detailTemp:{},
				
				//弹出
				popupShow:false,
	
				feedbackList:[],
				repairList:[],
				list:[
					{
						name:'用户反馈'
					},
					{
						name:'物业报修'
					}
				],
				subsectionCurrent:0,
				
				gridList1:[
					{
						color:'#9cc7c7',
						title:"小区管理",
						badge:0,
						name:'shequ',
						url:'/pages/residential/residential'
					},
					{
						color:'#3dc159',
						title:"楼栋管理",
						badge:0,
						name:'loudong1',
						url:'/pages/building/building'

					},
					{
						color:'#3dc159',
						title:"单元管理",
						badge:0,
						name:'tesecanyin',
						url:'/pages/unit/unit'
					},
					{
						color:'#77b0cb',
						title:"房间管理",
						badge:0,
						name:'fangjianxinxi-',
						url:'/pages/room/room'

					},
					{
						color:'#de9964',
						title:"住户管理",
						badge:0,
						name:'zhuhu',
						url:'/pages/user/user'
					},
					{
						color:'#d2837d',
						title:"住户审核",
						badge:0,
						name:'zheng',
						url:'/pages/user-auth/user-auth'
					},
					{
						color:'#1296db',
						title:"服务人员",
						badge:0,
						name:'qunfengfuwushang',
						url:'/pages/service-staff/service-staff'
					},
					{
						color:'#7156bf',
						title:"车辆管理",
						badge:0,
						name:'cheliang1',
						url:'/pages/car/car'
					},
				],
				gridList2:[
					{
						color:'#5064eb',
						title:"公告管理",
						badge:0,
						name:'qunfengtongzhigonggao',
						url:'/pages/notice/notice'
					}
				]
			}
		},
		onLoad() {
			
		},
		onShow() {
			this.fetchUserFeedback()
			this.fetchRepairList()
			this.getApplyUserReadyCheckCount()
		},
		methods: {
			getApplyUserReadyCheckCount(){
				this.$api.dataStatistics.getApplyUserAccountWithCheckState().then(res=>{
					this.gridList1[5].badge=res.data.applyUserReadyCheckCount
				})
			},
			/**
			 * 处理工单
			 */
			// handleRepair(item){
			// 	//已完成，待评价
			// 	console.log("item",item)
			// 	item.handleStatus=1
			// 	item.estimateStatus=0
			// 	this.$dialog.showModal('确定把该工单置为已处理状态？').then(res=>{
			// 		this.$api.estateRepair.submit(item).then(res=>{
			// 			this.$u.toast('操作成功')
			// 			this.fetchRepairList()
			// 		})
			// 	})
			// },
			/**
			 * @param {Object} item
			 * 点击处理工单
			 */
			handleRepair(item){
				console.log("进入时item：", item)
				this.detailTemp = item,
				this.popupShow=true,
				this.imgList = [],
				this.detail = ''
			},
			/**
			 * 确认提交工单情况s
			 */
			submit(){
				this.detailTemp.picArr = this.imgList.join(",")
				console.log("临时item",this.detailTemp)
				// this.detailTemp.
				this.$showModel('确定把该工单置为已处理状态？').then(res=>{
					if(this.detail == ''){
						this.$u.toast('请填写处理情况')
						return
					}else{
						this.detailTemp.handleStatus=1,
						this.detailTemp.estimateStatus=0
						this.$api.estateRepair.submit(this.detailTemp).then(res=>{
							this.$u.toast('操作成功')
							this.mescroll.resetUpScroll()
							this.popupShow=false
						})
					}
				})
			},
			/**
			 * @param {Object} index
			 * 拍照或者从图库选择照片上传照片
			 */
			ChooseImage() {
				_this = this;
				uni.chooseImage({
					count: 4, //默认9
					sizeType: ['original'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['camera','album'], //从相机、相册选择
					success: (res) => {
						var tempFilePaths = res.tempFilePaths;
						if (_this.imgList.length+tempFilePaths.length > _this.imgMaxNum) {
							uni.showToast({
								title: '超过上传图片的最大数量',
								icon: 'none'
							})
						} else {
							if (_this.imgList.length != 0) {
								_this.imgList = _this.imgList.concat(res.tempFilePaths);
							} else {
								_this.imgList = res.tempFilePaths;
							}
							for (var i = 0; i < tempFilePaths.length; i++) { 
								uni.uploadFile({
									url: "https://www.example.com/upload",
									filePath: tempFilePaths[i],
									name: "file", // 一定要与后台@RequestParam("file") MultipartFile变量名一致
									success(res) {
										console.log(res);
									}
								});
							}
						}
					}
				});
			},
			ViewImage(e) {
				uni.previewImage({
					urls: this.imgList,
					current: e.currentTarget.dataset.url
				});
			},
			DelImg(e) {
				this.imgList.splice(e.currentTarget.dataset.index, 1)
			},
			
			more(){
				if (this.subsectionCurrent==1) {
					uni.navigateTo({
						url:'../repair/list'
					})
				}else if (this.subsectionCurrent==0) {
					uni.navigateTo({
						url:'../feedback/list'
					})
				}
			},
			fetchUserFeedback(){
				this.$api.userFeedBack.page().then(res=>{
					this.feedbackList=res.data.records
				})
			},
			fetchRepairList(){
				this.$api.estateRepair.page().then(res=>{
					this.repairList=res.data.records
				})
			},
			subsectionChange(index){
				this.subsectionCurrent=index
			},
			jump(url){
				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>