fanxing-shop/components/no-data/no-data.vue

<template>
	<!-- 无数据展示 -->
	<view class="no-data-container" :style="{top: top === 0 ? 0 : `${navBarHeight + topCOM}px`}">
		<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>
				<u-button :customStyle="{fontSize: '32rpx'}" v-if="buttonTextCOM" type="primary" :text="buttonTextCOM" shape="circle"
					@click="buttonHandle">
				</u-button>
				<view v-if="login" style="margin-top: 20rpx;">
					<u-button :customStyle="{fontSize: '32rpx'}" text="暂不登录" shape="circle" @click="inBuyer">
					</u-button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
		toPx
	} from '@/utils/calculate.js'
	// import defaultConfig from '@/config/default.js'
	export default {
		props: {
			top: { // 顶部位置 设置0则置顶  不设置则根据顶部导航高度自适应
				type: [Number, String],
				default: ''
			},
			statusType: { // 空状态类型
				type: Number,
				default: 8
			},
			custom: Boolean, // 是否自定义插槽
			tipsText: String, // 文案
			buttonText: String,
			login: Boolean // 是否是登录按钮
		},
		data() {
			return {
				navBarHeight: this.$getSS('navBarHeight')
			}
		},
		computed: {
			topCOM() {
				return toPx(this.top)
			},
			// 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
			// },
			buttonTextCOM() {
				let text = ''
				if (this.login) {
					text = '去登录'
				} else {
					text = this.buttonText
				}
				if (this.statusType === 8) {
					text = ''
				}
				return text
			},
			tipsTextCOM() {
				let text = ''
				if (this.login) {
					text = '您还未登录哦  点击下方按钮去登录或者去首页逛逛'
				} else {
					text = this.tipsText
				}
				if (this.statusType === 8) {
					text = '暂无数据'
				}
				return text
			}
		},
		methods: {
			// 去首页
			inBuyer() {
				this.$setSS('__platformType', 1)
				this.$Router.replace({
					name: 'bus'
				})
			},
			buttonHandle() {
				this.$emit('buttonHandle')
				if (this.login) {
					this.$navigateTo({
						name: 'login'
					})
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.no-data-container {
		position: fixed;
		left: 0;
		width: 100%;
		bottom: 0;
		padding: 24rpx 18rpx 0;
		// background-color: $bg-color-main;
		z-index: 996;

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

		.no-data-box {
			border-radius: 24rpx 24rpx 0 0;
			// background-color: #fff;
			width: 100%;
			height: 100%;
			padding: 180rpx 34rpx;
		}

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