220 lines
5.8 KiB
Vue
220 lines
5.8 KiB
Vue
<template>
|
||
<u-overlay
|
||
:show="!isConnected"
|
||
@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>
|