¶Ô±ÈÐÂÎļþ |
| | |
| | | <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> |