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

<template>
<view>
	<!-- 第一种样式  人员管理-->
	<block v-if="datainfo.length>0">
		<!-- 我的互动 -->
		<block v-if="type=='myhd'">
			<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 pd12 flex">
					<image :src="man" class="mhead flex0"></image>
					<view class="flex1 overh">
						<view class="flexc mb6">
							<view class="name flex1 over">喜欢耶耶耶</view>
							<view class="tit flex0 ml10">点赞了你的文章</view>
							<view class="time flex0 ml10">02-26</view>
						</view>
						<view class="flexc overh mb4">
							<view class="line bga"></view>
							<view class="txt over flex1">物业服务费缴费公告</view>
							<image :src="rimg" class="rimg ml10"></image>
						</view>
					</view>
				</view>
				<view class="spdel" v-if="ite.right>0&&checkPermi(['wuYe:residentInfo:remove'])" @click.stop="getDelFn(ite.residentId)">删除</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>
		<!-- 我的点赞，收藏，评论 -->
		<block v-if="type=='wdhd'">
			<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">{{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
				}
			},
			clcxList:{
				type: Array,
				default () {
					return []
				}
			},
			rymmList:{
				type: Array,
				default () {
					return []
				}
			},
				
			tabval:{
				type:String,
				default () {
					return ''
				}
			}
		},
		data(){
			return{
				noiconpimg:require("@/static/nodata.png"),
				man:require("@/people/static/people/man.png"),
				woman:require("@/people/static/people/woman.png"),
				rimg:require("@/static/images/rimga.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) {
						}
					}
				});
			},
			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) {
						}
					}
				});
			},
			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;}
// 互动
.pd12{padding: 24rpx;}
.hdlist{background: #FFFFFF;border-radius: 20rpx;position: relative;z-index: 1;
	.mhead{width: 56rpx;height: 56rpx;margin-right: 20rpx;}
	.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>