139 lines
2.9 KiB
Vue
139 lines
2.9 KiB
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>
|