学员端小程序
You can not select more than 25 topics Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.

220 lines
5.8 KiB

1 year ago
  1. <template>
  2. <u-overlay
  3. :show="!isConnected"
  4. :zIndex="zIndex"
  5. @touchmove.stop.prevent="noop"
  6. :customStyle="{
  7. backgroundColor: '#fff',
  8. display: 'flex',
  9. justifyContent: 'center',
  10. }"
  11. >
  12. <view
  13. class="u-no-network"
  14. >
  15. <u-icon
  16. :name="image"
  17. size="150"
  18. imgMode="widthFit"
  19. class="u-no-network__error-icon"
  20. ></u-icon>
  21. <text class="u-no-network__tips">{{tips}}</text>
  22. <!-- 只有APP平台才能跳转设置页因为需要调用plus环境 -->
  23. <!-- #ifdef APP-PLUS -->
  24. <view class="u-no-network__app">
  25. <text class="u-no-network__app__setting">请检查网络或前往</text>
  26. <text
  27. class="u-no-network__app__to-setting"
  28. @tap="openSettings"
  29. >设置</text>
  30. </view>
  31. <!-- #endif -->
  32. <view class="u-no-network__retry">
  33. <u-button
  34. size="mini"
  35. text="重试"
  36. type="primary"
  37. plain
  38. @click="retry"
  39. ></u-button>
  40. </view>
  41. </view>
  42. </u-overlay>
  43. </template>
  44. <script>
  45. import props from './props.js';
  46. /**
  47. * noNetwork 无网络提示
  48. * @description 该组件无需任何配置引入即可内部自动处理所有功能和事件
  49. * @tutorial https://www.uviewui.com/components/noNetwork.html
  50. * @property {String} tips 没有网络时的提示语 默认'哎呀,网络信号丢失'
  51. * @property {String | Number} zIndex 组件的z-index值
  52. * @property {String} image 无网络的图片提示可用的src地址或base64图片
  53. * @event {Function} retry 用户点击页面的"重试"按钮时触发
  54. * @example <u-no-network></u-no-network>
  55. */
  56. export default {
  57. name: "u-no-network",
  58. mixins: [uni.$u.mpMixin, uni.$u.mixin,props],
  59. data() {
  60. return {
  61. isConnected: true, // 是否有网络连接
  62. networkType: "none", // 网络类型
  63. }
  64. },
  65. mounted() {
  66. this.isIOS = (uni.getSystemInfoSync().platform === 'ios')
  67. uni.onNetworkStatusChange((res) => {
  68. this.isConnected = res.isConnected
  69. this.networkType = res.networkType
  70. this.emitEvent(this.networkType)
  71. })
  72. uni.getNetworkType({
  73. success: (res) => {
  74. this.networkType = res.networkType
  75. this.emitEvent(this.networkType)
  76. if (res.networkType == 'none') {
  77. this.isConnected = false
  78. } else {
  79. this.isConnected = true
  80. }
  81. }
  82. })
  83. },
  84. methods: {
  85. retry() {
  86. // 重新检查网络
  87. uni.getNetworkType({
  88. success: (res) => {
  89. this.networkType = res.networkType
  90. this.emitEvent(this.networkType)
  91. if (res.networkType == 'none') {
  92. uni.$u.toast('无网络连接')
  93. this.isConnected = false
  94. } else {
  95. uni.$u.toast('网络已连接')
  96. this.isConnected = true
  97. }
  98. }
  99. })
  100. this.$emit('retry')
  101. },
  102. // 发出事件给父组件
  103. emitEvent(networkType) {
  104. this.$emit(networkType === 'none' ? 'disconnected' : 'connected')
  105. },
  106. async openSettings() {
  107. if (this.networkType == "none") {
  108. this.openSystemSettings()
  109. return
  110. }
  111. },
  112. openAppSettings() {
  113. this.gotoAppSetting()
  114. },
  115. openSystemSettings() {
  116. // 以下方法来自5+范畴,如需深究,请自行查阅相关文档
  117. // https://ask.dcloud.net.cn/docs/
  118. if (this.isIOS) {
  119. this.gotoiOSSetting()
  120. } else {
  121. this.gotoAndroidSetting()
  122. }
  123. },
  124. network() {
  125. var result = null
  126. var cellularData = plus.ios.newObject("CTCellularData")
  127. var state = cellularData.plusGetAttribute("restrictedState")
  128. if (state == 0) {
  129. result = null
  130. } else if (state == 2) {
  131. result = 1
  132. } else if (state == 1) {
  133. result = 2
  134. }
  135. plus.ios.deleteObject(cellularData)
  136. return result
  137. },
  138. gotoAppSetting() {
  139. if (this.isIOS) {
  140. var UIApplication = plus.ios.import("UIApplication")
  141. var application2 = UIApplication.sharedApplication()
  142. var NSURL2 = plus.ios.import("NSURL")
  143. var setting2 = NSURL2.URLWithString("app-settings:")
  144. application2.openURL(setting2)
  145. plus.ios.deleteObject(setting2)
  146. plus.ios.deleteObject(NSURL2)
  147. plus.ios.deleteObject(application2)
  148. } else {
  149. var Intent = plus.android.importClass("android.content.Intent")
  150. var Settings = plus.android.importClass("android.provider.Settings")
  151. var Uri = plus.android.importClass("android.net.Uri")
  152. var mainActivity = plus.android.runtimeMainActivity()
  153. var intent = new Intent()
  154. intent.setAction(Settings.ACTION_APPLICATION_DETAILS_SETTINGS)
  155. var uri = Uri.fromParts("package", mainActivity.getPackageName(), null)
  156. intent.setData(uri)
  157. mainActivity.startActivity(intent)
  158. }
  159. },
  160. gotoiOSSetting() {
  161. var UIApplication = plus.ios.import("UIApplication")
  162. var application2 = UIApplication.sharedApplication()
  163. var NSURL2 = plus.ios.import("NSURL")
  164. var setting2 = NSURL2.URLWithString("App-prefs:root=General")
  165. application2.openURL(setting2)
  166. plus.ios.deleteObject(setting2)
  167. plus.ios.deleteObject(NSURL2)
  168. plus.ios.deleteObject(application2)
  169. },
  170. gotoAndroidSetting() {
  171. var Intent = plus.android.importClass("android.content.Intent")
  172. var Settings = plus.android.importClass("android.provider.Settings")
  173. var mainActivity = plus.android.runtimeMainActivity()
  174. var intent = new Intent(Settings.ACTION_SETTINGS)
  175. mainActivity.startActivity(intent)
  176. }
  177. }
  178. }
  179. </script>
  180. <style lang="scss" scoped>
  181. @import "../../libs/css/components.scss";
  182. .u-no-network {
  183. @include flex(column);
  184. justify-content: center;
  185. align-items: center;
  186. margin-top: -100px;
  187. &__tips {
  188. color: $u-tips-color;
  189. font-size: 14px;
  190. margin-top: 15px;
  191. }
  192. &__app {
  193. @include flex(row);
  194. margin-top: 6px;
  195. &__setting {
  196. color: $u-light-color;
  197. font-size: 13px;
  198. }
  199. &__to-setting {
  200. font-size: 13px;
  201. color: $u-primary;
  202. margin-left: 3px;
  203. }
  204. }
  205. &__retry {
  206. @include flex(row);
  207. justify-content: center;
  208. margin-top: 15px;
  209. }
  210. }
  211. </style>