u-no-network.vue
5.82 KB
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
<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>