qa-regulatory-gwj-app/uni_modules/uview-ui/components/u-no-network/u-no-network.vue

221 lines
5.8 KiB
Vue
Raw Permalink Normal View History

2023-11-07 10:08:37 +08:00
<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>