prevent_drowning_app/components/box/list.vue

<template>
<view>
	<block v-if="datainfo.length>0">
		<!-- 新闻 -->
		<block v-if="type=='article'">
			<view class="newlist" 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="newlist" 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="noiconpimg"></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"),
				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>
// 新闻
.newlist{width: 100%;background: #FFFFFF;border-radius: 20rpx;margin-bottom: 20rpx;padding: 20rpx 26rpx;
	.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;}
	}
	video{width: 100%;height: 342rpx;margin-bottom: 16rpx;}
}

// 无数据
.nodata{display: flex;flex-direction: column;align-items: center;padding-top: 48rpx;
	image{width: 336rpx;height: 284rpx;margin-bottom: 26rpx;}
	view{font-size: 24rpx;color: #666666;font-weight: 500;}	
}
</style>