warst/warst-h5/components/statusView/index.vue

<template>
	<view class="empty-view">
		<image
			:style="emptyImgStyle"
			:src="require(`@/static/images/com/${imageName}.png`)"
		></image>
		<text class="empty-txt">{{ placeholder }}</text>
	</view>
</template>

<script>
export default {
	name: 'statusView',
	props: {
		imageName: {
			default: 'empty',
			type: String,
		},
		emptyImgStyle: {
			type: Object,
			default: () => ({
				width: '207px',
				height: '207px',
			}),
		},
	},
	computed: {
		placeholder() {
			const types = {
				empty: '暂无数据',
				'load-fail': '数据加载失败，请下拉刷新',
			};
			return types[this.imageName];
		},
	},
};
</script>

<style scoped lang="scss">
.empty-view {
	display: flex;
	flex-direction: column;
	align-items: center;
	background-color: #fff;
	width: 100%;
	padding: 20rpx 0;

	.empty-txt {
		margin-top: 60rpx;
		font-size: 14px;
		color: #a7a7a7;
	}
}
</style>