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

<template>
<view>
	<!-- 第一种样式  人员管理-->
	<block v-if="datainfo.length>0">
		<!-- 快递 -->
		<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=='myhd'">
			<view class="mb12 pr" v-for="(ite,idx) in datainfo" :key="idx">
				<view class="hdlist pd12 flex">
					<image :src="man" class="mhead flex0"></image>
					<view class="flex1 overh">
						<view class="flexc mb6">
							<view class="name flex1 over">{{ite.nickName}}</view>
							<view class="tit flex0 ml10">
								<block v-if="ite.targetType==1">评论了你的文章</block>
								<block v-if="ite.targetType==2">点赞了你的文章</block>
								<block v-if="ite.targetType==3">收藏了你的文章</block>
								<block v-if="ite.targetType==4">回复了你的评论</block>
								<block v-if="ite.targetType==5">点赞了你的评论</block>
								</view>
							<view class="time flex0 ml10">{{ite.createTime}}</view>
						</view>
						<view class="flexc overh mb4">
							<view class="line bga"></view>
							<view class="txt over flex1">{{ite.targetTitle}}</view>
							<image :src="rimg" class="rimg ml10"></image>
						</view>
					</view>
				</view>
			</view>
		</block>
		<block v-if="type=='plsh'">
				<view class="mb12 pr"  v-for="(ite,idx) in datainfo" :key="idx"
					:data-idx="idx"
					@touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd" :style="'right:'+ite.right+'px'"
				>
					<view class="hdlist ">
						<view class="pd12 flex">
							<image :src="ite.avatar?baseUrl+ite.avatar:man" class="mhead flex0"></image>
							<view class="flex1 overh">
								<view class="flexc mb6">
									<view class="name flex1 over">{{ite.nickName}}</view>
									<view class="time flex0 ml10">02-26</view>
								</view>
								<view class="txt mb8">{{ite.commentContent}}</view>
								<view class="flexc overh mb2">
									<view class="line bgd"></view>
									<view class="txta over flex1">{{ite.communityTitle}}</view>
									<image :src="rimg" class="rimg ml10"></image>
								</view>
							</view>
						</view>
						<view class="shbtns flexc pd12" >
							<view class="btn bga" @click="getSh('4',ite)">不予展示</view>
							<view class="flex1"></view>
							<view class="btn bgb" @click="getSh('3',ite)">不通过</view>
							<view class="btn bgc" @click="getSh('2',ite)">通过</view>
						</view>
					</view>
					<view class="spdel" v-if="ite.right>0&&checkPermi(['wuYe:residentInfo:remove'])" @click.stop="getDelFn(ite.residentId)">删除</view>
				</view>
		</block>
		<!-- 我的点赞，收藏，评论 :data-idx="idx"
					@touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd" :style="'right:'+ite.right+'px'"-->
		<block v-if="type=='wdhd'">
			<view class="mb12 pr"  v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail(ite)">
				<view class="hdlist ">
					<view class="pd12 flex">
						<image :src="ite.avatar?baseUrl+ite.avatar:man" class="mhead flex0"></image>
						<view class="flex1 overh">
							<view class="flexc mb6">
								<view class="name flex1 over">{{ite.nickName}}</view>
								<view class="time flex0 ml10">{{ite.createTime}}</view>
							</view>
							<view class="txt mb8">{{ite.commentContent}}</view>
							<view class="flexc overh mb2">
								<view class="line bgd"></view>
								<view class="txta over flex1" v-if="tabval=='mypl'">{{ite.communityTitle}}</view>
								<view class="txta over flex1" v-else>{{ite.targetTitle}}</view>
								<image :src="rimg" class="rimg ml10"></image>
							</view>
						</view>
					</view>
				</view>
				<!-- <view class="spdel" v-if="ite.right>0&&checkPermi(['wuYe:residentInfo:remove'])" @click.stop="getDelFn(ite.residentId)">删除</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
				}
			},
			tabval:{
				type:String,
				default () {
					return ''
				}
			}
		},
		data(){
			return{
				noiconpimg:require("@/static/images/nodata.png"),
				upimg:require("@/my/static/house/up.png"),
				cara:require("@/my/static/house/cara.png"),
				
				man:require("@/health/static/man.png"),
				woman:require("@/health/static/woman.png"),
				rimg:require("@/static/images/rimga.png"),
				baseUrl:config.baseUrl,
				delBtnWidth:66,//左滑默认宽度
			}
		},
		mounted() {
			
		},
		methods:{
			checkPermi, checkRole,
			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) {
						}
					}
				});
			},
			getSh(type,ite){
				var that=this;
				var str="";
				if(type=='2'){
					str="通过"
				}else if(type=='3'){
					str="不通过"
				}else if(type=='4'){
					str="下架"
				}
				uni.showModal({
					title: '确认'+str,
					content: "是否确认"+str,
					cancelText: '取消',
					confirmText: '确认',
					success: function(res) {
						if (res.confirm) {
							var obj={
								status:type,
								contentId:ite.contentId,
								commentId:ite.commentId,
							}
							that.$emit('getSh',obj)
						} else if (res.cancel) {
						}
					}
				});
			},
			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) {
						}
					}
				});
			},
			//开始触摸滑动
			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;}
// 快递
.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;}
	}
}
// 互动
.pd12{padding: 24rpx;}
.hdlist{background: #FFFFFF;border-radius: 20rpx;position: relative;z-index: 1;
	.mhead{width: 56rpx;height: 56rpx;margin-right: 20rpx;border-radius: 50%}
	.name{font-size: 28rpx;font-weight: bold;color: #272727;height: 56rpx;line-height: 56rpx;}
	.tit{font-weight: 500;font-size: 22rpx;color: #666666;}
	.time{font-weight: 500;font-size: 22rpx;color: #666666;}
	.line{width: 6rpx;height: 28rpx;border-radius: 4rpx;margin-right: 12rpx;
		&.bga{background: #FACA7D;}
		&.bgb{background: #86AFFF;}
		&.bgc{background: #93E9C2;}
		&.bgd{background: #DADADA;}
	}
	.txt{font-weight: 500;font-size: 26rpx;color: #272727;line-height: 36rpx;}
	.txta{font-weight: 500;font-size: 26rpx;color: #666666;}
	.rimg{width: 12rpx;height: 22rpx;}
	.shbtns{border-top: 2rpx solid #DADADA;
		.btn{border-radius: 20rpx;min-width: 110rpx;box-sizing: border-box;padding: 0 16rpx;
height: 52rpx;display: flex;align-items: center;justify-content: center;flex:0 0 auto;margin-left: 20rpx;
			&.bga{border: 2rpx solid #06C770;background: #DAEFE6;color: #06C770;margin-left: 0;}
			&.bgb{border: 2rpx solid #FF6969;;background: #FFE7E7;color: #FF6969;}
			&.bgc{background: #0256FD;color: #FFFFFF;}
		}
	}
}
// 无数据
.nodata{display: flex;flex-direction: column;align-items: center;
	image{width: 440rpx;height: 440rpx;}
	view{font-size: 30rpx;color: #666666;font-weight: bold;}
}
</style>