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

<template>
<view>
	<!-- 第一种样式  人员管理-->
	<block v-if="datainfo.length>0">
		<!-- 社区资讯 -->
		<block v-if="type=='newssq'">
			<view class="walists" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail(ite.communityId)">
				<view class="watop">
					<view class="watit">
						<view class="tit">{{ite.communityTitle}}<text class="cir"></text></view>
					</view>
					<view class="wacoma overtwo"><rich-text :nodes="ite.communityContent"></rich-text></view>
					<view class="wacomb">{{ite.publishTime}}</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(ite.suggestionId)"
				:data-idx="idx"
				@touchstart="drawStart" @touchmove="drawMove" @touchend="drawEnd" :style="'right:'+ite.right+'px'"
			>
				<view class="watop watopcom">
					<view class="watit">
						<view class="tit">{{ite.title}}</view>
						<view class="txt" :class="ite.status==1?'co01':'coa'">{{kaType(ite.status,tsjyList)}}</view>
					</view>
					<view class="wacoma overtwo">{{ite.content}}</view>
					<view class="wacomb">{{ite.createTime}}</view>
				</view>
				<!--  -->
				<view class="spdel" v-if="ite.right>0&&checkPermi(['wuYe:suggestion:remove'])" @click.stop="getDelFn(ite.suggestionId)">删除</view>
			</view>
			<!-- checkPermi(['system:menuFood:remove'])&& -->
			
		</block>
		<!-- 党建资讯 -->
		<block v-if="type=='newsdj'">
			<view class="newlists" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail(ite.partyId)" 
			>
				<view class="tit">{{ite.partyTitle}}</view>
				<view class="txt overtwo"><rich-text :nodes="ite.partyContent"></rich-text></view>
				<view class="stabox flexc">
					<view class="time flex1">{{ite.publishTime}}</view>
					<view class="btns flexc">
						<image :src="star" class="imga"></image>42
						<!-- <image :src="stara" class="imga"></image>42 -->
					</view>
					<view class="btns flexc">
						<image :src="eye" class="imgb"></image>1361
					</view>
				</view>
		
			</view>
			<!-- checkPermi(['system:menuFood:remove'])&& -->
		</block>
		<!-- 评论信息 -->
		<block v-if="type=='comment'">
			<view class="pllist flex" v-for="(ite,idx) in datainfo" :key="`yj${idx}`">
				<image :src="ite.commentUser.avatar?baseUrl+ite.commentUser.avatar:head" class="head"></image>
				<view class="flex1 overh">
					<view class="flexat mb14 ">
						<view class="plname flex1 over">{{ite.commentUser.nickName}}</view>
						<view class="plrbtn flexc flex0">
							<image :src="nicond" v-if="ite.isLike=='Y'"></image>
							<image :src="niconb" class="imga" v-else></image>
							<view>点赞</view>
						</view>
						<view class="plrbtn flexc flex0">
							<image :src="nicone" class="imgb"></image>
							<view>回复</view>
						</view>
					</view>
					<view class="infotxt mb6">{{ite.content}}<view class="infotime">{{ite.createDate}}</view></view>
				
					<!-- 二级回复 -->
					<view class="pllist flex" v-for="(aite,aidx) in ite.childrenList" :key="`ej${aidx}`">
						<image :src="aite.commentUser.avatar?baseUrl+aite.commentUser.avatar:head" class="head"></image>
						<view class="flex1 overh">
							<view class="flexat mb14 ">
								<view class="plname flex1 over">{{aite.commentUser.nickName}}</view>
								<view class="plrbtn flexc flex0">
									<image :src="nicond" v-if="aite.isLike=='Y'"></image>
									<image :src="niconb" class="imga" v-else></image>
									<view>点赞</view>
								</view>
								<view class="plrbtn flexc flex0">
									<image :src="nicone" class="imgb"></image>
									<view>回复</view>
								</view>
							</view>
							<view class="infotxt mb6">{{aite.content}}<view class="infotime">{{aite.createDate}}</view></view>
						</view>
					</view>
					<view class="flexc" v-if="ite.childrenListCount>0">
						<view class="zhanbox flexc" @click.stop="getZhanFn(ite,idx)">
							展开{{ite.childrenListCount}}条回复<image :src="upimg" class="zhan"></image>
						</view>
						<view class="zhanbox flexc ml10" @click.stop="getShouFn(ite,idx)">收起<image :src="upimg"></view>
					</view>
					<view style="height: 16rpx;" v-else></view>	
				</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
				}
			},
			tsjyList:{
				type:Array,
				default () {
					return []
				}
			}
		},
		data(){
			return{
				noiconpimg:require("@/static/images/nodata.png"),
				rimg:require('@/static/images/rimg.png'),
				stara:require('@/news/static/news/stara.png'),
				star:require('@/news/static/news/starb.png'),
				eye:require('@/news/static/news/eye.png'),
				nicona:require('@/news/static/news/nicona.png'),
				niconb:require('@/news/static/news/niconb.png'),
				niconc:require('@/news/static/news/niconc.png'),
				nicond:require('@/news/static/news/nicond.png'),
				nicone:require('@/news/static/news/nicone.png'),
				head:require('@/news/static/news/head.png'),
				upimg:require('@/mine/static/house/up.png'),
				baseUrl:config.baseUrl,
				delBtnWidth:66,//左滑默认宽度
			}
		},
		mounted() {
			
		},
		methods:{
			checkPermi, checkRole,
			kaType(data, list) {
				return selectDictValue(list, data);
			},
			getDetail(e){
				this.$emit('getDetail',e)
			},
			getZhanFn(ite,idx){
				var obj={
					ite:ite,
					idx:idx
				}
				this.$emit("getZhanFn",obj)
			},
			getShouFn(idx){
				
			},
			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) {}
				});
			},
			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) {
				// 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 30rpx 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;
			}
		}
		.wacoma{font-weight: 500;font-size: 26rpx;color: #666666;line-height: 36rpx;margin-bottom: 24rpx;}
		.wacomb{font-weight: 500;font-size: 24rpx;color: #AAAAAA;}
	}
	.watopcom{background-color: #ffffff;border-radius: 20rpx;position: relative;z-index: 1;}
	.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;}
	}
}
.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;}
//资讯
.newlists{
	background: #FFFFFF;padding: 22rpx 24rpx;margin-bottom: 24rpx;
	border-radius: 20rpx;
	.tit{font-size: 32rpx;font-weight: bold;color: #272727;line-height: 48rpx;margin-bottom:16rpx;}
	.txt{font-size: 24rpx;color: #666666;line-height: 36rpx;margin-bottom: 32rpx;}
	.stabox{
		.time{font-weight: 500;font-size: 24rpx;color: #AAAAAA;line-height: 36rpx;}
		.btns{font-weight: 500;font-size: 22rpx;color: #666666;line-height: 36rpx;min-width: 100rpx;box-sizing: border-box;margin-left: 20rpx;
		.imga{width: 24rpx;height: 22rpx;margin-right: 8rpx;}
		.imgb{width: 24rpx;height: 18rpx;margin-right: 10rpx;}
		}	
	}
}
//评论
.pllist{padding-top: 20rpx;margin-bottom: 16rpx;border-bottom: 2rpx solid #DADADA;
	.head{width: 40rpx;height: 40rpx;margin-right: 18rpx;flex: 0 0 auto;}
	.plname{font-weight: bold;font-size: 30rpx;color: #161616;}
	.plrbtn{margin-left: 36rpx;
		image{width: 26rpx;height: 24rpx;margin-right: 16rpx;
			&.imga{width: 26rpx;height: 26rpx;}
			&.imgb{width: 26rpx;height: 22rpx;}
		}
		view{font-weight: bold;font-size: 24rpx;color: #314081;}
	}
	.infotxt{font-weight: 500;font-size: 26rpx;color: #161616;line-height: 40rpx;
		&:before {content: "";float: right;width: 0;height: calc(100% - 16px);background: red;}
		.infotime{font-weight: 500;font-size: 24rpx;color: #666666; float: right;clear: both;}	
	}
	.pllist{
		padding-top: 0;border-bottom: none;margin-bottom: 0;
	}
	.zhanbox{font-weight: 500;font-size: 24rpx;color: #AAAAAA;padding: 16rpx 0;
		image{width: 20rpx;height: 12rpx;margin-left: 18rpx;transition: all 0.3s;
			&.zhan{transform: rotate(-180deg);}
		}
	}
}
// 无数据
.nodata{display: flex;flex-direction: column;align-items: center;
	image{width: 440rpx;height: 440rpx;}
	view{font-size: 30rpx;color: #666666;font-weight: bold;}
}
</style>