web-base-h5/uni_modules/uview-ui/components/u-no-network/u-no-network.vue

<template>
	<u-overlay
	    :show="!isConnected"
		:zIndex="zIndex"
	    @touchmove.stop.prevent="noop"
		:customStyle="{
			backgroundColor: '#fff',
			display: 'flex',
			justifyContent: 'center',
		}"
	>
		<view
		    class="u-no-network"
		>
			<u-icon
			    :name="image"
			    size="150"
			    imgMode="widthFit"
			    class="u-no-network__error-icon"
			></u-icon>
			<text class="u-no-network__tips">{{tips}}</text>
			<!-- 只有APP平台，才能跳转设置页，因为需要调用plus环境 -->
			<!-- #ifdef APP-PLUS -->
			<view class="u-no-network__app">
				<text class="u-no-network__app__setting">请检查网络，或前往</text>
				<text
				    class="u-no-network__app__to-setting"
				    @tap="openSettings"
				>设置</text>
			</view>
			<!-- #endif -->
			<view class="u-no-network__retry">
				<u-button
				    size="mini"
				    text="重试"
				    type="primary"
					plain
				    @click="retry"
				></u-button>
			</view>
		</view>
	</u-overlay>
</template>

<script>
	import props from './props.js';

	/**
	 * noNetwork 无网络提示
	 * @description 该组件无需任何配置，引入即可，内部自动处理所有功能和事件。
	 * @tutorial https://www.uviewui.com/components/noNetwork.html
	 * @property {String}			tips 	没有网络时的提示语 （默认：'哎呀，网络信号丢失' ）
	 * @property {String | Number}	zIndex	组件的z-index值 
	 * @property {String}			image	无网络的图片提示，可用的src地址或base64图片 
	 * @event {Function}			retry	用户点击页面的"重试"按钮时触发
	 * @example <u-no-network></u-no-network>
	 */
	export default {
		name: "u-no-network",
		mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
		data() {
			return {
				isConnected: true, // 是否有网络连接
				networkType: "none", // 网络类型
			}
		},
		mounted() {
			this.isIOS = (uni.getSystemInfoSync().platform === 'ios')
			uni.onNetworkStatusChange((res) => {
				this.isConnected = res.isConnected
				this.networkType = res.networkType
				this.emitEvent(this.networkType)
			})
			uni.getNetworkType({
				success: (res) => {
					this.networkType = res.networkType
					this.emitEvent(this.networkType)
					if (res.networkType == 'none') {
						this.isConnected = false
					} else {
						this.isConnected = true
					}
				}
			})
		},
		methods: {
			retry() {
				// 重新检查网络
				uni.getNetworkType({
					success: (res) => {
						this.networkType = res.networkType
						this.emitEvent(this.networkType)
						if (res.networkType == 'none') {
							uni.$u.toast('无网络连接')
							this.isConnected = false
						} else {
							uni.$u.toast('网络已连接')
							this.isConnected = true
						}
					}
				})
				this.$emit('retry')
			},
			// 发出事件给父组件
			emitEvent(networkType) {
				this.$emit(networkType === 'none' ? 'disconnected' : 'connected')
			},
			async openSettings() {
				if (this.networkType == "none") {
					this.openSystemSettings()
					return
				}
			},
			openAppSettings() {
				this.gotoAppSetting()
			},
			openSystemSettings() {
				// 以下方法来自5+范畴，如需深究，请自行查阅相关文档
				// https://ask.dcloud.net.cn/docs/
				if (this.isIOS) {
					this.gotoiOSSetting()
				} else {
					this.gotoAndroidSetting()
				}
			},
			network() {
				var result = null
				var cellularData = plus.ios.newObject("CTCellularData")
				var state = cellularData.plusGetAttribute("restrictedState")
				if (state == 0) {
					result = null
				} else if (state == 2) {
					result = 1
				} else if (state == 1) {
					result = 2
				}
				plus.ios.deleteObject(cellularData)
				return result
			},
			gotoAppSetting() {
				if (this.isIOS) {
					var UIApplication = plus.ios.import("UIApplication")
					var application2 = UIApplication.sharedApplication()
					var NSURL2 = plus.ios.import("NSURL")
					var setting2 = NSURL2.URLWithString("app-settings:")
					application2.openURL(setting2)
					plus.ios.deleteObject(setting2)
					plus.ios.deleteObject(NSURL2)
					plus.ios.deleteObject(application2)
				} else {
					var Intent = plus.android.importClass("android.content.Intent")
					var Settings = plus.android.importClass("android.provider.Settings")
					var Uri = plus.android.importClass("android.net.Uri")
					var mainActivity = plus.android.runtimeMainActivity()
					var intent = new Intent()
					intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS)
					var uri = Uri.fromParts("package", mainActivity.getPackageName(), null)
					intent.setData(uri)
					mainActivity.startActivity(intent)
				}
			},
			gotoiOSSetting() {
				var UIApplication = plus.ios.import("UIApplication")
				var application2 = UIApplication.sharedApplication()
				var NSURL2 = plus.ios.import("NSURL")
				var setting2 = NSURL2.URLWithString("App-prefs:root=General")
				application2.openURL(setting2)
				plus.ios.deleteObject(setting2)
				plus.ios.deleteObject(NSURL2)
				plus.ios.deleteObject(application2)
			},
			gotoAndroidSetting() {
				var Intent = plus.android.importClass("android.content.Intent")
				var Settings = plus.android.importClass("android.provider.Settings")
				var mainActivity = plus.android.runtimeMainActivity()
				var intent = new Intent(Settings.ACTION_SETTINGS)
				mainActivity.startActivity(intent)
			}
		}
	}
</script>

<style lang="scss" scoped>
	@import "../../libs/css/components.scss";

	.u-no-network {
		@include flex(column);
		justify-content: center;
		align-items: center;
		margin-top: -100px;

		&__tips {
			color: $u-tips-color;
			font-size: 14px;
			margin-top: 15px;
		}

		&__app {
			@include flex(row);
			margin-top: 6px;

			&__setting {
				color: $u-light-color;
				font-size: 13px;
			}

			&__to-setting {
				font-size: 13px;
				color: $u-primary;
				margin-left: 3px;
			}
		}

		&__retry {
			@include flex(row);
			justify-content: center;
			margin-top: 15px;
		}
	}
</style>