property/property_ui/work/components/car/list.vue

<template>
<view>
	<!-- 第一种样式  人员管理-->
	<block v-if="datainfo.length>0">
		<!-- 车辆管控 -->
		<block v-if="type=='car'">
			<view class="carlist" v-for="(ite,idx) in datainfo" :key="idx">
				<view class="ctop flexc">
					<image :src="cara" class="imgs" v-if="ite.type==1"></image>
					<image :src="carb" class="imgs" v-if="ite.type==2"></image>
					<view class="tit">皖A IC520</view>
					<view class="btn btna">新能源</view>
					<view class="btn btnb">小型车</view>
					<view class="flex1"></view>
					<view class="txt ca" v-if="ite.type==1">小区车辆</view>
					<view class="txt cb" v-if="ite.type==2">外来车辆</view>
				</view>
				<view class="clists">
					<view class="clist"><view class="tit">车库名称</view>地下停车场</view>
					<view class="clist"><view class="tit">进入时间</view>2024-11-27 16:27:48</view>
					<block v-if="topval=='sl'">
						<view class="clist"><view class="tit">驶离时间</view>2024-11-27 16:27:48</view>
						<view class="clist"><view class="tit">停车时长</view>3小时19分钟</view>
					</block>
					<view class="clist"><view class="tit">{{ite.type==1?'门户号 ':'来访门户'}}</view>8#303</view>
					<view class="clist"><view class="tit">手机号码</view>13656788668</view>
				</view>
			</view>
		</block>
		<!-- 车辆违规 -->
		<block v-if="type=='carpark'">
			<view class="carlist" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail">
				<view class="ctop flexc">
					<image :src="cara" class="imgs" v-if="ite.type==1"></image>
					<image :src="carb" class="imgs" v-if="ite.type==2"></image>
					<view class="tit">皖A IC520</view>
					<view class="num" :class="ite.heiflag?'coff':''">(本年度2次)</view>
					<view class="flex1"></view>
					<view class="txt ca" v-if="ite.type==1">小区车辆</view>
					<view class="txt cb" v-if="ite.type==2">外来车辆</view>
				</view>
				<view class="clists">
					<view class="clist"><view class="tit">关联房号</view>12#1403</view>
					<view class="clist"><view class="tit">手机号码</view>13656788668</view>
					<view class="clist"><view class="tit">登记时间</view>2024-11-27 17:30:55</view>
					<view class="clist"><view class="tit">违停拍照</view>
						<view class="imgas">
							<image :src="cara" @click="getPreview(idx,cara)"></image>
							<image :src="cara"></image>
							<image :src="cara"></image>
							<image :src="cara"></image>
						</view>
					</view>
				</view>
			</view>
		</block>
		<!-- 人员管理 -->
		<block v-if="type=='people'">
			<view class="carlist peolist" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail">
				<view class="ctop flexc">
					<image :src="hicoa" class="imgs" v-if="ite.type==1"></image>
					<image :src="hicob" class="imgs" v-if="ite.type==2"></image>
					<view class="tit">一号楼3单元1101</view>
					<view class="flex1"></view>
					<view class="txt ca" v-if="ite.type==1">业主</view>
					<view class="txt cb" v-if="ite.type==2">租户</view>
				</view>
				<view class="plists">
					<view class="plist flexc">
						<image :src="man" class="head" v-if="ite.sex==0"></image>
						<image :src="woman" class="head" v-else></image>
						<view class="flex1">
							<view class="ptit">张伟<view class="btn btnc ml10" v-if="ite.hzflag">户主</view></view>
							<view class="ptxt">身份证号 | 41072719880603022X</view>
							<view class="flexc">
								<view class="ptxt">性别 | {{ite.sex==0?'男':'女'}}</view>
								<view class="ptxt">年龄 | 36岁</view>
							</view>
						</view>
					</view>
					<view class="plist flexc" v-if="ite.zhanflag">
						<image :src="man" class="head" v-if="ite.sex==0"></image>
						<image :src="woman" class="head" v-else></image>
						<view class="flex1">
							<view class="ptit">张伟<view class="btn btnc ml10" v-if="ite.hzflag">户主</view></view>
							<view class="ptxt">身份证号 | 41072719880603022X</view>
							<view class="flexc">
								<view class="ptxt">性别 | {{ite.sex==0?'男':'女'}}</view>
								<view class="ptxt">年龄 | 36岁</view>
							</view>
						</view>
					</view>
					<image :src="upimg" :class="ite.zhanflag?'act':''" class="upimg" @click="getZhan(idx)"></image>
				</view>
			</view>
		</block>
		<!-- 维修人员管理 -->
		<view v-if="type=='staff'" class="flecw">
			<view class="stafflist" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail">
				<view class="statop">
					<image class="head" :src="man" v-if="ite.sex==0"></image>
					<image class="head" :src="woman" v-else></image>
					<view class="flex1">
						<view class="statit">张伟</view>
						<view class="statxt flexc co06" v-if="ite.hzflag"><text class="cir bga"></text>空闲中</view>
						<view class="statxt flexc cof6" v-else><text class="cir bgb"></text>指派中</view>
					</view>
					<image :src="pdel" class="stadel"></image>
				</view>
				<view class="stalist">
					<view class="imgs"><image :src="gzlx" class="gzlximg"></image></view>电梯维修
				</view>
				<view class="stalist">
					<view class="imgs"><image :src="mphone" class="mphone"></image></view>158****0088
				</view>
			</view>
		</view>
		<!-- 来访管理 -->
		<block v-if="type=='comepeo'">
			<view class="carlist peolist" v-for="(ite,idx) in datainfo" :key="idx">
				<view class="ctop flexc">
					<image :src="hicoa" class="imgs"></image>
					<!-- <image :src="hicob" class="imgs" v-if="ite.type==2"></image> -->
					<view class="tit">幸福小区12#301</view>
					<view class="btn btnbga">预约</view>
					<view class="btn btnbgb">已来访</view>
					<view class="btn btnbgc">待来访</view>
					<view class="flex1"></view>
					<view class="txt cc" v-if="ite.type==1">驾车</view>
				</view>
				<view class="clists">
					<view class="clist"><view class="tit">预约时间</view>2024-11-25  10:00:00</view>
					<view class="clist"><view class="tit">来访时间</view>2024-11-27 16:27:48</view>
					<view class="w50 flexc">
						<view class="clist"><view class="tit">访客姓名</view>刘女士</view>
						<view class="clist"><view class="tit">来访人数</view>1人</view>
					</view>
					<view class="w50 flexc">
						<view class="clist"><view class="tit">来访事由</view>亲友</view>
						<view class="clist"><view class="tit">车牌号码</view>皖A 86KY2</view>
					</view>
					<view class="clist"><view class="tit">手机号码</view>13656788668</view>
				</view>
			</view>
		</block>
		<!-- 物业费管理 -->
		<block v-if="type=='money'">
			<view class="carlist peolist" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail">
				<view class="ctop flexc" style="padding: 26rpx 24rpx 24rpx;">
					<image :src="hicoa" class="imgs"></image>
					<view class="tit">幸福小区12#301</view>
					<view class="flex1"></view>
					<view class="txta">2024/01 -2024/12</view>
				</view>
				<view class="clists flexc">
					<view class="mlistl">
						<view class="mltit">应缴总额 /元</view>
						<view class="mltxt">4307.20</view>
					</view>
					<view class="mlistr">
						<view class="clist"><view class="tit">物业费用：</view>3247.20元</view>
						<view class="clist"><view class="tit">车位费用：</view>960.00元</view>
						<view class="clist"><view class="tit">能耗费用：</view>100.00元</view>
					</view>
				</view>
			</view>
		</block>
		<!-- 历史账单 -->
		<block v-if="type=='moneybill'">
			<view class="carlist peolist" v-for="(ite,idx) in datainfo" :key="idx">
				<view class="ctop flexc" style="padding: 26rpx 24rpx 24rpx;">
					<image :src="time" class="imgs"></image>
					<view class="tit">2024/01 -2024/12</view>
					<view class="btn btnbgb" v-if="ite.type==1">已缴费</view>
					<view class="btn btnbgc" v-else>未缴费</view>
					<view class="flex1"></view>
					<view class="txta">1号楼3单元1102</view>
				</view>
				<view class="clists flexc">
					<view class="mlistl">
						<view class="mltit">应缴总额 /元</view>
						<view class="mltxt">4307.20</view>
					</view>
					<view class="mlistr">
						<view class="clist"><view class="tit">物业费用：</view>3247.20元</view>
						<view class="clist"><view class="tit">车位费用：</view>960.00元</view>
						<view class="clist"><view class="tit">能耗费用：</view>100.00元</view>
					</view>
				</view>
			</view>
		</block>
		<!-- 巡更地点patrol -->
		<block v-if="type=='patrol'">
			<view class="patlist" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail">
				<view class="pattop flexc">
					<image :src="home" class="imgs"></image>
					<view class="tit">幸福小区1栋2单元电梯间</view>
					<view class="flex1"></view>
					<view class="txt cd" v-if="ite.type==1">未巡更</view>
					<view class="txt cc" v-if="ite.type==2">已巡更</view>
				</view>
				<view class="patlistr">
					<view class="clist"><view class="tit">巡检类型</view>：设备维修</view>
					<view class="clist"><view class="tit">巡检时间</view>：2024-11-27 10:00</view>
					<view class="clist"><view class="tit">巡检人</view>：刘兵琦</view>
				</view>
				<view class="patbtns">
					<view class="btna" @click.stop="getDetail">查看</view>
					<view  class="btnb" @click.stop="getAddFn">去巡更</view>
				</view>
			</view>
		</block>
		<!-- 报修管理 -->
		<block v-if="type=='warranty'">
			<view class="walists" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail">
				<view class="watop ">
					<view class="watit">
						<view class="tit">一号楼3单元12楼楼梯间灯不亮</view>
						<view class="txt co01" v-if="ite.type==1">待分派</view>
						<view class="txt coa" v-if="ite.type==3">已完成</view>
						<view class="txt co28" v-if="ite.type==2">处理中</view>
					</view>
					<view class="walist"><view class="tit">小区名称</view>：幸福小区</view>
					<view class="walist"><view class="tit">报修门户</view>：3号楼1单元406</view>
					<view class="walist"><view class="tit">报修时间</view>：2024-11-14 17:16:31</view>
					<view class="walist" v-if="ite.type==3"><view class="tit" >完成时间</view>：2024-11-14 18:16:31</view>
				</view>
				<view class="wabtn">
					<view>查看详情</view>
					<image :src="rimg"></image>
				</view>
			</view>
		</block>
		<!-- 投诉建议 -->
		<block v-if="type=='complaint'">
			<view class="walists" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail"
				:data-idx="idx"
				@touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd" :style="'right:'+ite.right+'px'"
			>
				<view class="watop watopcom">
					<view class="watit">
						<view class="tit">小区电梯老化</view>
						<view class="txt co01" v-if="ite.type==1">待回复</view>
						<view class="txt coa" v-if="ite.type==2">已回复</view>
					</view>
					<view class="watopcoma">小区电梯时常发生问题，请物业派维修人员进行安全检 查，若无法排除问题，建议更换小区的电梯设备，避…</view>
					<view class="watopcomb">2024-11-18 08:16:54</view>
				</view>
				<!--  -->
				<view class="spdel" v-if="ite.right>0" @click.stop="getDelFn()">删除</view>
			</view>
			<!-- checkPermi(['system:menuFood:remove'])&& -->
			
		</block>
		<view class="shax">{{wtdt}}</view>
	</block>
	<!-- 无数据 -->
	<view class="nodata" v-else>
		<image :src="noiconpimg"></image>
		<view>
			暂无数据
		</view>
	</view>
</view>
</template>

<script>
	import { checkPermi, checkRole } from "@/utils/permission"; // 权限判断函数
	import config from '@/config'
	export default{
		props:{
			datainfo: {
				type: Array,
				default () {
					return []
				}
			},
			wtdt:{
				type:String,
				default () {
					return ''
				}
			},
			type:{
				type:String,
				default () {
					return 0
				}
			},
			topval:{
				type:String,
				default () {
					return ''
				}
			}
		},
		data(){
			return{
				noiconpimg:require("@/work/static/nodata.png"),
				car:require("@/work/static/car/car.png"),
				cara:require("@/work/static/car/cara.png"),
				carb:require("@/work/static/car/carb.png"),
				hicoa:require("@/work/static/people/hicoa.png"),
				hicob:require("@/work/static/people/hicob.png"),
				man:require("@/work/static/people/man.png"),
				woman:require("@/work/static/people/woman.png"),
				rimg:require("@/work/static/people/rimg.png"),
				pdel:require("@/work/static/people/pdel.png"),
				gzlx:require("@/work/static/people/gzlx.png"),
				mphone:require("@/work/static/people/mphone.png"),
				time:require("@/work/static/manage/time.png"),
				home:require("@/work/static/service/home.png"),
				upimg:require("@/static/images/home/up.png"),
				baseUrl:config.baseUrl,
				delBtnWidth:66,//左滑默认宽度
			}
		},
		mounted() {
			
		},
		methods:{
			checkPermi, checkRole,
			getDetail(e){
				this.$emit('getDetail',e)
			},
			getAddFn(e){
				this.$emit('getAddFn',e)
			},
			getZhan(idx){
				// var obj=JSON.parse(JSON.stringify(this.datainfo))[idx]
				// obj.zhanflag=!obj.zhanflag;
				// this.datainfo.splice(idx,1,obj);
				this.datainfo[idx].zhanflag=!this.datainfo[idx].zhanflag
			},
			getPreview(idx,arr) {
				var newArr=[];
				arr.forEach(ite=>{
					var ds=this.baseUrl+ite
					newArr.push(ds)
				})
				uni.previewImage({
					urls: newArr,
					current:idx,
					success: function(data) {},
					fail: function(err) {}
				});
			},
			//开始触摸滑动
			drawStart(e) {
				// console.log("开始触发");
				var touch = e.touches[0];
				this.startX = touch.clientX;
			},
			//触摸滑动
			drawMove(e) {
				// console.log("滑动");
				for (var index in this.datainfo) {
					// this.csListArrl[index].right=0
					this.$set(this.datainfo[index],'right',0);
				}
				var idx=e.currentTarget.dataset.idx
				var touch = e.touches[0];
				var item = this.datainfo[idx];
				var disX = this.startX - touch.clientX;
				if (disX >= 20) {
				        if (disX > this.delBtnWidth) {
					    disX = this.delBtnWidth;
				        }
						// this.csListArrl[idx].right=disX
				        this.$set(this.datainfo[idx],'right',disX);
				} else {
					// this.csListArrl[idx].right=0
					this.$set(this.datainfo[idx],'right',0);
				}
			},
			//触摸滑动结束
			drawEnd(e) {
				// console.log("滑动结束");
				var idx=e.currentTarget.dataset.idx
				var item = this.datainfo[idx];
				if (item.right >= this.delBtnWidth / 2) {
					// this.datainfo[idx].right=this.delBtnWidth
					this.$set(this.datainfo[idx],'right',this.delBtnWidth);
				} else {
					this.datainfo[idx].right=0
				}
			},
		}
	}
</script>

<style lang="scss" scoped>
.flex{display: flex;}
.flexc{display: flex;align-items: center;}
.mb10{margin-bottom: 20rpx;}
.carlist{background: #FFFFFF;border-radius: 20rpx;margin-bottom: 24rpx;
	.ctop{border-bottom: 2rpx solid #E5E5E5;padding:26rpx 24rpx;
		.imgs{width: 40rpx;height: 42rpx;margin-right: 30rpx;}
		.tit{font-size: 32rpx;color: #272727;font-weight: bold;margin-right: 14rpx;}
		.txt{font-weight: 500;font-size: 26rpx;
			&.ca{color: #3565ED;}
			&.cb{color: #FE5A0E;}	
			&.cc{color: #28C529;}	
		}
		.txta{font-weight: 500;font-size: 24rpx;color: #AAAAAA;}
		.num{font-size: 24rpx;color: #AAAAAA;}
	}
	.btn{height: 34rpx;border-radius: 18rpx;display: flex;align-items: center;justify-content: center;padding: 0 10rpx;font-size: 22rpx;margin-right: 24rpx;
		&.btna{border: 2rpx solid #06C770;color: #06C770;}
		&.btnb{border: 2rpx solid #3565ED;color: #3565ED;}
		&.btnc{border: 2rpx solid #FE5A0E;color: #FE5A0E;}
		&.btnbga{border: 1px solid #0156FE;color: #3565ED;background: #DFEAFF;height: 36rpx;}
		&.btnbgb{border: 1px solid #C1C1C1;color: #666666;background: #F1F1F1;height: 36rpx;}
		&.btnbgc{border: 1px solid #FE5A0E;color:#FE5A0E;background:#FFEEE6;height: 36rpx;}
	}
	.clists{padding: 24rpx 24rpx 8rpx;
		.clist{font-weight: 500;margin-bottom: 16rpx;
font-size: 26rpx;color: #272727;display: flex;line-height: 34rpx;
			.tit{font-size: 26rpx;color: #AAAAAA;flex: 0 0 auto;margin-right: 16rpx;min-width: 108rpx;text-align-last: justify;}
			.imgas{display: flex;align-items: center;flex-wrap: wrap;
				image{width: 142rpx;height: 142rpx;margin-right: 30rpx;margin-top: 8rpx;}
			}	
		}
		.w50{
			.clist{width: 50%;}
		}
	}
}
// 人员
.peolist{
	.ctop{padding: 24rpx 24rpx 22rpx;}
	.imgs{margin-right: 16rpx !important;}
	.tit{font-size: 28rpx !important;}
	.plists{padding: 30rpx 24rpx 6rpx;
		.plist{background: linear-gradient(-90deg, #F2F5FF 0%, #FBFDFF 100%);border-radius: 20rpx;border: 2rpx solid #E6E6E6;margin-bottom: 24rpx;padding: 18rpx 26rpx 4rpx;
		.head{width: 96rpx;height: 98rpx;margin-right: 32rpx;flex: 0 0 auto;}
		.ptit{font-weight: bold;font-size: 30rpx;color: #272727;display: flex;align-items: center;margin-bottom: 14rpx;}	
		.ptxt{font-weight: 500;font-size: 26rpx;color: #666666;line-height: 36rpx;margin-bottom: 14rpx;min-width: 176rpx;}
		}
	}
	.upimg{width: 26rpx;height: 22rpx;display: block;transform: rotate(180deg);transition: all 0.3s;margin: 0 auto 18rpx;
		&.act{transform: rotate(0deg);}
	}
}
// 物业费
.mlistl{width: 40%;display: flex;flex-direction: column;align-items: center;flex: 0 0 auto;
	.mltit{font-weight: 500;font-size: 26rpx;color: #666666;margin-bottom: 18rpx;}
	.mltxt{font-weight: bold;font-size: 32rpx;color: #0156FE;}
}

// 巡更地点
.patlist{background: #FFFFFF;border-radius: 20rpx;margin-bottom: 24rpx;padding: 0 24rpx 30rpx;
	.pattop{padding:22rpx 30rpx;margin-bottom: 2rpx;
		.imgs{width: 28rpx;height: 28rpx;margin-right: 12rpx;}
		.tit{font-size: 30rpx;color: #272727;font-weight: bold;margin-right: 14rpx;}
		.txt{font-weight: 500;font-size:24rpx;
			&.ca{color: #3565ED;}
			&.cb{color: #FE5A0E;}	
			&.cc{color: #28C529;}	
			&.cd{color: #FF6969;}	
		}
	}
	.patlistr{background: #EFF4FF;border-radius: 20rpx;padding: 20rpx 32rpx;
		.clist{font-weight: 500;font-size: 26rpx;color: #272727;display: flex;line-height: 50rpx;
			.tit{font-size: 26rpx;flex: 0 0 auto;min-width: 108rpx;text-align-last: justify;font-weight: bold;}
		}
	}
	.patbtns{display: flex;justify-content: flex-end;align-items: center;flex-wrap: wrap;
		view{min-width: 156rpx;height: 52rpx;font-weight: 500;font-size: 26rpx;background: #FFFFFF;border-radius: 20rpx;box-sizing: border-box;display: flex;align-items: center;justify-content: center;padding: 0 10rpx;margin-left: 24rpx;margin-top: 24rpx;
		&.btna{border: 2rpx solid #0256FD;color: #0256FD;}
		&.btnb{background: #0256FD;color: #ffffff;}
		
}
	}
}
// 报修
.walists{background: #FFFFFF;border-radius: 20rpx;margin-bottom: 24rpx;    position: relative;
	.watop{
		padding: 0 36rpx 8rpx 38rpx;
		.watit{padding: 24rpx 0;margin-bottom: 4rpx;display: flex;
			.tit{font-weight: bold;font-size: 28rpx;color: #272727;flex: 1;}
			.txt{font-weight: bold;font-size: 26rpx;flex: 0 0 auto;
			}
		}
	}
	.walist{display: flex;font-weight: 500;font-size: 24rpx;color: #666666;margin-bottom: 16rpx;
		.tit{min-width: 100rpx;text-align-last: justify}
	}
	.wabtn{display: flex;align-items: center;justify-content: space-between;border-top: 2rpx solid #E5E5E5;height: 80rpx;padding: 0 38rpx;
		view{font-weight: 500;font-size: 24rpx;color: #666666;}
		image{width: 16rpx;height: 28rpx;}
	}
}
// 维修人员
.stafflist{width: 344rpx;min-height: 256rpx;background: #FFFFFF;border-radius: 20rpx;margin:0 12rpx 24rpx 12rpx;padding-bottom: 20rpx;box-sizing: border-box;
	// &:nth-of-type(2n){margin-right: 0;}
	.statop{border-bottom: 2rpx solid #E5E5E5;display: flex;padding: 24rpx 24rpx 22rpx;
		.head{width: 80rpx;height: 82rpx;margin-right: 24rpx;flex: 0 0 auto;}
		.stadel{width: 30rpx;height: 30rpx;flex: 0 0 auto;margin-left: 12rpx;}
		.statit{font-weight: bold;font-size: 30rpx;color: #272727;margin-bottom: 4rpx;}
		.statxt{font-weight: 500;font-size: 26rpx;
			.cir{width: 10rpx;height: 10rpx;border-radius: 50%;margin-right: 14rpx;display: inline-block;
				&.bga{background: #06C770;}
				&.bgb{background: #FF6969;}
			}
		}
	}
	.stalist{font-weight: 500;font-size: 26rpx;color: #272727;display: flex;align-items: center;padding: 20rpx 24rpx 0;
		.imgs{width: 24rpx;height: 30rpx;margin-right: 22rpx;flex: 0 0 auto;display: flex;align-items: center;justify-content: center;
			.gzlximg{width: 24rpx;height: 28rpx;}
			.mphone{width: 18rpx;height: 30rpx;}
		}
		
	}
}
.watopcom{background-color: #ffffff;border-radius: 20rpx;position: relative;z-index: 1;padding-bottom: 30rpx !important;
	.watopcoma{font-weight: 500;font-size: 26rpx;color: #666666;line-height: 36rpx;margin-bottom: 24rpx;}
	.watopcomb{font-weight: 500;
font-size: 24rpx;
color: #AAAAAA;}
}
.spdel{width: 164rpx;background: #EA2D2D;font-weight: bold;font-size: 26rpx;color: #FFFFFF;display: flex;align-items: center;justify-content: center;position: absolute;right: -146rpx;top: 0;bottom: 0;padding-left: 14rpx;}

// 无数据
.nodata{display: flex;flex-direction: column;align-items: center;
	image{width: 440rpx;height: 440rpx;}
	view{font-size: 30rpx;color: #666666;font-weight: bold;}
}
</style>