front-end/mallApp/src/components/app-wrapper-empty.vue

<template>
	<div class="app-empty" :style="{'height: 100%;': !!isEmpty }">
		<div class="app-empty-center" :style="{'text-align: center;': !!isEmpty}">
			<slot v-if="!isEmpty" name="empty_body" />
			<slot v-if="isEmpty && !isLoading" name="empty_content">
				<div class="app-empty__img" :style="{width: pictureWidth}">
					<img :src="src" mode="widthFix" />
				</div>
				<div class="app-empty__title">
					<template v-if="isTitle">
						<span :class="[type==='noData'?'empty_noData':'']">{{ title }}</span>
						<span>{{ content }}</span>
					</template>
					<slot v-else name="empty_title"></slot>
				</div>
			</slot>
			<slot v-else>
				<div>
					<div class="foot-layout" v-if="finished">
						<div class="foot-text">{{finishedText}}</div>
					</div>
					<div class="foot-layout" v-if="isLoading">
						<div class="foot-text">
							<div class="loading"></div>加载中
						</div>
					</div>
				</div>
			</slot>
			<slot name="footer" />
		</div>
	</div>
</template>

<script>
export default {
	name: 'AppWrapperEmpty',
	props: {
		type: {
			type: String,
			default: 'noData'
		},

		// 图片宽度
		pictureWidth: {
			type: String,
			default: '200upx'
		},

		pictureHeight: {
			type: String,
			default: ''
		},

		title: {
			type: String,
			default: '暂无数据'
		},

		// 是否垂直居中
		content: {
			type: String,
			default: ''
		},

		isEmpty: {
			type: Boolean,
			default: false
		},
		isLoading: {
			type: Boolean,
			default: false
		},
		finished: {
			type: Boolean,
			default: false
		},
		finishedText: {
			type: String,
			default: '没有更多了'
		},
		isTitle: {
			type: Boolean,
			default: true
		}
	},
	computed: {
		src() {
			if (this.img) {
				return this.img
			} else if (this.type == 'search') {
				return `${this.$constant.imgUrl}/retail/common/img_noorder.png`
			} else {
				return `${this.$constant.imgUrl}/retail/common/img_nodata.png`
			}
		}
	},
	data() {
		return {}
	}
}
</script>

<style lang="scss" scoped>
	.app-empty {
		width: 100%;
		display: flex;
		align-items: center;

		& .app-empty-center {
			width: 100%;
			margin-bottom: 80upx;
		}

		& .app-empty__img {
			width: 100%;
			text-align: center;
			margin: 116upx auto 50upx;
			& image {
				width: 160upx;
				margin:0 auto;
			}
		}

		& .app-empty__title {
			display: flex;
			flex-direction: column;
			align-items: center;
			font-size: 32upx;
			color: #666666;

			& span {
				font-weight: 400;

				& + span {
					font-weight: initial;
					margin-top: 10upx;
					font-size: 26upx;
				}
			}
			& .empty_noData {
				font-size: 26upx;
			}
		}
	}
	.foot-divider {
		height: 1upx;
		background-color: #dcdada;
		width: 63upx;
		margin: 0 22upx;
	}

	.foot-text {
		font-size: 26upx;
		color: #a1a1a1;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.foot-layout {
		display: flex;
		flex-direction: row;
		justify-content: center;
		align-items: center;
		height: 115upx;
	}

	.loading {
		display: inline-block;
		margin-right: 12upx;
		vertical-align: middle;
		width: 14upx;
		height: 14upx;
		background: 0 0;
		border-radius: 50%;
		border: 2upx solid #e9eaec;
		border-color: #e9eaec #e9eaec #e9eaec #f4a738;
		animation: btn-spin 0.6s linear;
		animation-iteration-count: infinite;
	}

	@keyframes btn-spin {
		0% {
			transform: rotate(0);
		}
		100% {
			transform: rotate(360deg);
		}
	}
</style>