property/user_ui/mine/components/box/list.vue

<template>
<view>
	<!-- 第一种样式  人员管理-->
	<block v-if="datainfo.length>0">
		<block v-if="type=='mycar'">
			<view class="carlist pr" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail(ite.carId)"
				:data-idx="idx"
				@touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd" :style="'right:'+ite.right+'px'"
			>
				<view class="delleft" style="padding: 0 24rpx;">
					<view class="carltop flexc">
						<view class="flex1">
							<view class="tit mb6" :class="ite.vehicleType==1?'co01':'co16'">{{ite.plateNumber}}</view>
							<view class="txt flexc">
								<!-- {{ite.plateNumber}} -->
								<view class="txtbtn flexcc">{{kaType(ite.vehicleBrand,clcxList)}}</view>
								<!-- <view class="txtbtn flexcc" v-if="ite.vehicleType==2">新能源</view> -->
							</view>
						</view>
						<image :src="cara" class="cara" v-if="ite.vehicleType==1"></image>
						<image :src="carb" class="carb" v-if="ite.vehicleType==2"></image>
					</view>
					<view class="carlf">
						<view class="clflist">发动机号码 ：{{ite.engineNumber}}</view>
						<view class="clflist">车辆识别代号：{{ite.identificationNumber}}</view>
						<view class="flexc">
							<view class="clflist w50">注册日期：{{ite.registrationDate}}</view>
							<view class="clflist w50">发证日期：{{ite.issueDate}}</view>
						</view>
					</view>
				</view>
				
				<view class="spdel" v-if="ite.right>0&&checkPermi(['wuYe:car:remove'])" @click.stop="getDelFn(ite.carId)">删除</view>
			</view>
		</block>
		<!-- 地址 -->
		<block v-if="type=='address'">
			<view class="adrlist flexc" :class="ite.isdefault?'act':''" v-for="(ite,idx) in datainfo" :key="idx">
				<view class="adrl flex1">
					<view class="tit mb5">安徽省 合肥市 蜀山区 高新技术产业开发区</view>
					<view class="txt mb5">幸福大街88号幸福小区12#1304</view>
					<view class="txts flexc">袁玥  <text class="ml8">18305687768</text>
						<text class="ml8 btns" v-if="ite.isdefault">默认</text>
						<text class="ml8 btns" v-if="ite.isuser">最近使用</text>
					</view>
				</view>
				<view class="adrr flexcc">
					<image :src="edit"></image>
				</view>
			</view>
		</block>
		<!-- 快递 -->
		<block v-if="type=='delivery'">
			<view class="kdlists flex" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail">
				<image :src="noiconpimg" class="kdll"></image>	
				<view class="kdlr over flex1">
					<view class="over tit">已发货</view>
					<view class="over tits">包裹正在等待揽收</view>
					<view class="over txt">淘宝 | 白色晚礼服平时可穿毕业洋装小白裙…</view>
				</view>
			</view>
		</block>
		<!-- 步骤条 -->
		<block v-if="type=='kdstep'">
			<view class="hfstep">
				<view class="hfslist flex">
					<view class="limg flexccc">
						<image :src="cira" class="imga"></image>
					</view>
					<view class="flex1">
						<view class="hfstit co01">运输中 11-25  12:24</view>
						<view class="hfstxt co27">【合肥市】快件已到达 合肥蜀山新产业园</view>
					</view>
				</view>
				<view class="hfslist flex">
					<view class="limg flexccc">
						<image :src="cirb" class="imgb"></image>
					</view>
					<view class="flex1">
						<view class="hfstit">11-25  07:23</view>
						<view class="hfstxt">【合肥市】快件已发往 合肥蜀山新产业园</view>
					</view>
				</view>
				<view class="hfslist flex">
					<view class="limg flexccc">
						<image :src="cirb" class="imgb"></image>
					</view>
					<view class="flex1">
						<view class="hfstit">11-25  07:20</view>
						<view class="hfstxt">【合肥市】快件已到达 合肥转运中心</view>
					</view>
				</view>
			</view>
		</block>
		<!-- 人员管理 -->
		<block v-if="type=='people'">
			<view class="carlist peolist" v-for="(ite,idx) in datainfo" :key="idx">
				<view class="ctop flexc">
					<image :src="house" class="imgs" v-if="ite.houseStatus==1"></image>
					<image :src="housea" class="imgs" v-if="ite.houseStatus==2"></image>
					<image :src="houseb" class="imgs" v-if="ite.houseStatus==3"></image>
					<image :src="housec" class="imgs" v-if="ite.houseStatus==4"></image>
					<view class="tit">{{ite.detailedAddress}}</view>
					<view class="flex1"></view>
					<view class="txt ca" v-if="ite.houseStatus==1">自住</view>
					<view class="txt cb" v-if="ite.houseStatus==2">出租</view>
					<view class="txt cc" v-if="ite.houseStatus==3">空闲</view>
					<view class="txt co6" v-if="ite.houseStatus==4">代售</view>
				</view>
				<view class="plists">
					<block v-for="(aite,aidx) in ite.residentInfoList">
						<view class="flexc pr mb12"   :key="`peo${aidx}`" v-if="aidx==0" @click="getDetail(aite.residentId)"
							:data-idx="idx" :data-aidx="aidx" data-type="peo"
							@touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd" :style="'right:'+aite.right+'px'"
						>
							<view class="plist flexc">
								<image :src="man" class="head" v-if="aite.residentGender==1"></image>
								<image :src="woman" class="head" v-else></image>
								<view class="flex1">
									<view class="ptit">{{aite.residentName}}
										<view class="btn btnc ml10" v-if="aite.isHouseholder=='Y'">户主</view>
									</view>
									<view class="ptxt">身份证号 | {{aite.residentIdCard}}</view>
									<view class="flexc">
										<view class="ptxt">性别 | {{aite.residentGender==1?'男':'女'}}</view>
										<view class="ptxt">年龄 | {{getAgeFromID(aite.residentIdCard)}}岁</view>
									</view>
									<view class="flexc" v-if="aite.residentAppearance">
										<view class="ptxt">人员面貌 | {{kaType(aite.residentAppearance,rymmList)}}</view>
									</view>
								</view>
							</view>
							<view class="spdel" v-if="aite.right>0&&checkPermi(['wuYe:residentInfo:remove'])" @click.stop="getDelFn(aite.residentId)">删除</view>
						</view>
						<view class="flexc pr mb12"   :key="`peo${aidx}`" v-if="aidx>0&&ite.zhanflag" @click="getDetail(aite.residentId)"
							:data-idx="idx"
							:data-aidx="aidx" data-type="peo"
							@touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd" :style="'right:'+aite.right+'px'"
						>
							<view class="plist flexc">
								<image :src="man" class="head" v-if="aite.residentGender==1"></image>
								<image :src="woman" class="head" v-else></image>
								<view class="flex1">
									<view class="ptit">{{aite.residentName}}
										<view class="btn btnc ml10" v-if="aite.isHouseholder=='Y'">户主</view>
									</view>
									<view class="ptxt">身份证号 | {{aite.residentIdCard}}</view>
									<view class="flexc">
										<view class="ptxt">性别 | {{aite.residentGender==1?'男':'女'}}</view>
										<view class="ptxt">年龄 | {{getAgeFromID(aite.residentIdCard)}}岁</view>
									</view>
									<view class="flexc" v-if="aite.residentAppearance">
										<view class="ptxt">人员面貌 | {{kaType(aite.residentAppearance,rymmList)}}</view>
									</view>
								</view>
							</view>
							<view class="spdel" v-if="aite.right>0&&checkPermi(['wuYe:residentInfo:remove'])" @click.stop="getDelFn(aite.residentId)">删除</view>
						</view>
					</block>
					<image :src="upimg" v-if="ite.residentInfoList.length>1" :class="ite.zhanflag?'act':''" class="upimg" @click="getZhan(idx)"></image>
				</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 {selectDictValue} from "@/utils/common.js"
	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
				}
			},
			clcxList:{
				type: Array,
				default () {
					return []
				}
			},
			rymmList:{
				type: Array,
				default () {
					return []
				}
			}
		},
		data(){
			return{
				house:require("@/health/static/house.png"),
				housea:require("@/health/static/housea.png"),
				houseb:require("@/health/static/houseb.png"),
				housec:require("@/health/static/housec.png"),
				noiconpimg:require("@/static/images/nodata.png"),
				upimg:require("@/mine/static/house/up.png"),
				cara:require("@/mine/static/house/cara.png"),
				carb:require("@/mine/static/house/carb.png"),
				edit:require("@/mine/static/edit.png"),
				cira:require('@/news/static/complaint/cira.png'),
				cirb:require('@/news/static/complaint/cirb.png'),
				man:require("@/health/static/man.png"),
				woman:require("@/health/static/woman.png"),
				baseUrl:config.baseUrl,
				delBtnWidth:66,//左滑默认宽度
			}
		},
		mounted() {
			
		},
		methods:{
			checkPermi, checkRole,
			kaType(data, list) {
				return selectDictValue(list, data);
			},
			getDetail(e){
				this.$emit('getDetail',e)
			},
			getDelFn(e){
				var that=this;
				uni.showModal({
					title: '确认删除',
					content: "是否确认删除",
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							that.$emit('getDelFn',e)
						} else if (res.cancel) {
						}
					}
				});
			},
			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
			},
			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) {
						}
					}
				});
			},
			getAgeFromID(idNumber) {
				if(idNumber){
					const birthDateStr = idNumber.substring(6, 14);
					const birthYear = parseInt(birthDateStr.substring(0, 4));
					const birthMonth = parseInt(birthDateStr.substring(4, 6));
					const birthDay = parseInt(birthDateStr.substring(6, 8));
								
					const today = new Date();
					const currentYear = today.getFullYear();
					const currentMonth = today.getMonth() + 1;
					const currentDay = today.getDate();
								
					let age = currentYear - birthYear;
					if (currentMonth < birthMonth || (currentMonth === birthMonth && currentDay < birthDay)) {
					    age--;
					}
								
					return age;
				}         
			 },
			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) {
				var idx=e.currentTarget.dataset.idx
				var aidx=e.currentTarget.dataset.aidx
				var type=e.currentTarget.dataset.type;
				for (var index in this.datainfo) {
					if(type&&type=='peo'){	
						for(var i in this.datainfo[idx].residentInfoList){
							this.$set(this.datainfo[idx].residentInfoList[i],'right',0);
						}
					}else{
						 this.$set(this.datainfo[index],'right',0);
					}	
				}
				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;
				        }
						
						if(type&&type=='peo'){
							
							 this.$set(this.datainfo[idx].residentInfoList[aidx],'right',disX);
						}else{
							 this.$set(this.datainfo[idx],'right',disX);
						}
						// this.csListArrl[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;
	.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;}
	}
}
// 收货地址
.adrlist{border-bottom: 2rpx solid  #E5E5E5;padding: 34rpx 0 34rpx 8rpx;
	.tit{font-weight: 500;font-size: 22rpx;color: #666666;}
	.txt{font-size: 28rpx;color: #272727;font-weight: bold;}
	.txts{font-weight: 500;font-size: 26rpx;color: #272727;}
	.btns{font-weight: 500;font-size: 22rpx;color: #0256FD;padding: 2rpx 14rpx;display:inline-block;background: #C9DBFF;
border-radius: 10rpx;}
	.adrr{width: 40rpx;height: 40rpx;flex: 0 0 auto;margin-left: 12rpx;
		image{width: 22rpx;height: 22rpx;}
	}
	&.act{
		.tit{color: #0256FD;}
		.txt{color: #0256FD;}
		.txts{color: #0256FD;}
	}
}
// 快递
.kdlists{padding: 24rpx 26rpx;background-color: #FFFFFF;border-radius: 20rpx;margin-bottom: 24rpx;
	.kdll{width: 140rpx;height: 140rpx;border-radius: 10rpx;margin-right: 32rpx;flex: 0 0 auto;}
	.kdlr{
		.tit{font-size: 30rpx;color: #272727;font-weight: bold;margin-bottom: 18rpx;margin-top: 4rpx;}
		.tits{font-size: 24rpx;color: #272727;font-weight: 500;margin-bottom: 14rpx;}
		.txt{font-weight: 500;font-size: 24rpx;color: #AAAAAA;}
	}
}
// 快递步骤条
.hfstep{padding: 0 32rpx 44rpx 32rpx;
	.hfslist{padding-bottom: 44rpx;position: relative;
		&::before{content: '';position: absolute;left: 14rpx;top:14rpx;height: 100%;width: 2rpx;background: #E6E6E6;}
		.limg{width: 30rpx;height: 30rpx;margin-right: 22rpx;flex: 0 0 auto;margin-top:3rpx;
			.imga{width: 30rpx;height: 30rpx;}
			.imgb{width: 18rpx;height: 18rpx;}
		}
		.hfstit{font-weight: bold;font-size: 26rpx;color: #666666;line-height: 36rpx;margin-bottom: 24rpx;}
		.hfstxt{font-weight: 500;font-size: 26rpx;color: #666666;line-height: 36rpx;padding-left: 8rpx;}
	}
}
.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;}
	}
}
// 人员
.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;padding: 18rpx 26rpx 4rpx;width: 100%;z-index: 1;
		.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);}
	}
}
// 无数据
.nodata{display: flex;flex-direction: column;align-items: center;
	image{width: 440rpx;height: 440rpx;}
	view{font-size: 30rpx;color: #666666;font-weight: bold;}
}
</style>