Empty 空状态

				
<template>
	<zk-theme type="page" :padding="30" showBack navbarTitle="Empty空状态">
		<!-- 基础用法 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="基础用法" />
			<zk-empty icon="inbox-line" description="暂无数据" iconSize="120" />
		</zk-theme>

		<!-- 购物车为空1 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="购物车为空" />
			<zk-empty image="/static/empty-cart1.png" :imageWidth="380" description="购物车还是空的，快去挑选心仪的商品吧">
				<zk-button text="去逛逛" background="#1989fa" round @click="onGoShopping" />
			</zk-empty>
		</zk-theme>

		<!-- 购物车为空2 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="购物车为空" />
			<zk-empty image="/static/empty-cart0.png" :imageWidth="380" description="购物车还是空的，快去挑选心仪的商品吧">
				<zk-button text="去逛逛" background="#1989fa" round @click="onGoShopping" />
			</zk-empty>
		</zk-theme>

		<!-- 搜索无结果 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="搜索无结果" />
			<zk-empty icon="search-line" icon-color="#1989fa" description="未找到相关商品，换个关键词试试吧">
				<zk-button text="更换关键词" background="#1989fa" plain round @click="onChangeKeyword" />
			</zk-empty>
		</zk-theme>

		<!-- 网络错误 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="网络错误" />
			<zk-empty icon="wifi-off-line" icon-color="#ff4d4f" description="网络连接失败，请检查网络设置后重试">
				<zk-button text="重新加载" background="#ff4d4f" round @click="onRefresh" />
			</zk-empty>
		</zk-theme>

		<!-- 收藏列表 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="收藏列表" />
			<zk-theme type="card" :padding="30" :radius="12" border>
				<zk-empty icon="shopping-bag-2-line" icon-color="#ff9c9c" description="暂无收藏的商品" :margin-top="20">
					<zk-button text="去发现" background="#1989fa" plain round @click="onGoExplore" />
				</zk-empty>
			</zk-theme>
		</zk-theme>

		<!-- 消息列表 -->
		<zk-theme type="card" :padding="30" :radius="16" margin="0 0 40rpx 0">
			<zk-text type="secondary" :size="28" weight="bold" margin="0 0 20rpx 0" text="消息列表" />
			<zk-theme type="card" :padding="30" :radius="12" border height="480rpx">
				<zk-empty icon="chat-1-line" icon-color="#91d5ff" description="暂无新消息" :margin-top="60" />
			</zk-theme>
		</zk-theme>
	</zk-theme>
</template>

<script>
	export default {
		methods: {
			onGoShopping() {
				uni.showToast({
					title: '去购物',
					icon: 'none'
				})
			},
			onChangeKeyword() {
				uni.showToast({
					title: '更换关键词',
					icon: 'none'
				})
			},
			onRefresh() {
				uni.showToast({
					title: '刷新页面',
					icon: 'none'
				})
			},
			onGoExplore() {
				uni.showToast({
					title: '去发现',
					icon: 'none'
				})
			}
		}
	}
</script>

<style>

</style>