New file |
| | |
| | | <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> |