yogaApp/pages/error/nonet.vue

<template>
	<view>
		<view class="loginBack">
			<view class="formregion">
				<view class="logo">
					<image :src="define" class="define" mode="scaleToFill"></image>
				</view>
			</view>
			<uni-load-more status="loading"  />
		</view>
		<!-- <view class="padd">
				 
				<view class="margin-bottom text-center margin-top">
					<image class="t-img padding-xl"  src="/static/image/nonet.png"></image>
					<view class="text-center t-full padding-xl">
						无法连接网络，请检查网络并刷新重试.
					</view>
				</view>
				
				<button class="cu-btn block bg-blue lg" style="margin-top:100upx;width:300upx; margin-left:auto;margin-right:auto" @click="tocheck">
					<text class="text-white">检查网络</text> 
				</button>
				
				
		</view> -->
	</view>

	</view>
</template>

<script>
	import { ifnonet } from '../../utils/utils.js';
	export default {
		data() {
			return {
				define: require("@/static/image/logo.png"),
				contentText: {
					contentdown: ' ',
					contentrefresh: ' ',
					contentnomore: ' '
				}
			};
		},
		onLoad() {
			var that=this;
			if(!ifnonet()){
				// 如果网络联通，重启动app
				// #ifdef APP-PLUS
				//连接成功重启app
				plus.runtime.restart();
				// #endif
			}
			else{
				setInterval(function() {
					that.tocheck();
				}, 360);
			}
		},
		onBackPress(options) {
			if (options.from === 'backbutton') {
		      // 来自顶部菜单的返回按钮
		      // 在这里处理你的逻辑
		      console.log('返回按钮被点击');
		      // 返回 true 表示阻止默认行为，返回 false 则不阻止
			  if(ifnonet()){
				  // 无网络阻止返回
				  return true;
			  }
			  else {
				// 有网格重启app
			  	// #ifdef APP-PLUS
			  	//连接成功重启app
			  	plus.runtime.restart();
			  	// #endif
				return false;
			  }
		    }
			else{
				// 其他场景的返回事件
				return false;
			}
		},
		methods: {
			tocheck(){
				if(ifnonet()){
					// uni.showToast({
					// 	title: '网络连接异常！请再次刷新重试！',
					// 	icon:'none',
					// 	duration: 2000
					// });
				}
				else{
					// #ifdef APP-PLUS
					//连接成功重启app
					plus.runtime.restart();
					// #endif
				}
			}
		}
	}
</script>

<style>
	page {
		height: 100Vh;
		width: 100vw;
		background: #f5f5f5;
	}
	.loginBack {
		height: 100vh;
		padding:20% 50rpx 200rpx 50rpx;
		width: 100%;
		background: linear-gradient(180deg, #a4ceff 0%, #ffffff 100%);
		overflow: hidden;
	}
	.formregion {
		width: 100%;
		padding: 253rpx 40rpx;
		border-radius: 10px;
		position: relative;
		display: block;
		overflow: hidden;
	}
	.logo{
		position: absolute;
		top: 50rpx;
		left: 0;
		width: 100%;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;
	}
	.define {
		width: 150rpx;
		height: 150rpx;
	}
	
	.t-full{
		width:100%;
	}
	.t-img{
		width:300upx;
		height:300upx;
		margin-left:auto;
	}
	.tx {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 150upx;
	}

	.txgd {
		position: absolute;
		right: 20upx;
		top: 10upx;
	}

	.ltx {
		position: relative;
		overflow: hidden;
		width: 100%;
		height: 80upx;
		line-height: 80upx;
	}

	.ltxn {
		position: relative;
		overflow: hidden;
		margin-top: 20upx;
		width: 100%;
		height: 160upx;
		line-height: 160upx;
	}

	.fright {
		position: absolute;
		right: 20upx;
		top: 0;
	}

	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}

	.padd {
		padding: 20upx;
	}

	.cu-padd-bottom {
		margin-bottom: 20upx;
	}

	.iconimg {
		width: 280upx;
		height: auto;
		margin: 28upx 16upx 0 0;
	}
</style>