dev/dcp-app-gate/components/rf-no-data/index.vue

<template>
	<view class="rf-no-data hideToShow" :style="{ backgroundColor: bgColor }">
		<view class="image"
			><image :src="custom == true ? notFoundImg : noNetWorkImg"></image
		></view>
		<!-- 网络连接失败默认显示内容 -->
		<view class="content" v-if="netType == 'none' && custom == false">
			<text class="title" :style="{ color: mainColor }">{{ mainText }}</text>
			<text class="desc" :style="{ color: viceColor }">{{ viceText }}</text>
			<!-- #ifdef MP -->
			<!--<button class="btn" type="default" @tap="setting(true)">刷新试试</button>-->
			<!-- #endif -->
			<!-- #ifdef APP-PLUS -->
			<!--<button class="btn" type="default" @tap="setting(netWorkStatus)">{{ netWorkStatus ? '刷新试试' : '去设置' }}</button>-->
			<!-- #endif -->
		</view>
		<!-- 自定义内容 -->
		<slot />
		<view class="back">
			<text class="spec-color" @tap="navTo('/pages/index/index')"
				>返回主页</text
			>
		</view>
		<slot name="refresh" />
	</view>
</template>

<script>
import { mapGetters } from 'vuex';
// import settings from '@/library/settings.js';
export default {
	props: {
		isShow: {
			type: Boolean,
			default: false
		},
		/* 背景颜色自定义 */
		bgColor: {
			type: String,
			default: '#ffffff'
		},
		/* 标题颜色自定义 */
		mainColor: {
			type: String,
			default: '#373a40'
		},
		/* 描述颜色自定义 */
		viceColor: {
			type: String,
			default: '#8b8b8b'
		},
		// 是否开启自定义
		custom: {
			type: Boolean,
			default: false
		}
	},
	computed: {
		...mapGetters(['networkStatus'])
	},
	data() {
		return {
			type: '',
			netType: this.networkType,
			mainText: '网络居然崩溃了',
			viceText: '别紧张,去检测一下网络设置',
			notFoundImg: this.$mAssetsPath.notFoundImg,
			noNetWorkImg: this.$mAssetsPath.noNetWorkImg
		};
	},
	methods: {
		setting(status) {
			/* 检查到网络已打开,请点击按钮手动刷新数据 */
			if (status) {
				this.$emit('handle', status);
				/* 如果没有网络,打开系统设置检查网络连接 */
			}
			// else {
			// 	settings.open(settings.SETTINGS);
			// }
		},
		navTo(route) {
			this.$mRouter.reLaunch({ route });
		}
	}
};
</script>

<style lang="scss" scoped>
.rf-no-data {
	width: 100%;
	height: 100vh;
	display: flex;
	align-items: center;
	justify-content: center;
	flex-direction: column;
	.image {
		width: 60vw;
		height: 40vw;
		margin-bottom: 20upx;
		image {
			width: 100%;
			height: 100%;
		}
	}
	.content {
		width: 100%;
		display: flex;
		align-items: center;
		flex-direction: column;
		justify-content: center;
		letter-spacing: 1upx;
		.title {
			font-size: $font-lg;
			color: $font-color-dark;
		}
		.desc {
			font-size: 28upx;
			margin-top: 6upx;
		}
		.btn {
			width: 160upx;
			height: 65upx;
			color: #868d91;
			font-size: 24upx;
			margin-top: 34upx;
			border-radius: 36upx;
			border: 1upx solid #d4d4d4;
		}
		.btn::after {
			border: none;
		}
	}
	.back {
		margin: 300upx 0 40upx;
	}
}
</style>