boschchina-wechat-crm/components/empty-state/index.vue

<template>
	<view class="empty-state" :style="containerStyle">
		<!-- 空状态图标 -->
		<view class="empty-icon-box" :style="iconBoxStyle">
			<image
				v-if="image"
				class="empty-image"
				:src="image"
				mode="aspectFit"
			/>
			<uni-icons
				v-else
				:type="icon"
				:size="iconSize"
				:color="iconColor"
			></uni-icons>
		</view>
		<!-- 提示文字 -->
		<text class="empty-text" :style="textStyle">{{ text }}</text>
		<!-- 副文字（可选） -->
		<text v-if="subText" class="empty-sub-text">{{ subText }}</text>
		<!-- 操作按钮（可选） -->
		<view v-if="showBtn" class="empty-btn" :style="btnStyle" @click="handleClick">
			<text class="empty-btn-text">{{ btnText }}</text>
		</view>
	</view>
</template>

<script setup>
import { computed } from 'vue'

const props = defineProps({
	// 提示文字
	text: {
		type: String,
		default: '暂无数据'
	},
	// 副文字
	subText: {
		type: String,
		default: ''
	},
	// 图标名称（uni-icons type）
	icon: {
		type: String,
		default: 'list'
	},
	// 图标大小
	iconSize: {
		type: Number,
		default: 80
	},
	// 图标颜色
	iconColor: {
		type: String,
		default: '#CCCCCC'
	},
	// 自定义图片（优先级高于icon）
	image: {
		type: String,
		default: '/static/image/public/no-data.png'
	},
	// 是否显示按钮
	showBtn: {
		type: Boolean,
		default: false
	},
	// 按钮文字
	btnText: {
		type: String,
		default: '刷新'
	},
	// 按钮颜色
	btnColor: {
		type: String,
		default: '#4080FF'
	},
	// 上边距（rpx）
	marginTop: {
		type: Number,
		default: 120
	},
	// 下边距（rpx）
	marginBottom: {
		type: Number,
		default: 0
	}
})

const emit = defineEmits(['click'])

const containerStyle = computed(() => {
	return {
		marginTop: (props.marginTop / 2) + 'px',
		marginBottom: (props.marginBottom / 2) + 'px'
	}
})

const iconBoxStyle = computed(() => {
	return {
		width: (props.iconSize * 1.5 / 2) + 'px',
		height: (props.iconSize * 1.5 / 2) + 'px'
	}
})

const textStyle = computed(() => {
	return {
		color: '#999999'
	}
})

const btnStyle = computed(() => {
	return {
		backgroundColor: props.btnColor
	}
})

const handleClick = () => {
	emit('click')
}
</script>

<style scoped>
.empty-state {
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	padding: 60rpx 40rpx;
}

.empty-icon-box {
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: 32rpx;
	border-radius: 50%;
	background: #f5f6f8;
}

.empty-image {
	width: 100%;
	height: 100%;
}

.empty-text {
	font-size: 28rpx;
	color: #999999;
	line-height: 1.5;
	text-align: center;
}

.empty-sub-text {
	font-size: 24rpx;
	color: #BBBBBB;
	margin-top: 12rpx;
	text-align: center;
	line-height: 1.5;
}

.empty-btn {
	margin-top: 40rpx;
	padding: 16rpx 56rpx;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
}

.empty-btn-text {
	font-size: 28rpx;
	color: #FFFFFF;
	font-weight: 500;
}
</style>