prevent_drowning_app/news/components/box/list.vue

<template>
<view>
	<block v-if="datainfo.length>0">
		<!-- 通知 -->
		<block v-if="type=='notice'">
			<view class="tzlist flex" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail(ite)">
				<image :src="notica" v-if="ite.noticeType==3" class="titimg"></image>
				<image :src="noticb" v-else-if="ite.noticeType==1" class="titimg"></image>
				<image :src="noticc" v-else-if="ite.noticeType==2" class="titimg"></image>
				<view class="titbox flex1">
					<view class="tit">{{ite.noticeTitle}}</view>
					<view class="teplist flext ">
						<view class="imgs flexcc">
							<image :src="time" class="imga"></image>
						</view>
						<view class="txt">{{ite.updateTime||ite.createTime}}</view>
					</view>
					<view class="teplist flext" v-if="ite.address">
						<view class="imgs flexcc">
							<image :src="adr" class="imgb"></image>
						</view>
						<view class="txt">{{ite.address}}</view>
					</view>
					<view class="teptxt overtwo" v-if="ite.noticeContent">
						<rich-text :nodes="filterImages(ite.noticeContent)"></rich-text>
					</view>
				</view>
			</view>
		</block>
		<!-- 新闻 -->
		<block v-if="type=='article'">
			<view class="artlist" v-for="(ite,idx) in datainfo" :key="idx" @click="getDetail(ite.newsId)">
				<view class="over tit">{{ite.newsTitle}}</view>
				<view class="txt overtwo mb10" v-if="ite.newsContent"><rich-text :nodes="filterImages(ite.newsContent)"></rich-text></view>
				<view class="nfoot flexc">
					<image :src="look"></image>
					<text>{{ite.viewsNum}}</text>
					<view class="flex1"></view>
					<text>{{ite.releaseTime||KaTime(ite.createTime)}}</text>
				</view>
			</view>
		</block>
		<!-- 视频 -->
		<block v-if="type=='avideo'">
			<view class="avideo" v-for="(ite,idx) in datainfo" :key="idx">
				<video v-if="ite.newUrl[0]" id="myVideo" :src="baseUrl+ite.newUrl[0]"  controls></video>
				<view class="tit">{{ite.newsTitle}}</view>
				<view class="nfoot flexc">
					<image :src="look"></image>
					<text>{{ite.viewsNum}}</text>
					<view class="flex1"></view>
					<text>{{ite.releaseTime||KaTime(ite.createTime)}}</text>
				</view>
			</view>
		</block>
		<view class="shax" v-if="wtdt">{{wtdt}}</view>
	</block>
	
	<!-- 无数据 -->
	<view class="nodata" v-else>
		<image :src="nodata"></image>
		<view>当前暂无信息喔</view>
	</view>
</view>
</template>

<script>
	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
				}
			},
		},
		data(){
			return{
				noiconpimg:require("@/static/images/nodata.png"),
				nodata:require("@/work/images/nodata.png"),
				notica:require("@/news/images/notice/notica.png"),
				noticb:require("@/news/images/notice/noticb.png"),
				noticc:require("@/news/images/notice/noticc.png"),
				time:require("@/news/images/notice/time.png"),
				adr:require("@/news/images/notice/adr.png"),
				look:require("@/static/images/home/look.png"),
				baseUrl:config.baseUrl,
			}
		},
		mounted() {
			
		},
		methods:{
			checkPermi, checkRole,
			getDetail(e){
				this.$emit('getDetail',e)
			},
			// 过滤掉图片
			filterImages(html) {
			    if (!html) return '';
			    return html.replace(/<img[^>]*>/gi, '');
			},
			KaTime(val){
				if(val){
					return val.substring(0,10)
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
.tzlist{display: flex;padding-top: 30rpx;position: relative; 
	&::before{content: '';top: 54rpx;left: 24rpx;position: absolute;width: 2rpx;background-color: #E6E6E6;bottom: -30rpx;}
	.titimg{width: 48rpx;height: 48rpx;margin-right: 18rpx;flex: 0 0 auto;}
	.titbox{border-bottom: 2rpx solid #E6E6E6;padding-bottom: 4rpx;
		.tit{font-weight: bold;font-size: 30rpx;color: #000000;line-height: 48rpx;margin-bottom: 12rpx;}
		.teplist{margin-bottom: 12rpx;
			.imgs{width: 26rpx;height: 28rpx;margin-right: 18rpx;
				.imga{width: 26rpx;height: 26rpx;}
				.imgb{width: 22rpx;height: 28rpx;}
			}
		}
		.txt{font-weight: 500;font-size: 26rpx;color: #666666;line-height: 34rpx;}
		.teptxt{font-weight: 500;font-size: 30rpx;color: #000000;line-height: 42rpx;margin-bottom:20rpx;padding-top: 8rpx;}
	}
}
// 新闻
.artlist{width: 100%;padding: 22rpx 0rpx;border-bottom: 2rpx solid #E6E6E6;
	.tit{font-weight: bold;font-size: 30rpx;color: #161A1E;margin-bottom: 16rpx;}
	.txt{font-weight: 500;font-size: 24rpx;color: #666666;}
	.nfoot{
		image{width: 24rpx;height: 16rpx;margin-right: 10rpx;}
		text{font-weight: 500;font-size:24rpx;color: #949695;}
	}
}
.avideo{padding:40rpx 0 28rpx;border-bottom: 2rpx solid #E6E6E6;
	video{width: 100%;height: 342rpx;margin-bottom: 16rpx;}
	.tit{font-weight: bold;font-size: 30rpx;color: #161A1E;margin-bottom: 12rpx;}
	.nfoot{
		image{width: 24rpx;height: 16rpx;margin-right: 10rpx;}
		text{font-weight: 500;font-size:24rpx;color: #949695;}
	}
}
// 无数据
.nodata{display: flex;flex-direction: column;align-items: center;padding-top: 120rpx;
	image{width: 470rpx;height: 470rpx;margin-bottom: 4rpx;}
	view{font-size: 26rpx;color: #666666;font-weight: 500;line-height: 42rpx;}	
}
</style>