sugarpark-mini-program/components/Status/Status.vue

<template>
	<view class="container flex-center">
		<view class="no-pos flex-center"  >
			<image :src="`${assetsUrl}status-no-data.png`" mode="aspectFit" class="no-pos-img" v-if="type==='noData'"></image>
			<image :src="`${assetsUrl}status-authing.png`" mode="aspectFit" class="no-pos-img" v-else-if="type==='authing'"></image>
			<image :src="`${assetsUrl}status-deleted.png`" mode="aspectFit" class="no-pos-img" v-else-if="type==='deleted'"></image>
			<image :src="`${assetsUrl}status-frozen.png`" mode="aspectFit" class="no-pos-img" v-else-if="type==='frozen'"></image>
			<image :src="`${assetsUrl}status-no-msg.png`" mode="aspectFit" class="no-pos-img" v-else-if="type==='noMsg'"></image>
			<image :src="`${assetsUrl}status-no-pos.png`" mode="aspectFit" class="no-pos-img" v-else-if="type==='noPos'"></image>
			<image :src="`${assetsUrl}status-no-net.png`" mode="aspectFit" class="no-pos-img" v-else-if="type==='noNet'"></image>
			<text class="no-pos-text font24 fw400" v-if="text">{{text}}</text>
			<view class="no-pos-btn font24 fw400" @click="btnClick" v-if="btnText">
				{{btnText}}
			</view>
		</view>
	</view>
</template>

<script>
	/**
	 * "noData":无数据，
	 * "noNet":无网络
	 * "authing":审核中
	 * "deleted":已删除
	 * "frozen":已冻结
	 * "noMsg":无消息
	 * "noPos":无定位
	 */
	export default {
		name:"Status",
		props:{
			type:{
				type:String,
				default:"noData"
			},
			text:{
				type:String,
				default:""
			},
			btnText:{
				type:String,
				default:""
			}
		},
		data() {
			return {
				assetsUrl: this.$util.assetsUrl,
			};
		},
		methods:{
			btnClick(){
				this.$emit('btnEvent');
			}
		}
	}
</script>

<style lang="scss" scoped>
.container{
	width: 100%;
	height: 500rpx;
	.no-pos{
		flex-direction: column;
		.no-pos-img{
			width: 400rpx;
			height: 400rpx;
		}
		.no-pos-text{
			color: $fontcolor3;
			margin-top: -30rpx;
		}
		.no-pos-btn{
			width: 136rpx;
			height: 48rpx;
			background: $primary;
			border-radius: 24rpx;
			line-height: 48rpx;
			text-align: center;
			color: $fontcolor5;
			margin-top: 50rpx;
		}
	}
}
</style>