retail-app/components/no-data/no-data.vue

<template>
	<!-- 无数据展示 -->
	<view class="no-data-box">
		<slot v-if="custom"></slot>
		<view v-else class="text-center">
			<view class="flex jcc">
				<image class="status-img" mode="widthFix" v-if="statusImgUrl" :src="statusImgUrl"></image>
			</view>
			<view class="no-data-tips">{{tipsTextCOM}}</view>
		</view>
	</view>
</template>

<script>
	import defaultConfig from '@/config/default.js'
	export default {
		props: {
			statusType: { // 空状态类型
				type: Number,
				default: 1
			},
			custom: Boolean, // 是否自定义插槽
			tipsText: String, // 文案
		},
		data() {
			return {}
		},
		computed: {
			statusImgUrl() {
				let url = ''
				const maps = this.$store.state.emptyStatus.status
				const index = maps.findIndex(item => item.type === this.statusType)
				url = index !== -1 ? defaultConfig.ossImgUrl + maps[index].url : ''
				return url
			},
			tipsTextCOM() {
				let text = ''
				const maps = this.$store.state.emptyStatus.status
				const item = maps.find(item => item.type === this.statusType)
				text = this.tipsText ? this.tipsText : item.name
				return text
			}
		},
		methods: {}
	}
</script>

<style lang="scss" scoped>
	.no-data-box {
		width: 100%;
		height: 100%;
		z-index: 996;
		padding-top: 160rpx;
	}

	.status-img {
		width: 50%;
		margin-bottom: 26rpx;
	}

	.no-data-tips {
		color: #707476;
		font-size: 28rpx;
		line-height: 40rpx;
		// margin-bottom: 34rpx;
		text-align: center;
		padding: 0 50rpx;
	}
</style>