property/user_wxui/work/components/box/list.vue

<template>
<view>
	<!-- 第一种样式  人员管理-->
	<block v-if="datainfo.length>0">
		<!-- 报修管理 -->
		<block v-if="type=='warranty'">
			<view class="walists" v-for="(ite,idx) in datainfo" :key="idx" @click="getPut(ite.repairId,ite.repairStatus)"
				:data-idx="idx"
				@touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd" :style="'right:'+ite.right+'px'"
			>
				<view class="delleft">
					<view class="watop ">
						<view class="watit">
							<view class="tit">{{ite.repairTitle}}</view>
							<view class="txt co01":class="{'co01':ite.repairStatus=='1','coa':ite.repairStatus=='3','co28':ite.repairStatus=='3'}">{{kaType(ite.repairStatus,bxztList)}}</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>：{{ite.communityName}}</view> -->
						<view class="walist"><view class="tit">项目</view>：{{kaType(ite.maintenanceCategory,bxlbList)}}</view>
						<view class="walist"><view class="tit">报修门户</view>：{{ite.houseAddress}}</view>
						<view class="walist"><view class="tit">报修时间</view>：{{ite.repairTime}}</view>
						<view class="walist" v-if="ite.type==3"><view class="tit" >完成时间</view>：{{ite.completionTime}}</view>
					</view>
					<view class="wabtn" @click.stop="getDetail(ite.repairId)">
						<view>查看详情</view>
						<image :src="rimg"></image>
					</view>
				</view>
				<view class="spdel" v-if="ite.right>0&&checkPermi(['wuYe:repair:remove'])&&ite.repairStatus<4" @click.stop="getDelFn(ite.repairId)">撤销</view>
			</view>
		</block>
		<!-- 访客 -->
		<block v-if="type=='visitor'">
			<view class="pr mb12" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail(ite.reservRecordId)" :data-idx="idx"
					@touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd" :style="'right:'+ite.right+'px'">
				<view class="vislist pr" style="z-index: 1;margin-bottom: 0;">
					<view class="vistop flexc mb12">
						<view class="tit flex0">{{ite.name}}</view>
						<view class="btns flex0" v-if="ite.isCar=='Y'">驾车</view>
						<view class="flex1"></view>
						<view class="txt flex0"  :class="{'co01':ite.status==1,'coa':ite.status==2,'cof4':ite.status==3,}">{{kaType(ite.status,fkztList)}}</view>
					</view>
					<view class="vlist flexcw">
						<view>来访人数：{{ite.num}}人</view>
						<view>来访事由：{{ite.reason}}</view>
						<view>车牌号码：{{ite.plateNumber}}</view>
						<view>手机号码：{{ite.mobileNumber}}</view>
						<view>来访时间：{{ite.visitorTime}}</view>
					</view>
				</view>
				<view class="spdel" v-if="ite.right>0" @click.stop="getDelFn(ite.reservRecordId)">删除</view>
			</view>	
		</block>
		<view class="shax" v-if="wtdt">{{wtdt}}</view>
	</block>
	<!-- 无数据 -->
	<view class="nodata" v-else>
		<image :src="noiconpimg"></image>
		<view>
			暂无数据
		</view>
	</view>
</view>
</template>

<script>
	import config from '@/config'
	import {selectDictValue} from "@/utils/common.js"
	import {checkPermi,checkRole} from "@/utils/permission"; // 权限判断函数
	export default{
		props:{
			datainfo: {
				type: Array,
				default () {
					return []
				}
			},
			wtdt:{
				type:String,
				default () {
					return ''
				}
			},
			type:{
				type:String,
				default () {
					return 0
				}
			},
			bxztList:{
				type:Array,
				default () {
					return []
				}
			},
			fkztList:{
				type:Array,
				default () {
					return []
				}
			},
			bxlbList:{
				type:Array,
				default () {
					return []
				}
			}
		},
		data(){
			return{
				noiconpimg:require("@/static/images/nodata.png"),
				rimg:require('@/static/images/rimg.png'),
				baseUrl:config.baseUrl,
				delBtnWidth:66,//左滑默认宽度
			}
		},
		mounted() {
			
		},
		methods:{
			checkPermi,checkRole,
			kaType(data, list) {
				return selectDictValue(list, data);
			},
			getDetail(e){
				this.$emit('getDetail',e)
			},
			getPut(e,type){
				if(type>1){
					this.$emit('getDetail',e)
				}else{
					this.$emit('getPut',e)
				}
				
			},
			getDelFn(id){
				var that=this;
				uni.showModal({
					title: '确认删除',
					content: "是否确认删除",
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							that.$emit('getDelFn',id)
						} else if (res.cancel) {
						}
					}
				});
			},
			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;}
// 报修
.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;
				.cir{width: 14rpx;margin-left: 8rpx;margin-bottom: 10rpx;height: 14rpx;display: inline-block;background: #FF6969;border-radius: 8rpx;}
			}
			.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;}
	}
}
.vislist{background: #FFFFFF;border-radius: 20rpx;margin-bottom: 24rpx;padding: 26rpx 38rpx 12rpx;
	.vistop{
		.tit{font-size: 28rpx;color: #272727;font-weight: bold;}
		.btns{min-width: 70rpx;font-weight: 500;
font-size: 20rpx;padding: 0 8rpx;box-sizing: border-box;text-align: center;margin-left: 18rpx;color: #00B861;border-radius: 16rpx;border: 2rpx solid #0AC86E;}
		.txt{font-weight: bold;font-size: 26rpx;margin-left: 18rpx;}
	}
	.vlist{
		view{font-weight: 500;font-size: 24rpx;color: #666666;margin-bottom: 16rpx;flex: 0 1 auto;min-width: 50%;}
	}
}
.carlist{background: #FFFFFF;border-radius: 20rpx;margin-bottom: 24rpx;
	.carltop{min-height: 154rpx;border-bottom: 2rpx solid #E5E5E5;
			.tit{font-weight: bold;font-size: 32rpx;}
			.txt{font-weight: 500;font-size: 26rpx;color: #272727;}
			.txtbtn{min-width: 82rpx;
	height: 32rpx;font-weight: 500;font-size: 20rpx;color: #45CB99;
	border-radius: 16rpx;border: 1px solid #45CB99;margin-left: 12rpx;}
			.cara{flex: 0 0 auto;width: 232rpx;height: 74rpx;margin-right: 40rpx;}
			.carb{flex: 0 0 auto;width: 278rpx;height: 130rpx;}
		}
		.carlf{padding:26rpx 0 10rpx;
			.clflist{font-weight: 500;font-size: 26rpx;color: #666666;margin-bottom: 16rpx;}
		}
	.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%;}
		}
	}
}
// 物业费
.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;}
}
// 无数据
.nodata{display: flex;flex-direction: column;align-items: center;
	image{width: 440rpx;height: 440rpx;}
	view{font-size: 30rpx;color: #666666;font-weight: bold;}
}
</style>